/* fonts, served from this site (OFL) */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/plex-sans-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plex-mono-600.woff2) format("woff2")}

:root {
  --bg: #090908;
  --ink: #ece7dc;
  --muted: #9a9386;
  --gold: #c8a36a;
  --gold-2: #e4c48a;
  --market-accent: #2fc6a0;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  overflow-x: clip;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(200, 163, 106, 0.18) 1px, transparent 1px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, #000 0%, transparent 68%);
  mask-image: radial-gradient(ellipse at 50% 42%, #000 0%, transparent 68%);
}

main {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(48px + env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) calc(32px + env(safe-area-inset-left, 0px));
  text-align: center;
}

header { max-width: 40rem; }

.soon {
  display: inline-block;
  margin: 22px 0 0;
  padding: 10px 18px;
  color: var(--gold-2);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--gold-2);
  border-radius: 999px;
}

a.soon:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 4px;
}

h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.03em;
}

h1 span {
  color: var(--gold-2);
  font-style: italic;
}

.row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  width: min(1120px, 100%);
  margin: 48px 0 0;
  padding: 0;
}

.mark {
  flex: 1 1 0;
  min-width: 0;
  max-width: 210px;
  margin: 0;
}

.glyph {
  padding: 14%;
  overflow: hidden;
}

.mark img,
.mark object,
.mark svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  transform-origin: 50% 50%;
}

figcaption {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

@media (max-width: 980px) {
  main {
    padding: calc(36px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px));
  }
  .row {
    flex-wrap: wrap;
    gap: 22px 10px;
    margin-top: 36px;
  }
  .mark {
    flex: 0 0 calc((100% - 20px) / 3);
    max-width: none;
  }
  figcaption { font-size: 13px; }
}

@media (max-width: 480px) {
  header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }
  h1 {
    max-width: 100%;
    font-size: clamp(36px, 11vw, 52px);
  }
  .soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    margin-top: clamp(16px, 5vw, 22px);
    padding: 0 18px;
  }
  .row {
    width: 100%;
    margin-top: clamp(24px, 7vw, 36px);
  }
  figcaption { font-size: clamp(11px, 3.4vw, 13px); }
  main {
    padding: calc(clamp(28px, 8vw, 40px) + env(safe-area-inset-top, 0px)) calc(clamp(12px, 4vw, 18px) + env(safe-area-inset-right, 0px)) calc(clamp(24px, 7vw, 36px) + env(safe-area-inset-bottom, 0px)) calc(clamp(12px, 4vw, 18px) + env(safe-area-inset-left, 0px));
  }
}

.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.field canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}

.field canvas.is-on { opacity: 1; }

