/* ═══════════════════════════════════════════════
   STRAY — Complete Stylesheet
   Three mood zones: Dome/Clinical → Urban/Gritty → Nature/Organic
═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100;400;700&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* Core palette */
  --ink:    #050709;
  --ink2:   #07090d;
  --paper:  #e8e0d0;
  --dim:    rgba(232,224,208,.45);
  --faint:  rgba(232,224,208,.07);
  /* Accent colours per zone */
  --cyan:   #00e5ff;   /* dome/clinical */
  --orange: #e8622a;   /* urban/neon */
  --lime:   #6ec96e;   /* nature/green */
  /* Type */
  --display: 'Antonio', sans-serif;
  --mono:    'Courier Prime', monospace;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  overflow-x: hidden;
  cursor: none;
}
::-webkit-scrollbar { width:2px; }
::-webkit-scrollbar-thumb { background: var(--orange); }
img { display:block; max-width:100%; }
a   { color:inherit; text-decoration:none; }

/* ────────────────────────────────
   CURSOR
──────────────────────────────── */
#cursor { position:fixed; inset:0; z-index:9999; pointer-events:none; }
.c-dot {
  position:absolute; width:8px; height:8px;
  background:var(--paper); border-radius:50%;
  transform:translate(-50%,-50%);
  transition:transform .1s, background .2s;
}
.c-ring {
  position:absolute; width:34px; height:34px;
  border:1px solid rgba(232,224,208,.35); border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .28s, height .28s, border-color .2s;
}
body.hov .c-dot  { transform:translate(-50%,-50%) scale(2.8); background:var(--orange); }
body.hov .c-ring { width:56px; height:56px; border-color:var(--orange); }

/* ────────────────────────────────
   SCROLL PROGRESS BAR
──────────────────────────────── */
#progress {
  position:fixed; top:0; left:0; right:0; height:2px; z-index:800;
  background:var(--orange);
  transform:scaleX(0); transform-origin:left; transition:none;
}

/* ────────────────────────────────
   LOADER
──────────────────────────────── */
#loader {
  position:fixed; inset:0; z-index:10000;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
}
#loader.out { animation:loaderOut .7s .1s ease forwards; }
@keyframes loaderOut {
  0%   { opacity:1; transform:none; }
  30%  { opacity:1; transform:scale(1.03); }
  100% { opacity:0; transform:scale(1.07); pointer-events:none; }
}

/* Big ghost title */
.ld-title {
  font-family:var(--display);
  font-size:clamp(5rem,18vw,16rem);
  font-weight:700; line-height:.85;
  text-transform:uppercase;
  color:rgba(232,224,208,.04);
  letter-spacing:-.01em;
  user-select:none; pointer-events:none;
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
}

/* City silhouette strip */
.ld-cityline {
  position:absolute; bottom:26%; left:0; right:0; height:220px;
  background:rgba(232,224,208,.025);
  clip-path: polygon(
    0 100%, 2% 100%, 2% 62%, 5% 62%, 5% 38%, 8% 38%, 8% 55%,
    11% 55%, 11% 28%, 14% 28%, 14% 48%, 17% 48%, 17% 18%,
    20% 18%, 20% 42%, 23% 42%, 23% 22%, 26% 22%, 26% 58%,
    29% 58%, 29% 33%, 32% 33%, 32% 12%, 35% 12%, 35% 38%,
    38% 38%, 38% 52%, 41% 52%, 41% 25%, 44% 25%, 44% 8%,
    47% 8%,  47% 32%, 50% 32%, 50% 20%, 53% 20%, 53% 48%,
    56% 48%, 56% 16%, 59% 16%, 59% 35%, 62% 35%, 62% 22%,
    65% 22%, 65% 52%, 68% 52%, 68% 28%, 71% 28%, 71% 42%,
    74% 42%, 74% 18%, 77% 18%, 77% 38%, 80% 38%, 80% 58%,
    83% 58%, 83% 33%, 86% 33%, 86% 48%, 89% 48%, 89% 26%,
    92% 26%, 92% 42%, 95% 42%, 95% 54%, 98% 54%, 98% 100%
  );
}
.ld-ground {
  position:absolute; bottom:26%; left:0; right:0; height:1px;
  background:linear-gradient(to right,transparent,rgba(232,224,208,.1) 20%,rgba(232,224,208,.1) 80%,transparent);
}
/* Flickering neon windows */
.ld-win {
  position:absolute; background:var(--orange);
  animation:wflick var(--dur,3s) var(--del,0s) ease infinite;
}
@keyframes wflick {
  0%,100% { opacity:0; }
  40%,60% { opacity:.65; }
  55%     { opacity:.2; }
}
/* Scan line */
.ld-scan {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom, transparent 0, transparent 3px, rgba(0,0,0,.06) 3px, rgba(0,0,0,.06) 4px
  );
  animation:scanpan 7s linear infinite;
}
@keyframes scanpan { from{background-position:0 0} to{background-position:0 80px} }
/* Vignette */
.ld-vig {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 78% 78% at 50% 50%, transparent 45%, rgba(5,7,9,.9) 100%);
}

