/* =========================================================
   THE PLIGHT OF THE JIMMYS - tiny → massive  (v3)
   Design voice: cinematic dark + a quiet "system" that
   watches back (mono labels, case files, feeds).
   Discipline: ONE accent (electric blue). Amber = light
   sources only (bulb, flashlight, REC). Vanilla, mobile-first.
   ========================================================= */

:root{
  --bg:      #030407;
  --bg-2:    #090b12;
  --ink:     #f4f1e8;
  --muted:   #7d8494;
  --blue:    #29e7ff;   /* the single neon accent */
  --amber:   #ffb15c;   /* light sources only */

  --glow: 0 0 30px rgba(41,231,255,.32);

  --sans:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp:"Anton", Impact, sans-serif;

  --edge: clamp(20px, 5vw, 64px);
  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.5; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.preload *{ animation-duration:0s !important; }
img,video{ display:block; max-width:100%; }
em{ font-style:italic; }

::selection{ background:var(--blue); color:#02030a; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }
@media(pointer:fine){
  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:#04050a; }
  ::-webkit-scrollbar-thumb{ background:#161a24; border-radius:99px; border:2px solid #04050a; }
  ::-webkit-scrollbar-thumb:hover{ background:#232937; }
}

/* ---------- Texture overlays ---------- */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; z-index:899; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* faint light that trails the cursor through the dark */
.cursor-glow{ position:fixed; top:0; left:0; width:460px; height:460px; margin:-230px 0 0 -230px;
  border-radius:50%; pointer-events:none; z-index:850; mix-blend-mode:screen; will-change:transform;
  background:radial-gradient(circle, rgba(255,205,140,.10), rgba(255,188,120,.04) 42%, transparent 70%); }
/* Flashlight: the dark the cursor reveals (intro + build; lifts at the drop) */
.flashlight{ position:fixed; inset:0; z-index:40; pointer-events:none; opacity:0; will-change:opacity, background;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,45%),
     rgba(0,0,0,0) 0, rgba(0,0,0,0) 130px, rgba(1,1,2,.97) 460px); }

/* ---------- Scroll progress ---------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:1000; background:transparent; }
.scroll-progress span{ display:block; height:100%; width:0; background:var(--blue); box-shadow:0 0 12px var(--blue); }

/* ---------- The system voice ---------- */
.tag{
  font:500 11px/1 var(--mono); letter-spacing:.42em; text-transform:uppercase;
  color:var(--muted); text-align:center; margin-bottom:clamp(1.6em,4vh,2.6em);
}
.tag::before{ content:"[ "; color:#3a4050; }
.tag::after{ content:" ]"; color:#3a4050; }

/* ---------- Scene sizing ---------- */
.scene{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(60px,12vh,140px) var(--edge);
  position:relative; text-align:center;
}
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   1. INTRO - near dark, one bulb, one line
   ========================================================= */
.scene--intro{ background:#020304; overflow:hidden; }
.bulb{
  position:absolute; top:8%; left:50%; z-index:60; /* above the flashlight dark */
  transform:translateX(-50%) translate3d(var(--bx,0px), var(--by,0px), 0);
  will-change:transform;
  width:min(70vw,520px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 38%,
     rgba(255,196,120,.42) 0%, rgba(255,170,90,.12) 26%, transparent 60%);
  filter:blur(4px); animation:flicker 6s steps(1) infinite;
}
.bulb::after{
  content:""; position:absolute; top:34%; left:50%; transform:translate(-50%,-50%);
  width:12px; height:16px; border-radius:40%;
  background:#ffd9a0; box-shadow:0 0 22px 10px rgba(255,196,120,.55);
}
@keyframes flicker{ 0%,97%,100%{opacity:1;} 97.5%{opacity:.55;} 98.5%{opacity:.85;} }
.intro-inner{ position:relative; z-index:2; }
.intro-line{ font-size:clamp(1.15rem,3.6vw,1.9rem); color:var(--ink); max-width:20ch; margin-inline:auto; }
.scroll-cue{ margin-top:clamp(40px,10vh,90px);
  font:500 11px/1 var(--mono); letter-spacing:.32em; text-transform:uppercase; color:var(--muted); }
.scroll-cue .chevron{ display:block; width:10px; height:10px; margin:16px auto 0;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg); animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.4;} 50%{ transform:rotate(45deg) translate(3px,3px); opacity:1;} }

/* =========================================================
   2. THE CONVERSATION: two Jimmys overheard in the dark.
   Left/right chat thread, revealed on scroll (desktop + mobile).
   Sits above the flashlight (z 60) so it stays readable; the
   torch is demoted to mood + cursor glow on desktop.
   ========================================================= */
.scene--build{ display:block; min-height:auto; overflow:hidden;
  background:linear-gradient(180deg,#020304,#05070c 60%,#090b12);
  padding:clamp(96px,17vh,190px) var(--edge); }
.scene--build::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 42% at calc(50% + var(--mx,0) * 10%) calc(50% + var(--my,0) * 10%), rgba(41,231,255,.05), transparent 72%); }
.chat{ position:relative; z-index:1; width:100%; max-width:min(92vw,600px); margin-inline:auto;
  display:flex; flex-direction:column; gap:clamp(16px,4vh,40px); }
.msg{ max-width:82%; padding:14px 18px; border-radius:18px; text-align:left; color:var(--ink);
  font-size:clamp(1.05rem,3.4vw,1.4rem); line-height:1.42; letter-spacing:-.005em;
  box-shadow:0 10px 34px rgba(0,0,0,.45); }
.msg.left{ align-self:flex-start; border-bottom-left-radius:5px; background:rgba(245,241,232,.07); }
.msg.right{ align-self:flex-end; border-bottom-right-radius:5px; background:rgba(41,231,255,.11); }
.chat .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.chat .reveal.in{ opacity:1; transform:none; }

/* =========================================================
   3. DROP - detonation. Poster-scale wordmark.
   ========================================================= */
.scene--drop{ background:#000; overflow:hidden; }
.drop-bg{
  position:absolute; inset:0; z-index:0;
  background-image:url("../img/world.jpg"); background-size:cover; background-repeat:no-repeat;
  background-position:calc(50% + var(--mx,0) * 3%) calc(50% + var(--my,0) * 3%);
  filter:saturate(.7) brightness(.6) contrast(1.02);
  opacity:0; transform:scale(1.18);
  transition:opacity 1.1s var(--ease), transform 6s linear, background-position .4s ease-out;
}
.scene--drop.detonate .drop-bg{ opacity:.72; transform:scale(1.02); }
.scene--drop::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(3,4,7,.6), rgba(3,4,7,.28) 42%, rgba(3,4,7,.92)); }
.scene--drop::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(52% 42% at calc(50% + var(--mx,0) * 9%) calc(46% + var(--my,0) * 9%), rgba(41,231,255,.12), transparent 70%); }
.drop-inner{ position:relative; z-index:2; width:100%; }
.wordmark{
  font-family:var(--disp); font-weight:400;
  text-transform:uppercase; line-height:.84; letter-spacing:.01em;
  display:flex; flex-direction:column; align-items:center;
}
.wordmark span{ display:block; opacity:0; transform:translateY(40px) scale(1.08); filter:blur(6px); }
.wordmark .w1{ font-size:min(16.5vw, 13.5rem); color:#fff;
  text-shadow:0 0 46px rgba(41,231,255,.5), 0 0 14px rgba(41,231,255,.35); }
