/* ==========================================================================
   ANIMATIONS: Keyframes, Reveal Classes, Navigation Transitions, Reduced Motion
   ========================================================================== */

@keyframes splashLogoIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes splashTextIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroWordReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sectionNavTransition {
  from {
    opacity: 0.92;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes drawCheck {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes heroArrowFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

@keyframes topArrowLaunch {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-6px) scale(1.08);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes tapPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.14) translateY(-2px);
  }
  100% {
    transform: scale(1);
  }
}

/* Hero Staggered Entrance */
.hero__kicker {
  animation: heroFadeRise 480ms 40ms var(--ease-out) both;
}

.hero__subtitle {
  animation: heroFadeRise 520ms 180ms var(--ease-out) both;
}

.hero__actions {
  animation: heroFadeRise 520ms 260ms var(--ease-out) both;
}

.hero-desk {
  animation: heroFadeRise 560ms 220ms var(--ease-out) both;
}

.hero__scroll {
  animation: heroFadeRise 520ms 340ms var(--ease-out) both;
}

/* Smooth Section Navigation Transition */
.section.is-nav-target > .container,
.hero.is-nav-target > .container {
  animation: sectionNavTransition 560ms var(--ease-out) both;
}

/* Active Nav Link State */
.site-nav__link.is-active {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.site-nav__link.is-active::after {
  transform: scaleX(1);
}

/* Language Switch Transition */
#main-content {
  transition: opacity 180ms ease;
}

#main-content.is-lang-switching {
  opacity: 0.35;
}

/* Scroll Reveal Targets */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * var(--stagger-step));
}

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

/* Reduced Motion Compliance */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .splash {
    display: none !important;
  }

  .hero__word,
  .hero__kicker,
  .hero__subtitle,
  .hero__actions,
  .hero-desk,
  .hero__scroll,
  .reveal {
    opacity: 1;
    transform: none;
  }

  .step-card {
    opacity: 1;
    border-color: var(--color-border-strong);
  }

  .step-card .step-card__num {
    background-color: var(--color-navy);
    color: var(--color-accent-contrast);
    border-color: transparent;
  }
}