/* ═══════════════════════════════════════════════════════════
   MEMORIA: ARCHIVIO DI LEONE — style.css
   ═══════════════════════════════════════════════════════════ */

/* ── VARIABLES ─────────────────────────────────────────── */
:root {
  --bg:          #12100a;
  --bg-mid:      #1a160e;
  --gold:        #c9a84c;
  --gold-dim:    #8a6e2e;
  --cream:       #f0e6ce;
  --cream-dim:   #a09070;
  --vcr:         #39ff5a;
  --vcr-dim:     #1a7a2a;
  --error:       #cc3333;
  --border:      #2e2416;
  --nav-w:       220px;
  --font-title:  'Cinzel', serif;
  --font-body:   'EB Garamond', serif;
  --font-desc:   'Lora', serif;
  --font-mono:   'Share Tech Mono', monospace;
  --font-italic: 'Cormorant Garamond', serif;
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) var(--bg);
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a   { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── AMBIENT SCANLINES (scroll-triggered, E-effect) ────────── */
.scanline-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.10) 3px,
    rgba(0, 0, 0, 0.10) 4px
  );
}
.scanline-overlay.scrolling {
  opacity: 1;
  transition: opacity 0.08s ease;
}

/* ── FILM GRAIN OVERLAY ──────────────────────────────────── */
.film-grain-overlay {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 790;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain-drift 0.6s steps(3) infinite;
}

@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-55px, -35px); }
  66%  { transform: translate(35px, 60px); }
  100% { transform: translate(-20px, -15px); }
}

/* ── FRAME COUNTER ───────────────────────────────────────── */
#frame-counter {
  position: fixed;
  bottom: 1.2rem;
  right: 1.5rem;
  z-index: 600;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: var(--vcr-dim);
  letter-spacing: 0.12em;
  pointer-events: none;
  opacity: 0;
  animation: nav-in 0.6s ease 4.2s forwards;
}

/* ── VCR GLITCH TRANSITION OVERLAY (A-effect) ───────────── */
#vcr-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  pointer-events: none;
  display: none;
}

#vcr-overlay.active { display: block; }

#vcr-overlay .vcr-r,
#vcr-overlay .vcr-g,
#vcr-overlay .vcr-b {
  position: absolute;
  inset: 0;
}

#vcr-overlay .vcr-r {
  background: rgba(200, 0, 0, 0.12);
  animation: glitch-r 0.4s steps(4) forwards;
}
#vcr-overlay .vcr-g {
  background: rgba(0, 200, 80, 0.07);
  animation: glitch-g 0.4s steps(4) forwards;
}
#vcr-overlay .vcr-b {
  background: rgba(0, 80, 200, 0.10);
  animation: glitch-b 0.4s steps(4) forwards;
}

@keyframes glitch-r {
  0%   { transform: translateX(0); clip-path: inset(0 0 70% 0); opacity: 0; }
  15%  { transform: translateX(-8px); clip-path: inset(0 0 70% 0); opacity: 1; }
  30%  { transform: translateX(5px);  clip-path: inset(30% 0 40% 0); opacity: 0.8; }
  50%  { transform: translateX(-3px); clip-path: inset(60% 0 10% 0); opacity: 0.6; }
  70%  { transform: translateX(0);    clip-path: inset(80% 0 5% 0); opacity: 0.3; }
  100% { transform: translateX(0);    opacity: 0; }
}
@keyframes glitch-g {
  0%   { transform: translateX(0); clip-path: inset(20% 0 50% 0); opacity: 0; }
  20%  { transform: translateX(4px); clip-path: inset(20% 0 50% 0); opacity: 0.7; }
  40%  { transform: translateX(-6px); clip-path: inset(50% 0 20% 0); opacity: 0.5; }
  60%  { transform: translateX(2px);  clip-path: inset(70% 0 10% 0); opacity: 0.3; }
  100% { opacity: 0; }
}
@keyframes glitch-b {
  0%   { transform: translateX(0); clip-path: inset(40% 0 30% 0); opacity: 0; }
  25%  { transform: translateX(6px); clip-path: inset(40% 0 30% 0); opacity: 0.8; }
  50%  { transform: translateX(-4px); clip-path: inset(10% 0 60% 0); opacity: 0.5; }
  75%  { transform: translateX(0);    clip-path: inset(60% 0 5% 0); opacity: 0.2; }
  100% { opacity: 0; }
}