.wordmark .w2{ font-size:min(5.6vw, 4.4rem); color:var(--muted); letter-spacing:.5em; padding-left:.5em; margin:.45em 0 .35em; }
.wordmark .w3{ font-size:min(24.5vw, 20rem); color:#fff;
  text-shadow:0 0 54px rgba(41,231,255,.55), 0 0 16px rgba(41,231,255,.4); }
.scene--drop.detonate .wordmark span{ animation:slam .7s var(--ease) forwards; }
.scene--drop.detonate .wordmark .w1{ animation-delay:.02s; }
.scene--drop.detonate .wordmark .w2{ animation-delay:.16s; }
.scene--drop.detonate .wordmark .w3{ animation-delay:.30s; }
@keyframes slam{ to{ opacity:1; transform:none; filter:blur(0); } }
.found{
  margin-top:clamp(26px,5vh,48px);
  font:500 clamp(.7rem,1.8vw,.85rem)/1 var(--mono); letter-spacing:.5em; text-transform:lowercase;
  color:var(--blue); text-shadow:0 0 18px rgba(41,231,255,.5);
  opacity:0;
}
.scene--drop.detonate .found{ animation:foundIn 1.2s var(--ease) 1s forwards; }
@keyframes foundIn{ from{ opacity:0; letter-spacing:.9em; } to{ opacity:.95; letter-spacing:.5em; } }

