:root {
  --bg: #0B0B0B;
  --fg: #F2EFE8;
  --red: #7A1F12;
  --lit: #7A1F12; /* accents use the exact oxide red */
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --bar: 30px;
  --pad: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--bg); color: var(--fg);
  font: 500 10px/1.45 var(--mono); letter-spacing: .02em; text-transform: uppercase;
  -webkit-font-smoothing: antialiased; touch-action: none; cursor: default;
}
a { color: inherit; text-decoration: none; }
b { font-weight: 500; }
ol { list-style: none; }

/* ---------- layers ---------- */
#bg, .disc, #gl, main > section { position: fixed; inset: 0 0 var(--bar) 0; }
#bg { z-index: 0; width: 100%; height: calc(100% - var(--bar)); display: block; }
.disc { z-index: 1; opacity: 0; }
.disc svg { position: absolute; left: 50%; top: 42%; width: 60vh; height: 60vh; margin: -30vh 0 0 -30vh; fill: var(--red); will-change: transform; }
.disc__a { clip-path: inset(0 0 69% 0); } .disc__b { clip-path: inset(31% 0 31% 0); } .disc__c { clip-path: inset(69% 0 0 0); }
#gl { z-index: 2; width: 100%; height: calc(100% - var(--bar)); display: block; }
main > section { z-index: 3; pointer-events: none; }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 10; background: var(--red); color: #F2EFE8;
  display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center;
  clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.8, 0, .1, 1);
}
.loader.done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.mark { width: 92px; height: 92px; display: block; }
.loader__num { position: absolute; bottom: 20px; left: 0; right: 0; }

/* ---------- 01 hud ---------- */
.hud > * { position: absolute; transition: opacity .9s, transform .9s cubic-bezier(.2, .7, .1, 1); }
body:not(.is-on) .hud > * { opacity: 0; transform: translateY(10px); }
.hud > :nth-child(2) { transition-delay: .08s } .hud > :nth-child(3) { transition-delay: .16s }
.hud > :nth-child(4) { transition-delay: .24s } .hud > :nth-child(5) { transition-delay: .3s }
.hud > :nth-child(6) { transition-delay: .38s } .hud > :nth-child(7) { transition-delay: .46s }
.hud > :nth-child(8) { transition-delay: .6s } .hud > :nth-child(9) { transition-delay: .7s }

