/* Static gradients are painted once; only opacity and transforms animate. */
.hero-effect {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  filter: none;
  background:
    radial-gradient(ellipse at 100% 55%, #62447752 0%, transparent 48%),
    radial-gradient(ellipse at 0% 75%, #493c6852 0%, transparent 48%),
    linear-gradient(180deg, #060b1300 0%, #0c172a66 100%);
}
.hero-light-column {
  position: absolute;
  top: -12%;
  bottom: -8%;
  left: 18%;
  width: 64%;
  background: radial-gradient(ellipse at 50% 70%, #7199e261 0%, #446ca84d 26%, #29487929 49%, transparent 74%);
  opacity: .8;
  animation: hero-glow 10s ease-in-out infinite alternate;
}
.hero-light-core {
  position: absolute;
  inset-block: -10% 0;
  left: calc(50% - 70px);
  width: 140px;
  background: linear-gradient(90deg, transparent, #6689c512 25%, #8eafeb4d 46%, #c3d8ff9c 50%, #8eafeb4d 54%, #6689c512 75%, transparent);
  opacity: .65;
  animation: hero-shimmer 8s ease-in-out -3s infinite alternate;
}
.hero-light-floor {
  position: absolute;
  bottom: -205px;
  left: -15%;
  width: 130%;
  height: 420px;
  background: radial-gradient(ellipse at center, #d6e5ffa3 0%, #92b5ec73 8%, #527fb552 28%, #29457426 47%, transparent 69%);
  opacity: .85;
  animation: hero-floor 9s ease-in-out -4s infinite alternate;
}
.hero-light-drift {
  position: absolute;
  top: -30%;
  left: calc(50% - 34px);
  width: 68px;
  height: 65%;
  background:
    linear-gradient(transparent, #c6dcff73, transparent) 15px 0 / 1px 36% no-repeat,
    linear-gradient(transparent, #91baff5c, transparent) 48px 80% / 1px 24% no-repeat,
    linear-gradient(transparent, #a4c4ff4d, transparent) 33px 45% / 2px 48% no-repeat;
  animation: hero-drift 10s linear -5s infinite;
}
.hero-light-aura {
  position: absolute;
  left: -15%;
  top: -10%;
  width: 130%;
  height: 120%;
  background:
    radial-gradient(ellipse at 32% 77%, #527aac59 0%, transparent 58%),
    radial-gradient(ellipse at 73% 54%, #556dac4d 0%, transparent 55%),
    radial-gradient(ellipse at 55% 100%, #668eaf47 0%, transparent 52%);
  transform-origin: 50% 95%;
  animation: hero-aura 16s ease-in-out -6s infinite alternate;
}
.hero-light-particles {
  position: absolute;
  width: 520px;
  height: 620px;
  left: calc(50% - 260px);
  bottom: -170px;
  background:
    radial-gradient(circle at 48% 8%, #d8e8ff99 0 1px, transparent 1.8px),
    radial-gradient(circle at 57% 17%, #a5c4ee66 0 .7px, transparent 1.8px),
    radial-gradient(circle at 42% 29%, #c7dcf599 0 .7px, transparent 1.8px),
    radial-gradient(circle at 63% 34%, #a5c4ee80 0 1px, transparent 1.8px),
    radial-gradient(circle at 36% 41%, #d8e8ff99 0 .7px, transparent 1.8px),
    radial-gradient(circle at 51% 46%, #a5c4ee66 0 .7px, transparent 1.8px),
    radial-gradient(circle at 72% 54%, #c7dcf599 0 1px, transparent 1.8px),
    radial-gradient(circle at 28% 58%, #a5c4ee80 0 .7px, transparent 1.8px),
    radial-gradient(circle at 60% 65%, #d8e8ff99 0 .7px, transparent 1.8px),
    radial-gradient(circle at 43% 73%, #a5c4ee66 0 1px, transparent 1.8px),
    radial-gradient(circle at 80% 81%, #c7dcf599 0 .7px, transparent 1.8px),
    radial-gradient(circle at 20% 89%, #a5c4ee80 0 .7px, transparent 1.8px),
    radial-gradient(circle at 31% 12%, #d8e8ff99 0 1px, transparent 1.8px),
    radial-gradient(circle at 68% 6%, #a5c4ee66 0 .7px, transparent 1.8px),
    radial-gradient(circle at 18% 23%, #c7dcf599 0 .7px, transparent 1.8px),
    radial-gradient(circle at 82% 28%, #a5c4ee80 0 1px, transparent 1.8px),
    radial-gradient(circle at 54% 25%, #d8e8ff99 0 .7px, transparent 1.8px),
    radial-gradient(circle at 45% 19%, #a5c4ee66 0 .7px, transparent 1.8px),
    radial-gradient(circle at 24% 37%, #c7dcf599 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 43%, #a5c4ee80 0 .7px, transparent 1.8px),
    radial-gradient(circle at 10% 51%, #d8e8ff99 0 .7px, transparent 1.8px),
    radial-gradient(circle at 90% 61%, #a5c4ee66 0 1px, transparent 1.8px),
    radial-gradient(circle at 39% 55%, #c7dcf599 0 .7px, transparent 1.8px),
    radial-gradient(circle at 58% 52%, #a5c4ee80 0 .7px, transparent 1.8px),
    radial-gradient(circle at 47% 61%, #d8e8ff99 0 1px, transparent 1.8px),
    radial-gradient(circle at 66% 75%, #a5c4ee66 0 .7px, transparent 1.8px),
    radial-gradient(circle at 31% 78%, #c7dcf599 0 .7px, transparent 1.8px),
    radial-gradient(circle at 14% 71%, #a5c4ee80 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 91%, #d8e8ff99 0 .7px, transparent 1.8px),
    radial-gradient(circle at 52% 86%, #a5c4ee66 0 .7px, transparent 1.8px),
    radial-gradient(circle at 38% 95%, #c7dcf599 0 1px, transparent 1.8px),
    radial-gradient(circle at 70% 94%, #a5c4ee80 0 .7px, transparent 1.8px),
    radial-gradient(circle at 61% 12%, #d8e8ff99 0 .7px, transparent 1.8px),
    radial-gradient(circle at 33% 32%, #a5c4ee66 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 20%, #c7dcf599 0 .7px, transparent 1.8px),
    radial-gradient(circle at 22% 64%, #a5c4ee80 0 .7px, transparent 1.8px);
  animation: hero-particles 18s linear -6s infinite;
}
.hero-light-particles-far {
  left: calc(50% - 320px);
  width: 640px;
  height: 560px;
  animation-duration: 24s;
  animation-delay: -18s;
}
@keyframes hero-aura {
  from { opacity: .65; transform: translateX(-2%) scale(.98); }
  to { opacity: .95; transform: translateX(2%) scale(1.04); }
}
@keyframes hero-floor {
  from { opacity: .6; transform: scaleX(.92); }
  to { opacity: .95; transform: scaleX(1.08); }
}
@keyframes hero-particles {
  0% { opacity: 0; transform: translateY(40px); }
  20%, 75% { opacity: .65; }
  100% { opacity: 0; transform: translateY(-220px); }
}
@keyframes hero-glow {
  from { opacity: .55; transform: scaleX(.92); }
  to { opacity: .9; transform: scaleX(1.08); }
}
@keyframes hero-shimmer {
  from { opacity: .25; }
  to { opacity: .48; }
}
@keyframes hero-drift {
  0% { opacity: 0; transform: translateY(0); }
  20%, 75% { opacity: .7; }
  100% { opacity: 0; transform: translateY(180%); }
}
.hero-effect[data-playback='paused'] > div { animation-play-state: paused; }
@media (max-width: 600px) {
  .hero-light-aura { width: 150%; left: -25%; }
  .hero-light-column { width: 100%; left: 0; }
  .hero-light-core { width: 64px; left: calc(50% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-effect > div { animation: none !important; }
  .hero-light-drift, .hero-light-particles { display: none; }
}