/* SERADON
   Teralis ground and paper, one signal colour, and glass. The hero is always
   dark; everything below it follows the reader's own colour scheme. */

/* The wordmark face. Self hosted like every other font here, because the no
   third party requests rule applies to type. Kode Mono is a monospace, which is
   the whole point of it as a wordmark: every glyph on the same advance makes
   SERADON read as a machine readout rather than a logotype. It sets loose by
   default, so the tracking below is negative. */
@font-face {
  font-family: 'Kode Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/kode-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Kode Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/kode-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens -- */
/* Two fixed colours, and a scheme that picks which is the ground and which is
   the ink. Alphas are built from the rgb triplets so one rule serves both.

   The ground is a true neutral. It used to be the Teralis #1E211F, which has
   green as its top channel by three over red: ambient and unnoticeable as a
   page background, but a visible cast the moment anything scales it up, and a
   plainly green block once it is baked into a favicon. #202020 is the neutral
   grey of the same relative luminance, so the page holds its exact weight and
   only loses the hue. The parent site has since had the same change, so the
   two are back in step. */
:root{
  --ground:#202020;
  --paper:#F0EDE5;
  --ground-rgb:32,32,32;
  --paper-rgb:240,237,229;

  --bg:var(--paper);
  --bg-rgb:var(--paper-rgb);
  --fg:var(--ground);
  --fg-rgb:var(--ground-rgb);

  /* One accent, used only where the system is asserting something: a lock, a
     contact, the current index. Never decoration. */
  --sig:#E2503C;
  --sig-60:rgba(226,80,60,.6);

  --display:'Anybody','Helvetica Neue',Arial,sans-serif;
  --mono:'Martian Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --mark:'Kode Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --gut:clamp(22px,5vw,80px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:var(--ground); --bg-rgb:var(--ground-rgb);
    --fg:var(--paper);  --fg-rgb:var(--paper-rgb);
  }
}
/* Anything that is dark whatever the scheme says: the hero, the boot screen,
   and the header while it is over the hero. */
.dark,.hero,.boot,.hdr[data-over="hero"]{
  --bg:var(--ground); --bg-rgb:var(--ground-rgb);
  --fg:var(--paper);  --fg-rgb:var(--paper-rgb);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.srd{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
#srd-mark path{fill:currentColor}

/* ---------------------------------------------------------------- header -- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.15rem var(--gut); color:var(--fg);
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr[data-stuck]{
  background:rgba(var(--bg-rgb),.66); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(var(--fg-rgb),.09);
}
.hdr__brand{display:flex; align-items:center; gap:.62rem}
.hdr__mark{width:17px; height:17px; display:block}
.hdr__word{font-family:var(--mark); font-weight:500; font-size:.84rem; letter-spacing:-.03em}
.hdr__nav{display:flex; gap:1.5rem}
.hdr__nav a{color:rgba(var(--fg-rgb),.4); transition:color .18s var(--ease)}
.hdr__nav a:hover{color:var(--fg)}
.hdr__back{display:flex; align-items:center; gap:.45rem; color:rgba(var(--fg-rgb),.4);
  transition:color .18s var(--ease)}
.hdr__back:hover{color:var(--fg)}
@media (max-width:760px){ .hdr__nav{display:none} }

/* ------------------------------------------------------------------ boot -- */
.boot{
  position:fixed; inset:0; z-index:60; background:var(--ground); color:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
  transition:opacity .7s var(--ease),visibility .7s;
}
.boot[data-done]{opacity:0; visibility:hidden}
.boot__mark{width:42px; height:42px; color:rgba(var(--paper-rgb),.3);
  animation:bootpulse 2.4s var(--ease) infinite}
@keyframes bootpulse{0%,100%{opacity:.3}50%{opacity:1}}
.boot__bar{width:min(190px,40vw); height:1px; background:rgba(var(--paper-rgb),.16); overflow:hidden}
.boot__bar i{display:block; height:100%; width:0; background:var(--paper); transition:width .25s linear}
.boot__pct{font-size:.6rem; letter-spacing:.2em; color:rgba(var(--paper-rgb),.3)}
.boot__pct::after{content:'%'}

/* ------------------------------------------------------------------ hero -- */
.hero{
  position:relative; height:100vh; height:100svh; min-height:540px; overflow:hidden;
  background:var(--ground); color:var(--paper);
}
.hero__gl,.hero__hud{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero__hud{z-index:2; pointer-events:none}
.hero__gl{opacity:0; transition:opacity 1.1s var(--ease)}
.hero[data-live] .hero__gl{opacity:1}
/* Keeps the corners from competing with the type. */
.hero__vig{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 84% 72% at 50% 50%,transparent 44%,rgba(32,32,32,.58) 100%)}
.hero__fade{position:absolute; inset:0; z-index:3; pointer-events:none; background:var(--ground); opacity:1}

.hero__copy{
  position:absolute; inset:0; z-index:4; padding:0 var(--gut);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; pointer-events:none;
}
/* A soft pool of dark behind the wordmark, so an aircraft going through the
   frame never takes the letters with it. Slight on purpose. */
.hero__copy::before{
  content:''; position:absolute; left:50%; top:50%; z-index:-1;
  width:min(78vw,960px); height:min(54vh,460px); transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(32,32,32,.6) 0%,rgba(32,32,32,.28) 42%,rgba(32,32,32,0) 72%);
  filter:blur(14px);
}
.hero__mark{width:clamp(42px,6vw,64px); height:auto; margin-bottom:1.8rem;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.45))}
.hero__word{
  margin:0; font-family:var(--mark); font-weight:500;
  font-size:clamp(2.4rem,9vw,7.6rem); line-height:.9; letter-spacing:-.03em;
  text-transform:uppercase;
  text-shadow:0 2px 26px rgba(0,0,0,.5),0 0 2px rgba(0,0,0,.35);
}
.hero__line{
  margin:1.8rem 0 0; color:rgba(var(--paper-rgb),.74); max-width:36ch;
  font-size:clamp(.72rem,1.4vw,.9rem); letter-spacing:.02em; line-height:1.7;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.hero__status{
  position:absolute; left:var(--gut); bottom:calc(4.6vh + 1px); z-index:4; margin:0;
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--paper-rgb),.42);
}
.hero__status span{color:rgba(var(--paper-rgb),.2); margin:0 .3em}
.hero__scroll{
  position:absolute; left:50%; bottom:4.6vh; z-index:4; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.55rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(var(--paper-rgb),.3);
}
.hero__scroll i{display:block; width:1px; height:30px;
  background:linear-gradient(rgba(var(--paper-rgb),.3),transparent);
  animation:scrolldrip 2.6s var(--ease) infinite}
