/* ===========================================================
   ARCHER SOLAR — isometric energy scenes
   Shared machinery for every hero visual. Dimetric 2:1 projection.
   Face transforms:
     top   : translate(cx, cy-h) matrix(1, .5,-1, .5, 0, 0)
     right : translate(cx, cy)   matrix(1, .5, 0,-1, 0, 0)
     left  : translate(cx, cy)   matrix(-1,.5, 0,-1, 0, 0)
   All strokes inside transformed groups use vector-effect:non-scaling-stroke.
   =========================================================== */

.scene{width:100%;height:auto;display:block;overflow:visible;}
.scene *{transform-box:fill-box;}
.scene [vector-effect]{vector-effect:non-scaling-stroke;}

/* ---- sun ---- */
.sc-corona{transform-origin:center;animation:scSpin 46s linear infinite;}
.sc-corona-2{transform-origin:center;animation:scSpin 68s linear infinite reverse;}
@keyframes scSpin{to{transform:rotate(360deg);}}

.sc-halo{transform-origin:center;animation:scBreathe 5.2s ease-in-out infinite;}
@keyframes scBreathe{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.11);opacity:1;}}

.sc-ring{transform-origin:center;animation:scRing 4.4s cubic-bezier(.4,0,.2,1) infinite;}
.sc-ring.r2{animation-delay:1.5s;}
.sc-ring.r3{animation-delay:2.9s;}
@keyframes scRing{
  0%{transform:scale(.55);opacity:0;}
  18%{opacity:.55;}
  100%{transform:scale(2.3);opacity:0;}
}

/* ---- light beams from sun to panels ---- */
.sc-beam{animation:scBeam 6s ease-in-out infinite;transform-origin:top center;}
.sc-beam.b2{animation-delay:-2s;}
.sc-beam.b3{animation-delay:-4s;}
@keyframes scBeam{0%,100%{opacity:.24;}50%{opacity:.5;}}

/* ---- panel specular sheen (lives inside a face-matrix group) ---- */
.sc-sheen{animation:scSheen 5.2s cubic-bezier(.55,0,.45,1) infinite;}
.sc-sheen.s2{animation-delay:.5s;}
.sc-sheen.s3{animation-delay:1s;}
@keyframes scSheen{
  0%{transform:translate(-26px,-26px);opacity:0;}
  12%{opacity:.9;}
  46%{opacity:0;}
  100%{transform:translate(26px,26px);opacity:0;}
}

