/**
 * main.css — Styles for the spatial canvas portfolio
 * Dark workshop aesthetic with zone-specific color pools.
 */

/* === Reset & Base === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0a0908;
  --ink: #e8e0d4;
  --ink-dim: #7a7368;
  --ink-faint: #3a3632;
  --gn: #9b72cf;    /* narrative - purple */
  --gc: #d4874d;    /* cultural - orange */
  --ge: #4a8fcc;    /* experimental - blue */
  --gs: #6abf69;    /* sandbox - green */
  --gst: #c4a265;   /* studio - gold */
  --gt: #5bb8a9;    /* teaching - teal */
  --fd: 'Syne', 'Space Grotesk', sans-serif;
  --fb: 'Space Grotesk', sans-serif;
  --fs: 'Instrument Serif', Georgia, serif;
  --fm: 'JetBrains Mono', 'Fira Code', monospace;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fb);
  cursor: grab;
  -webkit-font-smoothing: antialiased;
  /* Prevent browser from intercepting touch gestures (scroll/pinch) before
     JS can handle them. Individual scrollable panels opt back in via pan-y. */
  touch-action: none;
}
body:active { cursor: grabbing; }
a { color: inherit; }

/* Scrollable overlays need vertical touch scrolling re-enabled */
#cli, #fc { touch-action: pan-y; }

/* === Canvas layers === */
canvas.wl {
  position: absolute; top: 0; left: 0;
  pointer-events: none;
  transform-origin: 0 0;
}
#canvas {
  position: absolute;
  width: 4200px; height: 3200px;
  transform-origin: 0 0;
  will-change: transform;
}

/* === Bobbing animation (MORE VISIBLE) === */
@keyframes bob {
  0%, 100% { transform: var(--bt, none) translateY(0) rotate(0deg); }
  33% { transform: var(--bt, none) translateY(-12px) rotate(1.2deg); }
  66% { transform: var(--bt, none) translateY(10px) rotate(-1deg); }
}
.bob {
  animation: bob var(--bd, 7s) ease-in-out infinite;
  animation-delay: var(--bl, 0s);
}
.bob:hover {
  animation-play-state: paused;
  transform: var(--bt, none) translateY(-3px) scale(1.03) !important;
  transition: transform 0.3s ease;
}
/* Stabilize bobbing when section is focused */
.bob.focused {
  animation-play-state: paused;
  transform: var(--bt, none) !important;
  transition: transform 0.6s ease;
}

/* === Practice area titles (fg) === */
.fg {
  position: absolute; z-index: 10;
  cursor: pointer; max-width: 320px;
}
.ft {
  font-family: var(--fd); font-size: 26px;
  font-weight: 600; line-height: 1.2;
  margin-bottom: 4px; letter-spacing: -0.3px;
}
.fl {
  font-family: var(--fm); font-size: 9px;
  letter-spacing: 2.5px; text-transform: uppercase;
  opacity: 0.3; margin-bottom: 10px;
}
.fstr {
  font-family: var(--fs); font-size: 14px;
  font-style: italic; line-height: 1.6;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: max-height 0.6s, opacity 0.5s 0.1s;
  max-width: 320px;
}
.fg[data-d="2"] .fstr, .fg[data-d="3"] .fstr { max-height: 200px; opacity: 0.45; }
.fcaps {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; max-height: 0; overflow: hidden;
  transition: max-height 0.5s 0.15s;
}
.fg[data-d="2"] .fcaps, .fg[data-d="3"] .fcaps { max-height: 100px; }
.cap {
  font-family: var(--fm); font-size: 8px;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  opacity: 0.4;
}

/* Zone-specific font overrides */
[data-p="narrative"] .ft { font-family: var(--fs); font-weight: 400; font-style: italic; font-size: 28px; }
[data-p="experimental"] .ft { font-family: var(--fm); font-weight: 400; font-size: 20px; letter-spacing: -0.5px; }
[data-p="sandbox"] .ft { font-family: var(--fd); font-weight: 800; letter-spacing: -1px; }

