:root {
  --fg: #ffffff;
  --dim: rgba(255, 255, 255, 0.62);
  --line: rgba(255, 255, 255, 0.85);
  --bg: #a3a7b0;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad: clamp(16px, 3.4vw, 42px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.32;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body { overflow: hidden; height: 100%; touch-action: none; }
body.is-loading { overflow: hidden; }

@media (pointer: fine) {
  body, body * { cursor: none !important; }
}

::selection { background: #fff; color: #7c818b; }

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


/* ---------- HUD (svg) ---------- */
#hud {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 2; overflow: visible;
}
#hud polyline, #hud path { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
#hud circle { fill: #fff; }
#hud .mk path { stroke: #fff; stroke-width: 1.2; }
#hud .mk text {
  fill: #fff; font-family: var(--mono); font-size: 10px; font-weight: 500;
  paint-order: stroke; stroke: rgba(70, 80, 95, .25); stroke-width: 2px;
}

/* ---------- UI shell ---------- */
#ui {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  text-shadow: 0 0 14px rgba(55, 62, 76, 0.28);
}
#ui a, #ui button { pointer-events: auto; }
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }

.logo {
  position: absolute; top: var(--pad); left: var(--pad);
  font-family: 'Unbounded', var(--mono); font-weight: 900;
  font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.035em; line-height: 1;
  color: #fff;
  transition: opacity .4s, letter-spacing .6s var(--ease);
}
.logo:hover { letter-spacing: 0.02em; }

.meta {
  position: absolute; top: calc(var(--pad) + clamp(34px, 3.6vw, 46px)); left: var(--pad);
  display: flex; flex-direction: column; font-weight: 500;
}
.meta .gap { height: 1.1em; }

.manifesto {
  position: absolute; top: var(--pad); right: var(--pad);
  width: min(232px, 46vw); text-align: right; font-weight: 500;
}
.manifesto .head { display: block; margin-bottom: 1.6em; }
.manifesto p { text-wrap: pretty; }

.bottom-left {
  position: absolute; left: var(--pad); bottom: var(--pad);
  display: flex; flex-direction: column; gap: 22px; font-weight: 500;
}
.hint { display: flex; flex-direction: column; }
#sound { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 500; }
#sound .w { opacity: 0; }
#sound[aria-pressed="true"] .w { opacity: 1; }
#sound[aria-pressed="true"] .x { opacity: 0; }

.bottom-right {
  position: absolute; right: var(--pad); bottom: var(--pad);
  display: flex; align-items: center; gap: 6px; font-weight: 500;
}
.bottom-right .dim { color: var(--dim); }
.progress { width: 64px; height: 1px; background: rgba(255,255,255,.3); margin-left: 10px; position: relative; overflow: hidden; }
.progress i { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }

.fade-hero { transition: opacity .5s; }

/* ---------- Section overlays ---------- */
.sec-ui { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s, visibility 0s .7s; }
body[data-section="crystals"] .sec-ui[data-for="crystals"],
body[data-section="portal"] .sec-ui[data-for="portal"],
body[data-section="finale"] .sec-ui[data-for="finale"] { opacity: 1; visibility: visible; transition: opacity .9s .15s, visibility 0s; }

.sec-ui .tag { position: absolute; top: var(--pad); right: var(--pad); font-weight: 500; }

/* crystal labels */
.clabel {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column;
  font-weight: 500; white-space: nowrap; will-change: transform, opacity;
}
.clabel.right { flex-direction: row; gap: 18px; align-items: flex-start; }
.clabel .col { display: flex; flex-direction: column; align-items: flex-end; }
.clabel .t2 { color: #fff; }
#cl-c { cursor: pointer; }

.datawall {
  position: absolute; inset: -5% -5%; overflow: hidden; pointer-events: none;
  filter: blur(2.6px); opacity: .32; font-size: 15px; letter-spacing: .1em;
  mix-blend-mode: screen;
}
.datawall div { position: absolute; white-space: nowrap; animation: drift linear infinite; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-30%); } }

/* portal */
.portal-copy {
  position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%);
  width: min(270px, 60vw); display: flex; flex-direction: column; gap: 14px; font-weight: 500;
}
.portal-copy .big { font-family: 'Unbounded', var(--mono); font-weight: 800; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.02em; line-height: 1; }
.portal-meter { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); font-weight: 500; }
.portal-meter b { font-weight: 700; display: inline-block; min-width: 3.2ch; text-align: right; }

