/* ==========================================================================
   Human-ISM E&C funnel motion kit (fx.css + fx.js)
   Motion drawn from the Human-ISM brand: gold letter reveals, drifting glow
   comets, dotted tangent S-curves echoing the gold logo's sweeps, capability
   marquee, rise-in blocks, count-up stats, hover micro-interactions, CTA sheen.
   Loaded after each page's inline <style>, so same-specificity rules here win.
   ========================================================================== */

/* ---- Page fade-in ---- */
@keyframes fx-page-in{from{opacity:0} to{opacity:1}}
html.js body{animation:fx-page-in .45s ease both;}

/* ---- Hero letter reveal: flash gold, settle to natural color ----
   Color is intentionally omitted from the 100% frame: the browser snaps each
   letter back to its cascaded color the instant its animation ends, which is
   what makes the gold "wave" travel through the headline. */
@keyframes fx-letter{
  0%{opacity:0; transform:translateY(.22em); color:var(--gold,#f6c776);}
  55%{opacity:1; color:var(--gold,#f6c776);}
  99%{color:var(--gold,#f6c776); transform:none;}
  100%{opacity:1; transform:none;}
}
@keyframes fx-letter-em{
  0%{opacity:0; transform:translateY(.22em); color:#fff;}
  55%{opacity:1; color:#fff;}
  99%{color:#fff; transform:none;}
  100%{opacity:1; transform:none;}
}
.fx-w{display:inline-block; white-space:nowrap;}
.fx-l{display:inline-block; animation:fx-letter .55s cubic-bezier(.2,.7,.3,1) both;}
h1 em .fx-l{animation-name:fx-letter-em;}

/* ---- Ambient glow comets (fixed, behind content) ---- */
.fx-orb{position:fixed; z-index:-1; pointer-events:none; border-radius:50%;
        filter:blur(70px); mix-blend-mode:screen; will-change:transform;}
.fx-orb-a{width:520px; height:520px; top:-150px; left:-170px; opacity:.55;
          background:radial-gradient(circle at 35% 35%, rgba(0,149,235,.5), rgba(0,149,235,0) 65%);
          animation:fx-drift-a 26s ease-in-out infinite alternate;}
.fx-orb-b{width:460px; height:460px; top:32vh; right:-190px; opacity:.4;
          background:radial-gradient(circle at 60% 40%, rgba(246,199,118,.42), rgba(246,199,118,0) 65%);
          animation:fx-drift-b 34s ease-in-out infinite alternate;}
@keyframes fx-drift-a{from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(9vw,16vh,0) scale(1.15);}}
@keyframes fx-drift-b{from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(-11vw,-10vh,0) scale(.92);}}
@media (max-width:600px){
  .fx-orb-a{width:300px; height:300px; filter:blur(50px);}
  .fx-orb-b{width:280px; height:280px; filter:blur(50px);}
}

/* ---- Twisted 3D ribbons behind the hero ----
   The geometry of the gold logo: a gold ribbon sweeping from lower left to
   upper right, crossed tangentially by a blue counter-flow. fx.js models the
   strips in 3D and slowly twists them; the dash offset animation streams the
   dots along each strand, and a light tilt adds to the depth. */
.fx-flow{position:absolute; left:50%; top:50%;
         transform:translate(-50%,-52%) perspective(700px) rotateX(10deg);
         width:min(880px,96%); pointer-events:none; opacity:.55; z-index:-1;}
.fx-flow path{fill:none; stroke-linecap:round; stroke-dasharray:.5 9;
              animation:fx-flow-dash 24s linear infinite;}
.fx-flow path.fb{animation-name:fx-flow-dash-r;}
@keyframes fx-flow-dash{to{stroke-dashoffset:-190;}}
@keyframes fx-flow-dash-r{to{stroke-dashoffset:190;}}

/* ---- Capability marquee ---- */
.fx-marquee{overflow:hidden; margin-top:6px; padding:13px 0; position:relative;
            border-top:1px solid var(--line,rgba(255,255,255,.16));
            border-bottom:1px solid var(--line,rgba(255,255,255,.16));
            background:rgba(255,255,255,.025);}
.fx-track{display:flex; width:max-content; will-change:transform;
          animation:fx-marquee 38s linear infinite;}
.fx-half{display:flex; gap:42px; padding-right:42px; align-items:center;}
.fx-marquee span{font-family:var(--mono,'IBM Plex Mono',monospace); font-size:11.5px;
                 letter-spacing:.14em; text-transform:uppercase;
                 color:var(--mist,#9fb4c8); white-space:nowrap;}
.fx-marquee b{color:var(--gold,#f6c776); font-weight:600;}
@keyframes fx-marquee{to{transform:translateX(-50%);}}

/* ---- Rise-in scroll reveals (upgrades the inline .rv rules) ---- */
html.js .rv{opacity:0; transform:translateY(26px) scale(.985);
            transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
html.js .rv.is-revealed{opacity:1; transform:none;}

/* ---- Hover micro-interactions ---- */
.tool, .me, .buybox, .cta, .vslot, .shots figure, .shot, .slot, .tips, .warn{
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;}
.tool:hover, .me:hover, .vslot:hover{
  transform:translateY(-4px); border-color:rgba(246,199,118,.5);
  box-shadow:0 16px 40px rgba(0,0,0,.35);}
html.js .shots figure.rv, html.js .shot.rv, .shots figure, .shot{
  transition:opacity .6s ease, transform .35s cubic-bezier(.16,1,.3,1),
  border-color .35s ease, box-shadow .35s ease;}
html.js .shots figure.rv.is-revealed:hover, html.js .shot.rv.is-revealed:hover,
.shots figure:hover, .shot:hover{transform:translateY(-4px) scale(1.04); border-color:rgba(246,199,118,.5);
  box-shadow:0 16px 40px rgba(0,0,0,.35);}
.tool .open{display:inline-block; transition:transform .3s cubic-bezier(.16,1,.3,1);}
a.tool:hover .open{transform:translateX(5px);}

/* ---- CTA sheen sweep + lift ---- */
.go, .cta a, .buy, form button{transition:transform .25s cubic-bezier(.16,1,.3,1),
  background .2s ease, box-shadow .25s ease;}
.go:hover, .cta a:hover, .buy:hover, form button:hover{transform:translateY(-2px);}
.go:not(.ghost), .cta a, .buy{position:relative; overflow:hidden;}
.go:not(.ghost)::after, .cta a::after, .buy::after{
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg); pointer-events:none;
  animation:fx-sheen 4.6s ease-in-out infinite;}
@keyframes fx-sheen{0%{left:-70%;} 16%{left:135%;} 100%{left:135%;}}

/* ---- Pulsing play buttons ---- */
@keyframes fx-ping{
  0%{box-shadow:0 8px 30px rgba(246,199,118,.5), 0 0 0 0 rgba(246,199,118,.45);}
  80%,100%{box-shadow:0 8px 30px rgba(246,199,118,.5), 0 0 0 20px rgba(246,199,118,0);}
}
.play{animation:fx-ping 2.6s cubic-bezier(0,0,.2,1) infinite;}

/* ---- Checklist replay: a visible list clears and re-checks itself ----
   fx.js adds .fx-replay for one pass; items slide back in one by one and the
   ::before marker pops in just after each line lands, like being ticked off.
   'both' fill hides items during their delay, which is what empties the list
   at the start of a pass. */
@keyframes fx-li-in{from{opacity:0; transform:translateX(-16px);} to{opacity:1; transform:none;}}
@keyframes fx-mark-pop{0%{opacity:0; transform:scale(0);} 60%{opacity:1; transform:scale(1.4);} 100%{opacity:1; transform:scale(1);}}
.fx-replay > li{animation:fx-li-in .45s cubic-bezier(.16,1,.3,1) both;
                animation-delay:calc(var(--i,0)*120ms);}
.fx-replay > li::before{animation:fx-mark-pop .35s cubic-bezier(.34,1.56,.64,1) both;
                        animation-delay:calc(var(--i,0)*120ms + 240ms);}

/* ---- Scroll progress bar ---- */
.fx-progress{position:fixed; top:0; left:0; height:3px; width:100%; z-index:60;
             transform-origin:0 0; transform:scaleX(0); pointer-events:none;
             background:linear-gradient(90deg, var(--blue,#0095eb), var(--gold,#f6c776));}

/* ---- Guards ---- */
@media (prefers-reduced-motion:reduce){
  html.js body, .fx-l, .fx-orb, .fx-track, .fx-flow path, .play,
  .fx-replay > li, .fx-replay > li::before,
  .go:not(.ghost)::after, .cta a::after, .buy::after{animation:none !important;}
  html.js .rv{opacity:1; transform:none;}
}
@media print{
  .fx-orb, .fx-flow, .fx-progress, .fx-marquee{display:none !important;}
  html.js body, .fx-l, .fx-replay > li, .fx-replay > li::before{animation:none !important;}
  html.js .rv{opacity:1 !important; transform:none !important;}
}