/* === Scraps === */
.sc { position: absolute; z-index: 8; cursor: pointer; max-width: 240px; }
.sc-k { font-family: var(--fm); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.25; margin-bottom: 5px; }
.sc-t { font-family: var(--fd); font-size: 15px; font-weight: 500; margin-bottom: 3px; }
.sc-ln { width: 24px; height: 1px; margin: 8px 0; opacity: 0.15; }
.sc-tx {
  font-family: var(--fs); font-size: 12px; font-style: italic;
  line-height: 1.55; opacity: 0; max-height: 0; overflow: hidden;
  transition: max-height 0.5s, opacity 0.4s;
}
.sc[data-d="2"] .sc-tx, .sc[data-d="3"] .sc-tx { max-height: 80px; opacity: 0.35; }
.sc.exp .sc-tx { max-height: 80px !important; opacity: 0.4 !important; }
.sc-det {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.6s, opacity 0.4s 0.1s;
  font-size: 12px; line-height: 1.65; margin-top: 8px;
}
.sc.exp .sc-det { max-height: 500px; opacity: 0.42; }

/* === Media placeholders === */
.ms {
  position: absolute; z-index: 9; border-radius: 6px;
  overflow: hidden; box-shadow: 0 0 30px rgba(0,0,0,0.4);
}
.ms:hover { transform: scale(1.03) !important; }
.ms-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fm); font-size: 8px;
  letter-spacing: 1px; text-transform: uppercase; opacity: 0.2;
}

/* === Code snippets === */
.cs {
  position: absolute; z-index: 9;
  font-family: var(--fm); font-size: 10px; line-height: 1.6;
  padding: 14px 18px; border-radius: 6px;
  background: rgba(12,10,8,0.8);
  border: 1px solid rgba(255,255,255,0.03);
  color: var(--ink-dim);
  white-space: pre; overflow: hidden; max-width: 300px; cursor: default;
}
.cs .ck { color: var(--gn); opacity: 0.7; }
.cs .cv { color: var(--gs); opacity: 0.7; }
.cs .cc { opacity: 0.2; font-style: italic; }
.cs .cf { color: var(--gc); opacity: 0.7; }
.cs .lt {
  position: absolute; top: 4px; right: 8px;
  font-size: 7px; letter-spacing: 1px;
  text-transform: uppercase; opacity: 0.2;
}

/* === Embed slots & media interactives === */
.es {
  position: absolute; z-index: 9; border-radius: 6px;
  overflow: hidden; border: 1px solid rgba(255,255,255,0.03);
  background: rgba(12,10,8,0.5);
}
.mi { position: absolute; z-index: 12; border-radius: 6px; overflow: hidden; }

/* === 3D Cube === */
.css3d {
  position: absolute; z-index: 15;
  perspective: 600px; cursor: grab;
}
.css3d:active { cursor: grabbing; }
.cw {
  width: 90px; height: 90px; position: relative;
  transform-style: preserve-3d;
  animation: cspin 14s linear infinite;
}
.cf_ {
  position: absolute; width: 90px; height: 90px;
  border: 1px solid; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--fm); font-size: 9px;
  letter-spacing: 1px; text-transform: uppercase;
  opacity: 0.6; background: rgba(10,9,8,0.7);
  backdrop-filter: blur(4px);
}
.cf_.fr { transform: translateZ(45px); }
.cf_.bk { transform: rotateY(180deg) translateZ(45px); }
.cf_.rt { transform: rotateY(90deg) translateZ(45px); }
.cf_.lt { transform: rotateY(-90deg) translateZ(45px); }
.cf_.tp { transform: rotateX(90deg) translateZ(45px); }
.cf_.bt { transform: rotateX(-90deg) translateZ(45px); }
@keyframes cspin {
  0% { transform: rotateX(25deg) rotateY(35deg); }
  100% { transform: rotateX(25deg) rotateY(395deg); }
}

