/* ASTROLABE — the loud one.
   Near black void, one hot brass accent, the instrument lit in the middle of
   it. Everything here is in service of the first three seconds. */

@font-face{font-family:Recia;src:url(fonts/recia-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Recia;src:url(fonts/recia-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Recia;src:url(fonts/recia-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Tabular;src:url(fonts/tabular-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Tabular;src:url(fonts/tabular-500.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  --void:#07070A;
  --ink:#F2EBDD;
  --brass:#E9A33A;
  --dim:rgba(242,235,221,.5);
  --serif:Recia,Georgia,serif;
  --mono:Tabular,ui-monospace,monospace;
  --gut:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
html,body{overflow-x:clip}
html{scrollbar-width:none}
::-webkit-scrollbar{width:0;height:0}
body{
  margin:0;background:var(--void);color:var(--ink);
  font:400 clamp(15px,1.05vw,17px)/1.62 var(--serif);
  -webkit-font-smoothing:antialiased;
}
h1,h2,p,ul{margin:0}
a{color:var(--brass)}

/* ---------- the canvas sits behind everything ------------------- */

#stage{
  position:fixed;inset:0;width:100vw;height:100vh;
  display:block;z-index:0;
}

/* ---------- grain, vignette, cursor ----------------------------- */

.grain{
  position:fixed;inset:-120%;z-index:6;pointer-events:none;
  opacity:.055;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,.55) 100%);
}
.cursor{
  position:fixed;left:0;top:0;z-index:9;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),opacity .3s ease;
  opacity:0;
}
.cursor i{
  display:block;width:100%;height:100%;
  border:1px solid var(--brass);border-radius:50%;
}
.cursor.on{opacity:1}
.cursor.grab{transform:scale(1.9)}
@media (hover:none){.cursor{display:none}}

/* ---------- loader ---------------------------------------------- */

.loader{
  position:fixed;inset:0;z-index:20;background:var(--void);
  display:grid;place-items:center;
  transition:opacity 1s ease,visibility 1s;
}
.loader.gone{opacity:0;visibility:hidden}
.loader-in{width:min(560px,84vw);text-align:left}
.loader-word{
  font:400 clamp(30px,6vw,64px)/1 var(--serif);
  letter-spacing:.16em;
}
.loader-num{
  margin-top:26px;
  font:400 clamp(48px,11vw,120px)/1 var(--mono);
  color:var(--brass);font-variant-numeric:tabular-nums;
}
.loader-num i{font-style:normal;font-size:.3em;opacity:.6;margin-left:.15em}
.loader-bar{margin-top:22px;height:1px;background:rgba(242,235,221,.18)}
.loader-bar span{display:block;height:1px;width:0;background:var(--brass)}
.loader-sub{
  margin-top:18px;font:400 11px/1.6 var(--mono);
  letter-spacing:.22em;color:var(--dim);
}

/* ---------- the acts -------------------------------------------- */

#scroller{position:relative;z-index:2}
.act{
  min-height:100svh;
  display:grid;align-items:center;
  padding:12vh 0;
}
.wrap{
  width:min(1320px,100% - var(--gut)*2);margin-inline:auto;
}
.wrap > *{max-width:46ch}
.wrap.right{margin-left:auto;margin-right:0;padding-right:var(--gut);
  width:min(1320px,100% - var(--gut)*2);display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.wrap.right > *{max-width:46ch}

.act-title .wrap > *{max-width:none}
.act-title h1{max-width:9ch}
h1{
  font:400 clamp(44px,7vw,104px)/.95 var(--serif);
  letter-spacing:-.03em;max-width:12ch;
}
h2{
  font:400 clamp(32px,5.4vw,86px)/1 var(--serif);
  letter-spacing:-.025em;max-width:14ch;margin-bottom:.5em;
}
.num{
  font:400 11px/1 var(--mono);letter-spacing:.3em;color:var(--brass);
  margin-bottom:22px;
}
.say{margin-top:1.4em;color:var(--ink);max-width:44ch}
.say.small{color:var(--dim);font-size:.92em}
.act-title .say{margin-top:2.2em;max-width:46ch}
.eqn{
  margin-top:1.6em;font:400 clamp(20px,2.2vw,30px)/1.2 var(--mono);
  color:var(--brass);letter-spacing:.02em;
}
.parts{list-style:none;padding:0;margin-top:2em;border-top:1px solid rgba(242,235,221,.16)}
.parts li{
  display:flex;gap:20px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid rgba(242,235,221,.16);
}
.parts b{font:500 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);min-width:7em}
.parts span{color:var(--dim);font-size:.94em}
.stars{
  margin-top:2em;font:400 12px/2.1 var(--mono);letter-spacing:.16em;
  color:var(--dim);text-transform:uppercase;max-width:40ch;
}
.stars b{color:var(--ink);font-weight:400}
.colophon{
  margin-top:3em;font:400 12px/1.9 var(--mono);letter-spacing:.1em;color:var(--dim);
}
.scrollhint{
  margin-top:4.5em;font:400 11px/1 var(--mono);letter-spacing:.34em;color:var(--brass);
}
.scrollhint span{position:relative;display:inline-block;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}

/* per character entrance, set by the script */
.split .ch{
  display:inline-block;
  transform:translateY(1.05em) rotate(3deg);
  opacity:0;
  transition:transform .95s cubic-bezier(.16,.9,.24,1),opacity .8s ease;
}
.split.in .ch{transform:none;opacity:1}
.fade{opacity:0;transform:translateY(22px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.16,.9,.24,1)}
.fade.in{opacity:1;transform:none}

/* ---------- sound ------------------------------------------------ */

.sound{
  position:fixed;right:var(--gut);top:26px;z-index:8;
  display:flex;align-items:center;gap:10px;
  background:none;border:0;cursor:pointer;padding:8px;
  font:400 11px/1 var(--mono);letter-spacing:.24em;color:var(--dim);
  text-transform:uppercase;
}
.sound:hover,.sound[aria-pressed="true"]{color:var(--brass)}
.eq{display:flex;gap:3px;align-items:flex-end;height:12px}
.eq i{width:2px;height:3px;background:currentColor;display:block}
.sound[aria-pressed="true"] .eq i{animation:eq .9s ease-in-out infinite}
.sound[aria-pressed="true"] .eq i:nth-child(2){animation-delay:.15s}
.sound[aria-pressed="true"] .eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}

:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

@media (max-width:820px){
  .wrap.right{align-items:flex-start;text-align:left;padding-right:0}
  .act{padding:14vh 0}
}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none;opacity:.03}
  .scrollhint span{animation:none}
  .split .ch{transform:none;opacity:1;transition:none}
  .fade{opacity:1;transform:none}
}