:root{
  --hero-parallax-x: 0px;
  --hero-parallax-y: 0px;
}

.bg{
  transform: translate3d(var(--hero-parallax-x), var(--hero-parallax-y), 0) scale(1.035);
  transform-origin: center center;
  transition: filter .9s ease;
  will-change: transform;
}

.heroAmbient{
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  transform: translate3d(calc(var(--hero-parallax-x) * .55), calc(var(--hero-parallax-y) * .55), 0);
  opacity: 0;
  visibility: hidden;
  transition: opacity .85s ease, visibility 0s linear .85s;
  will-change: transform, opacity;
}

html.hero-bg-ready .heroAmbient{
  opacity: 1;
  visibility: visible;
  transition: opacity .85s ease, visibility 0s linear 0s;
}

.heroAmbient::before,
.heroAmbient::after{
  content:"";
  position:absolute;
  inset:-8%;
  pointer-events:none;
}

.heroAmbient::before{
  background:
    radial-gradient(circle at 46% 47%, rgba(255, 220, 160, .18) 0%, rgba(255, 160, 90, .10) 8%, transparent 22%),
    radial-gradient(circle at 23% 55%, rgba(255, 110, 70, .08) 0%, transparent 28%),
    radial-gradient(circle at 78% 58%, rgba(55, 185, 255, .10) 0%, transparent 30%);
  filter: blur(16px);
  animation: heroAmbientPulse 6.6s ease-in-out infinite;
}

.heroAmbient::after{
  background: linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,.05) 46%, transparent 53% 100%);
  opacity:.45;
  transform: translateX(-24%);
  filter: blur(4px);
  animation: heroAmbientSweep 10s linear infinite;
}

.ambientMist,
.ambientPulse,
.ambientGlow,
.ambientSparkField,
.ambientSpark{
  position:absolute;
  pointer-events:none;
}

.ambientMist,
.ambientPulse{
  border-radius: 999px;
  mix-blend-mode: screen;
}

.ambientMist{
  filter: blur(32px);
  opacity:.46;
}

.ambientMistOrange{
  width: 24vw;
  height: 18vw;
  min-width: 260px;
  min-height: 180px;
  left: 12%;
  top: 50%;
  background: radial-gradient(circle at 35% 45%, rgba(255,145,88,.34), rgba(255,94,58,.08) 45%, transparent 78%);
  animation: heroMistOrange 7.8s ease-in-out infinite;
}

.ambientMistBlue{
  width: 34vw;
  height: 28vw;
  min-width: 360px;
  min-height: 260px;
  right: -4%;
  bottom: 6%;
  background: radial-gradient(circle at 45% 45%, rgba(85,215,255,.18), rgba(35,116,255,.12) 42%, transparent 78%);
  animation: heroMistBlue 7.8s ease-in-out infinite;
}

.ambientPulse{
  filter: blur(23px);
  opacity: .20;
}

.ambientPulseRed{
  width: 37vw;
  height: 29vw;
  min-width: 390px;
  min-height: 275px;
  left: 3%;
  top: 32%;
  background:
    radial-gradient(circle at 32% 48%, rgba(255,126,78,.46) 0%, rgba(255,68,40,.28) 35%, rgba(255,68,40,0) 72%),
    radial-gradient(circle at 60% 50%, rgba(255,174,126,.30) 0%, rgba(255,174,126,0) 43%);
  animation: ambientRedBeat 8s ease-in-out infinite;
}

.ambientPulseBlue{
  width: 41vw;
  height: 31vw;
  min-width: 450px;
  min-height: 305px;
  right: -4%;
  top: 28%;
  background:
    radial-gradient(circle at 50% 44%, rgba(88,218,255,.44) 0%, rgba(38,104,255,.27) 37%, rgba(38,104,255,0) 72%),
    radial-gradient(circle at 30% 52%, rgba(174,242,255,.23) 0%, rgba(174,242,255,0) 42%);
  animation: ambientBlueBeat 8s ease-in-out infinite;
}

.ambientGlow{
  border-radius:999px;
  mix-blend-mode:screen;
}

