/* WATERLINE — The Other Side of Morning */
:root{
  --black:#071014; --current:#102B35; --salt:#E9E4DA;
  --coral:#FF4E32; --gold:#F2A93B; --grey:#68747A;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--black);color:var(--salt);
  font-family:"Instrument Sans","Inter",-apple-system,"Helvetica Neue",sans-serif;
  overflow:hidden;-webkit-font-smoothing:antialiased;cursor:default}
.act{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}

/* ---------- ACT 0: title ---------- */
#act-title{z-index:40;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(16,43,53,.55), rgba(7,16,20,0) 55%),
    radial-gradient(70% 55% at 50% 42%, rgba(20,38,48,.35), rgba(7,16,20,0) 70%),
    var(--black);
  animation:introbreathe 9s ease-in-out infinite}
@keyframes introbreathe{0%,100%{background-color:#071014}50%{background-color:#081319}}
#act-title::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,4,.55) 100%)}
#intro-grain{position:fixed;inset:0;width:100%;height:100%;z-index:41;
  pointer-events:none;opacity:.85}
#title-wrap{text-align:center;transform-origin:50% 62%;will-change:transform}
#title-text{font-weight:600;letter-spacing:.26em;font-size:clamp(12px,2.2vw,30px);
  color:var(--salt);opacity:0;filter:blur(10px);text-indent:.26em;max-width:94vw;margin:0 auto;
  text-shadow:0 0 22px rgba(233,228,218,.22), 0 0 60px rgba(233,228,218,.10);
  animation:gateweave 7.3s ease-in-out infinite}
@keyframes gateweave{
  0%,100%{transform:translate(0,0)}
  23%{transform:translate(.5px,-.4px)}
  47%{transform:translate(-.4px,.5px)}
  71%{transform:translate(.3px,.3px)}}
#intro-horizon{position:absolute;left:8%;right:8%;bottom:11%;height:1px;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,78,50,0), rgba(255,120,70,.28) 35%, rgba(242,169,59,.34) 50%, rgba(255,120,70,.28) 65%, rgba(255,78,50,0));
  filter:blur(1.4px);opacity:.5;animation:horizonpulse 11s ease-in-out infinite}
@keyframes horizonpulse{0%,100%{opacity:.32}50%{opacity:.6}}
#type-line{margin-top:34px;height:44px;display:flex;align-items:center;justify-content:center;gap:14px}
#dots{font-size:clamp(20px,3vw,30px);letter-spacing:.5em;color:var(--salt)}
#droplet{position:relative;width:30px;height:30px;display:none;cursor:pointer;
  background:url('img/droplet.png') center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(140,190,215,.5)) drop-shadow(0 0 26px rgba(242,169,59,.28));
  animation:blink 1s steps(1) infinite}
#droplet-sun,.sd-sun,.rd-sun{display:none}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
#droplet.alive{opacity:1;animation:jelly .74s ease-in-out infinite}
@keyframes jelly{0%,100%{transform:scale(1,1)}30%{transform:scale(1.05,.95)}
  55%{transform:scale(.955,1.045)}78%{transform:scale(1.02,.985)}}
#zoomfx{position:fixed;inset:0;width:100%;height:100%;z-index:45;
  pointer-events:none;display:none}
#click-hint{margin-top:26px;font-size:11px;letter-spacing:.28em;text-transform:lowercase;
  color:var(--grey);opacity:0;transition:opacity 1.6s}

/* ---------- ACT 2: whiteout ---------- */
#whiteout{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:60}

/* ---------- ACT 3/4: space — the three paths ---------- */
#space{position:fixed;inset:0;width:100%;height:100%;display:none;z-index:30}
#space-ui{position:fixed;inset:0;display:none;z-index:31;pointer-events:none}
.path-light{position:absolute;width:46px;height:46px;margin:-23px;border-radius:50%;
  pointer-events:auto;cursor:pointer;opacity:0;
  background:url('img/droplet.png') center/contain no-repeat;
  transition:opacity 4s ease, scale .9s cubic-bezier(.3,1.4,.4,1);
  will-change:transform}
