/* ── Fade in base ── */
.animate-fade-in {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeInUp var(--duration-slow) var(--ease-out) forwards;
}

.delay-1 { animation-delay: 200ms; }
.delay-2 { animation-delay: 450ms; }
.delay-3 { animation-delay: 700ms; }
.delay-4 { animation-delay: 1000ms; }

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

/* ── Scroll-triggered ── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Blur reveal ── */
.blurred {
  filter: blur(20px);
  transition: filter var(--duration-cinematic) var(--ease-smooth);
}

.blurred.revealed {
  filter: blur(0);
}

/* ── Scroll line hero ── */
@keyframes scrollLineAnim {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── Fade crossfade (slides) ── */
@keyframes slideBlurIn {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

.slide-enter {
  animation: slideBlurIn var(--duration-slow) var(--ease-out) forwards;
}

/* ── Swipe hint pulse ── */
@keyframes swipeHintPulse {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50%       { opacity: 1;   transform: translateY(-4px); }
}

.swipe-hint {
  animation: swipeHintPulse 2s ease-in-out infinite;
}

/* ── Digit flip countdown ── */
@keyframes digitFlip {
  0%   { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}

.digit-flip {
  animation: digitFlip 300ms var(--ease-out) forwards;
}