/* SGH spatial FX. Float = compositor animation of `translate`/`rotate`; JS (space-fx.js) owns `transform`/`opacity`.
   Everything motion-related is gated behind .fx-on (JS ready + motion allowed) / .fx-hover (fine pointer). */
body{isolation:isolate}
.space-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.space-fx canvas{position:absolute;inset:0;width:100%;height:100%}
.space-orb{position:absolute;width:min(44vw,480px);aspect-ratio:1;border-radius:50%;filter:blur(38px);opacity:.12;background:radial-gradient(circle,#F4B00E,transparent 68%);animation:space-orb 24s ease-in-out infinite alternate}
.space-orb:nth-child(2){left:68%;top:30%;background:radial-gradient(circle,#16a97a,transparent 68%);animation-duration:30s;animation-delay:-12s}
.space-orb:nth-child(3){left:10%;top:72%;background:radial-gradient(circle,#3fc98d,transparent 68%);animation-duration:18s;animation-delay:-7s}
@keyframes space-orb{from{translate:-18px -16px;scale:.94}to{translate:24px 22px;scale:1.08}}
.eco-cycle::after{content:"";position:absolute;inset:15.8333%;border-radius:50%;pointer-events:none;animation:space-orbit 14s linear infinite;background:radial-gradient(circle at 50% 1%,#16a97a 0 3px,rgba(63,201,141,.3) 4px,transparent 9px)}
.eco-cycle::before{content:none}
@keyframes space-orbit{to{rotate:360deg}}

/* ---------- Hero stage: SGH logo in the middle, glass chips around it at different depths (pure CSS → no CLS) ---------- */
.hv-card{position:relative;--gl:290px;--gl-cy:137px}
@media (max-width:960px){.hv-orb{width:210px;height:210px}}
/* Static brand logo (inline SVG = logo-icon.svg): shown until the 3D logo fades in, and as the fallback
   (no WebGL / reduced motion / low-end phone). No glass ring: just the logo, large, floating. */
.hv-orb{background:none;border:0;border-radius:0;box-shadow:none}
.hv-orb::before{content:none}
.hv-orb svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 14px rgba(23,24,28,.12))}
.fx-on .hv-orb svg{animation:hv-logo 5.4s ease-in-out infinite alternate}
.hv-3d .hv-orb svg{animation:none}
@keyframes hv-logo{from{translate:0 -6px;rotate:-1.2deg}to{translate:0 6px;rotate:1.2deg}}
.hv-list{position:relative;z-index:2;perspective:800px}
.hv-item{position:relative}
@media (min-width:961px){
  .hv-card{display:block;height:486px;padding:0;--gl:500px;--gl-cy:226px}
  .hv-orb{position:absolute;left:50%;top:var(--gl-cy);width:306px;height:330px;margin:-171px 0 0 -153px}
  .hv-list{position:absolute;inset:0;display:block;pointer-events:none}
  .hv-item{position:absolute;width:max-content;max-width:250px;pointer-events:auto;background:rgba(255,255,255,.74);
    box-shadow:0 18px 40px rgba(23,24,28,.13),0 4px 10px rgba(23,24,28,.06),inset 0 1px 0 rgba(255,255,255,.9)}
  /* Chips sit where the logo is narrow: above the bulb's shoulders, beside the screw base, below the shadow. */
  .hv-item:nth-child(1){top:14px;left:-46px}
  .hv-item:nth-child(2){top:296px;right:-52px}
  .hv-item:nth-child(3){bottom:16px;left:-40px}
}
.hv-gl{position:absolute;left:50%;top:var(--gl-cy);width:var(--gl);height:var(--gl);margin:calc(var(--gl) / -2) 0 0 calc(var(--gl) / -2);
  z-index:1;pointer-events:none;opacity:0;transition:opacity .9s ease}
.hv-gl-shadow{position:absolute;left:50%;top:calc(var(--gl-cy) + var(--gl) * .335);width:calc(var(--gl) * .36);height:26px;z-index:0;
  border-radius:50%;background:radial-gradient(closest-side,rgba(23,24,28,.24),rgba(23,24,28,.08) 55%,rgba(23,24,28,0));
  pointer-events:none;opacity:0;transform:translate3d(-50%,0,0)}
/* Warm halo behind the bulb, ~3× the logo width with a long soft edge so it reads on white; opacity/scale are driven
   by space-hero3d.js (pointer in the hero = warm, logo switched on = full + larger). */
.hv-gl-glow{position:absolute;left:50%;top:calc(var(--gl-cy) - var(--gl) * .072);width:calc(var(--gl) * 1.12);height:calc(var(--gl) * 1.12);
  margin:calc(var(--gl) * -.56) 0 0 calc(var(--gl) * -.56);z-index:0;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,186,52,.74),rgba(255,178,30,.52) 22%,rgba(249,168,18,.3) 46%,rgba(246,164,16,.14) 68%,rgba(244,160,14,.045) 86%,rgba(244,160,14,0))}
.hv-orb{transition:opacity .7s ease,scale .7s ease}
.hv-3d .hv-orb{opacity:0;scale:.86}
.hv-3d .hv-gl{opacity:1}

/* ---------- Power switch: click the logo → the room lights up (room glow + one light wave + gold dust burst) ---------- */
.hv-room{position:absolute;left:0;right:0;top:-160px;bottom:-200px;z-index:-1;overflow:hidden;pointer-events:none;--lx:70%;--ly:45%}
.hv-room-glow,.hv-room-wave{position:absolute;left:var(--lx);top:var(--ly);border-radius:50%;opacity:0}
.hv-room-glow{width:1560px;height:1120px;margin:-560px 0 0 -780px;transform:scale(.55);
  background:radial-gradient(closest-side,rgba(255,190,64,.5),rgba(255,182,44,.3) 30%,rgba(250,172,30,.12) 60%,rgba(244,170,20,0));
  transition:opacity 2.6s cubic-bezier(.4,0,.2,1),transform 3s cubic-bezier(.4,0,.2,1)}
.lamp-on .hv-room-glow{opacity:.8;transform:none;transition:opacity .5s ease-out,transform 1s cubic-bezier(.16,.8,.3,1)}
.lamp-on:hover .hv-room-glow{opacity:1}
.hv-room-wave{width:1500px;height:1500px;margin:-750px 0 0 -750px;
  background:radial-gradient(closest-side,rgba(255,200,90,0) 58%,rgba(255,188,56,.32) 80%,rgba(255,200,90,.1) 92%,rgba(255,200,90,0))}
.hv-sparks{position:absolute;left:-120px;top:-120px;width:calc(100% + 240px);height:calc(100% + 240px);z-index:0;pointer-events:none}
/* The switch itself: a transparent circle over the bulb (keyboard / screen reader / tap target), focus ring only when tabbing.
   Over the 3D logo the cursor comes from the raycast (inherit from .hv-card); over the static logo the whole circle is the switch. */
.hv-switch{position:absolute;left:50%;top:calc(var(--gl-cy) - var(--gl) * .072);width:calc(var(--gl) * .46);height:calc(var(--gl) * .46);
  margin:calc(var(--gl) * -.23) 0 0 calc(var(--gl) * -.23);padding:0;border:0;border-radius:50%;background:none;z-index:3;
  cursor:inherit;-webkit-tap-highlight-color:transparent}
.hv-switch:focus{outline:none}
.hv-switch:focus-visible{outline:2px solid #108f66;outline-offset:4px}
/* Static logo (no WebGL / reduced motion): the same switch in CSS — warm glow + brighter warm gold. */
.hero-visual:not(.hv-3d) .hv-switch{cursor:pointer}
.hv-orb svg{transition:filter .6s ease}
.hv-orb svg g[stroke]{transition:stroke .5s ease}
.lamp-on .hero-visual:not(.hv-3d) .hv-orb svg{filter:drop-shadow(0 12px 14px rgba(23,24,28,.1)) drop-shadow(0 0 8px rgba(255,176,30,.85)) drop-shadow(0 0 30px rgba(255,170,24,.55))}
.lamp-on .hero-visual:not(.hv-3d) .hv-orb svg g[stroke]{stroke:#FFB417}
@media (max-width:960px){
  .hv-room-glow{width:900px;height:900px;margin:-450px 0 0 -450px}
  .hv-room-wave{width:1000px;height:1000px;margin:-500px 0 0 -500px}
  .hv-sparks{left:-6px;top:-90px;width:calc(100% + 12px);height:calc(100% + 180px)}
}

/* ---------- Idle float: every block hangs in the air, each on its own phase/period (set by JS) ---------- */
.fx-on .fx-float,.fx-on .hero-visual{animation:fx-bob var(--fp,3s) ease-in-out var(--fd,0s) infinite alternate,fx-roll var(--fr,4s) ease-in-out var(--fd2,0s) infinite alternate}
.fx-on .hero-visual{--fa:8px;--fz:.35deg;--fp:3.6s;--fr:4.4s}
@keyframes fx-bob{from{translate:0 calc(var(--fa,8px) * -1)}to{translate:0 var(--fa,8px)}}
@keyframes fx-roll{from{rotate:calc(var(--fz,.5deg) * -1)}to{rotate:var(--fz,.5deg)}}
@keyframes fx-bob-m{from{translate:0 calc(var(--fa,8px) * -.42)}to{translate:0 calc(var(--fa,8px) * .42)}}
@keyframes fx-roll-m{from{rotate:calc(var(--fz,.5deg) * -.4)}to{rotate:calc(var(--fz,.5deg) * .4)}}

/* ---------- Shared depth: one vanishing point per group ---------- */
.fx-on .features,.fx-on .cats{perspective:1200px}
.fx-on .brand-row{perspective:950px}
.fx-on .eco-cycle{perspective:1300px}
.fx-on section:not(.hero) > .wrap{perspective:1700px}

/* Moving glass: drop per-frame backdrop blur (the backdrop is already soft), compensate with a denser fill. */
.fx-on :is(.feat,.cat,.eco-node,.eco-center,.cta-box,.eco-shell,.brandwall .shell){-webkit-backdrop-filter:none;backdrop-filter:none}
.fx-on .feat{background:rgba(255,255,255,.68)}
.fx-on .eco-node{background:rgba(255,255,255,.82)}
.fx-on .cta-box{background:rgba(255,255,255,.66)}
.fx-on .eco-shell{background:rgba(255,255,255,.62)}
.fx-on .brandwall .shell{background:rgba(255,255,255,.64)}
.fx-on .fx-pre{opacity:0}
.fx-on .volume-card:not(.feat){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.68)}
.fx-hover .volume-card:not(.feat){overflow:visible}
.fx-hover .volume-card:not(.feat):hover{box-shadow:var(--glass-shadow-sm)}

/* ---------- Hover: 3D card with real inner layers, lift shadow and cursor glare ---------- */
:where(.brand-cell){position:relative}
.fx-glare,.fx-shade{position:absolute;pointer-events:none;border-radius:inherit;opacity:0}
.fx-glare{inset:0;overflow:hidden;z-index:3;transform:translateZ(.5px)}
.fx-glare i{position:absolute;left:-100%;top:-100%;width:200%;height:200%;
  background:radial-gradient(circle at center,rgba(255,255,255,.5),rgba(255,255,255,.16) 22%,rgba(255,255,255,0) 46%)}
/* Lift shadow: a soft contact blob mostly below the card (no box outline that could read as a ghost card). */
.fx-shade{left:4%;right:4%;bottom:-16%;height:34%;border-radius:50%;z-index:-1;transform:translate3d(0,8px,-30px);
  background:radial-gradient(closest-side,rgba(23,24,28,.24),rgba(23,24,28,.09) 58%,rgba(23,24,28,0))}
.fx-hover .fx-card,.fx-hover .fx-card > div{transform-style:preserve-3d}
.fx-hover .fx-card{transition:none}
.fx-hover .fx-card > *{transition-property:color,filter,opacity}
.fx-hover .feat{overflow:visible;background:linear-gradient(var(--accent,var(--green-500)),var(--accent,var(--green-500))) top / 100% 3px no-repeat,rgba(255,255,255,.68)}
.fx-hover .feat::after{content:none}
.fx-hover :is(.cat,.cta-box){overflow:visible}
.fx-hover :is(.feat,.cat,.eco-node,.brand-cell):hover{box-shadow:var(--glass-shadow-sm)}
.fx-hover .hv-item:hover{box-shadow:0 18px 40px rgba(23,24,28,.13),0 4px 10px rgba(23,24,28,.06),inset 0 1px 0 rgba(255,255,255,.9)}
.fx-live,.fx-live > *{will-change:transform}

/* Phones / touch: no hover physics, gentler float, fewer moving layers. */
@media (max-width:767px),(pointer:coarse){
  .fx-on .fx-float,.fx-on .hero-visual{animation-name:fx-bob-m,fx-roll-m}
  .fx-on .fx-float:is(.eco-shell,.brandwall .shell,.sec-head,.cta-box){animation:none}
  .space-orb{width:70vw;animation:none}
  .fx-glare,.fx-shade{display:none}
}
.fx-paused *,.fx-paused *::before,.fx-paused *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero-visual{transform:none!important}
  .fx-pre{opacity:1!important}
  .fx-glare,.fx-shade,.hv-gl,.hv-gl-shadow,.hv-gl-glow,.hv-sparks,.hv-room-wave{display:none!important}
}
@media print{.space-fx canvas,.space-orb,.hv-gl,.hv-gl-shadow,.hv-gl-glow,.hv-room,.hv-sparks,.fx-glare,.fx-shade{display:none!important}.fx-pre{opacity:1!important}.fx-float{animation:none!important;transform:none!important}}