.path-light::after{content:'';position:absolute;inset:-14px;border-radius:50%;
  opacity:.55;transition:opacity .8s;
  background:radial-gradient(circle, var(--pl-glow) 0%, transparent 62%)}
.path-light:hover{scale:1.22}
.path-light:hover::after{opacity:.95}
#path-home{left:50%;top:44%;--pl-glow:rgba(242,169,59,.55);
  filter:drop-shadow(0 0 14px rgba(242,169,59,.65)) sepia(.5) saturate(1.6) hue-rotate(-12deg);
  animation:swayA 9s ease-in-out infinite}
#path-e2{left:33%;top:58%;--pl-glow:rgba(140,220,190,.45);
  filter:drop-shadow(0 0 14px rgba(140,220,190,.55)) sepia(.35) saturate(1.2) hue-rotate(96deg);
  animation:swayB 11s ease-in-out infinite}
#path-e3{left:67%;top:60%;--pl-glow:rgba(255,110,130,.45);
  filter:drop-shadow(0 0 14px rgba(255,110,130,.55)) sepia(.4) saturate(1.5) hue-rotate(-46deg);
  animation:swayC 13s ease-in-out infinite}
/* lonely drift: after a long wait main.js adds .gather — the lights lean closer */
#space-ui.gather #path-home{translate:0 26px}
#space-ui.gather #path-e2{translate:34px -10px}
#space-ui.gather #path-e3{translate:-34px -12px}
.path-light{transition:opacity 4s ease, scale .9s cubic-bezier(.3,1.4,.4,1), translate 6s ease-in-out}
@keyframes swayA{0%,100%{transform:translate(0,0) rotate(-2.5deg)}
  50%{transform:translate(6px,-12px) rotate(2.5deg)}}
@keyframes swayB{0%,100%{transform:translate(0,0) rotate(2deg)}
  50%{transform:translate(-8px,-9px) rotate(-2deg)}}
@keyframes swayC{0%,100%{transform:translate(0,0) rotate(-1.5deg)}
  50%{transform:translate(7px,10px) rotate(2.5deg)}}
/* The lower two droplets are centred at 58% / 60% and carry a 14px glow ring past
   their 46px box, so anything before ~66% lands inside them. 74% clears the glow at
   every viewport height and gives the line the air it was asking for. */
#space-hint{position:absolute;left:50%;transform:translateX(-50%);top:74%;
  width:min(560px,86vw);text-align:center;font-size:11px;
  letter-spacing:.34em;color:var(--grey);opacity:0;transition:opacity 3s;text-transform:lowercase}

/* ---------- ACT 5: film ---------- */
#film{position:fixed;inset:0;display:none;z-index:20;background:#000}
#film-canvas{position:absolute;inset:0;width:100%;height:100%}
.lbar{position:absolute;left:0;right:0;background:#000;z-index:22;transition:height 1.4s cubic-bezier(.6,0,.3,1)}
#bar-top{top:0;height:0}#bar-bot{bottom:0;height:0}
#caption{position:absolute;left:26px;bottom:26px;z-index:23;font-size:10px;letter-spacing:.3em;
  color:var(--grey);text-transform:uppercase;opacity:.75;transition:opacity .6s}
#lyric{position:absolute;left:0;right:0;bottom:14%;z-index:23;text-align:center;
  font-size:clamp(14px,2.1vw,22px);letter-spacing:.14em;color:var(--salt);
  opacity:0;transition:opacity .35s ease;text-shadow:0 1px 18px rgba(0,0,0,.8)}
/* the waterline player — two-color spectrum mirrored around a living waterline */
#vu2{position:absolute;left:0;right:0;bottom:0;width:100%;height:44px;z-index:24;
  opacity:0;transition:opacity 1.2s;cursor:pointer;pointer-events:auto}