.detonation-flash{ position:fixed; inset:0; z-index:950; background:#fff; opacity:0; pointer-events:none; }
.detonation-flash.go{ animation:flash .5s ease-out forwards; }
@keyframes flash{ 0%{opacity:.85;} 100%{opacity:0;} }

/* =========================================================
   4. IDENTITY - the answer
   ========================================================= */
.scene--identity{ background:var(--bg); }
.identity-inner{ max-width:min(92vw,680px); margin-inline:auto; display:flex; flex-direction:column; gap:clamp(26px,6vh,52px); }
.statement--lead{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.4rem,8.6vw,5rem); line-height:.95; letter-spacing:.012em; color:#fff;
}
.statement--sub{ font-weight:400; font-size:clamp(1.05rem,2.6vw,1.3rem); line-height:1.6;
  color:rgba(244,241,232,.58); max-width:min(88vw,460px); margin-inline:auto; }
.statement--punch{ font-weight:700; font-size:clamp(1.5rem,4.8vw,2.5rem); line-height:1.16; letter-spacing:-.02em; }
.statement--punch em{ color:var(--blue); text-shadow:var(--glow); }

/* =========================================================
   Content blocks
   ========================================================= */
.block{ padding:clamp(90px,15vh,170px) var(--edge); position:relative; }
.block--dark{ background:var(--bg-2); }
.block-inner{ max-width:var(--maxw); margin-inline:auto; }
.block-inner--narrow{ max-width:640px; text-align:center; }
.section-head{ font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.2rem,8vw,5rem); line-height:.92; letter-spacing:.005em; margin-bottom:.5em; text-align:center; }
.section-head .dim{ color:var(--muted); }
.section-sub{ color:var(--muted); font-size:clamp(1rem,2.4vw,1.2rem); max-width:46ch; margin:0 auto 2.6em; text-align:center; }
.section-head--sentence{ font-size:clamp(1.5rem,4.4vw,2.5rem); line-height:1.06; letter-spacing:.01em; max-width:18ch; margin-inline:auto; }

/* Player embed */
.player{ max-width:820px; margin-inline:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(244,241,232,.06); border-radius:16px; }

/* ---------- Catalog: case files ---------- */
.cover-grid{ list-style:none; display:grid; gap:clamp(10px,1.6vw,18px); grid-template-columns:repeat(2,1fr); }
@media(min-width:560px){ .cover-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px){ .cover-grid{ grid-template-columns:repeat(4,1fr); } }
.cover-grid li:nth-child(2n) .reveal{ transition-delay:.07s; }
.cover-grid li:nth-child(3n) .reveal{ transition-delay:.14s; }
.cover{ position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden;
  background:#0c0e15; cursor:pointer; isolation:isolate; display:block; width:100%;
  border:0; padding:0; text-align:left; font:inherit; color:inherit; text-decoration:none;
  transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s ease-out; }