/* Hand-drawn arrow for cube */
.cube-hint {
  position: absolute;
  top: -30px; right: -50px;
  font-family: var(--fs); font-style: italic;
  font-size: 11px; opacity: 0.2;
  color: var(--ge);
  transform: rotate(-8deg);
  pointer-events: none;
  white-space: nowrap;
}
.cube-hint svg {
  width: 24px; height: 20px;
  margin-right: 4px;
  vertical-align: middle;
}

/* === Identity section === */
#id_ {
  position: absolute; z-index: 20;
  text-align: center; cursor: default; user-select: none;
}
#id_ h1 {
  font-family: var(--fd); font-size: 52px;
  font-weight: 800; letter-spacing: -1px;
  line-height: 1.1; margin-bottom: 12px;
  transition: letter-spacing 0.3s;
}
.name-char { cursor: grab !important; }
.name-char.swap-target {
  background: rgba(155, 114, 207, 0.15);
  border-radius: 4px;
}
.rl { display: flex; justify-content: center; gap: 16px; position: relative; }
.rw {
  font-family: var(--fm); font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  opacity: 0.3; cursor: pointer; transition: opacity 0.2s;
  padding: 4px 2px; position: relative; z-index: 2;
}
.rw:hover { opacity: 0.6; }
.rw .ch { display: inline-block; position: relative; z-index: 2; }
.rsep { font-family: var(--fm); font-size: 11px; opacity: 0.12; letter-spacing: 3px; }
#id_ .man {
  margin-top: 18px; font-family: var(--fs);
  font-size: 16px; font-style: italic; line-height: 1.7;
  max-width: 440px; margin-left: auto; margin-right: auto;
  opacity: 0.35; transition: opacity 0.5s, max-height 0.5s;
}

/* Glitch animations */
@keyframes g1 { 0%{transform:translate(0)} 20%{transform:translate(-4px,3px) skewX(1deg)} 40%{transform:translate(5px,-2px) skewX(-2deg)} 60%{transform:translate(-3px,-3px)} 80%{transform:translate(3px,2px) skewX(1deg)} 100%{transform:translate(0)} }
@keyframes g2 { 0%{transform:translate(0) skewX(0)} 10%{transform:translate(-6px,3px) skewX(-4deg)} 30%{transform:translate(6px,-4px) skewX(5deg)} 50%{transform:translate(5px,-2px) skewX(6deg)} 70%{transform:translate(-3px,-3px) skewX(-5deg)} 100%{transform:translate(0) skewX(0)} }
@keyframes g3 { 0%{transform:translate(0) scale(1)} 5%{transform:translate(-8px,5px) scale(1.02) skewX(-6deg)} 15%{transform:translate(10px,-6px) scale(0.98) skewX(8deg)} 35%{transform:translate(8px,-3px) skewX(-10deg)} 50%{transform:translate(6px,4px) scale(0.97)} 65%{transform:translate(-4px,-6px) skewX(-4deg)} 100%{transform:translate(0) scale(1)} }
#id_[data-c="1"] h1 { animation: g1 0.35s; }
#id_[data-c="2"] h1 { animation: g2 0.5s; }
#id_[data-c="3"] h1 { animation: g3 0.7s; }

/* Revealed state (rainbow name) */
#id_.revealed h1 {
  background: linear-gradient(90deg, var(--gn), var(--gc), var(--ge), var(--gs), var(--gst), var(--gt), var(--gn));
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow 8s linear infinite;
}
@keyframes rainbow { 0%{background-position:0% 50%} 100%{background-position:400% 50%} }
#id_.revealed .man { opacity: 0; max-height: 0; overflow: hidden; }

