/* ==========================================================================
   King Style — Animation
   Scroll-reveal, hero entrance, micro-interactions.
   Every rule here respects prefers-reduced-motion (see base.css global override
   plus the explicit fallback below for elements that start hidden).
   ========================================================================== */

/* ---- Scroll reveal (IntersectionObserver toggles .is-visible) ---- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

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

/* Stagger helper: applied via inline transition-delay in markup/JS for
   groups of 30–80ms increments. */
.reveal-group > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

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

.reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: 300ms; }
.reveal-group.is-visible > *:nth-child(7) { transition-delay: 360ms; }
.reveal-group.is-visible > *:nth-child(8) { transition-delay: 420ms; }

/* ---- Hero entrance (plays once on load, not scroll-triggered) ---- */

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

.hero__content > * {
  animation: hero-rise var(--duration-slow) var(--ease-out) both;
}

.hero__content > *:nth-child(1) { animation-delay: 60ms; }
.hero__content > *:nth-child(2) { animation-delay: 120ms; }
.hero__content > *:nth-child(3) { animation-delay: 180ms; }
.hero__content > *:nth-child(4) { animation-delay: 240ms; }
.hero__content > *:nth-child(5) { animation-delay: 300ms; }

@keyframes media-settle {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero__media img {
  animation: media-settle 900ms var(--ease-out) both;
}

/* ---- Reduced motion: neutralize entrance + reveal transforms ---- */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-group > *,
  .hero__content > *,
  .hero__media img {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}