.cover img{ width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), filter .6s var(--ease); filter:saturate(.88) brightness(.78); }
.cover .c-no{
  position:absolute; top:10px; left:10px; z-index:3;
  font:500 10px/1 var(--mono); letter-spacing:.18em; color:rgba(244,241,232,.9);
  background:rgba(3,4,8,.55); border:1px solid rgba(244,241,232,.16);
  padding:5px 7px 4px; border-radius:4px; backdrop-filter:blur(6px);
}
.cover .c-meta{ position:absolute; inset:auto 0 0 0; z-index:2; padding:18px 14px 13px;
  display:flex; flex-direction:column; gap:3px;
  background:linear-gradient(0deg, rgba(2,3,6,.95) 10%, rgba(2,3,6,.55) 62%, transparent);
  transform:translateY(6px); opacity:.96; transition:transform .5s var(--ease), opacity .5s var(--ease); }
.cover .c-title{ font-weight:700; font-size:clamp(.85rem,1.6vw,1rem); line-height:1.1; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.9); }
.cover .c-theme{ font-size:.74rem; line-height:1.3; color:rgba(244,241,232,.92);
  text-shadow:0 0 18px rgba(41,231,255,.5), 0 2px 8px rgba(0,0,0,.95);
  max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .5s var(--ease); }
.cover .c-play{ position:absolute; top:10px; right:10px; z-index:3; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:rgba(3,4,8,.5); backdrop-filter:blur(6px);
  border:1px solid rgba(244,241,232,.25); opacity:0; transform:scale(.85);
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s, border-color .3s; }
.cover .c-play svg{ width:13px; height:13px; fill:#fff; margin-left:2px; }
.cover .c-lyrics{ position:absolute; top:10px; right:10px; z-index:3; font:500 10px/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue); background:rgba(3,4,8,.62);
  border:1px solid rgba(41,231,255,.5); padding:6px 9px; border-radius:999px; backdrop-filter:blur(6px);
  transition:background .3s, color .3s; }
.cover:hover .c-lyrics{ background:var(--blue); color:#03040a; }
.cover::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(244,241,232,.07); transition:box-shadow .5s var(--ease); }
@media(hover:hover){
  .cover:hover img{ transform:scale(1.07); filter:saturate(1.1) brightness(1); }
  .cover:hover .c-meta{ transform:none; opacity:1; }
  .cover:hover .c-theme{ max-height:4em; opacity:1; }
  .cover:hover .c-play{ opacity:1; transform:none; background:var(--blue); border-color:var(--blue); }
  .cover:hover .c-play svg{ fill:#03040a; }
  .cover:hover::after{ box-shadow:inset 0 0 0 1px var(--blue), 0 0 30px rgba(41,231,255,.16); }
}
@media(hover:none){ .cover .c-theme{ max-height:4em; opacity:1; } .cover .c-play{ opacity:.9; transform:none; } }

/* ---------- Transmissions: the feeds ---------- */
.tv-row{ display:grid; gap:clamp(12px,2vw,22px); grid-template-columns:1fr; }
@media(min-width:720px){ .tv-row{ grid-template-columns:repeat(3,1fr); } }
.tv{ position:relative; border-radius:10px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.5);
  border:1px solid rgba(244,241,232,.07); }
.tv video{ width:100%; aspect-ratio:16/10; object-fit:cover; background:#000; filter:saturate(.82) contrast(1.05); }
.tv::after{ /* scanlines */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px);
}
.tv-cam, .tv-rec, .tv-time{
  position:absolute; z-index:2; font:500 10px/1 var(--mono); letter-spacing:.22em;
  color:rgba(244,241,232,.9); text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.tv-cam{ top:12px; left:12px; }
.tv-rec{ top:12px; right:12px; display:inline-flex; align-items:center; gap:6px; }
.tv-rec i{ width:7px; height:7px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 8px rgba(255,177,92,.8); animation:rec 1.6s steps(1) infinite; }
@keyframes rec{ 0%,100%{ opacity:1; } 50%{ opacity:.15; } }
.tv-time{ bottom:12px; right:12px; font-variant-numeric:tabular-nums; }
.tv figcaption{ position:absolute; left:12px; bottom:12px; z-index:2;
  font:500 10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); text-shadow:0 1px 6px rgba(0,0,0,.9); }

