:root {
  --ink: #090b0d;
  --paper: #eee7d8;
  --paper-dark: #c7bba7;
  --acid: #b9ff31;
  --blue: #214df2;
  --pink: #ffa99d;
  --line: rgba(238, 231, 216, 0.32);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body: "Trebuchet MS", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--body);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(9,11,13,.78),rgba(9,11,13,.78)),
    url("assets/naspig-collage.png") center/cover fixed,
    #090b0d;
}
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.topbar {
  position: fixed;
  z-index: 30;
  inset: 18px 20px auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 10px 12px;
  border: 1px solid rgba(238,231,216,.22);
  border-radius: 18px;
  background: rgba(9,11,13,.72);
  backdrop-filter: blur(18px);
}
.brand, .topbar nav a { color: inherit; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 10px; font: 22px/1 var(--display); letter-spacing: 1px; }
.brand em { color: var(--acid); font-style: normal; }
.brand-mark { display:grid; place-items:center; width:42px; aspect-ratio:1; border-radius:50%; background:var(--paper); color:var(--ink); transform:rotate(-8deg); }
.topbar nav { display: flex; gap: 26px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; }
.topbar nav a:hover { color: var(--acid); }
.top-actions { display: flex; justify-content: flex-end; gap: 8px; }
.button {
  border: 0;
  border-radius: 999px;
  padding: 13px 19px;
  color: var(--paper);
  background: transparent;
  font: 800 11px/1 var(--body);
  letter-spacing: 1.2px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.button:hover { transform: translateY(-3px) rotate(-1deg); }
.button-ghost { border:1px solid var(--line); }
.button-acid { color:var(--ink); background:var(--acid); box-shadow:4px 4px 0 var(--blue); }
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: clamp(24px, 6vw, 100px);
  padding: 130px clamp(24px, 6vw, 100px) 70px;
  isolation: isolate;
}
.hero::after {
  content: "";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg, rgba(9,11,13,.82), rgba(9,11,13,.1) 60%, rgba(9,11,13,.55));
}
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--acid); font-size:11px; font-weight:900; letter-spacing:2.2px; text-transform:uppercase; }
.eyebrow span { width:34px; height:2px; background:currentColor; }
h1,h2 { margin: 0; font-family: var(--display); font-weight:900; letter-spacing:-.045em; text-transform:uppercase; }
h1 { font-size:clamp(70px, 9vw, 150px); line-height:.79; }
h1 i,h2 i { color:var(--acid); font-style:normal; -webkit-text-stroke:1px var(--ink); text-shadow:5px 5px 0 var(--blue); }
.lede { max-width: 590px; margin: 32px 0 28px; color:#d2c9bb; font-size:clamp(16px,1.5vw,21px); line-height:1.55; }
.hero-actions { display:flex; align-items:center; gap:18px; }
.round-button { width:64px; aspect-ratio:1; border:1px solid var(--line); border-radius:50%; color:var(--paper); background:transparent; font-size:9px; font-weight:900; cursor:pointer; }
.ticker { display:flex; gap:18px; margin-top:42px; color:#918b81; font:700 9px/1 monospace; letter-spacing:1px; }
.hero-visual { position:relative; width:min(47vw,690px); aspect-ratio:1; justify-self:end; display:grid; place-items:center; }
.portrait-shell { position:relative; z-index:2; width:72%; aspect-ratio:1; overflow:hidden; border:10px solid var(--paper-dark); border-radius:47% 53% 50% 46%; box-shadow:0 0 0 4px #49453e, 0 0 70px rgba(185,255,49,.12); transform:rotate(2deg); }
.portrait-shell img { width:100%; height:100%; object-fit:cover; }
.nose-boop { position:absolute; left:40%; top:49%; width:22%; aspect-ratio:1.5; opacity:0; cursor:pointer; }
.orbit { position:absolute; inset:4%; border:1px dashed rgba(238,231,216,.4); border-radius:50%; animation:spin 24s linear infinite; }
.orbit-one span { position:absolute; padding:5px 9px; background:var(--ink); color:var(--acid); font:800 9px monospace; letter-spacing:2px; }
.orbit-one span:nth-child(1){left:5%;top:17%}.orbit-one span:nth-child(2){right:-2%;top:48%}.orbit-one span:nth-child(3){left:23%;bottom:-2%}
.orbit-two { inset:15%; border-style:solid; opacity:.26; animation-direction:reverse; animation-duration:11s; }
.sticker { position:absolute; z-index:4; display:grid; place-items:center; text-align:center; color:var(--ink); font:24px/.82 var(--display); }
.sticker-a { left:0; top:9%; width:95px; aspect-ratio:1; border-radius:50%; background:var(--acid); transform:rotate(-14deg); }
.sticker-b { right:-2%; bottom:12%; width:105px; aspect-ratio:1; clip-path:polygon(50% 0,61% 18%,82% 8%,83% 31%,100% 39%,86% 55%,96% 76%,73% 79%,66% 100%,48% 87%,30% 100%,24% 77%,0 72%,13% 53%,0 36%,23% 29%,25% 5%,44% 18%); background:var(--pink); font-size:15px; }
.visual-note { position:absolute; right:3%; top:2%; padding:10px; border-left:2px solid var(--acid); color:var(--paper); font:700 10px/1.4 monospace; transform:rotate(5deg); }.visual-note span{color:#8c877f}
.scroll-note { position:absolute; left:24px; bottom:20px; font:800 9px monospace; letter-spacing:2px; writing-mode:vertical-rl; }.scroll-note span{color:var(--acid);font-size:18px}
.origin { min-height:88vh; padding:140px clamp(24px,8vw,140px); background:var(--paper); color:var(--ink); }
.origin .eyebrow { color:var(--blue); }
h2 { max-width:980px; font-size:clamp(64px,9vw,142px); line-height:.86; }
.origin-intro { max-width:680px; margin:40px 0 0 auto; font-size:clamp(19px,2vw,29px); line-height:1.4; font-weight:800; }
.toast { position:fixed; left:50%; bottom:30px; z-index:50; transform:translate(-50%,30px); opacity:0; padding:12px 18px; border-radius:99px; color:var(--ink); background:var(--acid); font-weight:900; transition:.3s ease; pointer-events:none; }.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:900px){.topbar{grid-template-columns:1fr auto}.topbar nav{display:none}.top-actions .button-ghost{display:none}.hero{grid-template-columns:1fr;padding-top:150px}.hero-copy{z-index:5}.hero-visual{width:min(90vw,590px);justify-self:center;margin-top:-20px}.ticker{flex-wrap:wrap}.origin{padding-top:100px}}
@media (max-width:520px){.topbar{inset:10px}.brand>span:last-child{font-size:18px}.top-actions .button{padding:12px 15px}.hero{padding-inline:18px}.hero h1{font-size:20vw}.hero-visual{width:100%}.sticker{transform:scale(.78)}.sticker-a{left:-3%}.sticker-b{right:-4%}.scroll-note{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orbit{animation:none}.button{transition:none}}

/* Transmission layer */
a, button, input, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.page-wipe {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  color:var(--ink);
  background:var(--acid);
  font:clamp(42px,8vw,110px)/.85 var(--display);
  letter-spacing:-.03em;
  clip-path:inset(0 100% 0 0);
  pointer-events:none;
}
.page-wipe span { transform:rotate(-4deg); }
body.wiping .page-wipe { animation:wipe .7s cubic-bezier(.7,0,.2,1); }
@keyframes wipe { 0%{clip-path:inset(0 100% 0 0)} 45%{clip-path:inset(0)} 55%{clip-path:inset(0)} 100%{clip-path:inset(0 0 0 100%)} }

.cursor { position:fixed; z-index:90; left:0; top:0; width:38px; height:29px; border:2px solid var(--pink); border-radius:46% 46% 55% 55%; pointer-events:none; transform:translate(-50%,-50%); mix-blend-mode:difference; transition:width .14s,height .14s,background .14s; }
.cursor::before,.cursor::after { content:""; position:absolute; top:9px; width:5px; height:8px; border-radius:50%; background:var(--pink); }
.cursor::before{left:8px}.cursor::after{right:8px}
.cursor span { position:absolute; inset:-8px; border:1px dashed var(--paper); border-radius:50%; animation:spin 7s linear infinite; }
.cursor.hover { width:58px; height:44px; background:rgba(185,255,49,.28); }

.sky-props { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; font-family:var(--display); }
.prop { position:absolute; color:rgba(238,231,216,.2); -webkit-text-stroke:1px rgba(238,231,216,.35); filter:drop-shadow(3px 3px 0 rgba(33,77,242,.25)); animation:drift 9s ease-in-out infinite; }
.prop-phone { left:4%; top:22%; display:grid; place-items:center; width:45px; height:72px; border:2px solid currentColor; border-radius:8px; font-size:20px; transform:rotate(-16deg); }.prop-phone i{font:9px monospace;position:absolute;top:8px}
.prop-cross { right:5%; top:44%; font-size:64px; animation-delay:-3s; transform:rotate(19deg); }
.prop-headphones { left:7%; bottom:10%; font-size:45px; animation-delay:-6s; transform:rotate(-12deg); }
.prop-beanie { right:17%; top:18%; width:72px; height:50px; border:3px solid currentColor; border-radius:70px 70px 10px 10px; font-size:0; animation-delay:-4s; }
.prop-beanie::after { content:""; position:absolute; left:-5px; right:-5px; bottom:-8px; height:14px; border:3px solid currentColor; border-radius:8px; }
.prop-cassette { right:4%; bottom:7%; padding:12px 15px; border:3px solid currentColor; font-size:28px; transform:rotate(13deg); }
@keyframes drift { 50%{translate:0 -18px;rotate:7deg} }

/* Origin / chapter switcher */
.origin { position:relative; overflow:hidden; padding-bottom:160px; }
.origin::before { content:"NAS\A PIG"; white-space:pre; position:absolute; right:-2vw; top:4vw; color:rgba(9,11,13,.035); font:28vw/.7 var(--display); transform:rotate(90deg); transform-origin:top right; pointer-events:none; }
.origin-heading { position:relative; z-index:1; }
.story-machine { position:relative; z-index:2; display:grid; grid-template-columns:200px minmax(0,1fr); max-width:1260px; min-height:590px; margin:100px auto 0; border:2px solid var(--ink); background:var(--ink); box-shadow:14px 14px 0 var(--blue); }
.chapter-rail { display:flex; flex-direction:column; border-right:1px solid rgba(238,231,216,.2); background:#111416; }
.chapter-button { flex:1; display:flex; align-items:center; gap:13px; min-height:92px; padding:18px; border:0; border-bottom:1px solid rgba(238,231,216,.15); color:#817d76; background:transparent; text-align:left; cursor:pointer; }
.chapter-button b { font:32px/1 var(--display); color:#4b4b47; }
.chapter-button span { font-size:11px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
.chapter-button:hover,.chapter-button.active { color:var(--acid); background:#1b1d1d; }
.chapter-button.active b { color:var(--paper); text-shadow:2px 2px 0 var(--blue); }
.story-stage { position:relative; overflow:hidden; }
.story-card { position:absolute; inset:0; display:grid; grid-template-columns:1fr .62fr; gap:24px; align-items:center; padding:clamp(30px,5vw,70px); color:var(--paper); opacity:0; visibility:hidden; transform:translateX(60px) rotate(1deg); transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1); }
.story-card.active { opacity:1; visibility:visible; transform:none; }
.card-index { position:absolute; top:22px; right:24px; color:#595b58; font:10px monospace; letter-spacing:2px; }
.stamp { display:inline-block; padding:9px 12px; border:1px dashed var(--pink); color:var(--pink); font:700 10px/1.45 monospace; transform:rotate(-2deg); }
.story-card h3 { max-width:680px; margin:22px 0; font:clamp(45px,5.4vw,78px)/.86 var(--display); text-transform:uppercase; letter-spacing:-.025em; }
.story-card p:not(.stamp) { max-width:620px; color:#bbb3a7; font-size:16px; line-height:1.62; }
.inline-action { margin-top:14px; padding:0 0 6px; border:0; border-bottom:2px solid var(--acid); color:var(--acid); background:transparent; font:900 11px var(--body); letter-spacing:1px; cursor:pointer; }
.helmet-record { display:grid; place-items:center; aspect-ratio:1; border:20px double #817b70; border-radius:50%; background:radial-gradient(circle,var(--pink) 0 11%,#272828 12% 47%,#9d927f 48% 52%,#17191a 53%); transform:rotate(8deg); }
.helmet-record span { display:grid; place-items:center; width:42%; aspect-ratio:1; border-radius:50%; color:var(--ink); background:var(--acid); font:20px/.9 var(--display); text-align:center; transform:rotate(-15deg); }
.waveform { display:flex; align-items:center; justify-content:center; gap:8px; height:240px; border:1px solid rgba(238,231,216,.14); background:repeating-linear-gradient(90deg,transparent 0 19px,rgba(185,255,49,.04) 20px); transform:rotate(2deg); }
.waveform i { width:7px; height:40%; background:var(--acid); animation:pulse-bars 1s ease-in-out infinite; transform-origin:center; }.waveform i:nth-child(2n){animation-delay:-.2s}.waveform i:nth-child(3n){animation-delay:-.5s}
@keyframes pulse-bars { 50%{transform:scaleY(.18)} }
.margin-doodle { display:grid; place-items:center; min-height:300px; padding:30px; border:3px dashed var(--paper); color:var(--paper); font:clamp(68px,9vw,135px)/.58 var(--display); text-align:center; transform:rotate(-4deg); text-shadow:8px 7px 0 var(--blue); }.margin-doodle span{color:var(--acid)}
.name-plate { padding:60px 20px; border:9px ridge #777064; color:#282727; background:#aba397; box-shadow:inset 0 0 35px #514d46; font:clamp(36px,4vw,64px)/1 var(--display); text-align:center; transform:rotate(3deg); text-shadow:1px 1px #d3c9b8; }.name-plate del{color:#58544c;text-decoration-thickness:7px}
.story-progress { position:absolute; left:0; bottom:0; right:0; height:5px; background:#232526; }.story-progress span { display:block; width:25%; height:100%; background:var(--acid); box-shadow:8px 0 0 var(--blue); transition:width .4s ease; }

/* Specimen explainer */
.specimen { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:#111315; }
.specimen-photo { position:relative; min-height:760px; overflow:hidden; background:var(--ink); }
.specimen-photo::after { content:"SPECIMEN 004½"; position:absolute; left:20px; bottom:20px; padding:10px; color:var(--acid); background:var(--ink); font:10px monospace; letter-spacing:2px; }
.specimen-photo img { width:100%; height:100%; object-fit:cover; filter:contrast(1.08) saturate(.86) sepia(.1); transition:filter .5s,transform .8s; }
.specimen.margin-vision .specimen-photo img { filter:grayscale(1) contrast(1.8) brightness(.8); transform:scale(1.05); }
.specimen.margin-vision .specimen-photo { background-image:repeating-linear-gradient(0deg,rgba(185,255,49,.15) 0 1px,transparent 1px 5px); background-blend-mode:screen; }
.hotspot { position:absolute; z-index:2; display:grid; place-items:center; width:44px; aspect-ratio:1; border:2px solid var(--ink); border-radius:50%; color:var(--ink); background:var(--acid); box-shadow:0 0 0 8px rgba(185,255,49,.25); font:28px/1 var(--display); cursor:pointer; animation:ping 2s ease-out infinite; }
.hotspot:hover,.hotspot.active { color:var(--paper); background:var(--blue); transform:rotate(45deg); }
.hotspot-goggles{left:62%;top:35%}.hotspot-helmet{left:20%;top:16%}.hotspot-suit{left:68%;bottom:17%}
@keyframes ping { 70%{box-shadow:0 0 0 18px rgba(185,255,49,0)} }
.specimen-copy { align-self:center; padding:90px clamp(28px,7vw,110px); }
.specimen-copy h2 { font-size:clamp(58px,7.8vw,120px); }
.fact-display { min-height:190px; margin-top:56px; padding:28px 0 0 32px; border-left:2px solid var(--blue); }
.fact-display span { color:var(--pink); font:800 10px monospace; letter-spacing:2px; }
.fact-display h3 { margin:9px 0; font:38px/1 var(--display); text-transform:uppercase; }
.fact-display p { max-width:520px; color:#aaa399; line-height:1.55; }
.scribble-button { position:relative; margin-top:24px; padding:16px 20px; border:2px solid var(--paper); color:var(--paper); background:transparent; font:900 11px var(--body); letter-spacing:1px; cursor:pointer; transform:rotate(-1deg); }.scribble-button::after{content:"";position:absolute;inset:5px -7px -7px 5px;border:1px solid var(--acid)}

/* Non-linear orbit roadmap */
.orbit-map { position:relative; min-height:1100px; padding:140px clamp(20px,6vw,90px); overflow:hidden; background:#0b0d0e; }
.orbit-map::before { content:""; position:absolute; inset:0; opacity:.28; background:url("assets/naspig-collage.png") center/cover; mix-blend-mode:luminosity; }
.map-heading { position:relative; z-index:1; max-width:1050px; }
.map-heading>p:last-child { max-width:600px; margin:28px 0 0 auto; color:#a7a097; font-size:17px; line-height:1.55; }
.constellation { position:relative; z-index:2; max-width:1250px; height:560px; margin:70px auto 0; }
.constellation svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.route-shadow,.route-dash { fill:none; vector-effect:non-scaling-stroke; }
.route-shadow { stroke:#1d221a; stroke-width:18; }
.route-dash { stroke:var(--acid); stroke-width:2; stroke-dasharray:.018 .012; filter:drop-shadow(0 0 8px rgba(185,255,49,.55)); animation:dash 20s linear infinite; }
@keyframes dash { to{stroke-dashoffset:-1} }
.signal-node { position:absolute; display:grid; place-items:center; width:96px; aspect-ratio:1; border:1px solid var(--paper); border-radius:50%; color:var(--paper); background:var(--ink); cursor:pointer; box-shadow:0 0 0 0 var(--acid); transition:.3s ease; }
.signal-node:hover,.signal-node.active { color:var(--ink); background:var(--acid); border-color:var(--acid); box-shadow:0 0 0 12px rgba(185,255,49,.13),7px 7px 0 var(--blue); transform:scale(1.08) rotate(-4deg); }
.signal-node span { position:absolute; top:-20px; color:var(--pink); font:11px monospace; }.signal-node b{font:17px/.85 var(--display);text-align:center}.node-0{left:3%;top:52%}.node-1{left:27%;top:11%}.node-2{right:26%;bottom:5%}.node-3{right:2%;top:18%}
.signal-card { position:absolute; left:38%; top:34%; width:min(420px,36%); padding:24px; border:1px solid rgba(238,231,216,.28); color:var(--paper); background:rgba(9,11,13,.88); backdrop-filter:blur(12px); transform:rotate(-1deg); }
.signal-card span,.signal-card small { color:var(--acid); font:10px monospace; letter-spacing:1.4px; }.signal-card h3{margin:10px 0;font:43px/1 var(--display);text-transform:uppercase}.signal-card p{color:#aaa399;font-size:14px;line-height:1.5}.signal-card small{display:block;margin-top:18px;color:var(--pink)}
.orbit-pig { position:absolute; left:6%; top:58%; font-size:34px; offset-path:path("M 75 315 C 190 70 390 75 485 260 C575 445 785 455 925 160"); offset-distance:0%; animation:travel 14s linear infinite; filter:drop-shadow(0 0 8px var(--acid)); }
@keyframes travel { to{offset-distance:100%} }

/* Signal lab */
.lab { display:grid; grid-template-columns:1.05fr .95fr; min-height:980px; color:var(--ink); background:var(--paper); }
.lab-panel { align-self:center; margin:70px clamp(24px,5vw,80px); padding:20px; border:6px solid #252525; border-radius:32px; background:#4b4a45; box-shadow:inset 0 0 0 4px #918b7c,14px 14px 0 var(--blue); transform:rotate(-1deg); }
.lab-header { display:flex; justify-content:space-between; padding:12px 14px 24px; color:#cbc1ae; font:800 10px monospace; letter-spacing:1.5px; }.live-dot{color:var(--acid)}.live-dot::before{content:"";display:inline-block;width:7px;aspect-ratio:1;margin-right:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid)}
.frequency { padding:28px; border:5px inset #5d5f57; color:var(--acid); background:#0d170d; font-family:monospace; text-shadow:0 0 12px rgba(185,255,49,.6); }.frequency-label{display:block;font-size:9px;letter-spacing:2px}.frequency output{font-size:clamp(54px,7vw,100px);line-height:1}.frequency small{font-weight:900}
#frequency-slider { width:100%; height:34px; margin:22px 0; accent-color:var(--acid); cursor:ew-resize; }
.signal-screen { position:relative; min-height:180px; overflow:hidden; padding:25px; border:4px inset #61605a; color:#a4ff64; background:#0a140d; font-family:monospace; }.signal-screen>span{font-size:10px;letter-spacing:2px}.signal-screen p{position:relative;z-index:1;max-width:490px;margin-top:35px;font-size:17px;line-height:1.45}.screen-grid{position:absolute;inset:0;opacity:.14;background:linear-gradient(transparent 95%,var(--acid) 95%),linear-gradient(90deg,transparent 95%,var(--acid) 95%);background-size:20px 20px;animation:screen-shift 8s linear infinite}@keyframes screen-shift{to{background-position:40px 20px}}
.lab-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.lab-key { min-height:90px; padding:12px; border:3px outset #73726d; color:var(--paper); background:#242628; cursor:pointer; }.lab-key:hover,.lab-key.active{color:var(--ink);background:var(--acid)}.lab-key b{display:block;font:28px var(--display)}.lab-key span{font:8px monospace;letter-spacing:1px}
.transmission-form { position:relative; align-self:center; padding:90px clamp(28px,7vw,100px); overflow:hidden; }
.transmission-form::before { content:"✝"; position:absolute; right:-30px; top:30px; color:rgba(9,11,13,.04); font:340px/1 var(--display); transform:rotate(14deg); }
.transmission-form .eyebrow{color:var(--blue)}.transmission-form h2{position:relative;font-size:clamp(60px,7.2vw,110px)}.transmission-form>p{position:relative;max-width:590px;font-size:17px;line-height:1.55}
.transmission-form label { display:block; margin:40px 0 10px; font:900 10px var(--body); letter-spacing:1.6px; }
.transmission-form textarea { position:relative; width:100%; min-height:150px; resize:vertical; padding:20px; border:2px solid var(--ink); border-radius:0; color:var(--ink); background:transparent; font:22px/1.4 var(--body); box-shadow:8px 8px 0 var(--pink); }
.form-footer { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:20px; }.form-footer>span{font:10px monospace}
.receipt { margin-top:30px; padding:24px; border:2px dashed var(--blue); background:#d9d0be; transform:rotate(1deg); }.receipt span{display:block;font:9px monospace;letter-spacing:2px}.receipt strong{display:block;margin:10px 0;color:var(--blue);font:42px var(--display)}.receipt button{padding:0;border:0;border-bottom:1px solid var(--ink);background:transparent;font-weight:900;cursor:pointer}

/* Catchable objects */
.collect-zone { position:relative; min-height:900px; overflow:hidden; padding:120px clamp(24px,8vw,130px); background:#080a0b; }
.collage-layer { position:absolute; inset:0; opacity:.58; background:url("assets/naspig-collage.png") center/cover no-repeat; filter:contrast(1.04); }
.collect-zone>.eyebrow,.collect-zone>h2,.collect-zone>p{position:relative;z-index:2}.collect-zone>h2{max-width:900px}.collect-zone>p{max-width:520px;color:#b6ada0;font-size:17px;line-height:1.5}
.collectables { position:absolute; inset:0; z-index:3; }
.collectable { position:absolute; display:grid; place-items:center; border:2px solid var(--paper); color:var(--paper); background:rgba(9,11,13,.78); font:clamp(30px,5vw,70px)/1 var(--display); cursor:grab; filter:drop-shadow(6px 6px 0 var(--blue)); animation:float-object 5s ease-in-out infinite; transition:opacity .4s,transform .4s; }.collectable:hover{color:var(--acid);border-color:var(--acid);transform:scale(1.13) rotate(-8deg)}.collectable.collected{opacity:0;transform:scale(.1) rotate(90deg);pointer-events:none}.collect-phone{right:12%;top:12%;width:90px;height:140px;border-radius:12px;transform:rotate(11deg)}.collect-phone span{position:absolute;top:10px;font:10px monospace}.collect-cross{left:8%;bottom:14%;width:84px;aspect-ratio:1;border-radius:50%;animation-delay:-1s}.collect-headphones{right:20%;bottom:11%;padding:22px;border-radius:20px;animation-delay:-3s}.collect-beanie{left:43%;bottom:6%;width:130px;height:90px;border-radius:80px 80px 12px 12px;animation-delay:-4s}.collect-tape{right:6%;top:49%;padding:18px 25px;animation-delay:-2s}@keyframes float-object{50%{translate:0 -22px;rotate:6deg}}
.pocket { position:fixed; z-index:35; right:20px; bottom:18px; display:flex; align-items:center; gap:14px; padding:10px 12px 10px 17px; border:1px solid var(--line); border-radius:999px; color:var(--paper); background:rgba(9,11,13,.82); backdrop-filter:blur(12px); box-shadow:3px 3px 0 var(--blue); }.pocket>span{font:8px monospace;letter-spacing:1px}.pocket b{display:grid;place-items:center;width:48px;aspect-ratio:1;border-radius:50%;color:var(--ink);background:var(--acid);font:17px monospace}.pocket i{font-style:normal}

/* Footer */
footer { position:relative; min-height:820px; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden; padding:120px 24px 30px; text-align:center; background:#0b0d0e; }
footer h2 { position:relative; z-index:2; font-size:clamp(76px,12vw,185px); line-height:.76; }
.footer-copy { position:relative; z-index:2; max-width:620px; color:#aaa399; font-size:18px; line-height:1.55; }.footer-actions{position:relative;z-index:2;display:flex;gap:14px;margin-top:28px}.footer-orbit{position:absolute;width:min(80vw,900px);aspect-ratio:1;border:1px dashed rgba(238,231,216,.16);border-radius:50%;animation:spin 45s linear infinite}.footer-orbit::before,.footer-orbit::after{content:"";position:absolute;border:1px solid rgba(185,255,49,.1);border-radius:50%;inset:12%;}.footer-orbit::after{inset:27%}.footer-orbit span{position:absolute;top:8%;left:3%;color:rgba(185,255,49,.2);font:80px var(--display)}
.footer-bottom { position:absolute; left:24px; right:24px; bottom:24px; display:flex; justify-content:space-between; gap:20px; padding-top:15px; border-top:1px solid rgba(238,231,216,.2); color:#74746d; font:9px monospace; letter-spacing:1px; }.footer-bottom button{border:0;color:var(--acid);background:transparent;font:inherit;cursor:pointer}

/* Global modes */
body.zero-g .prop,body.zero-g .collectable,body.zero-g .sticker,body.zero-g .signal-card { animation:zero-g 3.2s ease-in-out infinite alternate !important; }
@keyframes zero-g { to{translate:clamp(-90px,-8vw,-30px) clamp(-120px,-10vw,-40px);rotate:30deg;scale:1.08} }
body.ink-shift { --acid:#ff6bd6; --blue:#1ee8ff; --pink:#fff43d; }
body.ink-shift::before { filter:hue-rotate(125deg) contrast(1.15); }
.reveal-ready { opacity:0; transform:translateY(45px) rotate(.6deg); transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal-ready.is-visible { opacity:1; transform:none; }
.secret-dialog { width:min(820px,calc(100% - 28px)); padding:clamp(30px,6vw,70px); border:3px solid var(--acid); color:var(--paper); background:#0a0c0d url("assets/naspig-collage.png") center/cover; box-shadow:14px 14px 0 var(--blue); text-align:center; }
.secret-dialog::backdrop { background:rgba(9,11,13,.87); backdrop-filter:blur(8px); }
.secret-dialog>button { position:absolute; right:14px; top:10px; border:0; color:var(--paper); background:transparent; font:36px/1 var(--body); cursor:pointer; }
.secret-dialog>span,.secret-dialog>small { color:var(--acid); font:10px monospace; letter-spacing:2px; }
.secret-dialog h2 { margin:25px 0; font-size:clamp(60px,10vw,120px); }
.secret-dialog p { max-width:600px; margin:0 auto 30px; color:#c1b8aa; font-size:18px; line-height:1.6; }
.secret-dialog small { color:var(--pink); }

@media (max-width:1000px){
  .story-machine{grid-template-columns:1fr;min-height:670px}.chapter-rail{flex-direction:row;border-right:0;border-bottom:1px solid rgba(238,231,216,.2)}.chapter-button{min-height:72px;border-right:1px solid rgba(238,231,216,.15);padding:12px}.chapter-button span{display:none}.story-card{top:72px}.specimen,.lab{grid-template-columns:1fr}.specimen-photo{min-height:680px}.lab-panel{order:2}.transmission-form{order:1}.orbit-map{min-height:1050px}.constellation{height:620px}.signal-card{left:27%;top:37%;width:50%}
}
@media (max-width:700px){
  .cursor{display:none}.pocket{right:10px;bottom:10px}.pocket>span{display:none}.origin{padding-inline:18px}.story-machine{margin-top:60px;min-height:790px}.story-card{grid-template-columns:1fr;padding:28px 22px}.story-card h3{font-size:47px}.card-visual,.waveform,.margin-doodle,.name-plate{max-height:180px;min-height:150px}.waveform{height:150px}.specimen-photo{min-height:560px}.specimen-copy{padding-inline:20px}.orbit-map{padding-inline:15px;min-height:1150px}.constellation{height:690px;margin-top:40px}.constellation svg{opacity:.55}.signal-node{width:74px}.node-0{left:2%;top:47%}.node-1{left:20%;top:9%}.node-2{right:18%;bottom:12%}.node-3{right:1%;top:23%}.signal-card{left:12%;top:34%;width:76%}.orbit-pig{display:none}.lab-panel{margin-inline:12px}.lab-controls{grid-template-columns:1fr}.lab-key{min-height:66px}.transmission-form{padding-inline:20px}.form-footer{align-items:flex-start;flex-direction:column}.collect-zone{min-height:750px;padding-inline:18px}.collect-phone{right:5%}.collect-headphones{right:6%}.collect-beanie{left:32%}.collect-cross{left:4%}.footer-actions{flex-direction:column;width:min(100%,390px)}.footer-actions .button{display:block}.footer-bottom{align-items:center;flex-direction:column}.sky-props{display:none}
}
@media (prefers-reduced-motion:reduce){.page-wipe,.cursor span,.prop,.waveform i,.route-dash,.orbit-pig,.hotspot,.screen-grid,.collectable,.footer-orbit{animation:none!important}}
@media (prefers-reduced-motion:reduce){.reveal-ready{opacity:1;transform:none;transition:none}}