/* ── TRACKING ERROR (B-effect on image wrap) ─────────────── */
@keyframes tracking-error {
  0%   { transform: translateX(0) skewX(0deg); }
  8%   { transform: translateX(-10px) skewX(-3deg); clip-path: inset(15% 0 55% 0); }
  16%  { transform: translateX(7px)  skewX(2deg);  clip-path: inset(45% 0 25% 0); }
  24%  { transform: translateX(-4px) skewX(-1deg); clip-path: inset(65% 0 10% 0); }
  35%  { transform: translateX(0) skewX(0deg); clip-path: none; }
  50%  { transform: translateX(-3px); clip-path: inset(80% 0 2% 0); }
  65%  { transform: translateX(0); clip-path: none; }
  100% { transform: translateX(0) skewX(0deg); clip-path: none; }
}

.tracking-error img {
  animation: tracking-error 0.55s steps(6) 1;
}

/* ── PROJECTOR FLICKER (C-effect) ───────────────────────── */
@keyframes projector-flicker {
  0%   { opacity: 1; }
  4%   { opacity: 0.3; }
  8%   { opacity: 1; }
  13%  { opacity: 0.6; }
  17%  { opacity: 1; }
  22%  { opacity: 0.2; }
  27%  { opacity: 1; }
  33%  { opacity: 0.8; }
  38%  { opacity: 1; }
  100% { opacity: 1; }
}

.projector-flicker {
  animation: projector-flicker 0.45s steps(5) 1;
}

/* ── REWIND OVERLAY (D-effect) ──────────────────────────── */
#rewind-overlay {
  position: fixed;
  inset: 0;
  z-index: 750;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 2px,
    transparent 2px,
    transparent 8px
  );
  transition: opacity 0.1s;
}

#rewind-overlay.active {
  opacity: 1;
  animation: rewind-scan 0.5s linear forwards;
}

@keyframes rewind-scan {
  0%   { opacity: 0.8; background-position: 100% 0; }
  50%  { opacity: 0.5; background-position: 50% 0; }
  100% { opacity: 0; background-position: 0% 0; }
}

/* ── BOOT SCREEN ────────────────────────────────────────── */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: boot-fade 0.5s ease 3.2s forwards;
  pointer-events: none;
}

@keyframes boot-fade { to { opacity: 0; visibility: hidden; } }

.boot-inner {
  font-family: var(--font-mono);
  color: var(--vcr);
  font-size: 0.85rem;
  line-height: 2;
  max-width: 480px;
  width: 90%;
}

.boot-line { opacity: 0; }
.boot-l1 { animation: boot-appear 0.1s ease 0.2s forwards; }
.boot-l2 { animation: boot-appear 0.1s ease 0.6s forwards; }
.boot-l3 { animation: boot-appear 0.1s ease 1.0s forwards; }
.boot-l4 { animation: boot-appear 0.1s ease 1.3s forwards; }
.boot-l5 { animation: boot-appear 0.1s ease 1.6s forwards; }
.boot-l6 {
  color: var(--gold);
  font-size: 1rem;
  animation: boot-appear 0.1s ease 2.2s forwards;
}

@keyframes boot-appear { to { opacity: 1; } }

.boot-bar-wrap { opacity: 0; }
.boot-bar { width: 100%; height: 4px; background: var(--vcr-dim); margin-top: 6px; border-radius: 2px; overflow: hidden; }
.boot-bar-label { font-size: 0.75rem; color: var(--vcr-dim); margin-bottom: 2px; }
.boot-bar-fill { height: 100%; width: 0; background: var(--vcr); animation: boot-progress 0.8s ease 1.7s forwards; border-radius: 2px; }
@keyframes boot-progress { to { width: 100%; } }

/* ── SIDE NAV ───────────────────────────────────────────── */
.side-nav {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: var(--nav-w);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 1.2rem 2rem;
  border-right: 1px solid var(--border);
  background: linear-gradient(to right, rgba(18,16,10,0.98) 80%, rgba(18,16,10,0));
  overflow-y: auto;
  scrollbar-width: none;
  opacity: 0;
  animation: nav-in 0.6s ease 3.8s forwards;
}

@keyframes nav-in { to { opacity: 1; } }
.side-nav::-webkit-scrollbar { display: none; }

