/* ============================================================
   ANIMATIONS.CSS
   Keyframes · Hero Entrance · Scroll Reveals · Reduced Motion
   Brooklyn Beauty Lens
   ============================================================ */

/* ── KEYFRAMES ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes badgeSlide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── HERO ENTRANCE ── */
.hero-eyebrow { animation: fadeUp 0.6s 0.10s ease both; }
.hero-headline { animation: fadeUp 0.6s 0.25s ease both; }
.hero-sub      { animation: fadeUp 0.6s 0.38s ease both; }
.hero-actions  { animation: fadeUp 0.6s 0.50s ease both; }
.hero-badge    { animation: badgeSlide 0.6s 0.65s ease both; }
.hero-right    { animation: fadeIn 0.8s 0.2s ease both; }

/* ── SCROLL-TRIGGERED REVEALS ── */
/*
   Add class="reveal" to any element.
   A small JS snippet in index.html watches for
   IntersectionObserver and adds .is-visible.
*/
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── NAV SCROLL STATE ── */
/* JS adds .scrolled to <nav> on scroll */
nav.scrolled {
  box-shadow: 0 4px 24px rgba(30, 26, 24, 0.10);
  background: rgba(250, 245, 238, 0.97);
}

/* ── VALUE STRIP HOVER ── */
.value-item {
  transition: background 0.2s;
}

.value-item:hover {
  background: var(--deep-rust);
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}