/* Homepage hero + works chain (glass mark that morphs into devices; on scroll: mark -> unfold -> tube -> tornado ->
   the works coil). Markup: index.html #ssRun; logic: assets/fabric/hero-chain.js, glass-morph.js, coil-chain.js. */
:root{--display:var(--sans)}
.ss-run{position:relative}
.ss-anchor{position:absolute;left:0;top:100%;width:1px;height:1px;pointer-events:none}
html.ss-tube .ss-anchor{top:340vh}
html.ss-tube #ssWall{display:none}
.ss-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:116px 24px 0;overflow:visible;background:transparent!important}
.ss-hero::before,.ss-hero::after{display:none}
.ss-hero .v3-pill{margin-bottom:20px}
.ss-hero .v3-h1{font-size:clamp(42px,6.2vw,92px);margin-bottom:18px}
/* the accent word retypes itself with each glass shape; its box eases to the next word's width so nothing reflows */
.ss-hero .v3-ln{display:block;white-space:nowrap}
.ss-word{display:inline-block;text-align:left;white-space:nowrap;vertical-align:baseline;transition:width .5s cubic-bezier(.16,1,.3,1)}
.ss-wt{position:relative}
.ss-word.typing .ss-wt::after{content:"";position:absolute;right:-.09em;top:.14em;bottom:.02em;width:.045em;background:currentColor;border-radius:1px;animation:ssCaret .9s steps(1) infinite}
@keyframes ssCaret{50%{opacity:0}}
.ss-word.fade .ss-wt{transition:opacity .15s ease}.ss-word.fade.out .ss-wt{opacity:0}
.ss-measure{position:absolute;visibility:hidden;white-space:nowrap;left:-9999px;top:0}
.ss-hero .v3-sub{margin-bottom:26px}
.ss-stage{flex:1 0 360px;margin:4px -24px 0;position:relative}
.ss-glass{position:absolute;top:0;bottom:0;left:50%;translate:-50% 0;height:100%;aspect-ratio:1.4;max-width:100%;display:block;touch-action:pan-y;outline:none;border-radius:24px}
@media(max-width:759px){.ss-stage{flex-basis:300px}.ss-hero .v3-h1{font-size:clamp(28px,9vw,42px)}}