/* ── CAT STAGE ── */
.ld-stage {
  position:absolute; bottom:calc(26% + 1px); left:0; right:0; height:90px;
}

/* Walking cat SVG container */
#cat-walk {
  position:absolute; bottom:0; left:-120px;
  width:90px; height:62px;
  transition:none; /* JS controls transform */
}
#cat-walk svg .leg { transform-origin:50% 0; }
#cat-walk.walking .fl { animation:legA .3s ease infinite; }
#cat-walk.walking .fr { animation:legA .3s .15s ease infinite; }
#cat-walk.walking .bl { animation:legA .3s .1s ease infinite; }
#cat-walk.walking .br { animation:legA .3s .25s ease infinite; }
@keyframes legA { 0%,100%{transform:rotate(0)} 50%{transform:rotate(20deg)} }
/* tail wag while walking */
#cat-walk.walking .tail { animation:tailwag .6s ease infinite; transform-origin:100% 100%; }
@keyframes tailwag { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-12deg)} }

/* Sitting cat */
#cat-sit {
  position:absolute; bottom:0; left:0;
  width:70px; height:78px; opacity:0;
}

/* Enter button */
#enter-btn {
  position:absolute; bottom:calc(26% + 18px); right:17%;
  background:transparent; color:rgba(232,224,208,.45);
  border:1px solid rgba(232,224,208,.2);
  padding:.75rem 2.4rem;
  font-family:var(--mono); font-size:.56rem; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
  opacity:0; pointer-events:none;
  transition:opacity .5s, border-color .3s, color .3s, box-shadow .3s, transform .1s;
}
#enter-btn.show { opacity:1; pointer-events:auto; }
#enter-btn.lit  {
  border-color:var(--cyan); color:var(--cyan);
  box-shadow:0 0 24px rgba(0,229,255,.2), inset 0 0 12px rgba(0,229,255,.04);
}
#enter-btn:hover {
  border-color:var(--paper); color:var(--paper);
}

/* Paw overlay */
#paw {
  position:absolute; width:52px; height:52px;
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
}

/* Loader status */
.ld-status {
  position:absolute; bottom:7%;
  font-size:.38rem; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(232,224,208,.2);
  display:flex; align-items:center; gap:1rem;
}
.ld-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--cyan); animation:ldot 1.4s ease infinite;
}
.ld-dot:nth-child(2) { animation-delay:.35s; }
.ld-dot:nth-child(3) { animation-delay:.7s;  }
@keyframes ldot { 0%,100%{opacity:.2} 50%{opacity:1} }