.hud__map {
  left: var(--pad); top: var(--pad); width: 28vw; height: 15vh; overflow: hidden;
  background: repeating-linear-gradient(115deg, transparent 0 5px, rgba(255, 255, 255, .07) 5px 6px);
}
.hud__map::before, .hud__map::after { content: ""; position: absolute; top: 0; width: 3px; height: 3px; background: currentColor; }
.hud__map::before { left: 0 } .hud__map::after { right: 0 }
/* the logo, turning in 3D: stacked copies give it thickness */
.mark3d { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; transform-style: preserve-3d; animation: markspin 7s linear infinite; }
.mark3d svg { position: absolute; inset: 0; width: 100%; height: 100%; color: #6f6c66; transform: translateZ(calc((var(--k) - 4) * 1.4px)); }
.mark3d svg:first-child, .mark3d svg:last-child { color: var(--fg); }
.hud__map { perspective: 260px; }
@keyframes markspin { from { transform: rotateY(0) rotateX(8deg); } to { transform: rotateY(360deg) rotateX(8deg); } }
.hud__cross { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2px; background: var(--lit); border-radius: 50%; }
.hud__xy { left: var(--pad); top: calc(15vh + 22px); width: 28vw; display: flex; justify-content: space-between; }
.tag { background: var(--fg); color: var(--bg); padding: 1px 6px; display: inline-flex; gap: 10px; }
.hud__row { left: var(--pad); top: calc(15vh + 48px); width: 28vw; display: flex; justify-content: space-between; }
.r { text-align: right; }
.hud__lat { left: var(--pad); top: 33vh; width: 28vw; display: flex; justify-content: space-between; }
.hud__lon { right: var(--pad); top: 33vh; width: 28vw; display: flex; justify-content: space-between; }

.hud__frame { left: var(--pad); bottom: 26px; width: 28vw; height: 30vh; padding: 16px 28px; display: flex; flex-direction: column; justify-content: space-between; }
.c { position: absolute; width: 7px; height: 7px; border: 0 solid currentColor; }
.tl { left: 0; top: 0; border-width: 1px 0 0 1px } .tr { right: 0; top: 0; border-width: 1px 1px 0 0 }
.bl { left: 0; bottom: 34px; border-width: 0 0 1px 1px } .br { right: 0; bottom: 34px; border-width: 0 1px 1px 0 }
.hud__frame dl { display: grid; grid-template-columns: 70px 1fr; row-gap: 3px; margin: auto 0 auto 42%; }
.hud__meter { display: flex; align-items: center; gap: 10px; margin: 0 -28px; }
.hud__meter i { flex: 1; height: 5px; background: linear-gradient(var(--lit), var(--lit)) 0 0 / var(--p, 0%) 100% no-repeat, rgba(128, 128, 128, .28); }

.hud__right { right: var(--pad); top: var(--pad); width: 28vw; }
.ticker { overflow: hidden; background: rgba(128, 128, 128, .22); padding: 2px 0; white-space: nowrap; }
.ticker__in { display: inline-block; animation: tick 22s linear infinite; }
.ticker__in span { margin: 0 14px; } .ticker__in span:nth-child(even) { color: var(--lit); }
@keyframes tick { to { transform: translateX(-50%); } }
.list { margin-top: 18px; display: grid; grid-template-columns: 34% 1fr; }
.list ol, .list__f { grid-column: 2; }
.list li, .list__f { display: flex; justify-content: space-between; padding: 1.5px 0; }
.list li { opacity: .35; transition: opacity .4s; } .list li.on { opacity: 1; } .list li.on span:last-child { color: var(--lit); }
.list__f { margin-top: 6px; opacity: .6; }

.hud__name { left: 0; right: 0; bottom: 30px; text-align: center; font: inherit; letter-spacing: .3em; }
.hud__scroll { right: var(--pad); bottom: 12px; animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- 02 story ---------- */
.story { overflow: hidden; }
.story__track { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.col { position: absolute; left: 0; top: 0; width: 100%; }
.col--r { padding-top: 14vh; }
.story p { width: 100%; white-space: nowrap; line-height: 1.8; font-size: 10.5px; will-change: transform; }
.col--l p { text-align: right; }
.story p.gap { height: 5vh; }

/* ---------- 03 white scene ---------- */
.b2 { opacity: 0; color: #0B0B0B; }
.b2 > * { position: absolute; }
.b2__tl { left: var(--pad); top: var(--pad); } .b2__tr { right: var(--pad); top: var(--pad); text-align: right; }
.b2__bl { left: var(--pad); bottom: 14px; } .b2__br { right: var(--pad); bottom: 14px; text-align: right; }
.b2__num { left: 27vw; top: 50%; font: 700 17vh/1 var(--sans); letter-spacing: -.02em; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; }
.b2__words { left: 50%; top: 56vh; bottom: 0; width: 280px; margin-left: -140px; overflow: hidden; display: flex; justify-content: space-between; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent); }
.b2__words div { will-change: transform; line-height: 1.6; }
.b2__words div + div { text-align: right; }

/* ---------- 04 footer ---------- */
.ftr { opacity: 0; color: #F2EFE8; }
.ftr__h { position: absolute; left: 0; right: 0; top: 3vh; text-align: center; font: 700 min(11.5vw, 17vh)/.86 var(--sans); letter-spacing: -.035em; will-change: transform; }
.ftr__panel { position: absolute; left: 14px; right: 14px; bottom: 5vh; height: 27vh; background: #0B0B0B; color: #F2EFE8; padding: 14px 18px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: auto; overflow: hidden; }
.ftr__panel nav, .bar nav { display: flex; gap: 22px; }
.ftr__panel nav span, .bar nav span { opacity: .45; cursor: not-allowed; }
.ftr__big { color: var(--red); position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 700 min(22vh, 17vw)/.8 var(--sans); letter-spacing: -.05em; }
.ftr__cols { display: flex; gap: 6vw; }
.ftr__links a:hover { color: var(--red); } .ftr__mail { text-transform: none; }

/* ---------- bottom bar ---------- */
.bar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bar); z-index: 5; background: #1a1918; color: #F2EFE8; display: flex; align-items: center; gap: 22px; padding: 0 0 0 var(--pad); font-size: 11px; }
.bar nav a.on { color: #F2EFE8; } .bar nav a:not(.on) { opacity: .6; }
.bar__clock { margin-left: auto; display: flex; align-items: center; gap: 8px; opacity: .8; }
.bar__clock i { width: 5px; height: 5px; border-radius: 50%; background: var(--lit); animation: blink 1s steps(2) infinite; }
.bar__cta { height: 100%; padding: 0 16px; border: 0; background: #F2EFE8; color: #0B0B0B; font: inherit; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.bar__cta:hover { background: var(--red); color: #F2EFE8; }
.bar__cta.is-copied { background: var(--red); color: #F2EFE8; }
[data-label] { font-variant-ligatures: none; }
body.head { cursor: grab; } body.dragging { cursor: grabbing; }
a, button { cursor: pointer; }

@media (max-width: 1100px) { .ftr__cols p:nth-child(3) { display: none; } }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .hud__map, .hud__xy, .hud__row { width: 46vw; }
  .hud__map { height: 9vh; } .hud__xy { top: calc(9vh + 20px); } .hud__row { top: calc(9vh + 44px); flex-direction: column; gap: 4px; }
  .hud__row .r { text-align: left; }
  .hud__right { width: 44vw; } .list { grid-template-columns: 1fr; } .list ol, .list__f { grid-column: 1; }
  .hud__lat, .hud__lon { display: none; }
  .hud__frame { width: 62vw; height: 17vh; padding: 10px 14px; bottom: 54px; } .hud__frame dl { margin-left: 0; } .hud__meter { margin: 0 -14px; }
  .story p { font-size: 8.5px; }
  .b2__num { left: 14vw; font-size: 11vh; }
  .b2__words { width: 220px; margin-left: -110px; }
  .disc svg { width: 84vw; height: 84vw; margin: -42vw 0 0 -42vw; }
  .ftr__h { top: 9vh; font-size: 15vw; }
  .ftr__panel { height: 30vh; } .ftr__big { font-size: 13vh; top: 46%; } .ftr__cols { gap: 14px; font-size: 8px; } .ftr__cols p:nth-child(1) { display: none; }
  .bar { gap: 12px; font-size: 10px; } .bar__clock #tz { display: none; } .bar__cta { padding: 0 10px; }
}