/* ---- energy flow along a track ---- */
.sc-track{fill:none;stroke:rgba(33,178,255,.22);stroke-width:1.6;}
.sc-flow{
  fill:none;stroke:url(#scFlowGrad);stroke-width:2.6;stroke-linecap:round;
  filter:url(#scGlowSoft);animation:scFlow 3.4s linear infinite;
}
.sc-flow.f2{animation-delay:-1.13s;}
.sc-flow.f3{animation-delay:-2.26s;}
@keyframes scFlow{to{stroke-dashoffset:var(--sc-dash,-380);}}

/* ---- floating nodes ---- */
.sc-float{animation:scFloat 7s ease-in-out infinite;}
.sc-float.d1{animation-delay:-2.3s;}
.sc-float.d2{animation-delay:-4.6s;}
@keyframes scFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* ---- ground contact glow ---- */
.sc-shadow{animation:scShadow 7s ease-in-out infinite;transform-origin:center;}
.sc-shadow.d1{animation-delay:-2.3s;}
.sc-shadow.d2{animation-delay:-4.6s;}
@keyframes scShadow{0%,100%{opacity:.5;transform:scaleX(1);}50%{opacity:.34;transform:scaleX(1.06);}}

/* ---- window flicker ---- */
.sc-lit{animation:scLit 6.5s ease-in-out infinite;}
.sc-lit.l2{animation-delay:-2.1s;}
.sc-lit.l3{animation-delay:-4.2s;}
@keyframes scLit{0%,100%{opacity:.34;}50%{opacity:.72;}}

/* ---- meter / counter dial ---- */
.sc-dial{transform-origin:center;animation:scDial 5s cubic-bezier(.5,0,.3,1) infinite;}
@keyframes scDial{0%,100%{transform:rotate(-38deg);}50%{transform:rotate(42deg);}}

/* ---- scene caption strip under the drawing ---- */
.sc-cap{fill:rgba(255,255,255,.42);font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:1.6px;}
.sc-label{fill:#fff;font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:800;}
.sc-sublabel{fill:rgba(143,217,255,.85);font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:1.1px;}

@media(prefers-reduced-motion:reduce){
  .scene *{animation:none !important;}
  .sc-beam{opacity:.34;}
}

/* ===========================================================
   3D GLASS ICONS  (src/glassgen.py -> src/glass/*.svg)
   Layered gradients rather than a render: rim light, clipped
   specular, an orbit ring split around the body, badge ticks.
   =========================================================== */
.gi{display:block;width:100%;height:auto;overflow:visible;}
.gi *{transform-box:fill-box;transform-origin:center;}

.gi-body{animation:giFloat 6s ease-in-out infinite;}
@keyframes giFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

.gi-shadow{animation:giShadow 6s ease-in-out infinite;}
@keyframes giShadow{0%,100%{opacity:1;transform:scaleX(1);}50%{opacity:.62;transform:scaleX(.9);}}

.gi-spec{animation:giSpec 7.5s ease-in-out infinite;}
@keyframes giSpec{0%,100%{opacity:.5;transform:translate(0,0);}50%{opacity:.68;transform:translate(3px,2px);}}

.gi-badge{transform:translate(var(--bx,0),var(--by,0));}
@supports (offset-path: path("M0 0")){
  .gi-badge{
    transform:none;offset-rotate:0deg;offset-distance:0%;
    animation:giOrbit 11s linear infinite;
  }
  .gi-badge.b1{animation-delay:-3.66s;}
  .gi-badge.b2{animation-delay:-7.33s;}
  /* the path is drawn front-half first, so the second half is behind the
     body — fading there is what reads as the badge going round the back */
  @keyframes giOrbit{
    0%  {offset-distance:0%;   opacity:1;}
    43% {opacity:1;}
    50% {opacity:.13;}
    93% {opacity:.13;}
    100%{offset-distance:100%; opacity:1;}
  }
}

/* the ring itself breathes, which reads as a slow tilt in 3D */
.gi-orbit{animation:giTilt 11s ease-in-out infinite;transform-origin:center;}
@keyframes giTilt{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.82);}}

/* size presets */
.gi-xs{width:30px;}
.gi-sm{width:46px;}
.gi-md{width:78px;}
.gi-lg{width:112px;}
.gi-xl{width:150px;}

/* compact contexts drop the orbit and sparkles — at 30px they're just noise */
.gi-plain .gi-orbit,.gi-plain .gi-badge,.gi-plain .gi-spark{display:none;}

@media(prefers-reduced-motion:reduce){.gi *{animation:none !important;}}

/* ---- entrance: icons assemble when their section reveals ---- */
.reveal .gi-body{opacity:0;transform:scale(.82) translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal .gi-orbit,.reveal .gi-badge,.reveal .gi-spark{opacity:0;transition:opacity .6s ease .28s;}
.reveal.in .gi-body{opacity:1;transform:none;animation:giFloat 6s ease-in-out infinite .8s;}
.reveal.in .gi-orbit,.reveal.in .gi-badge,.reveal.in .gi-spark{opacity:1;}

/* ---- hover: the whole thing leans in ---- */
.chip:hover .gi-body,.bcard:hover .gi-body,.ctabar:hover .gi-body{
  transform:translateY(-5px) scale(1.07);transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.chip:hover .gi-orbit,.bcard:hover .gi-orbit{animation-duration:4.5s;}
.chip:hover .gi-badge,.bcard:hover .gi-badge{animation-duration:4.5s;}
.gi-body{transition:transform .3s cubic-bezier(.2,.7,.3,1);}

@media(prefers-reduced-motion:reduce){
  .reveal .gi-body,.reveal .gi-orbit,.reveal .gi-badge,.reveal .gi-spark{opacity:1;transform:none;}
}