.reveal-ready {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity;
}

body {
  opacity: 1;
  transition: opacity 0.2s ease;
}

body.is-page-transitioning {
  opacity: 0;
}

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

.hero-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  animation: heroRise 0.65s ease forwards;
}

.hero-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.hero-stagger > *:nth-child(2) { animation-delay: 0.12s; }
.hero-stagger > *:nth-child(3) { animation-delay: 0.2s; }
.hero-stagger > *:nth-child(4) { animation-delay: 0.28s; }
.hero-stagger > *:nth-child(5) { animation-delay: 0.36s; }
.hero-stagger > *:nth-child(6) { animation-delay: 0.44s; }
.hero-stagger > *:nth-child(7) { animation-delay: 0.52s; }
.hero-stagger > *:nth-child(8) { animation-delay: 0.6s; }

.hover-lift {
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.hover-lift:hover,
.hover-lift:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px rgba(4, 12, 26, 0.24);
  border-color: rgba(23, 182, 201, 0.2);
}

.hero-countdown-shell {
  animation: countdownFadeIn 0.65s ease 0.18s both, countdownPulse 4s ease-in-out infinite;
}

.flip-card__value.is-updating {
  animation: splitValueTick 0.44s ease;
}

@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

@keyframes heroBackgroundZoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }
}

@keyframes countdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes countdownPulse {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 18px 42px rgba(4, 12, 26, 0.22);
  }

  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 22px 48px rgba(240, 138, 85, 0.18);
  }
}

@keyframes splitValueTick {
  0% {
    opacity: 0.35;
    transform: translateY(8px) scale(0.97);
  }

  55% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal-ready,
  .hero-stagger > *,
  .hero-countdown-shell,
  .flip-card__value.is-updating {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}