/* ────────────────────────────────
   NAV
──────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:600;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem 4rem;
  transition:background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
nav.solid {
  background:rgba(5,7,9,.9);
  backdrop-filter:blur(18px);
  border-bottom-color:var(--faint);
}
.nav-logo {
  font-family:var(--display); font-size:1.5rem;
  font-weight:700; letter-spacing:.15em; color:var(--paper);
}
.nav-links { display:flex; gap:2.5rem; list-style:none; align-items:center; }
.nav-links a {
  font-size:.5rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); transition:color .2s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0; right:0;
  height:1px; background:var(--cyan);
  transform:scaleX(0); transform-origin:left; transition:transform .26s;
}
.nav-links a:hover { color:var(--paper); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-cta {
  background:var(--orange)!important;
  color:var(--ink)!important;
  padding:.48rem 1.35rem;
  font-weight:700!important; font-size:.5rem!important;
  letter-spacing:.18em;
  transition:background .2s!important;
}
.nav-cta::after { display:none!important; }
.nav-cta:hover { background:var(--paper)!important; }

/* ────────────────────────────────
   HERO  ── dome/clinical aesthetic
   Inspired by the control panel + city
──────────────────────────────── */
#hero {
  height:100vh; position:relative;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-img {
  position:absolute; inset:0;
}
.hero-img img {
  width:100%; height:115%; object-fit:cover;
  filter:brightness(.65) saturate(.8);
  will-change:transform; transform-origin:bottom center;
}
/* Gradients */
.hero-fade {
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(5,7,9,.55) 38%, transparent 65%),
    linear-gradient(to right, rgba(5,7,9,.42) 0%, transparent 55%);
}
/* Scanlines matching the game's control panel */
.hero-scan {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom, transparent 0, transparent 3px, rgba(0,0,0,.05) 3px, rgba(0,0,0,.05) 4px
  );
  animation:scanpan 9s linear infinite; opacity:.55;
}
/* Cyan glow strip at top — echoing the control panel cyan borders */
.hero-cyanline {
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, transparent, var(--cyan) 30%, var(--cyan) 70%, transparent);
  opacity:.3; animation:cpulse 3s ease infinite;
}
@keyframes cpulse { 0%,100%{opacity:.15} 50%{opacity:.45} }
/* Rotating dome circle overlay */
.hero-dome-ring {
  position:absolute; top:-30%; left:50%;
  width:130vw; height:130vw;
  border:1px solid rgba(0,229,255,.04);
  border-radius:50%;
  transform:translateX(-50%);
  animation:dring 60s linear infinite;
  pointer-events:none;
}
.hero-dome-ring::after {
  content:''; position:absolute; inset:12px;
  border:1px solid rgba(232,224,208,.025);
  border-radius:50%;
}
@keyframes dring { from{transform:translateX(-50%) rotate(0)} to{transform:translateX(-50%) rotate(360deg)} }

/* HUD elements matching control panel */
.hero-hud-tl {
  position:absolute; top:5.5rem; left:4rem; z-index:10;
  display:flex; flex-direction:column; gap:.4rem;
  opacity:0; animation:fadeUp .7s .3s ease forwards;
}
.hud-line {
  font-size:.36rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(0,229,255,.5); display:flex; align-items:center; gap:.5rem;
}
.hud-line::before {
  content:''; width:12px; height:1px; background:currentColor;
}
.hud-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--cyan); animation:ldot 2s ease infinite;
  display:inline-block;
}