/* frame stepper — a small star of the droplet's kind, right edge */
#framestar{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:25;
  width:38px;display:flex;flex-direction:column;align-items:center;gap:2px;
  opacity:0;transition:opacity 1.2s;pointer-events:none}
#framestar.on{opacity:1;pointer-events:auto}
.fs-core{width:30px;height:30px;cursor:pointer;
  background:url('img/droplet.png') center/contain no-repeat;
  filter:drop-shadow(0 0 8px rgba(140,190,215,.55)) drop-shadow(0 0 20px rgba(242,169,59,.30));
  transition:filter .3s, transform .2s}
.fs-core:hover{transform:scale(1.15)}
#framestar.paused .fs-core{animation:fspulse 1.1s ease-in-out infinite}
@keyframes fspulse{0%,100%{filter:drop-shadow(0 0 8px rgba(140,190,215,.55)) drop-shadow(0 0 20px rgba(242,169,59,.30))}
  50%{filter:drop-shadow(0 0 14px rgba(140,190,215,.9)) drop-shadow(0 0 34px rgba(242,169,59,.6)) brightness(1.4)}}
.fs-zone{width:0;height:0;cursor:pointer;opacity:.55;transition:opacity .2s, transform .15s}
.fs-zone:hover{opacity:1;transform:scale(1.3)}
#fs-up{border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:9px solid var(--gold);filter:drop-shadow(0 0 6px rgba(242,169,59,.8))}
#fs-down{border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:9px solid var(--coral);filter:drop-shadow(0 0 6px rgba(255,78,50,.8))}
#clock{position:absolute;right:22px;top:22px;width:26px;height:26px;z-index:23;opacity:.18;
  border:1px solid var(--grey);border-radius:50%}
#clock-hand{position:absolute;left:50%;top:50%;width:1px;height:10px;background:var(--coral);
  transform-origin:50% 100%;margin:-10px 0 0 -0.5px}
#scrub-hint{position:absolute;right:26px;bottom:26px;z-index:23;font-size:10px;
  letter-spacing:.28em;color:var(--grey);text-transform:lowercase;opacity:0;transition:opacity 1.5s}
#skip-hint{position:absolute;right:26px;bottom:26px;z-index:23;font-size:10px;
  letter-spacing:.28em;color:var(--grey);text-transform:lowercase;opacity:0;transition:opacity 1.5s}

/* ---------- ACT 6: credits ---------- */
#act-credits{display:none;z-index:50;background:linear-gradient(180deg,#071014 0%, #102B35 55%, #2b2430 82%, #6a4638 100%);overflow:hidden}
#credits-inner{text-align:center;max-width:640px;padding:32px;animation:credfade 3s ease both}
@keyframes credfade{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
#cover{width:min(300px,58vw);border-radius:4px;box-shadow:0 24px 80px rgba(0,0,0,.6)}
#credits-word{margin-top:30px;font-size:clamp(26px,5vw,44px);font-weight:600;letter-spacing:.3em}
#credits-artist{margin-top:8px;font-size:12px;letter-spacing:.5em;color:var(--grey)}
#credits-ctas{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta{font:inherit;font-size:11px;letter-spacing:.24em;padding:14px 22px;border-radius:2px;
  border:1px solid var(--grey);background:transparent;color:var(--salt);cursor:pointer;
  text-decoration:none;transition:all .3s}
.cta:hover{border-color:var(--salt)}
.cta.primary{background:var(--coral);border-color:var(--coral);color:#fff}
.cta.primary:hover{box-shadow:0 0 30px rgba(255,78,50,.5)}
#credits-story{margin-top:36px;font-size:14px;line-height:1.8;color:#c9d2d6;font-weight:300}
#credits-universe{margin-top:18px;font-size:12px;letter-spacing:.3em;color:var(--gold);
  text-transform:lowercase;opacity:0;transition:opacity 4s ease}