/* Contact reveal */
#creveal {
  margin-top: 20px; opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s 0.3s, transform 0.5s 0.3s;
  pointer-events: none;
}
#id_.revealed #creveal { opacity: 1; transform: translateY(0); pointer-events: auto; }
#creveal .cp_ { font-family: var(--fm); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.25; margin-bottom: 8px; }
#creveal .cl_ { font-family: var(--fd); font-size: 18px; font-weight: 500; }
#creveal a {
  font-family: var(--fm); font-size: 12px; opacity: 0.35;
  text-decoration: none; display: inline-block; margin-top: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 2px;
  transition: opacity 0.2s;
}
#creveal a:hover { opacity: 0.7; }
#chint {
  font-family: var(--fm); font-size: 9px;
  letter-spacing: 1px; opacity: 0; margin-top: 28px;
  transition: opacity 0.5s; color: var(--ink-dim);
}
#id_:hover #chint { opacity: 0.2; }
#id_.revealed #chint { display: none; }

/* === Matrix rain canvas (TRANSPARENT!) === */
#mx {
  position: absolute; z-index: 1;
  pointer-events: none;
  opacity: 0; transition: opacity 0.4s;
  /* NO background! Must be transparent so blue text shows on dark canvas */
}
#mx.on { opacity: 1; }

/* === CLI Terminal (full section width, blue glow) === */
#cli {
  position: absolute; z-index: 22;
  width: 560px; /* Full identity section width */
  left: 50%; transform: translateX(-50%) translateY(8px);
  margin-top: 30px; /* Vertical spacing from section content */
  font-family: var(--fm); font-size: 11px; line-height: 1.7;
  background: rgba(8,7,6,0.92);
  border: 1px solid rgba(74,143,204,0.12);
  border-radius: 6px; padding: 14px 18px;
  text-align: left;
  opacity: 0; pointer-events: none;
  max-height: 220px; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(74,143,204,0.12) transparent;
  transition: opacity 0.4s;
}
#cli::-webkit-scrollbar { width: 3px; }
#cli::-webkit-scrollbar-thumb { background: rgba(74,143,204,0.12); border-radius: 2px; }
#cli::-webkit-scrollbar-track { background: transparent; }
#cli.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#cli-out { white-space: pre-wrap; color: rgba(74, 143, 204, 0.7); text-shadow: 0 0 6px rgba(74, 143, 204, 0.2); }
#cli-out .cmd { opacity: 0.9; font-weight: 500; color: rgba(74, 143, 204, 0.9); }
#cli-out .sys { font-style: italic; opacity: 0.4; }
#cli-out .out { opacity: 0.6; }
.cli-r { display: flex; gap: 4px; align-items: center; }
.cli-r .pr { opacity: 0.5; color: var(--ge); text-shadow: 0 0 6px rgba(74, 143, 204, 0.3); }
#cli-in {
  background: none; border: none;
  color: rgba(74, 143, 204, 0.8);
  text-shadow: 0 0 6px rgba(74, 143, 204, 0.2);
  font-family: inherit; font-size: inherit;
  outline: none; flex: 1; caret-color: var(--ge);
}

/* === Creative area (full width, blob canvas, quirky UI) === */
#cre-a {
  position: absolute; z-index: 22;
  width: 520px; /* Full identity section width */
  left: 50%; transform: translateX(-50%) translateY(8px);
  margin-top: 30px;
  opacity: 0; pointer-events: none;
  text-align: left;
  transition: opacity 0.5s, transform 0.4s;
}
#cre-a.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#cre-a h3 { font-family: var(--fd); font-size: 22px; font-weight: 700; margin-bottom: 4px; }
#cre-a .sub { font-family: var(--fs); font-style: italic; font-size: 13px; opacity: 0.3; margin-bottom: 14px; }

/* Blob-shaped drawing canvas */
#cre-c {
  clip-path: url(#blob-clip);
  cursor: crosshair; display: block;
  margin-bottom: 12px;
  border: none;
  filter: drop-shadow(0 0 20px rgba(155, 114, 207, 0.1));
}

