/* Legacy Sterling: intro gate, AIOS workflow scene, ambient sound toggle */

/* ---------- Intro gate ---------- */
html.ls-gate-open{overflow:hidden}
.ls-gate{position:fixed;inset:0;z-index:1000;background:#050a08;color:var(--ivory);--hole:0px;
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--hole),#000 calc(var(--hole) + 1px));
  mask:radial-gradient(circle at 50% 50%,transparent var(--hole),#000 calc(var(--hole) + 1px))}
.ls-gate canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ls-gate-top{position:absolute;top:32px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.3em;color:#cfd8cf}
.ls-gate-top span:first-child{display:flex;align-items:center}
.ls-gate-top img{width:30px;height:34px;object-fit:contain;margin-right:16px;vertical-align:middle}
.ls-gate-load{font-variant-numeric:tabular-nums;color:#93a597}
.ls-gate-enter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(64px,calc(var(--r) * .62));height:max(64px,calc(var(--r) * .62));border-radius:50%;border:1px solid #c5a059b3;background:#050b09cc;color:var(--ivory);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .8s,color .3s,border-color .3s,transform .3s,box-shadow .3s}
.ls-gate-enter svg{width:38%;height:38%;fill:currentColor;margin-left:8%}
.ls-gate.is-ready .ls-gate-enter{opacity:1;animation:lsBreathe 2.8s ease-in-out infinite}
.ls-gate-enter:hover,.ls-gate-enter:focus-visible{color:var(--gold);border-color:var(--gold);box-shadow:0 0 0 8px #c5a05922,0 0 40px #c5a05940;transform:translate(-50%,-50%) scale(1.06)}
.ls-gate-enter:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
@keyframes lsBreathe{0%,100%{box-shadow:0 0 0 0 #c5a05933}50%{box-shadow:0 0 0 12px #c5a05900}}
.ls-gate-word{position:absolute;top:50%;margin:0;transform:translateY(-50%);font:800 clamp(26px,3.7vw,60px)/1 var(--sans);letter-spacing:.18em;color:var(--ivory);text-shadow:0 0 40px #00000080;opacity:0;transition:opacity 1s .15s,transform 1.1s cubic-bezier(.2,.7,.1,1)}
.ls-gate-left{right:calc(50% + var(--r) * 1.72);margin-right:-.18em}
.ls-gate-right{left:calc(50% + var(--r) * 1.72);color:var(--gold)}
.ls-gate.is-ready .ls-gate-word{opacity:1}
.ls-gate.is-opening .ls-gate-left{opacity:0;transform:translate(-80px,-50%)}
.ls-gate.is-opening .ls-gate-right{opacity:0;transform:translate(80px,-50%)}
.ls-gate.is-opening .ls-gate-enter{opacity:0;animation:none}
@media(max-width:760px){
  .ls-gate-word{font-size:clamp(34px,11vw,52px);letter-spacing:.14em;left:50%;right:auto;margin-right:0;padding-left:.14em}
  .ls-gate-left{top:calc(50% - var(--r) * 1.85);transform:translate(-50%,-100%)}
  .ls-gate-right{top:calc(50% + var(--r) * 1.85);transform:translate(-50%,0)}
  .ls-gate.is-opening .ls-gate-left{transform:translate(-50%,-160%)}
  .ls-gate.is-opening .ls-gate-right{transform:translate(-50%,60%)}
}
.ls-gate-bottom{position:absolute;left:0;right:0;bottom:44px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;opacity:0;transition:opacity .8s .2s}
.ls-gate.is-ready .ls-gate-bottom{opacity:1}
.ls-gate-bottom p{font-size:11px;letter-spacing:.3em;color:#d9c6a3}
.ls-gate-quiet{background:none;border:0;border-bottom:1px solid #ffffff3a;color:#b9c5bb;font:500 12px var(--sans);letter-spacing:.08em;padding:8px 2px;cursor:pointer;min-height:44px}
.ls-gate-quiet:hover,.ls-gate-quiet:focus-visible{color:var(--ivory);border-color:var(--gold)}

/* Hero settles in after the gate opens */
.ls-revealing .hero-art{animation:lsSettle 2.2s cubic-bezier(.2,.7,.1,1) both}
.ls-revealing .hero-copy{animation:lsRise 1.6s .25s cubic-bezier(.2,.7,.1,1) both}
@keyframes lsSettle{from{transform:scale(1.12);filter:brightness(.4)}to{transform:none;filter:none}}
@keyframes lsRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- Sound toggle ---------- */
.ls-nav-end{display:flex;align-items:center;gap:26px}
.ls-sound{display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:var(--ivory);font:500 11px var(--sans);letter-spacing:.18em;cursor:pointer;min-height:44px;padding:0 2px}
.ls-sound:hover,.ls-sound:focus-visible{color:var(--gold)}
.ls-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.ls-bars i{width:2px;height:3px;background:var(--gold);transition:height .4s}
.ls-sound.is-on .ls-bars i{animation:lsBar 1s ease-in-out infinite alternate}
.ls-sound.is-on .ls-bars i:nth-child(2){animation-delay:-.4s}
.ls-sound.is-on .ls-bars i:nth-child(3){animation-delay:-.7s}
.ls-sound.is-on .ls-bars i:nth-child(4){animation-delay:-.2s}
@keyframes lsBar{from{height:3px}to{height:14px}}
@media(max-width:960px){.ls-nav-end{margin-left:auto;gap:18px}.nav .menu-toggle{margin-left:18px}}
@media(max-width:520px){.ls-sound-label{display:none}}

/* ---------- AIOS workflow scene ---------- */
.aios{position:relative;height:420vh;background:#060c0a;color:var(--ivory)}
.aios-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.aios-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.aios-sticky:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#060c0ae6 0%,#060c0a99 24%,transparent 46%)}
.aios-copy{position:absolute;z-index:2;left:var(--gutter);top:clamp(120px,17vh,180px);width:min(400px,34vw)}
.aios-copy h2{font-size:clamp(40px,4.2vw,66px);margin:22px 0 34px;color:var(--ivory)}
.aios-copy h2 em{color:var(--gold)}
.aios-stages{list-style:none;padding:0;margin:0;display:grid;gap:20px}
.aios-stages li{display:grid;grid-template-columns:34px 1fr;gap:6px;opacity:.3;transition:opacity .6s}
.aios-stages li.is-active{opacity:1}
.aios-stages span{font-family:var(--serif);font-size:18px;color:#8fa293;transition:color .6s}
.aios-stages li.is-active span{color:var(--gold)}
.aios-stages strong{display:block;font-weight:500;font-size:15px;margin-bottom:4px}
.aios-stages p{font-size:13px;line-height:1.6;color:#b7c4b9}
.aios-hud{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:28px;display:flex;align-items:flex-end;gap:clamp(22px,4vw,64px);padding-top:18px;border-top:1px solid var(--line)}
.aios-hud div span{display:block;font-size:11px;letter-spacing:.2em;color:#93a597}
.aios-hud div b{display:block;font:400 34px/1.1 var(--serif);color:var(--ivory);font-variant-numeric:tabular-nums;margin-top:6px}
.aios-hud div:nth-child(3) b{color:var(--gold)}
.aios-hud p{margin-left:auto;font-size:11px;letter-spacing:.06em;color:#8a9b8e;max-width:24ch;text-align:right}

@media(max-width:760px){
  .aios-sticky:after{background:linear-gradient(180deg,#060c0af2 0%,#060c0acc 26%,transparent 44%)}
  .aios-copy{top:100px;right:var(--gutter);width:auto}
  .aios-copy h2{font-size:34px;margin:14px 0 16px}
  .aios-stages li{display:none}
  .aios-stages li.is-active{display:grid}
  .aios-hud{bottom:16px;gap:14px;flex-wrap:wrap;padding-top:12px}
  .aios-hud div{flex:1 1 20%}
  .aios-hud div span{font-size:11px;letter-spacing:.08em}
  .aios-hud div b{font-size:24px}
  .aios-hud p{flex-basis:100%;text-align:left;max-width:none}
}

/* No JavaScript or reduced motion: a single static frame */
html:not(.ls-js) .aios,.aios.is-static{height:auto}
html:not(.ls-js) .aios-sticky,.aios.is-static .aios-sticky{position:relative;min-height:100svh}
html:not(.ls-js) .aios-stages li,.aios.is-static .aios-stages li{opacity:1;display:grid}

/* ---------- Founder portrait: full body ---------- */
.founder-portrait{aspect-ratio:941/1672;max-width:440px}
.founder-portrait>img{object-position:center bottom}

/* Now playing (recorded playlist) */
.ls-now{font-size:11px;letter-spacing:.06em;color:#b9c5bb;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:-14px}
.ls-skip{background:none;border:1px solid #ffffff2e;border-radius:4px;color:var(--ivory);font:500 12px/1 var(--sans);width:30px;height:26px;cursor:pointer;margin-left:-14px}
.ls-skip:hover,.ls-skip:focus-visible{border-color:var(--gold);color:var(--gold)}
@media(max-width:1100px){.ls-now{display:none}}

/* Intro film (plays after Play, then the iris opens into the site) */
.ls-gate-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050a08;opacity:0;pointer-events:none;transition:opacity 1.2s ease}
.ls-gate.is-film .ls-gate-video{opacity:1}
.ls-gate.is-film .ls-gate-word,.ls-gate.is-film .ls-gate-enter,.ls-gate.is-film .ls-gate-bottom,.ls-gate.is-film .ls-gate-load{opacity:0;pointer-events:none;animation:none}
.ls-gate.is-film .ls-gate-left{transform:translate(-80px,-50%)}
.ls-gate.is-film .ls-gate-right{transform:translate(80px,-50%)}
.ls-gate-top{z-index:2}
.ls-gate-skip{position:absolute;z-index:3;right:var(--gutter);bottom:40px;background:#050a0899;border:1px solid #ffffff40;border-radius:999px;color:var(--ivory);font:500 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;min-height:44px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .3s,color .3s}
.ls-gate-skip:hover,.ls-gate-skip:focus-visible{border-color:var(--gold);color:var(--gold)}
.ls-gate-skip[hidden]{display:none}
@media(max-width:760px){
  .ls-gate.is-film .ls-gate-left{transform:translate(-50%,-160%)}
  .ls-gate.is-film .ls-gate-right{transform:translate(-50%,60%)}
  .ls-gate-skip{bottom:28px}
}

/* ---------- Home intro film (replaces the intro gate, Oct 20) ---------- */
.film{position:relative;height:190vh;background:#050a08}
.film-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;will-change:transform,filter;background:#050a08}
.film-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 45%,#050a0899 100%),linear-gradient(180deg,#050a0899 0,transparent 22%,transparent 72%,#050a08 100%)}
.film-title{position:absolute;inset:0;margin:0;pointer-events:none;animation:filmIn 1.8s .5s cubic-bezier(.2,.7,.1,1) both}
@keyframes filmIn{from{opacity:0;filter:blur(10px);transform:scale(.97)}to{opacity:1;filter:none;transform:none}}
.film-left,.film-right{position:absolute;top:50%;translate:0 -50%;font:700 clamp(48px,6.6vw,128px)/.9 var(--sans);letter-spacing:-.055em;text-transform:uppercase;color:var(--ivory);text-shadow:0 4px 40px #000c;white-space:nowrap;will-change:transform,opacity}
.film-left{right:calc(50% + 14.6vw)}
.film-right{left:calc(50% + 14.6vw);color:var(--gold)}
.film-cue{position:absolute;left:50%;bottom:34px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#cfd8cf}
.film-cue span{width:1px;height:54px;background:linear-gradient(var(--gold),transparent);animation:filmDrip 2.4s cubic-bezier(.2,.7,.1,1) infinite}
@keyframes filmDrip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:760px){
  .film{height:170vh}
  .film-left,.film-right{font-size:clamp(44px,15vw,76px);left:50%;right:auto}
  .film-left{top:22%;translate:-50% -50%}
  .film-right{top:78%;translate:-50% -50%}
  .film-cue{bottom:22px}
}
.film.is-static{height:100vh}
.film.is-static .film-title,.film.is-static .film-cue span{animation:none}
@media(prefers-reduced-motion:reduce){.film{height:100vh}.film-title,.film-cue span{animation:none}}
.film-sound{position:absolute;z-index:3;left:var(--gutter);bottom:34px;display:inline-flex;align-items:center;gap:12px;background:#050a0880;border:1px solid #ffffff38;border-radius:999px;color:var(--ivory);font:500 12px var(--sans);letter-spacing:.08em;padding:11px 18px;min-height:44px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .3s,color .3s;animation:filmIn 1.6s 1.4s both}
.film-sound b{font-weight:500}
.film-sound:hover,.film-sound:focus-visible{border-color:var(--gold);color:var(--gold)}
.film-sound.is-on .ls-bars i{animation:lsBar 1s ease-in-out infinite alternate}
.film-sound.is-on .ls-bars i:nth-child(2){animation-delay:-.4s}.film-sound.is-on .ls-bars i:nth-child(3){animation-delay:-.7s}.film-sound.is-on .ls-bars i:nth-child(4){animation-delay:-.2s}
@media(max-width:760px){.film-sound{left:50%;translate:-50% 0;bottom:86px}}
/* LS mark pinned to the film's glowing core */
.film-stage{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform,filter}
.film-stage .film-video{will-change:auto}
.film-logo{position:absolute;object-fit:contain;opacity:0;transform:scale(.7);filter:drop-shadow(0 2px 2px #000000f2) drop-shadow(0 5px 12px #000000d9) drop-shadow(0 0 10px #c5a05980) drop-shadow(0 0 26px #00a6d64d);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.7,.1,1);pointer-events:none}
.film-logo.is-on{opacity:1;transform:none;animation:lsLogoGlow 3.2s ease-in-out 1.8s infinite}
@keyframes lsLogoGlow{50%{filter:drop-shadow(0 2px 2px #000000f2) drop-shadow(0 5px 12px #000000d9) drop-shadow(0 0 16px #c5a059b3) drop-shadow(0 0 36px #00a6d666)}}
@media(prefers-reduced-motion:reduce){.film-logo.is-on{animation:none}}

/* Oct 23: shorter scroll through the AIOS scene (was 420vh / 4.2 screens). Stages are progress-based, so all four still play in order. */
.aios{height:250vh}
@media(max-width:760px){.aios{height:210vh}}