:root {
  /* Design typography tokens: Roboto Flex" changes width and weight as the site shifts scenes; variable axes aggressively: wide; title letters can widen when the portal opens on scene change: */
  --patent: #050305;
  --oil: #111017;
  --gold: #D6A83E;
  --champagne: #FFE6A3;
  --bronze: #7A5521;
  --lipstick: #D6255A;
  --cyan: #35F2FF;
  --mx: 50vw;
  --my: 50vh;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--champagne);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(214, 168, 62, .16), transparent 26vw),
    radial-gradient(circle at 12% 8%, rgba(214, 37, 90, .11), transparent 28vw),
    linear-gradient(135deg, var(--patent) 0%, #0a0709 48%, var(--oil) 100%);
  font-family: "Space Grotesk", Inter, sans-serif;
  overflow-x: hidden;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .18;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(214,168,62,.04) 0 1px, transparent 1px 9px);
  mix-blend-mode: screen;
}

.cursor-glint {
  position: fixed;
  width: 26rem;
  height: 26rem;
  left: var(--mx);
  top: var(--my);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  background: radial-gradient(circle, rgba(255,230,163,.14), rgba(214,168,62,.06) 28%, transparent 64%);
  filter: blur(8px);
}

.edge-nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: .35rem;
}

.edge-nav a {
  color: var(--champagne);
  text-decoration: none;
  font: 700 .68rem/1 "Space Grotesk", sans-serif;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
  padding: .75rem .5rem;
  background: linear-gradient(180deg, rgba(17,16,23,.94), rgba(5,3,5,.9));
  border: 1px solid rgba(214,168,62,.55);
  box-shadow: inset 0 0 18px rgba(214,168,62,.12);
}

.scene {
  min-height: 100vh;
  position: relative;
  padding: clamp(1.25rem, 3vw, 3rem);
  overflow: hidden;
  border-bottom: 1px solid rgba(214,168,62,.28);
}

.module {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,230,163,.08), transparent 22%),
    radial-gradient(circle at var(--mx) var(--my), rgba(255,230,163,.18), transparent 18rem),
    linear-gradient(145deg, rgba(17,16,23,.96), rgba(5,3,5,.98) 62%, rgba(122,85,33,.18));
  border: 1px solid rgba(214,168,62,.72);
  box-shadow:
    inset 0 0 0 1px rgba(255,230,163,.14),
    inset 0 -18px 35px rgba(122,85,33,.16),
    0 24px 70px rgba(0,0,0,.65),
    0 0 24px rgba(214,168,62,.12);
  transform: scale(.18) rotate(var(--tilt, 0deg));
  opacity: 0;
  transition: transform .72s cubic-bezier(.16, 1.3, .36, 1), opacity .62s ease, border-color .25s ease, filter .25s ease;
}

.module.is-visible { transform: scale(1) rotate(var(--tilt, 0deg)); opacity: 1; }
.module:hover { transform: scale(1.06) rotate(var(--tilt, 0deg)); border-color: var(--champagne); filter: saturate(1.25); z-index: 12; }

.module::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(122,85,33,.48);
  pointer-events: none;
}

.module::after {
  content: attr(data-reveal);
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .8rem;
  color: var(--cyan);
  font: 700 .65rem/1.2 "Space Grotesk", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: .25s ease;
}

.module:hover::after { opacity: 1; transform: translateY(0); }

.coordinate {
  display: block;
  color: var(--gold);
  font: 700 .66rem/1 "Space Grotesk", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.circuit-field, .network-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.circuit-field path, .network-svg path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: square;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  filter: drop-shadow(0 0 8px rgba(214,168,62,.55));
  animation: solder 4.8s ease-in-out infinite;
}