.sound {
  position: fixed;
  z-index: 3;
  right: calc(22px + env(safe-area-inset-right, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(228, 196, 138, 0.45);
  background: rgba(9, 9, 8, 0.72);
  color: var(--gold-2);
  cursor: pointer;
}

.sound svg { display: block; width: 18px; height: 18px; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.sound .when-off { fill: currentColor; stroke: none; }
.sound[aria-pressed="true"] .when-off { display: none; }
.sound[aria-pressed="true"] .when-on { display: block; }
.sound .when-on { display: none; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .row .mark:nth-child(1) { transition-delay: 0ms; }
.js .row .mark:nth-child(2) { transition-delay: 70ms; }
.js .row .mark:nth-child(3) { transition-delay: 140ms; }
.js .row .mark:nth-child(4) { transition-delay: 210ms; }
.js .row .mark:nth-child(5) { transition-delay: 280ms; }

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.js .draw-rim,
.js .draw-in,
.js .route,
.js .sweep {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js .draw-rim { animation: rim-draw 63.019s linear both; }
.js .draw-in { animation: glyph-draw 63.019s linear both; }
.js .dl-knob { transform-box: view-box; transform-origin: center; animation: knob 63.019s linear both; }
.js .dl-knob circle,
.js .dl-knob line { animation: glyph-draw 63.019s linear both, knob-red 63.019s linear both; }

.js .orbit,
.js .w-orbit {
  transform-box: view-box;
  transform-origin: center;
}
.js .orbit { animation: orbit-lap 63.019s linear both; }
.js .w-orbit { animation: wallet-lap 63.019s linear both; }

.js .red-node { transform-box: fill-box; transform-origin: center; animation: node-drop 63.019s linear both, heartbeat 63.019s linear both; }
.js .zn-node { transform-box: fill-box; transform-origin: center; animation: zone-ping 63.019s linear both; }
.js .zone-core { transform-box: fill-box; transform-origin: center; animation: core-ping 63.019s linear both; }
.js .comet { fill: #ff3912; }
.js .comet-1 { opacity: 0.55; }
.js .comet-2 { opacity: 0.32; }
.js .comet-3 { opacity: 0.16; }

.js .route { stroke: #ff3912; stroke-width: 2.4; stroke-linecap: round; animation: route-trace 63.019s linear both; }
.js .route-node { fill: #ff3912; transform-box: fill-box; transform-origin: center; animation: route-node 63.019s linear both; }
.js .sweep { stroke: #ff3912; stroke-width: 7; stroke-dasharray: 0.18 0.82; animation: light-sweep 63.019s linear both; }

.js .draw-zone {
  fill-opacity: 0;
  stroke: #e4c48a;
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
  animation: stroke-on 63.019s linear both, fill-on 63.019s linear both;
}
.js .m-fill { animation: fill-on 63.019s linear both; }

.js .card-0,
.js .card-1,
.js .card-2 { transform-box: fill-box; transform-origin: center; }
.js .card-0 { animation: fan-a 63.019s linear both; }
.js .card-1 { animation: fan-b 63.019s linear both; }
.js .card-2 { animation: fan-c 63.019s linear both; }
.js .red-chip { transform-box: fill-box; transform-origin: center; animation: asterisk 63.019s linear both; }
.js .w-node { fill: #ff3912; }

@keyframes rim-draw {
  0% { stroke-dashoffset: 1; }
  10% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@keyframes glyph-draw {
  0%, 10% { stroke-dashoffset: 1; }
  18% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@keyframes knob {
  0%, 20% { transform: rotate(35deg); }
  23% { transform: rotate(58deg); }
  26% { transform: rotate(12deg); }
  29% { transform: rotate(46deg); }
  32%, 100% { transform: rotate(35deg); }
}

@keyframes knob-red {
  0%, 68% { stroke: #e4c48a; }
  72%, 76% { stroke: #ff3912; }
  82%, 100% { stroke: #e4c48a; }
}

@keyframes node-drop {
  0%, 16% { opacity: 0; }
  22%, 100% { opacity: 1; }
}

@keyframes orbit-lap {
  0%, 26.7% { transform: rotate(0deg); }
  40% { transform: rotate(360deg); }
  43% { transform: rotate(378deg); }
  46%, 100% { transform: rotate(360deg); }
}

@keyframes heartbeat {
  0%, 80% { transform: scale(1); }
  83% { transform: scale(1.45); }
  86% { transform: scale(1); }
  88% { transform: scale(1.28); }
  92%, 100% { transform: scale(1); }
}

@keyframes route-trace {
  0%, 42% { stroke-dashoffset: 1; opacity: 0; }
  46% { stroke-dashoffset: 0; opacity: 1; }
  52% { stroke-dashoffset: 0; opacity: 1; }
  55%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes route-node {
  0%, 44% { opacity: 0; transform: scale(0.4); }
  48%, 52% { opacity: 1; transform: scale(1); }
  55%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes light-sweep {
  0%, 55% { stroke-dashoffset: 1; opacity: 0; }
  58% { opacity: 1; }
  68% { stroke-dashoffset: -1; opacity: 1; }
  72%, 100% { stroke-dashoffset: -1; opacity: 0; }
}

@keyframes zone-ping {
  0%, 78% { transform: scale(1); }
  82% { transform: scale(1.4); }
  86% { transform: scale(1); }
  89% { transform: scale(1.22); }
  93%, 100% { transform: scale(1); }
}

@keyframes core-ping {
  0%, 78% { opacity: 0; transform: scale(0.4); }
  82% { opacity: 1; transform: scale(1); }
  88% { opacity: 0.2; transform: scale(1.6); }
  93%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes wallet-lap {
  0%, 60% { transform: rotate(0deg); }
  78%, 100% { transform: rotate(360deg); }
}

@keyframes asterisk {
  0%, 18% { opacity: 0; transform: scale(0.6); }
  24%, 48% { opacity: 1; transform: scale(1); }
  52% { transform: scale(1.45); }
  56%, 76% { transform: scale(1); }
  80% { transform: scale(1.5); }
  86%, 100% { transform: scale(1); opacity: 1; }
}

@keyframes fan-a {
  0%, 10% { transform: rotate(0deg); opacity: 0; }
  18% { transform: rotate(-32deg); opacity: 0.85; }
  27% { transform: rotate(-16deg); opacity: 0.3; }
  36% { transform: rotate(-40deg); opacity: 0.7; }
  45%, 100% { transform: rotate(-16deg); opacity: 0.3; }
}

@keyframes fan-b {
  0%, 12% { transform: rotate(0deg); opacity: 0; }
  20% { transform: rotate(16deg); opacity: 0.9; }
  27% { transform: rotate(-6deg); opacity: 0.5; }
  38% { transform: rotate(22deg); opacity: 0.85; }
  48%, 100% { transform: rotate(-6deg); opacity: 0.5; }
}

@keyframes fan-c {
  0%, 10% { transform: rotate(5deg) translateY(28px); opacity: 0; }
  16% { transform: rotate(5deg) translateY(0); opacity: 1; }
  22% { transform: rotate(5deg); }
  34% { transform: rotate(20deg) translateY(6px); }
  42% { transform: rotate(5deg) translateY(0); }
  100% { transform: rotate(5deg); opacity: 1; }
}

@keyframes stroke-on {
  0% { stroke-dashoffset: 1; }
  16% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@keyframes fill-on {
  0%, 12% { fill-opacity: 0; }
  22%, 100% { fill-opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mark img,
  .mark svg,
  .mark object {
    animation: none;
    transform: none;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .field canvas { display: none; }
}
@keyframes accent {
  0.0% { transform: scale(1); }
  0.267% { transform: scale(1); }
  0.346% { transform: scale(1.45); }
  0.552% { transform: scale(1); }
  1.041% { transform: scale(1); }
  1.12% { transform: scale(1.45); }
  1.327% { transform: scale(1); }
  6.457% { transform: scale(1); }
  6.536% { transform: scale(1.45); }
  6.742% { transform: scale(1); }
  13.421% { transform: scale(1); }
  13.501% { transform: scale(1.45); }
  13.707% { transform: scale(1); }
  14.194% { transform: scale(1); }
  14.273% { transform: scale(1.45); }
  14.48% { transform: scale(1); }
  20.384% { transform: scale(1); }
  20.464% { transform: scale(1.45); }
  20.67% { transform: scale(1); }
  21.159% { transform: scale(1); }
  21.238% { transform: scale(1.45); }
  21.444% { transform: scale(1); }
  21.933% { transform: scale(1); }
  22.012% { transform: scale(1.45); }
  22.219% { transform: scale(1); }
  22.706% { transform: scale(1); }
  22.785% { transform: scale(1.45); }
  22.991% { transform: scale(1); }
  25.027% { transform: scale(1); }
  25.107% { transform: scale(1.45); }
  25.313% { transform: scale(1); }
  25.802% { transform: scale(1); }
  25.881% { transform: scale(1.45); }
  26.087% { transform: scale(1); }
  34.313% { transform: scale(1); }
  34.393% { transform: scale(1.45); }
  34.599% { transform: scale(1); }
  35.086% { transform: scale(1); }
  35.166% { transform: scale(1.45); }
  35.372% { transform: scale(1); }
  35.861% { transform: scale(1); }
  35.94% { transform: scale(1.45); }
  36.146% { transform: scale(1); }
  39.729% { transform: scale(1); }
  39.809% { transform: scale(1.45); }
  40.015% { transform: scale(1); }
  53.657% { transform: scale(1); }
  53.736% { transform: scale(1.45); }
  53.942% { transform: scale(1); }
  54.431% { transform: scale(1); }
  54.511% { transform: scale(1.45); }
  54.717% { transform: scale(1); }
  55.204% { transform: scale(1); }
  55.283% { transform: scale(1.45); }
  55.49% { transform: scale(1); }
  59.847% { transform: scale(1); }
  59.926% { transform: scale(1.45); }
  60.133% { transform: scale(1); }
  66.037% { transform: scale(1); }
  66.117% { transform: scale(1.45); }
  66.323% { transform: scale(1); }
  66.812% { transform: scale(1); }
  66.891% { transform: scale(1.45); }
  67.097% { transform: scale(1); }
  67.584% { transform: scale(1); }
  67.664% { transform: scale(1.45); }
  67.87% { transform: scale(1); }
  83.833% { transform: scale(1); }
  83.913% { transform: scale(1.45); }
  84.119% { transform: scale(1); }
  91.571% { transform: scale(1); }
  91.65% { transform: scale(1.45); }
  91.856% { transform: scale(1); }
  93.892% { transform: scale(1); }
  93.972% { transform: scale(1.45); }
  94.178% { transform: scale(1); }
  98.535% { transform: scale(1); }
  98.615% { transform: scale(1.45); }
  98.821% { transform: scale(1); }
  100.0% { transform: scale(1); }
}

/* off screen, the marks rest (site.js) */
.marks-rest main *, .marks-rest main *::before, .marks-rest main *::after { animation-play-state: paused !important; }

/* Film grain over the whole site, from secret3.dev's film layer but lighter. Each layer blends straight onto the page
   (no wrapper: a stacking context would isolate the blend and turn it into a grey veil), so the grain lives in the
   lit parts - type, dots, the drawing - and falls away in true black. site.js jitters it a few times a second (no CSS animation: that would redraw it every frame); still for reduced motion. */
.film { position: fixed; inset: -12%; z-index: 2147483000; pointer-events: none; background: url("assets/film-grain.jpg") 0 0 repeat; }
.film.f1 { opacity: var(--f1, .35); mix-blend-mode: var(--b1, overlay); background-size: 180px 180px; }
.film.f2 { opacity: var(--f2, .2); mix-blend-mode: var(--b2, soft-light); background-size: 110px 110px; }
@media print { .film { display: none; } }