/* ================================================================
   LIVING SKY — Prismatic Lens ambient background canvas
   Upgraded from Phase 1: orbs are now a vibrant cyan/indigo/teal
   mesh that refracts visibly through the glass hero cards.

   Strategy: a fixed full-viewport element sits permanently at
   z-index below every section. All sections become transparent.
   Orbs are pure CSS — no JS, no GSAP — for zero frame-budget
   cost and zero interference with Lenis/ScrollTrigger.
   The scale(1.04) gives GSAP's x/y parallax shifts a safe buffer
   so they never expose the white page edge.
================================================================ */

/* Sky canvas */
.hs-sky {
  position: fixed;
  inset: 0;
  z-index: var(--hs-z-below);
  background-color: var(--hs-sky-bg);
  overflow: hidden;
  pointer-events: none;
  /* 4% scale buffer: GSAP shifts the sky up to ~15px without edge artifacts */
  transform: scale(1.04);
  /* GPU layer — keeps compositing cheap across the entire scroll */
  will-change: transform;
}

/* Shared wrapper base */
.hs-sky__orb-wrapper {
  position: absolute;
  pointer-events: none;
  /* GSAP will animate this element's transform */
  will-change: transform;
}

/* Shared orb base */
.hs-sky__orb {
  width: 100%;
  height: 100%;
  border-radius: var(--hs-radius-full);
  pointer-events: none;
  /* Soft edge via token — tunable from theme-variables.css */
  filter: blur(var(--hs-sky-orb-blur));
  will-change: transform;
}

/* Orb A — top-right, vivid cyan, primary light source */
.hs-sky__orb-wrapper--a {
  width:  88vw;
  height: 88vw;
  max-width:  1140px;
  max-height: 1140px;
  top:   -20%;
  right: -12%;
}
.hs-sky__orb--a {
  background: radial-gradient(circle at 40% 40%,
    var(--hs-sky-orb-a) 0%,
    transparent 68%);
  animation: hs-sky-drift-a var(--hs-sky-anim-dur-a) ease-in-out infinite alternate;
}

/* Orb B — bottom-left, soft indigo */
.hs-sky__orb-wrapper--b {
  width:  76vw;
  height: 76vw;
  max-width:  980px;
  max-height: 980px;
  bottom: -15%;
  left:   -10%;
}
.hs-sky__orb--b {
  background: radial-gradient(circle at 55% 55%,
    var(--hs-sky-orb-b) 0%,
    transparent 65%);
  animation: hs-sky-drift-b var(--hs-sky-anim-dur-b) ease-in-out infinite alternate;
}

/* Orb C — mid-right, deep medical blue */
.hs-sky__orb-wrapper--c {
  width:  66vw;
  height: 66vw;
  max-width:  860px;
  max-height: 860px;
  top:  30%;
  right: 2%;
}
.hs-sky__orb--c {
  background: radial-gradient(circle at 50% 50%,
    var(--hs-sky-orb-c) 0%,
    transparent 62%);
  animation: hs-sky-drift-c var(--hs-sky-anim-dur-c) ease-in-out infinite alternate;
}

/* Orb D — top-left, soft teal echo */
.hs-sky__orb-wrapper--d {
  width:  58vw;
  height: 58vw;
  max-width:  760px;
  max-height: 760px;
  top:   10%;
  left:  -2%;
}
.hs-sky__orb--d {
  background: radial-gradient(circle at 50% 50%,
    var(--hs-sky-orb-d) 0%,
    transparent 60%);
  animation: hs-sky-drift-d var(--hs-sky-anim-dur-d) ease-in-out infinite alternate;
}

/* Drift keyframes — transform: translate only, GPU-composited, zero paint */

@keyframes hs-sky-drift-a {
  0%   { transform: translate(0,    0);   }
  33%  { transform: translate(-3%,  2%);  }
  66%  { transform: translate(2%,  -3%);  }
  100% { transform: translate(-2%,  4%);  }
}

@keyframes hs-sky-drift-b {
  0%   { transform: translate(0,    0);   }
  40%  { transform: translate(4%,  -2%);  }
  75%  { transform: translate(-3%,  3%);  }
  100% { transform: translate(3%,  -4%);  }
}

@keyframes hs-sky-drift-c {
  0%   { transform: translate(0,    0);   }
  30%  { transform: translate(-4%,  3%);  }
  70%  { transform: translate(3%,  -4%);  }
  100% { transform: translate(-2%,  2%);  }
}

@keyframes hs-sky-drift-d {
  0%   { transform: translate(0,    0);   }
  45%  { transform: translate(3%,   4%);  }
  80%  { transform: translate(-4%, -2%);  }
  100% { transform: translate(2%,   3%);  }
}

/* Reduced motion: freeze orbs, sky stays visible */
@media (prefers-reduced-motion: reduce) {
  .hs-sky__orb {
    animation: none;
  }
}