#credits-line{margin-top:26px;font-size:11px;letter-spacing:.2em;color:var(--grey);line-height:2}
#credits-motto{color:var(--salt)}
#credits-return{position:absolute;right:30px;bottom:30px;width:20px;height:20px;opacity:0;
  background:url('img/droplet.png') center/contain no-repeat;
  filter:drop-shadow(0 0 8px rgba(140,190,215,.4));
  animation:blink 1s steps(1) infinite;cursor:pointer}

@media (prefers-reduced-motion: reduce){
  #droplet,#space-droplet,#credits-return{animation:none}
}

/* ---------- the sound switch: on top of every act, in every act's colours ----------
   difference blending so one icon reads on the black of space and the white of Act 2
   without ever needing a second state. */
#sfx-toggle{position:fixed;left:22px;top:22px;z-index:70;width:26px;height:26px;padding:0;
  border:0;background:transparent;color:#8d979d;cursor:pointer;opacity:.42;
  mix-blend-mode:difference;-webkit-tap-highlight-color:transparent;
  transition:opacity .5s ease,color .5s ease}
#sfx-toggle:hover{opacity:.95;color:var(--salt)}
#sfx-toggle:focus-visible{outline:1px solid var(--grey);outline-offset:4px;opacity:.95}
#sfx-toggle svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round}
#sfx-toggle .sfx-src{fill:currentColor;stroke:none}
#sfx-toggle .sfx-w1,#sfx-toggle .sfx-w2{transition:opacity .35s ease}
/* the slash draws itself across the waves when the world goes quiet */
#sfx-toggle .sfx-slash{stroke-dasharray:23;stroke-dashoffset:23;
  transition:stroke-dashoffset .38s cubic-bezier(.6,0,.3,1)}
#sfx-toggle.off{color:#a8583f;opacity:.7}
#sfx-toggle.off .sfx-w1,#sfx-toggle.off .sfx-w2{opacity:.16}
#sfx-toggle.off .sfx-slash{stroke-dashoffset:0}
@media (max-width:800px){#sfx-toggle{left:14px;top:14px;width:30px;height:30px;opacity:.5}}

/* ================= ACT −1: MUSIC AGENCIES — the gate =================
   Nothing here is a box. Every field is a line the carrier runs through. */
#gate{position:fixed;inset:0;z-index:80;display:none;flex-direction:column;
  align-items:center;justify-content:center;background:#050b0f;
  transition:opacity 1.3s ease,filter 1.3s ease}
#gate.out{opacity:0;filter:blur(6px);pointer-events:none}
#gate-field{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#gate-inner{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:clamp(26px,4.4vh,52px);padding:clamp(70px,9vh,110px) 24px}

#mark{margin:0;font-size:clamp(19px,3.5vw,34px);font-weight:500;letter-spacing:.42em;
  text-indent:.42em;line-height:1;color:var(--salt);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(6px);filter:blur(7px);
  transition:opacity 2.2s ease,transform 2.2s ease,filter 2.2s ease}
#mark.in{opacity:1;transform:none;filter:blur(0)}
/* the horizon cut from the brand bible, drawn as a gap the carrier passes through */
#markgap{display:inline-block;width:clamp(30px,5vw,58px);height:1px;margin:0 .1em 0 -.28em;
  background:linear-gradient(90deg,transparent,var(--coral),transparent);
  box-shadow:0 0 10px rgba(255,78,50,.7);flex:none}
#mark span{transition:transform .07s linear,color .07s linear}
#mark.glitch span:first-child{transform:translate(-2px,1px);color:#9ad}
#mark.glitch span:last-child{transform:translate(2px,-1px);color:#f97}

#whisper{margin:20px 0 0;font-size:11px;letter-spacing:.3em;text-transform:lowercase;
  color:var(--grey);min-height:1.2em;opacity:0;transition:opacity 1.4s ease;text-align:center}
#whisper.on{opacity:.85}

