.hero {
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 70% at 72% 44%, rgba(168, 216, 230, 0.12), transparent 62%),
    linear-gradient(90deg, rgba(8, 13, 18, 0.2), transparent 48%),
    linear-gradient(180deg, rgba(8, 13, 18, 0.72) 0%, transparent 24%, rgba(8, 13, 18, 0.9) 100%);
  opacity: 0;
  animation: heroVeilIn 1600ms ease-out 120ms forwards;
}

.hero-media {
  opacity: 0;
  transform: scale(1.06);
  filter: saturate(0.82) brightness(0.72);
  animation: heroImageReveal 1800ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms forwards;
}

.hero-fade {
  opacity: 0;
  animation: heroFadeReveal 1400ms ease-out 260ms forwards;
}

.site-header {
  opacity: 0;
  transform: translateY(-10px);
  animation: headerReveal 850ms ease-out 340ms forwards;
}

.hero-shell .eyebrow,
.hero-shell h1,
.hero-shell .hero-line,
.hero-shell .hero-copy,
.hero-shell .hero-actions,
.hero-shell .hero-proof {
  opacity: 0;
  transform: translateY(18px);
  animation: heroTextReveal 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero-shell .eyebrow { animation-delay: 520ms; }
.hero-shell h1 { animation-delay: 640ms; }
.hero-shell .hero-line { animation-delay: 760ms; }
.hero-shell .hero-copy { animation-delay: 880ms; }
.hero-shell .hero-actions { animation-delay: 1000ms; }
.hero-shell .hero-proof { animation-delay: 1120ms; }

@keyframes heroImageReveal {
  0% {
    opacity: 0;
    transform: scale(1.06);
    filter: saturate(0.82) brightness(0.58) blur(8px);
  }

  55% {
    opacity: 1;
    filter: saturate(0.95) brightness(0.74) blur(0);
  }

  100% {
    opacity: 1;
    transform: scale(1.01);
    filter: saturate(1) brightness(0.78) blur(0);
  }
}

@keyframes heroVeilIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes heroFadeReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

@keyframes headerReveal {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .hero-media,
  .hero-fade,
  .site-header,
  .hero-shell .eyebrow,
  .hero-shell h1,
  .hero-shell .hero-line,
  .hero-shell .hero-copy,
  .hero-shell .hero-actions,
  .hero-shell .hero-proof {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}