@keyframes scrolldrip{0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  50.1%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){
  .hero__scroll{display:none}
  .hero__line{max-width:26ch}
}

/* ------------------------------------------------------------------- doc -- */
.doc{position:relative; z-index:2; background:var(--bg); color:var(--fg)}
.doc__intro{max-width:66rem; padding:clamp(4.5rem,11vh,8rem) var(--gut) clamp(1rem,4vh,3rem)}
.doc__idx{
  display:block; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sig); margin-bottom:1.4rem;
}
.doc__h{
  margin:0 0 1.6rem; font-family:var(--display);
  font-variation-settings:'wght' 700,'wdth' 100;
  font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:1.02; letter-spacing:-.03em; max-width:22ch;
}
.doc__p{margin:0; color:rgba(var(--fg-rgb),.74); font-size:.84rem; line-height:1.95; max-width:60ch}
.doc__p + .doc__p{margin-top:1.2rem}
.doc__status{
  margin:1.6rem 0 0; padding-left:1rem; border-left:1px solid var(--sig-60);
  color:rgba(var(--fg-rgb),.5); font-size:.72rem; line-height:1.9; max-width:58ch;
}
.doc__outro{max-width:66rem; padding:clamp(3rem,8vh,6rem) var(--gut) clamp(4rem,10vh,7rem)}

/* ---------------------------------------------------------------- studio -- */
.studio{position:relative; height:calc((var(--n) + 1) * 100vh)}
.studio__pin{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;
}
.studio__pin.is-drag{cursor:grabbing}
.studio__gl{position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity .9s var(--ease)}
.studio__pin[data-live] .studio__gl{opacity:1}
.studio__hint{
  position:absolute; left:50%; top:4.4rem; transform:translateX(-50%); z-index:5;
  font-size:.54rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(var(--fg-rgb),.32);
  transition:opacity .5s var(--ease); pointer-events:none;
}
.studio__hint[data-hidden]{opacity:0}

/* callouts */
.studio__co{position:absolute; inset:0; z-index:3; pointer-events:none}
.co__lines{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible}
.co__line{fill:none; stroke:rgba(var(--fg-rgb),.42); stroke-width:1; vector-effect:non-scaling-stroke}
.co__dot{fill:var(--bg); stroke:rgba(var(--fg-rgb),.9); stroke-width:1.2}
.co__labels{position:absolute; inset:0}
.co{
  position:absolute; left:0; top:0; will-change:transform,opacity;
  display:flex; flex-direction:column; gap:.12rem; white-space:nowrap; line-height:1.25;
}
.co__t{font-family:var(--display); font-variation-settings:'wght' 600,'wdth' 100;
  font-size:.82rem; letter-spacing:-.01em}