#gate-auth{width:min(430px,86vw);display:flex;flex-direction:column;gap:30px;
  opacity:0;transform:translateY(10px);transition:opacity 1.6s ease .5s,transform 1.6s ease .5s}
#gate-auth.in{opacity:1;transform:none}
#gate .row{position:relative;padding-top:15px}
#gate .row label{position:absolute;top:0;left:0;font-size:9px;letter-spacing:.34em;
  color:var(--grey);transition:color .5s ease}
#gate .row:focus-within label{color:var(--gold)}
#gate .row input{width:100%;background:transparent;border:0;outline:0;padding:6px 26px 9px 0;
  font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:15px;letter-spacing:.13em;
  color:var(--salt);caret-color:var(--coral)}
#gate .row input::placeholder{color:#2e3c43;letter-spacing:.2em}
/* the underline IS the signal: dim at rest, lit from the middle when addressed */
#gate .uline{position:absolute;left:0;right:0;bottom:0;height:1px;background:#1b2a31;display:block}
#gate .uline::after{content:'';position:absolute;inset:0;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,#8476ff 22%,var(--coral) 55%,var(--gold));
  box-shadow:0 0 12px rgba(255,78,50,.55);
  transition:transform .7s cubic-bezier(.6,0,.25,1),opacity .4s ease}
#gate .row:focus-within .uline::after{transform:scaleX(1)}
#gate .row.filled .uline::after{transform:scaleX(1);opacity:.5}
/* recognition: the system takes the name and audibly works out whether it knows you */
#gate .row.pulse .uline::after{transform:scaleX(1);animation:recog .62s ease-out}
#gate .row.known .uline::after{transform:scaleX(1);opacity:.85}
@keyframes recog{
  0%{opacity:.35;filter:brightness(1)}
  35%{opacity:1;filter:brightness(2.1)}
  100%{opacity:.5;filter:brightness(1)}}

#reveal{position:absolute;right:-4px;bottom:2px;width:26px;height:26px;padding:0;border:0;
  background:transparent;color:#33454d;cursor:pointer;font-size:12px;transition:color .4s ease}
#reveal:hover,#reveal.on{color:var(--gold)}

#go{position:relative;margin-top:8px;padding:15px 20px;border:1px solid #1e2f37;
  background:transparent;color:var(--salt);font-size:11px;letter-spacing:.42em;
  text-indent:.42em;cursor:pointer;overflow:hidden;
  transition:border-color .5s ease,color .5s ease,background .5s ease}
#go:hover{border-color:var(--coral);color:#fff}
#go span{position:relative;z-index:2}
#golight{position:absolute;left:0;top:0;bottom:0;width:100%;z-index:1;display:block;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,rgba(132,118,255,.16),rgba(255,78,50,.30));
  transition:transform .9s cubic-bezier(.6,0,.25,1)}
#go.armed #golight{transform:scaleX(1)}
#go.locked{border-color:var(--coral);background:rgba(255,78,50,.10);color:#fff}
#go[disabled]{cursor:progress;opacity:.7}

#gate-status{margin:2px 0 0;min-height:1.3em;font-family:var(--mono,ui-monospace,Menlo,monospace);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
  transition:color .4s ease}
#gate-status.bad{color:var(--coral)}
#gate-status.good{color:var(--gold)}

#carrier{display:flex;align-items:baseline;gap:8px;
  font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:11px;letter-spacing:.2em;
  color:#3d4d55;opacity:0;transition:opacity 1.8s ease 1.1s,color .8s ease}
#carrier.in{opacity:1}
#carrier.lock{color:var(--gold)}
#mhz{font-size:15px;color:#55666e;transition:color .8s ease}
#carrier.lock #mhz{color:var(--gold)}
#carrier .unit{font-size:9px}
#lockdot{width:5px;height:5px;border-radius:50%;background:#24343b;margin-left:6px;
  align-self:center;transition:background .5s ease,box-shadow .5s ease}
#carrier.lock #lockdot{background:var(--coral);box-shadow:0 0 9px var(--coral)}