.ambientEyes{
  width: 22px;
  height: 14px;
  left: calc(24.5% + var(--hero-parallax-x) * .12);
  top: calc(39.3% + var(--hero-parallax-y) * .12);
  background: radial-gradient(circle at 50% 50%, rgba(180,255,215,.95) 0%, rgba(78,255,172,.72) 38%, rgba(0,0,0,0) 85%);
  filter: blur(2px) drop-shadow(0 0 14px rgba(70,255,170,.6));
  opacity: .88;
  animation: heroEyesPulse 3.8s ease-in-out infinite;
}

.ambientClash{
  width: 140px;
  height: 140px;
  left: calc(44.4% + var(--hero-parallax-x) * .06);
  top: calc(46.6% + var(--hero-parallax-y) * .08);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255,255,255,.92) 0 6%, rgba(255,220,160,.72) 16%, rgba(255,140,78,.28) 34%, rgba(255,120,66,0) 72%);
  filter: blur(2px) drop-shadow(0 0 26px rgba(255,155,95,.42));
  animation: heroClashPulse 2.6s ease-in-out infinite;
}

.ambientBlade{
  width: 26vw;
  height: 28px;
  min-width: 320px;
  left: 25.5%;
  top: 54.4%;
  transform: rotate(-20deg);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255,110,72,.00) 0%, rgba(255,165,120,.18) 18%, rgba(255,255,255,.58) 36%, rgba(255,175,104,.22) 58%, rgba(255,110,72,.00) 100%);
  filter: blur(3px);
  opacity: .65;
  animation: heroBladeFlash 3.4s ease-in-out infinite;
}

.ambientBlueWave{
  width: 34vw;
  height: 20vw;
  min-width: 420px;
  min-height: 220px;
  right: -2%;
  bottom: 2%;
  background:
    radial-gradient(ellipse at 38% 42%, rgba(117,227,255,.18), rgba(41,127,255,.08) 40%, transparent 70%),
    linear-gradient(130deg, transparent 24%, rgba(117,227,255,.14) 42%, transparent 62%);
  filter: blur(12px);
  transform: rotate(-8deg);
  opacity:.84;
  animation: heroBlueSurge 8s ease-in-out infinite;
}

.ambientSparkField{
  inset:0;
  overflow:hidden;
}

.ambientSpark{
  left: var(--x, 44.4%);
  top: var(--y, 46.6%);
  width: var(--size, 2px);
  height: var(--length, 40px);
  margin-left: calc(var(--size, 2px) * -.5);
  margin-top: calc(var(--length, 40px) * -.2);
  border-radius: 999px;
  opacity:0;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,205,118,.85) 46%, rgba(255,140,65,0));
  box-shadow: 0 0 8px rgba(255,191,94,.45);
  transform-origin: 50% 10%;
  transform: rotate(var(--rot, 0deg)) translate3d(0,0,0) scaleY(.7);
  animation: ambientSparkFly var(--dur, 1.8s) ease-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes heroAmbientPulse{
  0%,100%{ opacity:.78; transform: scale(1); }
  50%{ opacity:.94; transform: scale(1.03); }
}

@keyframes heroAmbientSweep{
  0%{ transform: translateX(-24%) translateY(0); opacity:.12; }
  30%{ opacity:.32; }
  100%{ transform: translateX(24%) translateY(-1%); opacity:.10; }
}

@keyframes heroMistOrange{
  0%, 14%, 100%{ transform: translate3d(0,0,0) scale(1); opacity:.34; }
  20%{ transform: translate3d(18px,-10px,0) scale(1.10); opacity:.60; }
  32%{ transform: translate3d(8px,-4px,0) scale(1.04); opacity:.42; }
  50%, 78%{ transform: translate3d(0,0,0) scale(.98); opacity:.24; }
}

@keyframes heroMistBlue{
  0%, 36%{ transform: translate3d(0,0,0) scale(.98); opacity:.24; }
  50%{ transform: translate3d(-8px,-3px,0) scale(1.02); opacity:.38; }
  62%{ transform: translate3d(-15px,-10px,0) scale(1.08); opacity:.62; }
  76%{ transform: translate3d(-6px,-4px,0) scale(1.03); opacity:.40; }
  100%{ transform: translate3d(0,0,0) scale(1); opacity:.24; }
}

@keyframes ambientRedBeat{
  0%, 9%, 100%{ opacity:.17; transform: translate3d(0,0,0) scale(.98); }
  17%{ opacity:.52; transform: translate3d(12px,-7px,0) scale(1.075); }
  23%{ opacity:.50; transform: translate3d(11px,-6px,0) scale(1.07); }
  30%{ opacity:.31; transform: translate3d(5px,-2px,0) scale(1.025); }
  39%, 80%{ opacity:.14; transform: translate3d(0,0,0) scale(.98); }
}