/* Quirky color palette */
.cre-b { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cre-p {
  width: 24px; height: 24px;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  cursor: pointer; border: 2px solid transparent;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s;
}
.cre-p:hover { transform: scale(1.15) rotate(5deg); }
.cre-p.on { border-color: rgba(255,255,255,0.5); transform: scale(1.1); }

/* Blob-shaped pen size selectors */
.cre-sz {
  width: 28px; height: 28px;
  border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
  cursor: pointer;
  background: rgba(155, 114, 207, 0.06);
  border: 1px solid rgba(155, 114, 207, 0.1);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
  color: var(--ink); font-size: 10px; opacity: 0.4;
}
.cre-sz:hover { transform: scale(1.1); opacity: 0.6; }
.cre-sz.on {
  background: rgba(155, 114, 207, 0.15);
  border-color: rgba(155, 114, 207, 0.3);
  opacity: 0.8; transform: scale(1.05);
}

/* Quirky yeet button */
#cre-go {
  font-family: var(--fd); font-size: 12px;
  font-weight: 700; letter-spacing: 0.5px;
  padding: 10px 22px; border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%;
  cursor: pointer;
  background: rgba(155, 114, 207, 0.12);
  border: 2px solid rgba(155, 114, 207, 0.2);
  color: var(--gn);
  box-shadow: 0 0 20px rgba(155, 114, 207, 0.1);
  transform: rotate(-3deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, background 0.2s;
  margin-top: 8px;
  animation: yeet-wobble 3s ease-in-out infinite;
}
@keyframes yeet-wobble {
  0%, 100% { transform: rotate(-3deg); }
  25% { transform: rotate(-1deg) scale(1.02); }
  50% { transform: rotate(-4deg) scale(0.98); }
  75% { transform: rotate(-2deg) scale(1.01); }
}
#cre-go:hover {
  transform: rotate(2deg) scale(1.08) !important;
  background: rgba(155, 114, 207, 0.2);
  box-shadow: 0 0 30px rgba(155, 114, 207, 0.25);
  animation: none;
}

/* === Educator === */
#edu {
  position: absolute; z-index: 22;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s, transform 0.4s;
  pointer-events: none; text-align: left; width: 380px;
}
#edu.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
#edu h3 { font-family: var(--fd); font-size: 18px; font-weight: 600; margin-bottom: 2px; }
#edu .sub { font-family: var(--fs); font-style: italic; font-size: 12px; opacity: 0.3; margin-bottom: 14px; }
#edu .ti { font-size: 12px; line-height: 1.6; opacity: 0.4; margin-bottom: 14px; }
.bits { display: flex; gap: 5px; margin-bottom: 4px; }
.bit {
  width: 38px; height: 44px; font-family: var(--fm);
  font-size: 22px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(91,184,169,0.1);
  border-radius: 4px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.bit.on {
  background: rgba(91,184,169,0.1);
  border-color: rgba(91,184,169,0.3);
  color: var(--gt);
  box-shadow: 0 0 12px rgba(91,184,169,0.1);
}
.blbls { display: flex; gap: 5px; margin-bottom: 12px; }
.blbls span { width: 38px; text-align: center; font-family: var(--fm); font-size: 7px; opacity: 0.2; }
#bval { font-family: var(--fm); font-size: 26px; font-weight: 600; color: var(--gt); margin-bottom: 2px; }
#bhex { font-family: var(--fm); font-size: 11px; opacity: 0.25; margin-bottom: 12px; }
#bchal { font-family: var(--fs); font-style: italic; font-size: 13px; opacity: 0.4; margin-bottom: 6px; min-height: 18px; }
#bfb { font-family: var(--fm); font-size: 9px; min-height: 14px; opacity: 0.5; }

/* === Easter egg pips === */
#eggs {
  position: fixed; top: 48px; right: 16px; z-index: 1000;
  display: flex; gap: 5px;
  opacity: 0; transition: opacity 0.6s;
}
#eggs.vis { opacity: 1; }
#eggs svg { width: 10px; height: 10px; opacity: 0.15; transition: opacity 0.5s; }
#eggs svg.found { opacity: 0.5; }