#creed{margin:0;max-width:38ch;text-align:center;font-size:10px;line-height:2;
  letter-spacing:.16em;color:#33434a;opacity:0;transition:opacity 2s ease 1.6s}
#creed.in{opacity:1}

#foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:6px 26px;padding:16px clamp(18px,4vw,40px);
  font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:9.5px;letter-spacing:.18em;
  color:#2f3d44;pointer-events:none;border-top:1px solid rgba(104,116,122,.10)}
#foot .mod{color:#3a4950}
#foot time{color:var(--grey)}

/* ================= ACT 0a: the manifesto ================= */
#intro{position:fixed;inset:0;z-index:78;display:none;flex-direction:column;
  align-items:center;justify-content:center;padding:8vh 24px;
  transition:opacity 1.2s ease}
#intro.out{opacity:0;pointer-events:none}
#intro-stage{width:min(720px,88vw);text-align:center;opacity:0;
  transition:opacity 1.1s ease,transform 1.1s ease;transform:translateY(8px)}
#intro-stage.on{opacity:1;transform:none}
.beat-lead{font-size:9px;letter-spacing:.46em;text-indent:.46em;color:var(--coral);
  margin-bottom:26px;text-transform:uppercase}
.beat-line{margin:0 0 16px;font-size:clamp(14px,1.9vw,18px);line-height:1.95;
  letter-spacing:.055em;color:var(--salt);min-height:1.95em}
#intro-stage.big .beat-line{font-size:clamp(17px,2.9vw,28px);letter-spacing:.22em;
  line-height:2.1;color:#fff}
#intro-stage.big .beat-line:first-of-type{color:var(--gold);font-size:clamp(11px,1.4vw,13px);
  letter-spacing:.5em;text-indent:.5em;margin-bottom:30px}

/* the lesson: the film's own frame-stepper shapes, so the language transfers */
#scroll-lesson{position:absolute;left:50%;transform:translateX(-50%);bottom:9vh;
  width:min(560px,88vw);
  display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0;
  transition:opacity 1.6s ease;pointer-events:none}
#scroll-lesson.on{opacity:.9}
.sl-glyph{display:flex;flex-direction:column;align-items:center;gap:7px}
.sl-up,.sl-down{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}
.sl-up{border-bottom:7px solid var(--gold);filter:drop-shadow(0 0 5px rgba(242,169,59,.8))}
.sl-down{border-top:7px solid var(--coral);filter:drop-shadow(0 0 5px rgba(255,78,50,.8))}
.sl-thread{position:relative;width:1px;height:34px;background:linear-gradient(180deg,
  rgba(242,169,59,.35),rgba(255,78,50,.35));display:block}
.sl-thread i{position:absolute;left:-1.5px;width:4px;height:4px;border-radius:50%;
  background:var(--salt);box-shadow:0 0 8px var(--salt);animation:slride 2.6s ease-in-out infinite}
@keyframes slride{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:30px;opacity:0}}
#scroll-lesson p{margin:0;font-size:10px;letter-spacing:.3em;color:var(--grey);
  text-transform:lowercase;text-align:center;line-height:2}

#intro-epk{position:absolute;right:clamp(18px,4vw,40px);top:clamp(18px,4vh,34px);
  font-size:9px;letter-spacing:.34em;color:#3a4950;text-decoration:none;
  border-bottom:1px solid rgba(104,116,122,.25);padding-bottom:3px;transition:color .5s ease}
#intro-epk:hover{color:var(--gold)}
#intro-skip{position:absolute;left:50%;transform:translateX(-50%);bottom:5vh;font-size:9px;
  letter-spacing:.3em;color:var(--grey);text-transform:lowercase;opacity:0;
  transition:opacity 1.4s ease;pointer-events:none}

/* ================= ACT 0b: the catalogue ================= */
#works{position:fixed;inset:0;z-index:77;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(34px,6vh,64px);
  opacity:0;transition:opacity 1.4s ease}