.nav-header {
  font-family: var(--font-title);
  font-size: 0.75rem;
  color: #ffffff;
  letter-spacing: 0.18em;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.nav-divider { height: 1px; background: var(--border); margin: 0.5rem 0; }

.nav-list {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.nav-item {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.3s, background 0.3s;
}

.nav-item:hover { opacity: 0.7; }
.nav-item.active { opacity: 1; background: rgba(201,168,76,0.08); }

.nav-marker {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gold);
  padding-top: 0.35rem;
  flex-shrink: 0;
  transition: color 0.3s;
}

.nav-item.active .nav-marker { color: var(--vcr); text-shadow: 0 0 6px rgba(57, 255, 90, 0.4); }

.nav-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--cream-dim);
  line-height: 1.5;
  transition: color 0.3s;
}

.nav-item.active .nav-label { color: var(--vcr); text-shadow: 0 0 8px rgba(57, 255, 90, 0.5); }

.nav-label em {
  display: block;
  font-style: italic;
  font-family: var(--font-italic);
  font-size: 0.78rem;
  color: inherit;
}

.nav-qq .nav-label { color: var(--cream-dim); font-style: italic; }
.nav-lost .nav-marker { color: var(--error); }
.nav-lost .nav-label { color: var(--error); opacity: 0.7; }
.nav-ending .nav-label { color: var(--cream-dim); }

.nav-footer {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--vcr-dim);
  margin-top: 0.5rem;
  letter-spacing: 0.08em;
}

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--nav-w);
}

.hero-img-wrap { position: absolute; inset: 0; }

.hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.5) saturate(0.8);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18,16,10,0.4) 0%,
    rgba(18,16,10,0.0) 35%,
    rgba(18,16,10,0.5) 75%,
    rgba(18,16,10,0.96) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 2rem;
}

/* REPLAY LOG — large, white */
.hero-title {
  font-family: var(--font-title);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.0;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

/* NAPOLI 2001 — smaller, gold */
.hero-napoli {
  font-family: var(--font-title);
  font-size: clamp(0.9rem, 2vw, 1.4rem);
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.22em;
  margin-bottom: 1.2rem;
}

/* Artist name — mono, small */
.hero-author {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cream-dim);
  letter-spacing: 0.12em;
  margin-bottom: 2.5rem;
}

.hero-scroll-hint {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--gold-dim);
  letter-spacing: 0.2em;
  animation: pulse-hint 2s ease-in-out infinite;
}

@keyframes pulse-hint {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50%       { opacity: 1;   transform: translateY(5px); }
}

/* MEMORIA: ARCHIVIO — bottom right */
.hero-archive-tag {
  position: absolute;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--vcr-dim);
  letter-spacing: 0.14em;
  text-align: right;
  line-height: 1.6;
}

.hero-hud {
  position: absolute;
  bottom: 1.6rem;
  left: calc(var(--nav-w) + 1.5rem);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--vcr-dim);
  line-height: 1.8;
}

/* ── MAIN CONTENT WRAPPER ───────────────────────────────── */
.main-content { margin-left: var(--nav-w); }

/* ── TRACK SECTIONS (portrait default: side-by-side) ────── */
.track {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

/* blurred background texture */
.track-bg-blur {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(80px) brightness(0.28) saturate(0.6);
  opacity: 0.30;
  transform: scale(1.15);
  z-index: 0;
  pointer-events: none;
}

.track-img-wrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.track-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  will-change: transform, opacity, filter;
}

.track-content {
  padding: 3rem 3rem 3rem 2.5rem;
  position: relative;
  z-index: 2;
  will-change: transform, opacity;
}

/* alternate left/right for portrait tracks */
.track:not(.track--landscape):nth-of-type(even) { direction: rtl; }
.track:not(.track--landscape):nth-of-type(even) .track-content { direction: ltr; }
.track:not(.track--landscape):nth-of-type(even) .track-img-wrap { direction: ltr; }
.track:not(.track--landscape):nth-of-type(even) .track-bg-blur { direction: ltr; }

/* ── LANDSCAPE LAYOUT ───────────────────────────────────── */
.track--landscape {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  direction: ltr !important;
  min-height: auto;
}

.track--landscape .track-img-wrap {
  height: auto;
  min-height: 280px;
  width: 100%;
  /* height auto so the image dictates height, no crop */
}

.track--landscape .track-img-wrap img {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: auto;
  /* override inherited 100% height so contain works properly */
  max-height: 85vh;
}

/* Left-right two-column layout below landscape image */
.track--landscape .track-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  padding: 2rem 3rem;
  text-align: left;
  max-width: 100%;
  margin: 0;
  width: 100%;
}

/* Left: track-meta + title + description */
.track-left {
  flex: 1;
  min-width: 0;
}