/* ---------- Stay / capture ---------- */
.stay-form{ display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap; }
.stay-form input{ flex:1 1 200px; min-width:0; background:#0c0e15; border:1px solid rgba(244,241,232,.16);
  color:var(--ink); padding:15px 18px; border-radius:999px; font:400 1rem var(--sans); }
.stay-form input::placeholder{ color:#565d6c; }
.stay-form input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 24px rgba(41,231,255,.2); }
.stay-form button{ flex:0 0 auto; background:var(--ink); color:#03040a; border:0; cursor:pointer;
  padding:15px 26px; border-radius:999px; font:700 1rem var(--sans); transition:transform .25s var(--ease), background .25s; }
.stay-form button:hover{ transform:translateY(-2px); background:var(--blue); }
.hp{ position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.stay-note{ min-height:1.4em; margin-top:16px; color:var(--blue); font-size:.95rem; }
.follow-spotify{ display:inline-block; margin-top:34px; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--muted); padding-bottom:3px; transition:color .3s, border-color .3s; }
.follow-spotify:hover{ color:var(--blue); border-color:var(--blue); }
.stay-fine{ margin:42px auto 0; max-width:48ch; font:400 11px/1.7 var(--mono); letter-spacing:.05em; color:#4a5060; }

/* ---------- Footer ---------- */
.footer{ padding:clamp(60px,10vh,110px) var(--edge) clamp(40px,7vh,70px); background:#020304; text-align:center; }
.footer-inner{ max-width:var(--maxw); margin-inline:auto; display:flex; flex-direction:column; gap:22px; align-items:center; }
.footer-mark{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(1.1rem,3vw,1.5rem); letter-spacing:.02em; color:var(--muted); }
.footer-links{ display:flex; gap:clamp(16px,4vw,40px); flex-wrap:wrap; justify-content:center; }
.footer-links a{ color:var(--ink); text-decoration:none; font-size:.95rem; letter-spacing:.04em; opacity:.8; transition:color .3s, opacity .3s; }
.footer-links a:hover{ color:var(--blue); opacity:1; }
.footer-contact a{ color:var(--amber); text-decoration:none; }
.footer-fine{ font:400 11px/1.6 var(--mono); letter-spacing:.12em; color:#454b59; }

/* =========================================================
   Click-to-play modal
   ========================================================= */
.modal{ position:fixed; inset:0; z-index:1100; display:none; align-items:center; justify-content:center; padding:var(--edge); }
.modal.open{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,3,6,.82); backdrop-filter:blur(10px); }
.modal-card{ position:relative; z-index:1; width:100%; max-width:420px; animation:modalIn .4s var(--ease); }
@keyframes modalIn{ from{ opacity:0; transform:translateY(16px) scale(.98);} to{ opacity:1; transform:none; } }
.modal-title{ font:500 11px/1 var(--mono); letter-spacing:.34em; text-transform:uppercase;
  color:var(--blue); margin-bottom:14px; text-align:center; }
.modal-embed{ border-radius:14px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(41,231,255,.2); min-height:80px; }
.modal-embed iframe{ display:block; width:100%; border:0; }
.modal-close{ position:absolute; top:-46px; right:0; width:38px; height:38px; border-radius:50%;
  background:rgba(9,11,18,.6); border:1px solid rgba(244,241,232,.2); color:var(--ink);
  font-size:22px; line-height:1; cursor:pointer; transition:border-color .3s, color .3s; }
.modal-close:hover{ border-color:var(--blue); color:var(--blue); }

/* ---------- QA stacking (?qa=1 only) ---------- */
html.qa .scene{ min-height:auto; }

/* =========================================================
   Reduced motion - dignified stillness
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition-duration:.001s !important; }
  .reveal{ opacity:1; transform:none; }
  .chat .reveal{ opacity:1; transform:none; }
  .drop-bg{ opacity:.66; transform:none; }
  .wordmark span{ opacity:1; transform:none; filter:none; }
  .found{ opacity:.95; }
}