/* ==========================================================================
   LISN — Animation
   ========================================================================== */

/* Scroll reveal base states (JS toggles .is-in-view) */
.reveal-up {
  opacity: 0;
  will-change: opacity, transform;
  transform: translateY(28px);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
}
.reveal-up.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  will-change: opacity, transform;
  transform: scale(.9);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
}
.reveal-scale.is-in-view {
  opacity: 1;
  transform: scale(1);
}

.delay-1 { transition-delay: .22s; }
.delay-2 { transition-delay: .44s; }
.delay-3 { transition-delay: .66s; }

/* Hero entrance (plays on load, not scroll-triggered) */
.hero__headline,
.hero__subtitle,
.hero__scroll {
  opacity: 0;
}
.hero__headline { transform: translateY(24px); }
.hero__subtitle { transform: translateY(24px); }
.hero__scroll { transform: translateX(-50%) scale(.92); }

.hero.is-loaded .hero__headline,
.hero.is-loaded .hero__subtitle {
  animation: heroFadeUp 1.35s var(--ease) forwards;
}
.hero.is-loaded .hero__headline { animation-delay: .22s; }
.hero.is-loaded .hero__subtitle { animation-delay: .48s; }
.hero.is-loaded .hero__scroll {
  animation: heroScaleFade 1.3s var(--ease) forwards;
  animation-delay: .82s;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroScaleFade {
  from { opacity: 0; transform: translateX(-50%) scale(.92); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes scrollDot {
  0%   { transform: translateY(0);   opacity: 1; }
  60%  { transform: translateY(14px); opacity: 0; }
  61%  { transform: translateY(0);   opacity: 0; }
  100% { transform: translateY(0);   opacity: 1; }
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

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

/* Trust process sequential reveal */
.process__step {
  opacity: 0;
  will-change: opacity, transform;
  transform: translateY(20px) scale(.96);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease),
              border-color .75s var(--ease), box-shadow .75s var(--ease);
}
.process__step.is-in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.process__connector {
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.process__connector.is-in-view { opacity: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-up, .reveal-scale { opacity: 1 !important; transform: none !important; }
}