.hero-content {
  position:relative; z-index:10;
  padding:0 4rem 6rem; max-width:900px;
}
.hero-tag {
  font-size:.42rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--cyan); display:flex; align-items:center; gap:.8rem;
  margin-bottom:1.5rem;
  opacity:0; animation:fadeUp .7s .5s ease forwards;
}
.hero-tag::before { content:''; width:22px; height:1px; background:var(--cyan); }
.hero-h1 {
  font-family:var(--display);
  font-size:clamp(4rem,14vw,13rem);
  font-weight:700; line-height:.82;
  text-transform:uppercase; color:var(--paper);
  opacity:0; animation:slamIn .55s .75s cubic-bezier(.16,1,.3,1) forwards;
  position:relative;
}
.hero-h1 em { font-style:normal; color:var(--cyan); }
/* Ghost echo */
.hero-h1::before {
  content:attr(data-text);
  position:absolute; inset:0;
  -webkit-text-stroke:1px rgba(232,224,208,.06);
  color:transparent;
  transform:translate(5px,5px);
  font-family:var(--display);
  font-size:inherit; font-weight:inherit;
  text-transform:uppercase; line-height:inherit;
}
.hero-sub {
  margin-top:1.8rem; margin-bottom:2.8rem;
  font-size:clamp(.62rem,1.1vw,.82rem);
  line-height:1.9; color:rgba(232,224,208,.5); max-width:480px;
  opacity:0; animation:fadeUp .7s 1s ease forwards;
}
.hero-btns {
  display:flex; gap:1rem; flex-wrap:wrap;
  opacity:0; animation:fadeUp .7s 1.2s ease forwards;
}
.btn {
  display:inline-block; border:none; cursor:pointer;
  font-family:var(--mono); text-decoration:none;
}
.btn-fill {
  padding:.78rem 2.4rem;
  background:var(--orange); color:var(--ink);
  font-size:.56rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  transition:background .2s, transform .15s;
}
.btn-fill:hover { background:var(--paper); transform:translateY(-2px); }
.btn-ghost {
  padding:.78rem 2.4rem;
  background:transparent; color:var(--paper);
  font-size:.56rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  border:1px solid rgba(232,224,208,.25);
  transition:border-color .2s, transform .15s, background .2s;
}
.btn-ghost:hover { border-color:var(--paper); background:rgba(232,224,208,.04); transform:translateY(-2px); }