.track-left .track-meta  { justify-content: flex-start; }
.track-left .track-copy  { max-width: 52ch; margin-left: 0; margin-right: 0; }

/* Right: VCR HUD */
.track-right {
  flex: 0 0 260px;
  max-width: 280px;
  text-align: right;
  padding-top: 0.2rem;
}

.track-right .track-hud {
  border-top: none;
  padding-top: 0;
  text-align: right;
  line-height: 2.0;
}

/* ── TRACK CONTENT STYLES ───────────────────────────────── */
.track-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.track-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--vcr);
  letter-spacing: 0.15em;
}

.track-signal {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--vcr-dim);
  letter-spacing: 0.08em;
  animation: blink 1.2s step-end infinite;
}

/* Signal-specific blink rates: stable = slow, dangerous/erratic = fast */
[data-signal="LOCKED"]      .track-signal { animation-duration: 2.5s; }
[data-signal="OPTIMAL"]     .track-signal { animation-duration: 2.0s; }
[data-signal="STABLE"]      .track-signal { animation-duration: 1.8s; }
[data-signal="LOW"]         .track-signal { animation-duration: 1.5s; }
[data-signal="MAX"]         .track-signal { animation-duration: 1.0s; }
[data-signal="PEAK"]        .track-signal { animation-duration: 0.5s; }
[data-signal="ERROR"]       .track-signal { animation-duration: 0.45s; }
[data-signal="FLUCTUATING"] .track-signal { animation-duration: 0.35s; }

.track-signal--error { color: var(--error); }
.track-signal--lost  { color: var(--error); animation: blink 1s step-end infinite; }

.track-title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 600;
  color: var(--gold);
  line-height: 1.2;
  margin-bottom: 1.2rem;
  letter-spacing: 0.03em;
}

.track-copy {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: var(--cream);
  font-style: italic;
  font-weight: 400;
  line-height: 1.85;
  margin-bottom: 2rem;
  max-width: 45ch;
}

.track-hud {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--vcr-dim);
  line-height: 1.9;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.hud-error {
  color: var(--error);
  animation: blink 0.45s step-end infinite;  /* matches ERROR signal speed */
}
.hud-lost  { color: var(--error); }
.hud-lost.blink { animation-duration: 1s; }  /* matches track-signal--lost speed */

/* ── QQ INTERLUDE (pop art + glitch) ────────────────────── */
.qq-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qq-glitch-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
}

.qq-img-main {
  width: 100%;
  height: auto;
  display: block;
  filter: contrast(1.35) saturate(2.2) brightness(0.92);
}

/* RGB channel ghosts */
.qq-img-r,
.qq-img-b {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.qq-img-r { animation: glitch-channel-r 5s 2s infinite; }
.qq-img-b { animation: glitch-channel-b 5s 2.3s infinite; }

@keyframes glitch-channel-r {
  0%, 87%, 100% { opacity: 0; transform: translateX(0); }
  88%  { opacity: 0.5; transform: translateX(-7px); filter: sepia(1) hue-rotate(320deg) saturate(8); clip-path: inset(20% 0 55% 0); }
  90%  { opacity: 0.3; transform: translateX(4px); clip-path: inset(55% 0 15% 0); }
  93%  { opacity: 0; }
}

@keyframes glitch-channel-b {
  0%, 89%, 100% { opacity: 0; transform: translateX(0); }
  90%  { opacity: 0.45; transform: translateX(8px); filter: sepia(1) hue-rotate(160deg) saturate(8); clip-path: inset(10% 0 65% 0); }
  92%  { opacity: 0.25; transform: translateX(-5px); clip-path: inset(60% 0 5% 0); }
  95%  { opacity: 0; }
}

/* periodic full-image hue glitch */
.qq-img-main {
  animation: qq-popart-glitch 6s 1s infinite;
}

@keyframes qq-popart-glitch {
  0%, 80%, 100% {
    filter: contrast(1.35) saturate(2.2) brightness(0.92) hue-rotate(0deg);
    transform: translateX(0);
  }
  82% {
    filter: contrast(1.5) saturate(3) brightness(0.95) hue-rotate(15deg);
    transform: translateX(-4px);
    clip-path: inset(25% 0 40% 0);
  }
  84% {
    filter: contrast(1.35) saturate(2.2) brightness(0.92) hue-rotate(-20deg);
    transform: translateX(3px);
    clip-path: inset(55% 0 10% 0);
  }
  86% {
    filter: contrast(1.35) saturate(2.2) brightness(0.92) hue-rotate(0deg);
    transform: translateX(0);
    clip-path: none;
  }
}

.qq-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.8rem 1.5rem;
  border-top: 1px solid var(--border);
}