.co__s{font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(var(--fg-rgb),.48)}

/* the copy panel */
.studio__panel{
  position:absolute; left:var(--gut); top:0; bottom:0; z-index:4; width:min(24rem,30vw);
  display:flex; align-items:center; pointer-events:none;
}
.studio__panel .beat{
  position:absolute; left:0; right:0; top:50%; opacity:0; will-change:opacity,transform;
  transform:translateY(-50%) translate3d(0,var(--rise,0px),0);
}
.beat__idx{
  display:block; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sig); margin-bottom:1.3rem;
}
.beat__h{
  margin:0 0 1.2rem; font-family:var(--display);
  font-variation-settings:'wght' 700,'wdth' 100;
  font-size:clamp(1.4rem,2.5vw,2.05rem); line-height:1.08; letter-spacing:-.025em;
}
.beat__p{margin:0; color:rgba(var(--fg-rgb),.74); font-size:.76rem; line-height:1.95}
.beat__note{
  margin:1.3rem 0 0; padding-left:1rem; border-left:1px solid var(--sig-60);
  color:rgba(var(--fg-rgb),.5); font-size:.68rem; line-height:1.85;
}
.pull{
  margin:1.5rem 0 0; padding:.2rem 0 .2rem 1.2rem;
  border-left:1px solid rgba(var(--fg-rgb),.3);
  color:rgba(var(--fg-rgb),.62); font-size:.7rem; line-height:1.9;
}

/* Narrow: the model takes the upper part of the frame, the copy the lower,
   and the callout column narrows to short labels. */
@media (max-width:1000px){
  .studio__panel{
    left:var(--gut); right:var(--gut); top:auto; bottom:0; width:auto; height:44%;
    align-items:flex-start; padding-top:.6rem;
    background:linear-gradient(rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.9) 22%,var(--bg) 60%);
  }
  .studio__panel .beat{top:1.6rem; transform:translate3d(0,var(--rise,0px),0)}
  .beat__idx{margin-bottom:.8rem}
  .beat__h{font-size:1.25rem; margin-bottom:.7rem}
  .beat__p{font-size:.68rem; line-height:1.8}
  .beat__note{font-size:.62rem; margin-top:.8rem}
  .pull{display:none}
  .co__t{font-size:.68rem}
  .co__s{display:none}
  .co{max-width:118px; overflow:hidden; text-overflow:ellipsis}
  .studio__hint{top:3.9rem}
}
@media (max-width:1000px) and (max-height:700px){
  .beat__p{display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden}
}

/* ---------------------------------------------------------------- footer -- */
.end{
  position:relative; z-index:3; background:var(--bg); color:var(--fg);
  border-top:1px solid rgba(var(--fg-rgb),.09);
  padding:2.2rem var(--gut); display:flex; align-items:center; gap:1.6rem;
  flex-wrap:wrap; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
}
.end__brand{display:flex; align-items:center; gap:.55rem}
.end__brand svg{width:14px; height:14px}
.end__brand span{font-family:var(--mark); font-weight:500; letter-spacing:-.03em}
.end__note{color:rgba(var(--fg-rgb),.4); text-transform:none; letter-spacing:.02em; font-size:.66rem}
.end__back{margin-left:auto; color:rgba(var(--fg-rgb),.4); transition:color .18s var(--ease)}
.end__back:hover{color:var(--fg)}

/* -------------------------------------------------------------- fallback -- */
/* No WebGL, or the model did not load: a readable document. */
.srd--flat .hero__gl,.srd--flat .hero__hud,.srd--flat .hero__fade,
.srd--flat .studio__gl,.srd--flat .studio__co,.srd--flat .studio__hint{display:none}
.srd--flat .studio{height:auto}
.srd--flat .studio__pin{position:static; height:auto; overflow:visible; cursor:auto}
.srd--flat .studio__panel{position:static; width:auto; display:block; height:auto;
  padding:0 var(--gut); background:none; max-width:66rem}
.srd--flat .studio__panel .beat{position:static; opacity:1!important; transform:none!important;
  padding:2.5rem 0; border-top:1px solid rgba(var(--fg-rgb),.09)}

@media (prefers-reduced-motion:reduce){
  .boot__mark,.hero__scroll i{animation:none}
}