/*
 * Homepage motion layer: "The Signal" background scenes + gentle reveals.
 * Scenes: welcome = dot-lattice luminance wave, mission = assurance ripples.
 * Choreography lives in homepage-fx.js (GSAP ScrollTrigger, vendored).
 */

/* Background layer under the text of the two dark sections. */
#hdm-hp .hdm-hp-bg{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  background:linear-gradient(135deg,#1a7331 0%,#105522 50%,#0a3d18 100%)}
#hdm-hp .hdm-hp-mission .hdm-hp-bg{background:linear-gradient(180deg,#0d4a1e 0%,#1a7331 100%)}

#hdm-hp .hdm-hp-bg .hdm-bgv-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

#hdm-hp .hdm-hp-bg .hdm-bgv-scene{transform-box:view-box;transform-origin:1200px 600px}
#hdm-hp .hdm-hp-bg .hdm-bgv-ring{transform-box:view-box;transform-origin:1140px 430px}

/* Resting states only once JS has stamped .hdm-hp-js; without it (script or
   GSAP failed) everything below serves visible, finished content. */
html.hdm-hp-js #hdm-hp .hdm-hp-bg .hdm-bgv-col{opacity:.16}
html:not(.hdm-hp-js) #hdm-hp .hdm-hp-bg .hdm-bgv-col{opacity:.22}
html:not(.hdm-hp-js) #hdm-hp .hdm-hp-bg .hdm-bgv-ring{opacity:.14}
html.hdm-hp-js #hdm-hp .hdm-hp-bg .hdm-bgv-source{opacity:.55}

/* Drift targets need no CSS initial state: the scrubbed timelines pose every
   element to match the current scroll the moment they are created, and no-JS
   simply leaves everything static and visible. */

/* Mobile: scenes reframe into the lower part of each section under their own
   scrim; the copy spans full width above them. */
@media (max-width:767px){
  #hdm-hp .hdm-hp-bg .hdm-bgv-svg{top:auto;bottom:0;height:58%}
  #hdm-hp .hdm-hp-bg .hdm-bgv-scene{transform:translateX(60px) scale(1.12)}
  #hdm-hp .hdm-hp-bg .hdm-bgv-col circle{r:3}
  #hdm-hp .hdm-hp-bg .hdm-bgv-ring{stroke-width:2}
  #hdm-hp .hdm-hp-bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(4,32,13,.3),rgba(4,32,13,.12))}
}

/* Reduced motion: static finished scenes, no reveals (content plain visible). */
@media (prefers-reduced-motion: reduce){
  html.hdm-hp-js #hdm-hp .hdm-hp-bg .hdm-bgv-col,
  #hdm-hp .hdm-hp-bg .hdm-bgv-col{opacity:.2}
  #hdm-hp .hdm-hp-bg .hdm-bgv-ring{opacity:.14}
  html.hdm-hp-js #hdm-hp .hdm-hp-bg .hdm-bgv-source,
  #hdm-hp .hdm-hp-bg .hdm-bgv-source{opacity:.9}
}