/* finale */
.arrow {
  position: absolute; top: 50%; width: 64px; height: 30px; transform: translateY(-50%);
  display: grid; place-items: center; opacity: .9; transition: opacity .3s, transform .5s var(--ease);
}
.arrow i { display: block; width: 44px; height: 1px; background: #fff; position: relative; }
.arrow i::before { content: ''; position: absolute; top: -4px; width: 9px; height: 9px; border-top: 1px solid #fff; }
.arrow.left { left: calc(var(--pad) + 4vw); }
.arrow.left i::before { left: 0; border-left: 1px solid #fff; transform: rotate(-45deg); transform-origin: 0 0; top: 0; }
.arrow.right { right: calc(var(--pad) + 4vw); }
.arrow.right i::before { right: 0; border-right: 1px solid #fff; transform: rotate(45deg); transform-origin: 100% 0; top: 0; }
.arrow.left:hover { transform: translate(-6px, -50%); }
.arrow.right:hover { transform: translate(6px, -50%); }

.specimen {
  position: absolute; left: 50%; top: calc(var(--pad) + 4px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; font-weight: 500; text-align: center;
}
.specimen #spec-name { font-family: 'Unbounded', var(--mono); font-weight: 800; font-size: 15px; margin-top: 4px; letter-spacing: .02em; }

.socials {
  position: absolute; left: 50%; bottom: var(--pad); transform: translateX(-50%);
  display: flex; gap: clamp(18px, 4vw, 52px); font-weight: 500;
}
.socials a { position: relative; padding: 8px 14px; color: var(--dim); transition: color .3s; }
.socials a::before, .socials a::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 7px;
  border: 1px solid #fff; opacity: 0; transition: opacity .3s, transform .4s var(--ease);
}
.socials a::before { left: 0; border-right: 0; transform: translateX(6px); }
.socials a::after { right: 0; border-left: 0; transform: translateX(-6px); }
.socials a:hover, .socials a.on { color: #fff; }
.socials a:hover::before, .socials a:hover::after,
.socials a.on::before, .socials a.on::after { opacity: 1; transform: none; }
.totop { position: absolute; right: var(--pad); bottom: calc(var(--pad) + 30px); font-weight: 500; }

/* ---------- Modal ---------- */
#modal {
  position: fixed; inset: 0; z-index: 6; display: grid; place-items: center;
  background: rgba(150, 156, 166, 0.28); backdrop-filter: blur(14px) saturate(.8);
  -webkit-backdrop-filter: blur(14px) saturate(.8);
  opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s;
}
#modal.open { opacity: 1; visibility: visible; transition: opacity .6s, visibility 0s; }
#modal .panel {
  width: min(560px, calc(100vw - 32px)); padding: 34px 34px 30px;
  border: 1px solid rgba(255,255,255,.55); position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  transform: translateY(18px); transition: transform .8s var(--ease);
}
#modal.open .panel { transform: none; }
#modal .close { position: absolute; top: 14px; right: 16px; font-weight: 500; }
#modal .m-id { font-weight: 500; color: var(--dim); }
#modal .m-name { font-family: 'Unbounded', var(--mono); font-weight: 800; font-size: clamp(26px, 4vw, 40px); margin: 8px 0 18px; letter-spacing: -.02em; line-height: 1; }
#modal .m-desc { font-size: 13px; line-height: 1.55; max-width: 46ch; }
#modal .m-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.35); }
#modal dt { color: var(--dim); }

/* ---------- Loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: var(--bg); transition: opacity 1.1s ease, visibility 0s 1.1s;
  font-weight: 700; font-size: 13px; letter-spacing: .14em;
}
#loader .pct { font-size: 10px; letter-spacing: .3em; opacity: .55; font-weight: 500; }
#loader.done { opacity: 0; visibility: hidden; }

/* ---------- Cursor ---------- */
#cursor {
  position: fixed; left: 0; top: 0; z-index: 9; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.75);
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s, opacity .3s;
}
#cursor::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  background: #fff; border-radius: 50%;
}
body.grabbing #cursor { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: rgba(255,255,255,.25); }
#cursor.hover { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(255,255,255,.1); }
@media (pointer: coarse) { #cursor { display: none; } }

/* ---------- Small screens ---------- */
@media (max-width: 700px) {
  html, body { font-size: 11px; }
  .bottom-right .progress, .bottom-right #sec-name, .bottom-right .dash { display: none; }
  .manifesto { top: calc(var(--pad) + 112px); left: var(--pad); right: auto; width: 74vw; text-align: left; }
  .manifesto .head { margin-bottom: .6em; }
  .socials a { white-space: nowrap; }
  .arrow.left { left: 8px; } .arrow.right { right: 8px; }
  .portal-copy { top: auto; bottom: calc(var(--pad) + 70px); transform: none; }
  .portal-meter { top: auto; bottom: calc(var(--pad) + 70px); transform: none; }
  .socials { gap: 4px; }
  .socials a { padding: 8px 10px; }
  .totop { bottom: calc(var(--pad) + 42px); }
}

@media (prefers-reduced-motion: reduce) {
  .datawall div { animation: none; }
}