/* Right side data readout — control panel style */
.hero-data {
  position:absolute; right:4rem; top:50%;
  transform:translateY(-50%); z-index:10;
  display:flex; flex-direction:column; gap:.4rem;
  opacity:0; animation:fadeUp 1s 1.4s ease forwards;
}
.hdata-block {
  background:rgba(0,229,255,.04);
  border:1px solid rgba(0,229,255,.1);
  padding:1rem 1.4rem;
  min-width:140px; text-align:right;
}
.hdata-val {
  font-family:var(--display); font-size:1.8rem;
  color:var(--paper); line-height:1; margin-bottom:.2rem;
}
.hdata-val em { color:var(--cyan); font-style:normal; }
.hdata-lbl {
  font-size:.3rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(0,229,255,.45);
}
.hero-scroll {
  position:absolute; bottom:2.5rem; right:4rem; z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  opacity:0; animation:fadeUp .8s 1.7s ease forwards;
}
.scroll-txt {
  font-size:.32rem; letter-spacing:.38em; text-transform:uppercase;
  color:rgba(232,224,208,.25); writing-mode:vertical-rl;
}
.scroll-bar {
  width:1px; height:54px;
  background:linear-gradient(to bottom, var(--cyan), transparent);
  animation:scpulse 2s ease infinite;
}
@keyframes scpulse {
  0%  {transform:scaleY(0);transform-origin:top}
  49% {transform:scaleY(1);transform-origin:top}
  50% {transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@keyframes fadeUp  { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes slamIn  { from{opacity:0;transform:scale(1.14) translateY(8px)} to{opacity:1;transform:none} }

/* ────────────────────────────────
   TAPE TICKER
──────────────────────────────── */
.tape {
  overflow:hidden; padding:.6rem 0;
  position:relative; z-index:1;
}
.tape-inner {
  display:flex; gap:3rem; white-space:nowrap;
  animation:taperun 20s linear infinite;
}
@keyframes taperun { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tape-item {
  font-family:var(--display); font-size:.9rem;
  font-weight:400; letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; gap:2rem; flex-shrink:0;
}
.tape-sep { width:4px; height:4px; border-radius:50%; }
/* Zone colours applied by section */

/* ────────────────────────────────
   SHARED SECTION UTILS
──────────────────────────────── */
.sec { position:relative; z-index:1; }
.wrap { max-width:1340px; margin:0 auto; padding:0 4rem; }
.sec-tag {
  font-size:.38rem; letter-spacing:.42em; text-transform:uppercase;
  display:flex; align-items:center; gap:.65rem; margin-bottom:.9rem;
}
.sec-tag::before {
  font-family:var(--display); font-size:.85rem;
  color:rgba(232,224,208,.1); content:attr(data-n);
}
.sec-h2 {
  font-family:var(--display);
  font-size:clamp(2.2rem,5vw,4.8rem);
  font-weight:700; text-transform:uppercase;
  color:var(--paper); line-height:.9;
}
.body-p { font-size:.66rem; line-height:2; color:rgba(232,224,208,.5); margin-bottom:1.2rem; }
.body-p strong { color:var(--paper); }

/* REVEAL */
.rv {
  opacity:0; transform:translateY(38px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.rv.rl { transform:translateX(-38px); }
.rv.rr { transform:translateX(38px); }
.rv.vis { opacity:1; transform:none; }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s}
.d4{transition-delay:.4s} .d5{transition-delay:.5s}

/* ────────────────────────────────
   ZONE 1: STORY  (clinical/dome)
   Colours: cyan, concrete, precision
──────────────────────────────── */
#story {
  padding:10rem 0;
  background:var(--ink);
  border-top:1px solid rgba(0,229,255,.07);
}
/* Concrete texture */
#story::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E");
}
.story-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:7rem; align-items:center;
}
.story-img { position:relative; overflow:hidden; }
.story-img img {
  width:100%; aspect-ratio:16/11; object-fit:cover;
  filter:saturate(.7) brightness(.8);
  transition:filter .5s, transform .8s cubic-bezier(.16,1,.3,1);
}
.story-img:hover img { filter:saturate(1) brightness(.95); transform:scale(1.03); }
/* Control panel corner brackets */
.bracket {
  position:absolute; width:22px; height:22px;
  border-color:var(--cyan); border-style:solid; pointer-events:none;
  opacity:.5;
}
.bracket.tl { top:-1px; left:-1px; border-width:1px 0 0 1px; }
.bracket.br { bottom:-1px; right:-1px; border-width:0 1px 1px 0; }
/* CAM overlay like control panel monitors */
.story-cam {
  position:absolute; top:.7rem; right:.8rem;
  font-size:.3rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(0,229,255,.5); display:flex; align-items:center; gap:.4rem;
}
.story-cam::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--cyan); animation:ldot 2s ease infinite;
}
.story-text .sec-tag { color:var(--cyan); }
.story-text .sec-h2 em { font-style:normal; color:var(--cyan); }
/* Data cells like console readout */
.data-strip {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:1px; background:rgba(0,229,255,.07);
  border:1px solid rgba(0,229,255,.07);
  margin-top:3rem;
}
.ds-cell { background:var(--ink); padding:1.4rem 1.2rem; }
.ds-val {
  font-family:var(--display); font-size:2rem;
  color:var(--paper); line-height:1; margin-bottom:.2rem;
}
.ds-val em { color:var(--cyan); font-style:normal; }
.ds-lbl {
  font-size:.3rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(0,229,255,.4);
}

/* ────────────────────────────────
   GALLERY SLIDER
──────────────────────────────── */
#gallery { padding:10rem 0 0; background:var(--ink); overflow:hidden; }
.gal-head {
  padding:0 4rem; margin-bottom:3.5rem;
  display:flex; align-items:flex-end; justify-content:space-between;
}
.gal-head .sec-tag { color:var(--cyan); }
.gal-ctrl { display:flex; align-items:center; gap:.7rem; }
.gcnt { font-size:.44rem; letter-spacing:.15em; color:rgba(232,224,208,.28); min-width:55px; text-align:center; }
.gctl {
  width:44px; height:44px; border:1px solid rgba(232,224,208,.15);
  background:none; color:rgba(232,224,208,.45); font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; cursor:pointer;
}
.gctl:hover { border-color:var(--cyan); color:var(--cyan); }
.gal-outer { overflow:hidden; padding:0 4rem; cursor:grab; }
.gal-outer:active { cursor:grabbing; }
.gal-track {
  display:flex; gap:12px;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.gc { flex-shrink:0; overflow:hidden; position:relative; cursor:pointer; }
.gc.w { width:600px; height:375px; }
.gc.t { width:280px; height:375px; }
.gc img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.5) brightness(.7);
  transition:filter .5s, transform .6s cubic-bezier(.16,1,.3,1);
}
.gc:hover img { filter:saturate(1.05) brightness(1); transform:scale(1.05); }
.gc-n {
  position:absolute; top:.65rem; left:.8rem;
  font-family:var(--display); font-size:1.8rem;
  color:rgba(232,224,208,.1); pointer-events:none;
}
.gc-lbl {
  position:absolute; bottom:0; left:0; right:0;
  padding:.7rem .9rem;
  background:linear-gradient(transparent, rgba(5,7,9,.85));
  font-size:.35rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(232,224,208,.45);
  transform:translateY(100%); transition:transform .28s;
}
.gc:hover .gc-lbl { transform:translateY(0); }
.gal-dots {
  display:flex; gap:.45rem; justify-content:center;
  padding:2.5rem 0 5rem;
}
.gdot {
  width:5px; height:5px; border-radius:50%;
  background:rgba(232,224,208,.12); cursor:pointer;
  transition:background .2s, transform .2s;
}
.gdot.on { background:var(--cyan); transform:scale(1.5); }