#works.in{opacity:1}
#works.chosen{opacity:0}
.works-lead{margin:0;font-size:9px;letter-spacing:.5em;text-indent:.5em;color:#3a4950}
#works-row{display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(30px,7vw,88px);flex-wrap:wrap}
.work{display:flex;flex-direction:column;align-items:center;gap:16px;
  background:transparent;border:0;padding:0;text-align:center}
.work-ring{position:relative;width:96px;height:96px;border-radius:50%;display:block;
  overflow:hidden;border:1px solid rgba(104,116,122,.22)}
.work-ring img{width:100%;height:100%;object-fit:cover;opacity:.82}
.work.lit{cursor:pointer}
.work.lit .work-ring{border-color:rgba(242,169,59,.45);
  box-shadow:0 0 26px rgba(242,169,59,.30),inset 0 0 22px rgba(255,78,50,.20);
  transition:box-shadow .8s ease,transform .8s cubic-bezier(.3,1.4,.4,1)}
.work.lit:hover .work-ring{transform:scale(1.07);
  box-shadow:0 0 44px rgba(242,169,59,.5),inset 0 0 26px rgba(255,78,50,.30)}
.work.lit strong{font-size:12px;letter-spacing:.42em;text-indent:.42em;color:var(--salt);font-weight:500}
.work em{font-style:normal;font-size:9px;letter-spacing:.24em;color:#3a4950;text-transform:lowercase}
.work.empty{opacity:.5}
.work.empty .work-ring{border-style:dashed;border-color:rgba(104,116,122,.42);
  background:radial-gradient(circle,rgba(16,43,53,.55) 0%,transparent 72%)}
.work.empty em{text-transform:uppercase;letter-spacing:.3em;font-size:8px}

@media (max-width:560px){
  #mark{letter-spacing:.3em;text-indent:.3em}
  #foot{flex-direction:column;align-items:flex-start;font-size:9px;letter-spacing:.14em}
  .work-ring{width:74px;height:74px}
  #works-row{gap:26px}
}
@media (prefers-reduced-motion:reduce){
  .sl-thread i{animation:none;top:14px}
  #gate .row.pulse .uline::after{animation:none}
}

/* ---------- the gate is cold until it knows you ----------
   No colour is spent on a stranger. Grey signal, grey underlines, no way in — and then
   recognition lands and the room warms, goes quiet, and opens. */
#gate:not(.warm) #markgap{background:linear-gradient(90deg,transparent,#8d979d,transparent);
  box-shadow:0 0 8px rgba(141,151,157,.5)}
#gate:not(.warm) .uline::after{
  background:linear-gradient(90deg,transparent,#5d6f77 30%,#b6c1c6 55%,#5d6f77);
  box-shadow:0 0 10px rgba(141,151,157,.35)}
#gate:not(.warm) .row:focus-within label{color:#b6c1c6}
#gate:not(.warm) .row input{caret-color:#b6c1c6}
#gate:not(.warm) #gate-status.good{color:#cfd8dc}
#gate:not(.warm) #carrier.lock{color:#b6c1c6}
#gate:not(.warm) #carrier.lock #mhz{color:#b6c1c6}
#gate:not(.warm) #carrier.lock #lockdot{background:#b6c1c6;box-shadow:0 0 9px rgba(182,193,198,.7)}
#markgap,#gate .uline::after,#carrier,#mhz,#lockdot{
  transition:background 1.6s ease,box-shadow 1.6s ease,color 1.6s ease,transform .7s cubic-bezier(.6,0,.25,1),opacity .4s ease}

/* the room stops talking once it has recognised you */
#gate.hushed #whisper,#gate.hushed #creed{opacity:0;transition:opacity 1.1s ease}

/* and only then is there a way in */
#go{opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.6,0,.25,1),
             border-color .5s ease,color .5s ease,background .5s ease}
#gate.open #go{opacity:1;transform:none;pointer-events:auto}