.qq-tag-top,
.qq-tag-bot {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}

.qq-tag-top { color: var(--vcr-dim); }
.qq-tag-bot { color: var(--gold-dim); }

/* ── TRACK 19 — SIGNAL LOST ─────────────────────────────── */
.track-lost {
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: #080604;
}

.signal-lost-bg {
  position: relative;
  height: 100vh;
  background: #0a0806;
  overflow: hidden;
  z-index: 1;
}

.noise-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0.4;
}

.signal-lost-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px
  );
  pointer-events: none;
  z-index: 2;
}

.track-content--lost { padding: 3rem 3rem 3rem 2.5rem; z-index: 2; }
.track-title--lost   { color: var(--error); opacity: 0.7; }
.track-copy--lost    { opacity: 0.45; font-style: italic; font-family: var(--font-body); }

/* ── ENDING ─────────────────────────────────────────────── */
.ending-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.ending-img-wrap { position: absolute; inset: 0; }

.ending-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--bg);
  filter: brightness(0.7) saturate(0.9);
  will-change: opacity;
}

.ending-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,16,10,0.92) 0%, transparent 55%);
}

.ending-text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2.5rem;
}

.ending-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--vcr-dim);
  letter-spacing: 0.2em;
}

/* ── MERCH SECTION ──────────────────────────────────────── */
.merch-section {
  padding: 5rem 3rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-mid);
}

.merch-header { margin-bottom: 3rem; }

.merch-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--vcr);
  letter-spacing: 0.15em;
  margin-bottom: 0.8rem;
}

.merch-title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.merch-subtitle {
  font-family: var(--font-italic);
  font-size: 1rem;
  color: var(--cream-dim);
  font-style: italic;
}

.merch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 900px;
}

.merch-card {
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
  transition: border-color 0.3s;
}

.merch-card:hover { border-color: var(--gold-dim); }

.merch-img-wrap { overflow: hidden; aspect-ratio: 1 / 1; }

.merch-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s;
  filter: brightness(0.9) saturate(0.85);
}

.merch-card:hover .merch-img-wrap img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1);
}

.merch-info { padding: 0.8rem 1rem; border-top: 1px solid var(--border); }

.merch-item-id {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}

.merch-item-status {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--vcr-dim);
  margin-top: 0.2rem;
}

.merch-note {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--cream-dim);
  letter-spacing: 0.05em;
}

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer {
  padding: 4rem 3rem;
  text-align: center;
  background: #0a0806;
}

.footer-stop {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--cream);
  letter-spacing: 0.2em;
  margin-bottom: 0.8rem;
  cursor: pointer;
  display: inline-block;
  transition: color 0.2s, text-shadow 0.2s;
}
.footer-stop:hover {
  color: var(--vcr);
  text-shadow: 0 0 8px rgba(57, 255, 90, 0.4);
}

.footer-tagline {
  font-family: var(--font-italic);
  font-size: 1.1rem;
  color: var(--cream-dim);
  font-style: italic;
  margin-bottom: 0.4rem;
}

.footer-date {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--vcr-dim);
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

.footer-links { margin-bottom: 1rem; }

.footer-links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--cream); text-decoration: none; }

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--cream-dim);
  opacity: 0.4;
  letter-spacing: 0.05em;
}

/* ── BLINK ──────────────────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.blink { animation: blink 1.2s step-end infinite; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --nav-w: 0px; }

  .side-nav { display: none; }
  .hero, .main-content { margin-left: 0; }
  .hero-hud { left: 1.5rem; }

  .track {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
  }

  .track:not(.track--landscape):nth-of-type(even) { direction: ltr; }

  .track-img-wrap { height: 65vw; min-height: 260px; }
  .track-content  { padding: 2rem 1.5rem; }
  .track-copy     { max-width: 100%; }

  /* ── Portrait mobile: edge-to-edge images ── */
  @media (orientation: portrait) {
    .track:not(.track--landscape) .track-img-wrap {
      height: auto;
      min-height: unset;
      width: 100%;
    }
    .track:not(.track--landscape) .track-img-wrap img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  /* Landscape collapses to stacked on mobile */
  .track--landscape .track-content {
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
  }
  .track-right { flex: 1; max-width: 100%; text-align: left; }
  .track-right .track-hud { text-align: left; }

  .merch-grid    { grid-template-columns: 1fr; max-width: 420px; }
  .merch-section { padding: 3rem 1.5rem; }
  .site-footer   { padding: 3rem 1.5rem; }
}