/* ────────────────────────────────
   LIGHTBOX
──────────────────────────────── */
#lb {
  position:fixed; inset:0; z-index:2000;
  background:rgba(5,7,9,.96); backdrop-filter:blur(14px);
  display:none; align-items:center; justify-content:center;
}
#lb.open { display:flex; animation:fadein .2s ease; }
@keyframes fadein { from{opacity:0} to{opacity:1} }
#lbImg { max-width:88vw; max-height:84vh; object-fit:contain; display:block; }
.lb-x {
  position:absolute; top:1.5rem; right:1.5rem;
  width:42px; height:42px; border:1px solid rgba(232,224,208,.2);
  background:none; color:var(--paper); font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s;
}
.lb-x:hover { border-color:var(--orange); color:var(--orange); }
.lb-arr {
  position:absolute; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border:1px solid rgba(232,224,208,.18);
  background:none; color:var(--paper); font-size:1.5rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s;
}
.lb-arr:hover { border-color:var(--orange); color:var(--orange); }
.lb-prev { left:2rem; } .lb-next { right:2rem; }

/* ────────────────────────────────
   ZONE 2: URBAN  (gritty/neon/messy)
   Colours: orange, warm, beat-up
──────────────────────────────── */
#urban {
  padding:10rem 0;
  background:var(--ink2);
  position:relative; overflow:hidden;
  border-top:1px solid rgba(232,98,42,.06);
}
/* Grunge grain */
#urban::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
/* Orange neon glow bleed */
#urban::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:45%; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 55% 50% at 50% 100%, rgba(232,98,42,.07) 0%, transparent 70%);
}
#urban > * { position:relative; z-index:1; }
.urban-head { margin-bottom:4rem; }
.urban-head .sec-tag { color:var(--orange); }
.urban-head .sec-h2 em { font-style:normal; color:var(--orange); }

/* Asymmetric messy mosaic — uneven grid, feels chaotic */
.urban-mosaic {
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr;
  grid-template-rows:260px 260px;
  gap:3px;
}
.um { overflow:hidden; position:relative; cursor:pointer; }
.um.tall { grid-row:span 2; }
.um img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.4) brightness(.55);
  transition:transform .75s cubic-bezier(.16,1,.3,1), filter .45s;
}
.um:hover img { transform:scale(1.07); filter:saturate(1.1) brightness(.82); }
/* Neon colour leak on hover */
.um-glow {
  position:absolute; inset:0;
  background:rgba(232,98,42,.0);
  transition:background .4s; pointer-events:none;
}
.um:hover .um-glow { background:rgba(232,98,42,.05); }
.um-tag {
  position:absolute; bottom:0; left:0; right:0;
  padding:.8rem 1rem;
  background:linear-gradient(transparent, rgba(5,7,9,.82));
  font-size:.34rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(232,224,208,.4);
  transform:translateY(100%); transition:transform .28s;
}
.um:hover .um-tag { transform:translateY(0); }
/* Fake neon sign text on one tile */
.um-neon {
  position:absolute; top:.8rem; right:.9rem;
  font-family:var(--display); font-size:.7rem;
  color:var(--orange); letter-spacing:.1em;
  text-shadow:0 0 10px var(--orange), 0 0 20px rgba(232,98,42,.4);
  opacity:0; transition:opacity .3s;
  animation:neonflic 5s ease infinite;
}
.um:hover .um-neon { opacity:1; }
@keyframes neonflic {
  0%,100%{opacity:1} 88%{opacity:1} 90%{opacity:.15} 91%{opacity:1} 94%{opacity:.4} 95%{opacity:1}
}