/* === Topbar === */
#tb {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: center; gap: 2px;
  padding: 10px 16px; z-index: 1000;
  pointer-events: none;
}
.tb-b {
  font-family: var(--fm); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink); opacity: 0.15;
  background: rgba(10,9,8,0.5);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 4px; padding: 5px 10px;
  cursor: pointer; pointer-events: auto;
  transition: opacity 0.25s, border-color 0.25s;
  backdrop-filter: blur(8px); position: relative;
}
.tb-b:hover { opacity: 0.45; border-color: rgba(255,255,255,0.08); }
.tb-b.on { opacity: 0.65; border-color: rgba(255,255,255,0.1); }
.tb-b.on::after {
  content: ''; position: absolute;
  bottom: -1px; left: 20%; right: 20%;
  height: 2px; border-radius: 1px;
  background: var(--ac, var(--ink)); opacity: 0.5;
}

/* === Minimap === */
#mm {
  position: fixed; bottom: 16px; right: 16px;
  width: 130px; height: 100px;
  background: rgba(10,9,8,0.8);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px; z-index: 1000;
  overflow: hidden; backdrop-filter: blur(8px);
  cursor: pointer; transition: opacity 0.3s, transform 0.3s;
}
#mmvp {
  position: absolute;
  border: 1px solid rgba(232,224,212,0.2);
  border-radius: 1px;
  background: rgba(232,224,212,0.03);
  transition: all 0.08s linear;
}

/* === Zoom indicator === */
#zi {
  position: fixed; bottom: 16px; left: 16px;
  font-family: var(--fm); font-size: 9px;
  letter-spacing: 1px; color: var(--ink);
  opacity: 0.15; z-index: 1000; user-select: none;
}

/* === Hint text (BOLD & COLORFUL) === */
#nh {
  position: fixed; bottom: 44px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--fm); font-size: 11px;
  font-weight: 600; letter-spacing: 2px;
  z-index: 999; pointer-events: none; text-align: center;
  white-space: nowrap;
  opacity: 0; transition: opacity 0.8s;
  text-transform: uppercase;
  /* Gradient text with zone colors */
  background: linear-gradient(90deg, var(--gn), var(--gc), var(--ge), var(--gs), var(--gst), var(--gt));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hint-shift 4s linear infinite;
}
#nh.vis { opacity: 0.7; }
@keyframes hint-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* === Focus overlay === */
#fo {
  position: fixed; inset: 0;
  background: rgba(10,9,8,0.93); z-index: 2000;
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(24px);
}
#fo.op { opacity: 1; pointer-events: auto; }
#fc {
  max-width: 680px; width: 90%; max-height: 80vh;
  overflow-y: auto; padding: 48px; position: relative;
}
#fx {
  position: absolute; top: 0; right: 0;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px; background: transparent;
  color: var(--ink); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0.3;
}
.fo-l { font-family: var(--fm); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.3; margin-bottom: 14px; }
.fo-t { font-family: var(--fd); font-size: 34px; font-weight: 700; line-height: 1.15; margin-bottom: 8px; }
.fo-s { font-family: var(--fs); font-size: 16px; font-style: italic; line-height: 1.6; opacity: 0.4; margin-bottom: 28px; }
.fo-b { font-family: var(--fb); font-size: 14px; line-height: 1.8; opacity: 0.6; }
.fo-b p { margin-bottom: 16px; }
.fo-b strong { font-weight: 500; opacity: 0.85; }
.fo-c { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
#fc::-webkit-scrollbar { width: 3px; }
#fc::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* === Particles overlay === */
#pc { position: fixed; inset: 0; pointer-events: none; z-index: 500; }

/* === Canvas takeover (mega event) === */
body.takeover #canvas, body.takeover .wl {
  transition: filter 2s;
  animation: hshift 4s linear infinite;
}
@keyframes hshift {
  0% { filter: hue-rotate(0deg) saturate(1.5) brightness(1.2); }
  100% { filter: hue-rotate(360deg) saturate(2) brightness(1.3); }
}

