/* ==========================================================================
   animations.css
   Every @keyframes definition and every rule that assigns an
   `animation:` lives in this file — hero load-in, scroll reveal, and
   the dropdown / mobile-menu stagger-ins. Ordinary hover/focus
   micro-interactions are plain CSS transitions and stay in their own
   component file instead, since they aren't autonomous animations.
   ========================================================================== */

/* ---- Hero entrance ---- */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(1.125rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .eyebrow,
.hero h1,
.hero p,
.hero-actions {
  opacity: 0;
  animation: hero-rise 0.7s var(--ease-emphasized) forwards;
}

.hero .eyebrow {
  animation-delay: 0.05s;
}
.hero h1 {
  animation-delay: 0.16s;
}
.hero p {
  animation-delay: 0.27s;
}
.hero-actions {
  animation-delay: 0.38s;
}

/* ---- Scroll reveal ----
   animations.js observes every `.reveal` element with an
   IntersectionObserver and adds `.visible` once it enters the
   viewport; this transition performs the actual fade/rise. */
.reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity var(--duration-slow) var(--ease-emphasized),
    transform var(--duration-slow) var(--ease-emphasized);
}

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

/* ---- Dropdown menu item stagger-in (Discover + user account) ---- */
@keyframes dropdown-item-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-discover.open .dropdown-item,
.user-menu.open .dropdown-item {
  animation: dropdown-item-in 0.38s var(--ease-emphasized) forwards;
}

.nav-discover.open .dropdown-item:nth-child(1),
.user-menu.open .dropdown-item:nth-child(1) {
  animation-delay: 0.05s;
}
.nav-discover.open .dropdown-item:nth-child(2),
.user-menu.open .dropdown-item:nth-child(2) {
  animation-delay: 0.1s;
}
.nav-discover.open .dropdown-item:nth-child(3),
.user-menu.open .dropdown-item:nth-child(3) {
  animation-delay: 0.15s;
}
.nav-discover.open .dropdown-item:nth-child(4),
.user-menu.open .dropdown-item:nth-child(4) {
  animation-delay: 0.19s;
}

/* ---- Mobile accordion menu item stagger-in ----
   Meaningful while .nav-links renders as the collapsible accordion
   (the mobile-first default). Harmless once the desktop tier switches
   nav-links-inner to `display: contents` (responsive.css), since the
   horizontal bar never toggles `.open` in normal use. */
@keyframes nav-item-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-links-inner > * {
  opacity: 0;
  transform: translateY(-0.375rem);
}

.nav-links.open .nav-links-inner > * {
  animation: nav-item-in 0.36s var(--ease-emphasized) forwards;
}

.nav-links.open .nav-links-inner > *:nth-child(1) {
  animation-delay: 0.03s;
}
.nav-links.open .nav-links-inner > *:nth-child(2) {
  animation-delay: 0.07s;
}
.nav-links.open .nav-links-inner > *:nth-child(3) {
  animation-delay: 0.11s;
}
.nav-links.open .nav-links-inner > *:nth-child(4) {
  animation-delay: 0.15s;
}
.nav-links.open .nav-links-inner > *:nth-child(5) {
  animation-delay: 0.19s;
}
.nav-links.open .nav-links-inner > *:nth-child(6) {
  animation-delay: 0.23s;
}