/* Urban pull-quote */
.urban-quote {
  display:flex; gap:3rem; align-items:flex-start;
  margin-top:5rem; padding-top:3rem;
  border-top:1px solid rgba(232,98,42,.1);
}
.uq-big {
  font-family:var(--display);
  font-size:clamp(1.6rem,3.5vw,3.2rem);
  font-weight:100; text-transform:uppercase;
  line-height:.92; color:var(--paper); flex:1;
}
.uq-big em { font-style:normal; color:var(--orange); }
.uq-meta { max-width:200px; }
.uq-source {
  font-size:.4rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(232,224,208,.28); line-height:1.8;
}
.uq-score {
  font-family:var(--display); font-size:1.8rem;
  color:var(--orange); line-height:1; margin-bottom:.3rem;
}

/* ────────────────────────────────
   ZONE 3: NATURE  (organic/green)
   Colours: lime/forest green, soft
──────────────────────────────── */
#nature {
  padding:10rem 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 50%, rgba(60,130,70,.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 85% 30%, rgba(40,100,55,.04) 0%, transparent 55%),
    #050a07;
  position:relative; overflow:hidden;
  border-top:1px solid rgba(110,201,110,.06);
}
/* Organic grain */
#nature::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.6' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='.032'/%3E%3C/svg%3E");
}
/* Godray from top */
#nature::after {
  content:''; position:absolute; top:0; left:22%;
  width:1px; height:50%; pointer-events:none;
  background:linear-gradient(to bottom, rgba(110,201,110,.18), transparent);
  filter:blur(6px);
}
.nature-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:start;
}
.nat-imgs { display:flex; flex-direction:column; gap:3px; }
.ni { overflow:hidden; position:relative; cursor:pointer; }
.ni:first-child { aspect-ratio:16/8; }
.ni:last-child  { aspect-ratio:16/5; }
.ni img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.55) brightness(.6);
  transition:transform .8s cubic-bezier(.16,1,.3,1), filter .5s;
}
.ni:hover img { transform:scale(1.04); filter:saturate(1.05) brightness(.88); }
/* Green wash on hover */
.ni::after {
  content:''; position:absolute; inset:0;
  background:rgba(60,130,70,.0); transition:background .4s; pointer-events:none;
}
.ni:hover::after { background:rgba(60,130,70,.05); }

.nat-text .sec-tag { color:var(--lime); }
.nat-text .sec-h2 em { font-style:normal; color:var(--lime); }
.nat-text .body-p { color:rgba(232,224,208,.45); }

/* Bio-data table */
.bio-table {
  margin-top:3rem;
  border:1px solid rgba(110,201,110,.1);
  background:rgba(110,201,110,.02);
}
.bio-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.3rem; border-bottom:1px solid rgba(110,201,110,.07);
}
.bio-row:last-child { border-bottom:none; }
.bio-k {
  font-size:.37rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(232,224,208,.28);
}
.bio-v {
  font-family:var(--display); font-size:.78rem;
  color:var(--paper);
}
.bio-v em { color:var(--lime); font-style:normal; }

