/* TERRA — one planet, taken apart and put back together
   type: Fraunces (variable) + Space Grotesk · one accent · everything else is arithmetic */

@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-italic-var.woff2') format('woff2');
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('fonts/space-grotesk-var.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}

:root{
  --bg:#07070b;
  --ink:#e8e4da;
  --ink-dim:#8f8c84;
  --accent:#5b6bff;
  --serif:'Fraunces', Georgia, serif;
  --grot:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg)}
body{
  color:var(--ink);
  font-family:var(--grot);
  font-weight:340;
  line-height:1.6;
  overflow-x:hidden;
  cursor:auto;
}
@media (pointer:fine){html.webgl-ready body{cursor:none}}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:4px;border-radius:2px}

/* ---------- canvas ---------- */
#sky{
  position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;
  background:#07070b url("assets/poster.jpg") center/cover no-repeat;
}
body.webgl-lost{
  background:#07070b url("assets/poster.jpg") center/cover fixed no-repeat;
}
body.webgl-lost #sky{visibility:hidden}
.webgl-debug{
  position:fixed;z-index:99;inset:1rem;padding:1rem;overflow:auto;
  color:#f66;background:#000d;font-size:11px;white-space:pre-wrap;
}

/* ---------- accessible fallback copy ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
html:not(.js) .panel .sr-only,
body.webgl-lost .panel .sr-only{
  position:static;width:auto;height:auto;margin:0;overflow:visible;
  clip:auto;white-space:normal;
}
html:not(.js) .panel h2.sr-only,
body.webgl-lost .panel h2.sr-only{
  max-width:34rem;font-family:var(--serif);font-size:clamp(2rem,6vw,4rem);
  font-weight:520;line-height:1.05;
}
html:not(.js) .panel p.sr-only,
body.webgl-lost .panel p.sr-only{
  max-width:34rem;margin-top:1rem;color:var(--ink-dim);
}

/* film grain */
.grain{
  position:fixed;inset:-40px;z-index:3;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.06; mix-blend-mode:overlay;
  animation:grain 900ms steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-24px,14px)}
  66%{transform:translate(18px,-20px)} 100%{transform:translate(0,0)}
}

/* ---------- cursor ---------- */
.cursor{
  position:fixed;z-index:60;left:0;top:0;width:24px;height:24px;
  border:1.2px solid var(--ink);border-radius:50%;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;pointer-events:none;
  transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),opacity .3s;
  opacity:0;
}
html.webgl-ready body.cursor-on .cursor{opacity:1}
html.webgl-ready body.cursor-hot .cursor{width:58px;height:58px;background:rgba(255,255,255,.92)}
html.webgl-ready body.dragging .cursor{width:14px;height:14px;background:rgba(255,255,255,.92)}
@media (pointer:coarse){.cursor{display:none}}

/* ---------- masthead / fixed furniture ---------- */
.masthead{
  position:fixed;z-index:40;inset:0 0 auto 0;
  display:flex;align-items:baseline;gap:1.4rem;
  padding:1.15rem clamp(1.2rem,4vw,3rem);
  mix-blend-mode:difference;
}
.wordmark{
  font-family:var(--serif);
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;
  font-weight:600;letter-spacing:.26em;font-size:.95rem;
}
.clock{margin-left:auto;font-size:.64rem;letter-spacing:.3em;font-variant-numeric:tabular-nums;color:#c9c5bb}

.idx{
  position:fixed;z-index:40;right:clamp(1.2rem,4vw,3rem);bottom:3.4rem;
  font-size:.64rem;letter-spacing:.3em;color:var(--ink-dim);
  font-variant-numeric:tabular-nums;mix-blend-mode:difference;
}

/* ---------- panels & plaques ---------- */
main{position:relative;z-index:2;touch-action:pan-y pinch-zoom}
.panel{
  min-height:100svh;position:relative;
  display:grid;
  padding:clamp(5rem,12vh,9rem) clamp(1.2rem,5vw,4rem);
}
.panel.hero,.panel.colophon{align-items:center}
.plaque{max-width:26rem;margin-bottom:4vh}
.plaque-center{justify-self:center;text-align:center;max-width:46rem;margin-bottom:0}

.hero{min-height:106svh}
/* descent panels get extra height so transitions breathe */
.panel:not(.hero):not(.colophon){min-height:210svh}
.title{
  font-family:var(--serif);
  font-weight:560;
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;
  font-size:clamp(4.2rem,17vw,13rem);
  line-height:.92;letter-spacing:.045em;
  mix-blend-mode:difference;
}
.panel.colophon{align-items:end;justify-items:center}
.fin-line{
  font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
  color:#c9c5bb;margin-bottom:2.4rem;text-align:center;
  mix-blend-mode:difference;
}

/* ---------- reveals ---------- */
html.js .reveal{
  opacity:0;
  transform:translateY(1.8rem);
  clip-path:inset(0 0 14% 0);
  transition:opacity 1s var(--ease),transform 1s var(--ease),clip-path 1s var(--ease);
  transition-delay:var(--d,0s);
}
.in .reveal, .reveal.in{opacity:1;transform:none;clip-path:inset(0 0 0% 0)}

/* ---------- descend cue ---------- */
.descend{
  position:absolute;left:50%;bottom:4.2rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  min-width:44px;min-height:58px;justify-content:center;
  font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-dim);
}
.descend i{
  display:block;width:1px;height:58px;
  pointer-events:none;
  background:linear-gradient(var(--accent), transparent);
  animation:fall 2.2s var(--ease) infinite;
  transform-origin:top;
}
@keyframes fall{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

.nojs{
  position:fixed;inset:auto 1rem 1rem;z-index:70;padding:1rem 1.2rem;
  background:#12121c;border:1px solid #26263a;font-size:.8rem;color:var(--ink-dim);
}

/* screenshot/test hook */
html.shot{scroll-behavior:auto}
html.shot .reveal{transition:none;opacity:1;transform:none;clip-path:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .grain,.descend i{animation:none}
  html.js .reveal{transition:opacity .6s ease;transform:none;clip-path:none}
  .cursor{display:none}
  html.webgl-ready body{cursor:auto}
}

@media (max-width:640px){
  .idx{bottom:2.8rem}
  .plaque{margin-bottom:2.5rem}
}