/* === Interactive info text (below canvases) === */
.mi-info {
  font-family: var(--fm); font-size: 8px;
  letter-spacing: 0.5px; opacity: 0.25;
  margin-top: 6px; text-align: left;
  color: var(--ink-dim);
}

/* === Audio visualiser === */
.av-container {
  position: relative;
  width: 240px; height: 260px;
}
.av-prompt {
  font-family: var(--fm); font-size: 9px;
  letter-spacing: 1px; text-align: center;
  opacity: 0.25; margin-top: 6px;
  color: var(--ge);
  transition: opacity 0.5s;
}

/* === Responsive === */

/*
 * Touch/mobile UI contrast improvements.
 *
 * On small screens (or any coarse-pointer device) UI chrome elements are
 * elevated from their desktop "whisper" opacity to legible values so they
 * remain readable in bright ambient light or glare conditions.
 *
 * pointer:coarse catches phones/tablets even on large-screen form factors
 * (e.g. tablet in landscape); max-width catches small desktop windows too.
 */
@media (max-width: 768px), (pointer: coarse) {
  /* --- Topbar: raise from near-invisible 0.15 to readable 0.6 --- */
  .tb-b {
    font-size: 8px;
    padding: 6px 10px;
    opacity: 0.6;
    background: rgba(10,9,8,0.88);
    border-color: rgba(255,255,255,0.14);
  }
  .tb-b:hover, .tb-b:active { opacity: 0.95; }
  .tb-b.on {
    opacity: 0.9;
    border-color: rgba(255,255,255,0.2);
  }

  /* --- Minimap: larger touch target, higher contrast border --- */
  #mm {
    width: 90px; height: 70px;
    border-color: rgba(255,255,255,0.12);
    background: rgba(10,9,8,0.92);
  }

  /* --- Zoom indicator: more visible --- */
  #zi { opacity: 0.45; font-size: 10px; }

  /* --- Navigation hint: always slightly visible on mobile --- */
  #nh { opacity: 0.55 !important; }

  /* --- Zone labels / metadata: raise from ultra-dim to legible --- */
  .fl  { opacity: 0.55; }
  .sc-k { opacity: 0.5; }
  .cap  { opacity: 0.6; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }

  /* --- Scraps / section body text: more readable --- */
  .sc[data-d="2"] .sc-tx, .sc[data-d="3"] .sc-tx { opacity: 0.6; }
  .sc.exp .sc-tx { opacity: 0.65 !important; }
  .sc.exp .sc-det { opacity: 0.6; }
  .fg[data-d="2"] .fstr, .fg[data-d="3"] .fstr { opacity: 0.65; }

  /* --- Identity section --- */
  #id_ h1 { font-size: 34px; }
  #id_ .man { opacity: 0.55; }
  .rw { opacity: 0.55; }

  /* --- Content panels --- */
  .ft { font-size: 20px; }
  #cli { width: 90vw; }
  #cre-a { width: 90vw; }

  /* --- Educator bit buttons: larger touch targets --- */
  .bit { width: 42px; height: 50px; font-size: 24px; }

  /* --- Easter egg pips: more visible so they read as interactive --- */
  #eggs svg { opacity: 0.3; }
  #eggs svg.found { opacity: 0.7; }
}

/* Slightly larger topbar text on very small screens */
@media (max-width: 380px) {
  .tb-b { font-size: 7px; padding: 5px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .bob { animation: none !important; }
  .cw { animation: none !important; }
}