/* ────────────────────────────────
   CHAPTERS
──────────────────────────────── */
#chapters { padding:10rem 0; background:var(--ink); }
.ch-list { border-top:1px solid var(--faint); margin-top:5rem; }
.ch-row {
  display:grid; grid-template-columns:4.5rem 1fr 2fr auto;
  gap:2.5rem; align-items:center;
  padding:2.3rem 0; border-bottom:1px solid var(--faint);
  cursor:pointer; position:relative; overflow:hidden;
  transition:padding-left .36s cubic-bezier(.16,1,.3,1);
}
.ch-row::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:0; background:rgba(0,229,255,.03);
  transition:width .36s cubic-bezier(.16,1,.3,1);
}
.ch-row:hover { padding-left:.9rem; }
.ch-row:hover::before { width:100%; }
.ch-n  { font-family:var(--display); font-size:1.9rem; color:rgba(232,224,208,.1); position:relative; z-index:1; }
.ch-t  { font-family:var(--display); font-size:1.45rem; text-transform:uppercase; color:var(--paper); position:relative; z-index:1; transition:color .2s; }
.ch-row:hover .ch-t { color:var(--cyan); }
.ch-d  { font-size:.52rem; line-height:1.85; color:rgba(232,224,208,.32); position:relative; z-index:1; }
.ch-b  { font-size:.36rem; letter-spacing:.18em; text-transform:uppercase; border:1px solid rgba(0,229,255,.2); color:var(--cyan); padding:.34rem .8rem; position:relative; z-index:1; white-space:nowrap; }
.ch-peek { position:absolute; right:-130px; top:0; bottom:0; width:130px; overflow:hidden; opacity:.4; transition:right .4s cubic-bezier(.16,1,.3,1); }
.ch-row:hover .ch-peek { right:0; }
.ch-peek img { width:100%; height:100%; object-fit:cover; }

/* ────────────────────────────────
   FOOTER
──────────────────────────────── */
footer {
  padding:6.5rem 4rem 4rem;
  background:#030507;
  border-top:1px solid var(--faint);
}
.foot-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:5rem; margin-bottom:5rem;
}
.foot-brand { font-family:var(--display); font-size:4.5rem; font-weight:700; color:var(--paper); line-height:.85; }
.foot-tag { font-size:.54rem; line-height:1.9; color:rgba(232,224,208,.28); margin-top:.8rem; max-width:270px; }
.foot-col-t { font-size:.35rem; letter-spacing:.35em; text-transform:uppercase; color:var(--cyan); margin-bottom:1.4rem; }
.foot-col ul { list-style:none; }
.foot-col li { margin-bottom:.65rem; }
.foot-col a { font-size:.5rem; color:rgba(232,224,208,.33); transition:color .2s; }
.foot-col a:hover { color:var(--paper); }
.foot-bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:2.5rem; border-top:1px solid var(--faint);
}
.foot-copy { font-size:.37rem; letter-spacing:.1em; color:rgba(232,224,208,.17); }

/* ────────────────────────────────
   MOBILE
──────────────────────────────── */
@media(max-width:900px) {
  nav { padding:1rem 1.5rem; }
  .nav-links { display:none; }
  .hero-content { padding:0 1.5rem 4rem; }
  .hero-data, .hero-hud-tl { display:none; }
  .hero-scroll { right:1.5rem; }
  .wrap { padding:0 1.5rem; }
  .story-grid, .nature-grid, .foot-grid { grid-template-columns:1fr; gap:3rem; }
  #story,#urban,#nature,#chapters,footer { padding-left:0; padding-right:0; }
  .urban-mosaic { grid-template-columns:1fr 1fr; grid-template-rows:180px 180px 180px; }
  .um.tall { grid-row:span 1; }
  .urban-quote { flex-direction:column; gap:1.5rem; }
  .gal-head { padding:0 1.5rem; } .gal-outer { padding:0 1.5rem; }
  .gc.w { width:300px; height:200px; } .gc.t { width:170px; height:200px; }
  .ch-row { grid-template-columns:3.5rem 1fr; gap:1rem; }
  .ch-d,.ch-b,.ch-peek { display:none; }
  footer { padding:5rem 1.5rem 3rem; }
  #enter-btn { right:10%; font-size:.46rem; padding:.65rem 1.6rem; }
}