.network-svg circle { fill: url(#gem); stroke: var(--champagne); stroke-width: 2; }

@keyframes solder { 45%, 100% { stroke-dashoffset: 0; } }

.scene-crack { min-height: 112vh; }
.hero-circuit { opacity: .5; }

.title-chip {
  position: absolute;
  padding: clamp(1rem, 2vw, 1.8rem);
  min-height: 22vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title-chip h1 {
  margin: 0;
  font-family: "Roboto Flex", Roboto, sans-serif;
  font-size: clamp(4.4rem, 13vw, 15rem);
  line-height: .72;
  letter-spacing: -.09em;
  font-variation-settings: "wght" var(--wght, 900), "wdth" var(--wdth, 126), "opsz" 144;
  background: linear-gradient(106deg, var(--bronze), var(--gold) 32%, var(--champagne) 45%, var(--gold) 60%, #2a1709 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 35px rgba(214,168,62,.22);
  animation: titleFlex 5s ease-in-out infinite alternate;
}

@keyframes titleFlex { to { font-variation-settings: "wght" 720, "wdth" 86, "opsz" 80; } }

.chip-a { --tilt: -2deg; left: 6vw; top: 14vh; width: 35vw; }
.chip-b { --tilt: 1.2deg; right: 5vw; top: 31vh; width: 62vw; z-index: 4; }
.chip-c { --tilt: -1deg; left: 18vw; bottom: 15vh; width: 57vw; }

.intro-line {
  position: absolute;
  left: 5vw;
  bottom: 4vh;
  max-width: 33rem;
  color: rgba(255,230,163,.72);
  font-family: "Fraunces", serif;
  font-size: clamp(1.25rem, 2.2vw, 2.4rem);
  font-style: italic;
}

.sticker, .evidence-sticker, .final-sticker {
  position: absolute;
  z-index: 10;
  color: var(--patent);
  background: var(--lipstick);
  font: 800 .82rem/1 "Space Grotesk", sans-serif;
  letter-spacing: .12em;
  padding: .7rem 1rem;
  box-shadow: 0 0 0 2px rgba(5,3,5,.7), 0 12px 30px rgba(214,37,90,.24);
  transform: rotate(-7deg);
}
.sticker-open { right: 12vw; top: 18vh; }

.rhinestone {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, var(--champagne) 20%, var(--gold) 48%, rgba(5,3,5,.2) 70%);
  box-shadow: 0 0 18px var(--gold), 0 0 42px rgba(255,230,163,.28);
  transition: transform .2s ease;
}
.rhinestone.near { transform: scale(1.6); }
.node-1 { left: 22vw; top: 17vh; } .node-2 { right: 18vw; top: 52vh; } .node-3 { left: 63vw; bottom: 18vh; }

.scene-label { position: relative; z-index: 2; max-width: 60rem; margin-bottom: 2rem; }
.scene-label span { color: var(--gold); letter-spacing: .22em; font-weight: 700; font-size: .76rem; }
.scene-label strong { display: block; margin-top: .45rem; font-family: "Fraunces", serif; font-size: clamp(2rem, 5vw, 5.5rem); line-height: .9; color: var(--champagne); font-style: italic; }

.inventory-grid {
  position: relative;
  min-height: 78vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, minmax(54px, 1fr));
  gap: .9rem;
}

.relic { padding: 1.15rem; overflow: hidden; }
.relic h2 { margin: .7rem 0 .4rem; font-family: "Roboto Flex", sans-serif; font-size: clamp(2rem, 4.8vw, 5.4rem); line-height: .78; letter-spacing: -.08em; color: var(--gold); }
.relic p { max-width: 22rem; color: rgba(255,230,163,.78); font-size: .96rem; }
.relic blockquote { margin: 1rem 0 0; font-family: "Fraunces", serif; color: var(--champagne); font-size: 1.35rem; font-style: italic; }

.relic-mirror { --tilt: -2deg; grid-column: 1 / span 5; grid-row: 1 / span 4; }
.relic-signal { --tilt: 1deg; grid-column: 6 / span 3; grid-row: 1 / span 3; }
.relic-debt { --tilt: -1deg; grid-column: 9 / span 4; grid-row: 2 / span 3; }
.relic-glitch { --tilt: 1.8deg; grid-column: 2 / span 3; grid-row: 5 / span 3; }
.relic-gold { --tilt: -1.4deg; grid-column: 5 / span 4; grid-row: 4 / span 4; }
.relic-witness { --tilt: .8deg; grid-column: 9 / span 4; grid-row: 5 / span 4; }

.mirror-shard { position: absolute; right: 1rem; bottom: 1rem; width: 42%; max-width: 220px; }
.mirror-shard polygon { fill: rgba(5,3,5,.88); stroke: var(--gold); stroke-width: 4; }
.mirror-shard polyline { fill: none; stroke: var(--cyan); stroke-width: 2; opacity: .65; }
.signal-bars { position: absolute; right: 1.2rem; bottom: 1.2rem; display: flex; align-items: end; gap: .35rem; }
.signal-bars i { width: .5rem; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: pulse 1.2s ease-in-out infinite alternate; }
.signal-bars i:nth-child(1){height:1rem}.signal-bars i:nth-child(2){height:2rem;animation-delay:.15s}.signal-bars i:nth-child(3){height:3rem;animation-delay:.3s}.signal-bars i:nth-child(4){height:4rem;animation-delay:.45s}
@keyframes pulse { to { opacity: .35; transform: scaleY(.7); } }
.evidence-sticker { right: 1rem; top: 1.5rem; }
.glitch-stripes { position:absolute; inset:auto 0 0; height:38%; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(214,37,90,.58) 12px 15px, rgba(53,242,255,.5) 15px 17px); opacity:.72; }

.scene-network { min-height: 105vh; display: grid; place-items: center; }
.network-copy { position: absolute; top: 8vh; left: 4vw; right: 4vw; color: var(--gold); font-size: .75rem; letter-spacing: .24em; white-space: nowrap; overflow: hidden; }
.network-svg { opacity: .8; }
.network-svg circle { fill: var(--champagne); filter: drop-shadow(0 0 10px var(--gold)); }
.band { position: absolute; left: -3vw; right: -3vw; padding: 1rem 8vw; border: 1px solid rgba(214,168,62,.34); background: rgba(5,3,5,.74); transform: rotate(var(--r)); display: flex; justify-content: space-between; gap: 2rem; color: rgba(255,230,163,.82); text-transform: uppercase; letter-spacing: .16em; }
.band b { color: var(--lipstick); }
.band-one { --r: -2deg; top: 26vh; } .band-two { --r: 1.4deg; top: 48vh; } .band-three { --r: -1deg; top: 68vh; }
.confession { width: min(48rem, 86vw); padding: 2rem; z-index: 3; }
.confession p { margin: 1rem 0 2rem; font: italic 700 clamp(2rem, 5vw, 5.2rem)/.95 "Fraunces", serif; background: linear-gradient(105deg, var(--bronze), var(--champagne), var(--gold), var(--champagne)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.scene-reentry { display: grid; place-items: center; }
.gate-wrap { position: relative; width: min(74rem, 88vw); height: min(72vh, 46rem); perspective: 1200px; }
.gate-panel { position: absolute; top: 0; bottom: 0; width: 50%; }
.gate-panel.left { left: 0; transform-origin: left center; }
.gate-panel.right { right: 0; transform-origin: right center; }
.gate-wrap.open .left { transform: scale(1) rotateY(-34deg) translateX(-10%); }
.gate-wrap.open .right { transform: scale(1) rotateY(34deg) translateX(10%); }
.portal-core { position: absolute; inset: 8%; display: grid; place-content: center; text-align: center; border: 2px solid var(--gold); background: radial-gradient(circle, rgba(214,168,62,.22), rgba(5,3,5,.98) 64%); box-shadow: inset 0 0 90px rgba(214,168,62,.2), 0 0 80px rgba(214,168,62,.25); }
.portal-core span { color: var(--cyan); letter-spacing: .32em; font-weight: 700; }
.portal-core h2 { margin: 1rem 0; font: italic 900 clamp(2.8rem, 7vw, 7rem)/.88 "Fraunces", serif; color: var(--champagne); }
.portal-core p { margin: 0 auto; max-width: 34rem; color: rgba(255,230,163,.72); }
.final-sticker { right: 12vw; bottom: 12vh; transform: rotate(5deg); background: var(--gold); }

@media (max-width: 760px) {
  .edge-nav { display: none; }
  .title-chip { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; margin: 1rem 0; }
  .scene-crack { padding-top: 7vh; }
  .intro-line { position: relative; left: auto; bottom: auto; }
  .inventory-grid { display: block; min-height: auto; }
  .relic { min-height: 16rem; margin: 1rem 0; }
  .band { font-size: .62rem; }
}