/* Hero glow effects (patient portal, Metapsy Lab): two soft glows that drift
   slowly, plus a light that follows the cursor (js/hero-glow.js).

   Markup, as the hero's first child:
     <div class="hero-fx" aria-hidden="true">
       <span class="hero-fx__glow hero-fx__glow--1"></span>
       <span class="hero-fx__glow hero-fx__glow--2"></span>
       <span class="hero-fx__cursor"></span>
     </div>

   Performance: every glow is its own pre-drawn layer that only ever moves
   (transform) or fades (opacity), so the GPU compositor animates it without
   repainting anything or involving the main thread. Each layer is sized to
   the visible part of its gradient to keep GPU memory low. */

.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* drift distances below are relative to the hero (cqw / cqh) */
  container-type: size;
}

.hero-fx > span {
  position: absolute;
  will-change: transform;
}

/* Glow sizes: full size on wide screens; on phones they shrink with the
   screen (still >2x its width, so the same soft look) to keep the GPU
   textures small on high-density displays. */

/* Top right: teal (was radial-gradient(1200px 600px at 85% -10%, …, transparent 60%)) */
.hero-fx__glow--1 {
  --w: min(1440px, 220vw);
  --h: calc(var(--w) / 2);
  left: 85%;
  top: -10%;
  width: var(--w);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  background: radial-gradient(closest-side, rgba(94, 186, 189, 0.18), transparent);
  animation: hero-fx-drift-1 12s ease-in-out infinite alternate;
}

/* Bottom left: blue (was radial-gradient(900px 500px at 10% 110%, …, transparent 55%)) */
.hero-fx__glow--2 {
  --w: min(990px, 150vw);
  --h: calc(var(--w) * 0.5556);
  left: 10%;
  top: 110%;
  width: var(--w);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  background: radial-gradient(closest-side, rgba(3, 114, 183, 0.22), transparent);
  animation: hero-fx-drift-2 15s ease-in-out infinite alternate;
}

@keyframes hero-fx-drift-1 {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(-23cqw, 24cqh); }
  70%  { transform: translate(9cqw, 32cqh); }
  100% { transform: translate(-13cqw, 10cqh); }
}

@keyframes hero-fx-drift-2 {
  0%   { transform: translate(0, 0); }
  40%  { transform: translate(22cqw, -24cqh); }
  75%  { transform: translate(-6cqw, -32cqh); }
  100% { transform: translate(12cqw, -10cqh); }
}

/* Cursor light (was a circle 420px gradient, transparent at 70%); js moves it
   with transform, the transition makes it trail the pointer smoothly */
.hero-fx__cursor {
  left: 0;
  top: 0;
  width: 588px;
  height: 588px;
  margin: -294px 0 0 -294px;
  background: radial-gradient(closest-side, rgba(94, 186, 189, 0.08), transparent);
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-fx__cursor.is-on {
  opacity: 1;
}

/* touch screens never show the cursor light: drop its GPU layer entirely */
@media not ((hover: hover) and (pointer: fine)) {
  .hero-fx__cursor {
    display: none;
  }
}

/* off screen: stop the drift */
.hero-fx.is-paused .hero-fx__glow {
  animation-play-state: paused;
}

/* dark theme: the glows sit on the page background, a little fainter */
html[data-theme="dark"] .hero-fx__glow--1 {
  background: radial-gradient(closest-side, rgba(94, 186, 189, 0.12), transparent);
}

html[data-theme="dark"] .hero-fx__glow--2 {
  background: radial-gradient(closest-side, rgba(3, 114, 183, 0.16), transparent);
}

html[data-theme="dark"] .hero-fx__cursor.is-on {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .hero-fx__glow {
    animation: none;
  }

  .hero-fx__cursor {
    transition: opacity 0.6s ease;
  }
}