@keyframes ambientBlueBeat{
  0%, 41%{ opacity:.14; transform: translate3d(0,0,0) scale(.98); }
  57%{ opacity:.31; transform: translate3d(-5px,-3px,0) scale(1.025); }
  64%{ opacity:.52; transform: translate3d(-12px,-7px,0) scale(1.075); }
  70%{ opacity:.50; transform: translate3d(-11px,-6px,0) scale(1.07); }
  78%{ opacity:.31; transform: translate3d(-5px,-2px,0) scale(1.03); }
  89%, 100%{ opacity:.14; transform: translate3d(0,0,0) scale(.98); }
}

@keyframes heroEyesPulse{
  0%,100%{ opacity:.58; transform: scale(1); }
  35%{ opacity:.95; transform: scale(1.08); }
  52%{ opacity:.7; transform: scale(1); }
  65%{ opacity:1; transform: scale(1.14); }
}

@keyframes heroClashPulse{
  0%,100%{ opacity:.34; transform: translate(-50%, -50%) scale(.86); }
  20%{ opacity:.82; transform: translate(-50%, -50%) scale(1.04); }
  45%{ opacity:.48; transform: translate(-50%, -50%) scale(.94); }
  70%{ opacity:.78; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes heroBladeFlash{
  0%,100%{ opacity:.18; filter: blur(4px); }
  45%{ opacity:.34; filter: blur(3px); }
  52%{ opacity:.82; filter: blur(1.4px); }
  60%{ opacity:.28; filter: blur(3px); }
}

@keyframes heroBlueSurge{
  0%, 42%,100%{ opacity:.38; transform: rotate(-8deg) translate3d(0,0,0) scale(1); }
  66%{ opacity:.76; transform: rotate(-8deg) translate3d(-10px,-8px,0) scale(1.05); }
}

@keyframes ambientSparkFly{
  0%{
    opacity:0;
    transform: rotate(var(--rot, 0deg)) translate3d(0, 0, 0) scaleY(.7);
  }
  10%{ opacity:.95; }
  75%{ opacity:.48; }
  100%{
    opacity:0;
    transform: rotate(var(--rot, 0deg)) translate3d(var(--tx, 0px), var(--ty, 0px), 0) scaleY(1);
  }
}

@media (max-width: 1200px){
  .ambientEyes{ left:24.2%; top:39.6%; }
  .ambientBlade{ left:24%; width:32vw; }
  .ambientClash{ left:44.8%; top:47%; }
  .ambientPulseRed{ left:4%; }
  .ambientPulseBlue{ right:-6%; }
}

@media (max-width: 900px){
  .ambientEyes,
  .ambientBlade,
  .ambientClash,
  .ambientBlueWave,
  .ambientMist,
  .ambientPulse{ opacity:.72; }
  .ambientBlueWave{ min-width: 320px; min-height: 180px; }
  .ambientBlade{ min-width: 230px; height:20px; top:56%; }
  .ambientClash{ width:110px; height:110px; }
  .ambientPulseRed,
  .ambientPulseBlue{ min-width: 250px; min-height: 180px; }
}

@media (prefers-reduced-motion: reduce){
  .bg,
  .heroAmbient,
  .heroAmbient::before,
  .heroAmbient::after,
  .ambientMist,
  .ambientPulse,
  .ambientGlow,
  .ambientSpark{
    animation: none !important;
    transition: none !important;
  }
  .ambientSparkField{ display:none; }
  .bg{ transform:none !important; }
  .heroAmbient{ transform:none !important; }
}

/* Keep the lighting, but pause decorative layers when the pointer is at rest. */
.heroAmbient::before,
.heroAmbient::after,
.heroAmbient .ambientMist,
.heroAmbient .ambientPulse,
.heroAmbient .ambientGlow,
.heroAmbient .ambientSpark {
  animation-play-state: paused;
}
.heroAmbient.is-animating::before,
.heroAmbient.is-animating::after,
.heroAmbient.is-animating .ambientMist,
.heroAmbient.is-animating .ambientPulse,
.heroAmbient.is-animating .ambientGlow,
.heroAmbient.is-animating .ambientSpark {
  animation-play-state: running;
}