/* ── Animations ──────────────────────────────────────────────── */

/* Slide-in from below on scroll */
.slide-in {
   opacity: 0;
   transform: translateY(24px);
   transition:
      opacity var(--duration-slow) var(--ease),
      transform var(--duration-slow) var(--ease);
}

.slide-in.visible {
   opacity: 1;
   transform: translateY(0);
}

/* Stagger delays */
.slide-in:nth-child(2) {
   transition-delay: 60ms;
}

.slide-in:nth-child(3) {
   transition-delay: 120ms;
}

.slide-in:nth-child(4) {
   transition-delay: 180ms;
}

.slide-in:nth-child(5) {
   transition-delay: 240ms;
}

/* Hero entrance — sekvens: overlay → headline → lead+knappar */

.hero::before {
   opacity: 0;
   animation: heroOverlay 900ms 150ms var(--ease) forwards;
}

@keyframes heroOverlay {
   to { opacity: 1; }
}

.hero-enter {
   opacity: 0;
}

.hero-enter--delay {
   filter: blur(14px);
   animation: heroFocus 900ms 150ms var(--ease) forwards;
}

@keyframes heroFocus {
   to {
      opacity: 1;
      filter: blur(0);
   }
}

.hero-enter--late {
   transform: translateY(-20px);
   animation: heroDrop 550ms 1000ms var(--ease) forwards;
}

@keyframes heroDrop {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Fade in */
@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

.fade-in {
   animation: fadeIn var(--duration-slow) var(--ease) forwards;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
   .slide-in {
      opacity: 1;
      transform: none;
      transition: none;
   }

   .hero::before {
      opacity: 1;
      animation: none;
   }

   .hero-enter,
   .hero-enter--delay,
   .hero-enter--late {
      opacity: 1;
      filter: none;
      transform: none;
      animation: none;
   }
}