/* intro: a thin laser line traces the mark, then the glass materialises from it (opacity + blur, ~700ms) */
.ss-intro{pointer-events:none;overflow:visible;transition:opacity .7s ease}
.ss-intro path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ss-intro .ln{stroke:rgba(255,255,255,.92)}
.ss-intro .tr{stroke:rgba(150,190,255,.9)}
.ss-intro .tr2{stroke:#fff}
.ss-intro circle{fill:#fff}.ss-intro .glow circle{fill:rgba(140,185,255,.95)}
html.light .ss-intro .ln{stroke:rgba(10,12,16,.85)}html.light .ss-intro .tr{stroke:rgba(40,100,255,.55)}html.light .ss-intro .tr2{stroke:#0a0a0a}
html.light .ss-intro circle{fill:#0a0a0a}html.light .ss-intro .glow circle{fill:rgba(40,100,255,.6)}
.ss-drawn .ss-intro .glow,.ss-drawn .ss-intro .tr2,.ss-drawn .ss-intro .hd{opacity:0;transition:opacity .35s ease}
#ssGlass{transition:opacity .7s ease,filter .7s ease}
.ss-boot #ssGlass{opacity:0;filter:blur(8px)}
.ss-live .ss-intro{opacity:0}
.ss-done #ssGlass{filter:none;transition:none}
.ss-static .ss-intro .ln{filter:drop-shadow(0 0 6px rgba(120,170,255,.65))}
html.light.ss-static .ss-intro .ln{filter:drop-shadow(0 0 5px rgba(40,100,255,.3))}
.ss-static #ssGlass{display:none}
@media(prefers-reduced-motion:reduce){#ssGlass,.ss-intro{transition-duration:.2s}.ss-boot #ssGlass{filter:none}}

/* ---- variant 2: object ~100vh behind the text, text centred, soft scrim for legibility ---- */
/* backlight = the production hero's: one soft blue glow + fine grain (home.css .v3-hero / .v3-hero::after),
   centred behind the object so its rims and refraction pick it up */
.hero-2 .ss-hero{justify-content:center;padding:96px 24px 40px;overflow:hidden;isolation:isolate;
  background:radial-gradient(55% 45% at 50% 58%,rgba(40,100,255,.22),transparent 70%),#000!important}
html.light.hero-2 .ss-hero{background:radial-gradient(55% 45% at 50% 58%,rgba(40,100,255,.14),transparent 70%),#fff!important}
/* light theme: a soft contact shadow under the glass object (the glass itself is clear) */
html.light.hero-2 .ss-hero .ss-stage::after{content:"";position:absolute;left:50%;top:84%;width:min(560px,60vw);height:56px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(20,24,40,.16),rgba(20,24,40,.06) 55%,transparent);filter:blur(6px);pointer-events:none;z-index:0;transition:opacity .4s}
html.light.ss-tout .ss-hero .ss-stage::after{opacity:0}
.hero-2 .ss-hero::after{display:block}
.hero-2 .ss-stage{display:contents}
.hero-2 .ss-glass{top:50%;left:50%;translate:-50% -50%;width:100vw;height:120vh;max-width:none;aspect-ratio:auto;border-radius:0;z-index:0;will-change:transform}
.hero-2 .v3-herotxt{position:relative;z-index:2;pointer-events:none}
.hero-2 .v3-herotxt a,.hero-2 .v3-herotxt .v3-pill,.hero-2 .v3-herotxt h1,.hero-2 .v3-herotxt p{pointer-events:auto}
.hero-2 .v3-herotxt::before{display:block;width:min(1500px,170%);height:230%;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,.42) 35%,rgba(0,0,0,.18) 65%,rgba(0,0,0,0))}
html.light.hero-2 .v3-herotxt::before{background:radial-gradient(closest-side,rgba(255,255,255,.72),rgba(255,255,255,.45) 35%,rgba(255,255,255,.18) 65%,rgba(255,255,255,0))}
@media(max-width:759px){.hero-2 .ss-glass{height:151vw}}

/* ---- scroll: shape -> mark -> unfolds into a thick glass tube carrying the case covers (sticky, ~250vh) ---- */
html.ss-tube .ss-run{height:720vh;position:relative}   /* hero + tube 250vh + tube->coil 120vh + coil 250vh */
html.ss-tube.chain-2 .ss-run{height:690vh}             /* chain 2: shorter tube 180vh, tornado 160vh, coil 250vh */
html.ss-tube .ss-hero{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
.ss-hero .v3-herotxt{will-change:opacity,transform}
/* coil stage (homepage #works3d look) */
.ss-wk{display:none}
html.ss-tube .ss-wk{display:block;position:absolute;inset:0;pointer-events:none;opacity:0;z-index:1}
html.ss-tube .ss-wkt{z-index:-1}   /* the title sits behind the cards, as on the homepage */
.ss-wkt::before,.ss-wkt::after{display:none}
html.ss-tube .ss-wk .wk-foot,html.ss-tube .ss-wk .wk-all-end{z-index:6}
.ss-wk .wk-center{z-index:0}.ss-wk .wk-foot a,.ss-wk .wk-all-end{pointer-events:none}
html.ss-coil-on .ss-wk .wk-foot a{pointer-events:auto}
.ss-wk.to-all .wk-all-end{opacity:1;transform:none;pointer-events:auto}
.ss-wk.to-all .wk-t1{opacity:0}
.ss-wk::before{content:"";position:absolute;left:0;right:0;top:0;height:34vh;pointer-events:none;background:linear-gradient(#000 0%,rgba(0,0,0,.78) 28%,rgba(0,0,0,.3) 62%,transparent)}
.ss-wk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;pointer-events:none;background:linear-gradient(transparent,#000)}
html.light .ss-wk::before{background:linear-gradient(#fff 0%,rgba(255,255,255,.78) 28%,rgba(255,255,255,.3) 62%,transparent)}
html.light .ss-wk::after{background:linear-gradient(transparent,#fff)}
.ss-wk .wk-center,.ss-wk .wk-foot,.ss-wk .wk-all-end{position:absolute}
.ss-glass:focus-visible{box-shadow:0 0 0 2px var(--accent2,#8dbcff)}
.ss-wk .wk-foot{left:32px;right:32px;bottom:26px;z-index:5}
html.ss-tout .ss-hero .v3-herotxt,html.ss-tout .ss-hero .v3-herotxt *{pointer-events:none!important}

/* phones / touch: canvas covers the viewport (the coil needs it); the hero object keeps its size via ssHeroFill.
   Chain: hero 100vh, glass fades out (50vh), the works coil fades in (35vh), coil 250vh */
html.ss-m.hero-2 .ss-glass{height:120vh}
html.ss-tube.ss-m .ss-run{height:435vh}
html.ss-tube.ss-m .ss-anchor{top:85vh}
html.ss-m .ss-wk .wk-foot{left:16px;right:16px;bottom:18px;font-size:12px;gap:10px}
html.ss-m .ss-wk .wk-h{font-size:clamp(44px,13vw,72px)}