/* The Circular Bulb — animated home hero (Oct 2026)
   Loads AFTER css/style.css. Replaces the still hero-banner.jpg background with a
   looping muted video plus an animated logo layer. CSP-safe: no inline styles or scripts.
   Colours come from the :root tokens in style.css (brand guide v2.0). */

/* The video takes over from the background image; navy stays as the fallback colour. */
.hero.hero--animated{background:var(--navy);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media video,.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:88% 40%;
}
/* Navy gradient, lighter than the still hero (was 0.90 -> 0.58) so the motion shows
   across the whole frame. The text side keeps a little more cover for legibility. */
.hero.hero--animated::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,rgba(3,35,77,0.76) 0%,rgba(3,35,77,0.70) 30%,rgba(3,35,77,0.24) 100%);
}
/* With less navy behind it the copy needs its own separation from the photo. */
.hero.hero--animated h1,.hero.hero--animated p.hero-note{text-shadow:0 1px 16px rgba(3,35,77,0.6)}

/* ---------- animated logo ---------- */
.hero-logo{
  position:absolute;z-index:2;pointer-events:none;
  right:15%;top:50%;transform:translateY(-50%);   /* clear of the crane at the far right */
  height:clamp(190px,24vw,330px);aspect-ratio:900/1160;
}
.hero-logo svg{width:100%;height:100%;display:block;overflow:visible}
.hl-bulb{fill:none;stroke:var(--azure);stroke-width:28;stroke-linecap:round;stroke-linejoin:round}
.hl-shine{fill:none;stroke:var(--azure);stroke-width:18;stroke-linecap:round;opacity:0.75}
.hl-filament{fill:none;stroke:var(--amber);stroke-width:30;stroke-linecap:round;stroke-linejoin:round}
.hl-trace{
  fill:none;stroke:#FFF4C2;stroke-width:22;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:16 100;stroke-dashoffset:16;opacity:0;
  filter:drop-shadow(0 0 22px #FFE28A) drop-shadow(0 0 60px rgba(232,189,77,0.9));
}
.hl-halo,.hl-rays,.hl-orbit{transform-box:fill-box;transform-origin:center}
.hl-halo{opacity:0}
.hl-rays{opacity:0;filter:blur(26px)}  /* px here are SVG user units (viewBox is 900 wide) */
.hl-rays polygon{fill:#FFF1B8}
.hl-orbit{
  fill:none;stroke:#FFE9A0;stroke-width:9;stroke-linecap:round;
  stroke-dasharray:55 45;stroke-dashoffset:0;opacity:0;
  filter:drop-shadow(0 0 18px #FFD970) drop-shadow(0 0 50px rgba(232,189,77,0.85));
}

/* One 14 s cycle, same beats as the logo film: glow builds, rays burst, light runs
   along the filament, a ring orbits it, back to rest. Every track ends at rest so the
   site's reduced-motion rule (which jumps animations to their end) shows the plain logo. */
.hl-halo{animation:hl-halo 14s ease-in-out infinite}
.hl-rays{animation:hl-rays 14s ease-in-out infinite}
.hl-filament{animation:hl-filament 14s ease-in-out infinite}
.hl-trace{animation:hl-trace 14s linear infinite}
.hl-orbit{animation:hl-orbit 14s linear infinite}

@keyframes hl-halo{
  0%{opacity:0;transform:scale(0.55)}
  16%{opacity:0.75;transform:scale(0.95)}
  30%{opacity:1;transform:scale(1.25)}
  42%{opacity:0.5;transform:scale(1.05)}
  50%,100%{opacity:0;transform:scale(0.8)}
}
@keyframes hl-rays{
  0%,18%{opacity:0;transform:scale(0.5) rotate(0deg)}
  30%{opacity:0.6;transform:scale(1) rotate(6deg)}
  40%{opacity:0.4;transform:scale(1.08) rotate(9deg)}
  48%,100%{opacity:0;transform:scale(1.1) rotate(10deg)}
}
@keyframes hl-filament{
  0%,50%,100%{stroke:var(--amber)}
  16%,34%{stroke:#FBE38F}
}
@keyframes hl-trace{
  0%,50%{opacity:0;stroke-dashoffset:16}
  53%{opacity:1;stroke-dashoffset:16}
  70%{opacity:1;stroke-dashoffset:-100}
  73%,100%{opacity:0;stroke-dashoffset:-100}
}
@keyframes hl-orbit{
  0%,66%{opacity:0;stroke-dashoffset:0}
  71%{opacity:1}
  92%{opacity:1}
  97%,100%{opacity:0;stroke-dashoffset:-300}
}

/* ---------- responsive ---------- */
/* Below this width the headline needs the full row: logo shrinks to a corner mark. */
@media(max-width:1080px){
  .hero-logo{right:5%;top:auto;bottom:1.6rem;transform:none;height:150px;opacity:0.9}
}
@media(max-width:760px){
  .hero-logo{display:none}
  /* narrow, tall hero: frame the first three turbines instead of the terminal */
  .hero-media video,.hero-media img{object-position:56% 40%}
}

/* ---------- motion and print ---------- */
@media(prefers-reduced-motion:reduce){
  /* js/hero-animation.js never starts the video here, so the poster frame shows. */
  .hl-halo,.hl-rays,.hl-trace,.hl-orbit{animation:none;opacity:0}
  .hl-filament{animation:none}
}
@media print{
  .hero-media video{display:none}
  .hl-halo,.hl-rays,.hl-trace,.hl-orbit{display:none}
}

/* ---------- sub-page hero with a video background (resources) ----------
   Same pattern as the home hero: video under a navy gradient, poster as the still fallback.
   The gradient is lighter than the photo version (0.92 -> 0.60) so the rotors can be seen. */
.page-hero.has-photo.ph-video{position:relative;overflow:hidden;isolation:isolate;background:var(--navy)}
.ph-video > *:not(.hero-media){position:relative;z-index:2}
.page-hero.ph-video .hero-media video{object-position:50% 58%}
.page-hero.ph-video::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,rgba(3,35,77,0.84) 0%,rgba(3,35,77,0.74) 30%,rgba(3,35,77,0.30) 100%);
}
.page-hero.ph-video h1,.page-hero.ph-video p.intro{text-shadow:0 1px 16px rgba(3,35,77,0.6)}
@media(max-width:760px){
  .page-hero.ph-video .hero-media video{object-position:46% 58%}
}
@media print{.page-hero.ph-video .hero-media video{display:none}}

/* ---------- still-first loading (home and resources) ----------
   The still photo is the hero's own background, so it is there from first paint and stays
   if the video is slow, blocked or fails. The video sits on top at opacity 0 and only fades
   in once js/hero-animation.js has seen it start playing. */
.hero-media{background-color:var(--navy);background-size:cover;background-repeat:no-repeat}
.hero--animated .hero-media{background-image:url('../assets/img/hero-poster.jpg');background-position:88% 40%}
.page-hero.ph-resources .hero-media{background-image:url('../assets/img/resources-poster.jpg');background-position:50% 58%}
.hero-media video{opacity:0;transition:opacity 700ms ease}
.hero-media.is-playing video{opacity:1}
.hero-media.is-still video{display:none}
@media(max-width:760px){
  .hero--animated .hero-media{background-position:56% 40%}
  .page-hero.ph-resources .hero-media{background-position:46% 58%}
}

/* ---------- FAQ side bulb: the logo with a breathing glow, nothing else ----------
   Replaces the static radiant-bulb.png. Only the halo moves: it swells and settles. */
/* sticky offset clears the fixed navigation bar (about 115px tall) so the bulb is never tucked under it */
.radiant-decor.radiant-live{background:none;top:4.8rem}
.radiant-live svg{width:100%;height:100%;display:block;overflow:visible}
.radiant-live .hl-rays,.radiant-live .hl-trace,.radiant-live .hl-orbit{display:none}
.radiant-live .hl-filament{animation:none}
.radiant-live .hl-halo{animation:rl-halo 5s ease-in-out infinite}
@keyframes rl-halo{
  0%,100%{opacity:0.75;transform:scale(0.88)}
  50%{opacity:1;transform:scale(1.14)}
}
@media(prefers-reduced-motion:reduce){
  .radiant-live .hl-halo{animation:none;opacity:0.85}
}

/* ---------- home logo: the light also runs the infinity sign ----------
   A second trace on the infinity path. It starts as the light on the filament ring finishes
   (about 71% of the 14 s cycle) and completes one pass of the figure before the loop ends. */
.hero-logo .hl-trace-inf{stroke-width:20;animation-name:hl-trace-inf}
@keyframes hl-trace-inf{
  0%,70%{opacity:0;stroke-dashoffset:16}
  72%{opacity:1;stroke-dashoffset:16}
  88%{opacity:1;stroke-dashoffset:-100}
  90%,100%{opacity:0;stroke-dashoffset:-100}
}
@media(prefers-reduced-motion:reduce){
  .hero-logo .hl-trace-inf{animation:none;opacity:0}
}