@media (max-width: 540px) {
  .hero-title  { font-size: 2.4rem; }
  .track-title { font-size: 1.6rem; }
  .track-img-wrap { height: 75vw; }
}

/* ═══════════════════════════════════════════════════════════
   VCR PORTRAIT STANDBY SCREEN
   ═══════════════════════════════════════════════════════════ */
#portrait-standby {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  color: var(--vcr);
  font-family: var(--font-mono);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#portrait-standby::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 4px
  );
  pointer-events: none;
  z-index: 1;
}

.standby-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  max-width: 320px;
  width: 100%;
}

.standby-line {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  margin: 0.4rem 0;
  text-shadow: 0 0 6px var(--vcr);
}

.s-l1 { font-size: 1rem; letter-spacing: 0.2em; margin-bottom: 0.2rem; }
.s-l2 { font-size: 0.7rem; color: var(--vcr-dim); margin-bottom: 0.5rem; }

.standby-divider {
  color: var(--vcr-dim);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  margin: 0.6rem 0;
  opacity: 0.5;
}

.standby-rotate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 0;
}

.standby-icon {
  font-size: 2.5rem;
  line-height: 1;
  text-shadow: 0 0 12px var(--vcr);
  animation: rotate-hint 2s ease-in-out infinite;
}

.standby-msg {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-shadow: 0 0 6px var(--vcr);
}

@keyframes rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  30%       { transform: rotate(-25deg); }
  70%       { transform: rotate(25deg); }
}

/* Skip button — bottom-right corner of standby screen */
#standby-skip {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: transparent;
  border: 1px solid var(--vcr-dim);
  color: var(--vcr-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  z-index: 3;
}

#standby-skip:hover {
  border-color: var(--vcr);
  color: var(--vcr);
}

@media (max-width: 1024px) and (orientation: portrait) {
  #portrait-standby {
    display: flex;
  }
  body {
    overflow: hidden;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE LANDSCAPE — FILM REEL NAV BUTTON
   ═══════════════════════════════════════════════════════════ */
#mobile-film-nav {
  display: none;
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 950;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(10, 8, 4, 0.88);
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  color: var(--vcr);
  padding: 8px 10px 6px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 0.2s, box-shadow 0.2s;
}

#mobile-film-nav:hover,
#mobile-film-nav[aria-expanded="true"] {
  border-color: var(--vcr);
  box-shadow: 0 0 10px rgba(57, 255, 90, 0.25);
}

#mobile-film-nav svg {
  width: 28px;
  height: 28px;
}

.film-nav-label {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  color: var(--vcr-dim);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE LANDSCAPE — TRACK SELECTION MENU OVERLAY
   ═══════════════════════════════════════════════════════════ */
#mobile-track-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(8, 6, 2, 0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overflow-y: auto;
}

#mobile-track-menu.open {
  opacity: 1;
  pointer-events: all;
}

#mobile-track-menu::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.10) 3px,
    rgba(0, 0, 0, 0.10) 4px
  );
  pointer-events: none;
}

.track-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 2rem 1.5rem;
}

.track-menu-header {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--vcr-dim);
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--vcr-dim);
  padding-bottom: 0.6rem;
  width: 100%;
  text-align: center;
  max-width: 400px;
}

.track-menu-list {
  list-style: none;
  width: 100%;
  max-width: 400px;
  margin-bottom: 1.5rem;
}

.track-menu-list li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--vcr);
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  border-bottom: 1px solid rgba(57, 255, 90, 0.08);
}

.track-menu-list li:hover {
  border-left-color: var(--vcr);
  color: #fff;
  background: rgba(57, 255, 90, 0.06);
}

.track-menu-list li em {
  font-style: italic;
  color: var(--cream-dim);
}

.track-menu-list .menu-interlude {
  color: var(--vcr-dim);
  font-size: 0.62rem;
}

.track-menu-list .menu-lost { color: var(--error); }
.track-menu-list .menu-ending { color: var(--cream-dim); }

.track-menu-close {
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--cream-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.track-menu-close:hover {
  border-color: var(--cream);
  color: var(--cream);
}

/* Show film reel button and menu only on mobile/tablet landscape */
@media (max-width: 1024px) and (orientation: landscape) {
  #mobile-film-nav   { display: flex; }
  #mobile-track-menu { display: block; }
}