/* neobopstudio.com — "the void and the contact sheet."
   Tokens are the neobop studio design system verbatim. Radius 0, no shadows,
   one blue and one teal, separation by 1px hairline only. */

:root{
  --bg:#06080C; --bg-alt:#0D1219; --panel:#131A24;
  --fg:#EDF1F7; --dim:#99A3B2;   /* 7.9:1 on --bg */
  --chrome:#B2BAC7;              /* 10.3:1 — for type under 12px */
  --rule:#1E262F; --rule-2:#2D3742;
  --accent:#4DA6FF; --teal:#00E0C6; --ink:#04101C;

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --quick:120ms; --med:320ms; --slow:700ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  --bar:46px;                    /* fixed header / footer height */
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);-webkit-font-smoothing:antialiased}
body{
  background:var(--bg); color:var(--fg); font-family:var(--body);
  overflow-x:hidden; overscroll-behavior-y:none;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

.mono{font-family:var(--mono);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.u-dim{color:var(--dim)}
.u-accent{color:var(--accent)}

/* ── fixed chrome ─────────────────────────────────────────────────────────── */
.bar{
  position:fixed; left:0; right:0; z-index:60; height:var(--bar);
  display:flex; align-items:center; gap:22px; padding:0 18px;
  background:rgba(6,8,12,.72); backdrop-filter:blur(14px);
  font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  font-weight:700; text-transform:uppercase; color:var(--chrome);
}
.bar--top{top:0;border-bottom:1px solid var(--rule)}
.bar--bot{bottom:0;border-top:1px solid var(--rule)}
.bar .spacer{flex:1}
.bar a:hover{color:var(--fg)}

.wordmark{display:flex;align-items:center;gap:9px;color:var(--fg)}
.wordmark .name{font-family:var(--display);font-size:17px;font-weight:700;
  letter-spacing:-.03em;text-transform:none}
.wordmark .name i{color:var(--dim);font-style:normal;font-weight:400}
.mark{flex:0 0 auto}
.cursor-blink{animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.nav{display:flex;gap:18px}
.status{display:flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;background:var(--teal);flex:0 0 auto}
.dot.is-closed{background:var(--rule-2)}

/* ── the field ────────────────────────────────────────────────────────────── */
.stage{
  position:relative; height:100svh; overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.field{
  position:absolute; inset:-30% -26%; z-index:5;  /* above the plate: the work crosses the type */
  will-change:transform; touch-action:none;
}
.plate{position:absolute;inset:0;z-index:2;will-change:transform;pointer-events:none}
.stage.is-grabbing{cursor:none}

/* one flat light field — never a gradient */
.lightfield{
  position:absolute; top:0; right:0; width:min(44vw,660px); height:58%;
  background:var(--accent); opacity:.09; z-index:1; pointer-events:none;
  border-left:1px solid var(--accent); border-bottom:1px solid var(--accent);
}

.headline{
  position:absolute; left:clamp(16px,4vw,54px); top:50%; z-index:2;
  width:100%;
  transform:translateY(-50%); pointer-events:none; user-select:none;
}
.headline h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(52px,17vw,300px); letter-spacing:-.05em; line-height:.86;
  text-transform:lowercase; white-space:nowrap;   /* the frame crops it, not a wrap */
}
.headline h1 .b{color:var(--accent)}
.caption{
  position:absolute; left:clamp(16px,4vw,54px); bottom:calc(var(--bar) + 26px);
  z-index:20; max-width:min(38ch,42vw); padding:15px 17px;
  background:var(--ink); border:1px solid var(--rule-2);
}
.caption p{font-size:clamp(13px,1.05vw,15px);line-height:1.6;color:var(--dim)}
.caption b{color:var(--fg);font-weight:600}
.stage.is-sheet .caption{opacity:0;pointer-events:none;transition:opacity var(--med) var(--ease)}

/* ── tiles ────────────────────────────────────────────────────────────────── */
.tile{
  position:absolute; z-index:5; cursor:none;
  transform-origin:50% 50%;
  transition:transform var(--med) var(--ease), filter var(--slow) var(--ease);
  filter:grayscale(.4) brightness(.8);
}
.tile__inner{position:relative;border:1px solid var(--rule-2);overflow:hidden;background:var(--bg-alt)}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;display:block}
.tile video{position:absolute;inset:0;opacity:0;transition:opacity var(--med) var(--ease)}
.tile__tag{
  position:absolute; left:0; bottom:0; z-index:2;
  display:flex; gap:8px; align-items:center;
  padding:5px 8px; background:var(--ink);
  font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.14em;
  color:var(--fg); opacity:0; transform:translateY(100%);
  transition:opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.tile__tag b{color:var(--accent)}
.tile:hover,.tile:focus-visible{filter:grayscale(0) brightness(1);z-index:30}
.tile:hover .tile__tag,.tile:focus-visible .tile__tag{opacity:1;transform:translateY(0)}
.tile.is-playing video{opacity:1}

/* the finished spot sits centre-field and is the one thing already in colour */
.tile--spot{filter:none}
.tile--spot .tile__inner{border-color:var(--accent)}

/* contact-sheet mode: the scatter resolves into the grid it always was */
.field.is-sheet{transform:none!important}

.sheet{
  position:absolute; inset:0; z-index:6;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--rule);
  /* clear the fixed bars: a frame number hidden under the header is a bug */
  padding:calc(var(--bar) + 1px) 1px calc(var(--bar) + 1px);
  opacity:0; pointer-events:none; transition:opacity var(--med) var(--ease);
}
.stage.is-sheet .sheet{opacity:1;pointer-events:auto}
.stage.is-sheet .field,.stage.is-sheet .plate{opacity:0;pointer-events:none}
.plate{transition:opacity var(--med) var(--ease)}
.stage.is-sheet .field{transition:opacity var(--med) var(--ease)}
.sheet__cell{position:relative;overflow:hidden;background:var(--bg);cursor:none}
.sheet__cell img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.8);
  transition:filter var(--slow) var(--ease),transform var(--slow) var(--ease)}
.sheet__cell:hover img{filter:none;transform:scale(1.04)}
/* the still behind a number can be light or dark, so the number carries its own ground */
.sheet__cell .n{position:absolute;top:0;left:0;z-index:2;padding:5px 7px;background:var(--ink);
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--fg)}

.sheet__cta{background:var(--accent);color:var(--ink);padding:20px 18px;
  display:flex;flex-direction:column;justify-content:space-between;cursor:none;
  transition:background var(--quick) var(--ease)}
.sheet__cta:hover{background:var(--teal)}
.sheet__cta .k{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em}
.sheet__cta strong{font-family:var(--display);font-size:clamp(22px,2.4vw,34px);font-weight:700;
  letter-spacing:-.03em;line-height:.95}
.sheet__cta .go{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em}

/* ── mode toggle ──────────────────────────────────────────────────────────── */
.modes{
  position:absolute; left:50%; bottom:calc(var(--bar) + 20px); z-index:40;
  transform:translateX(-50%); display:flex; border:1px solid var(--rule-2);
  background:rgba(6,8,12,.8); backdrop-filter:blur(14px);
}
.modes button{
  padding:9px 16px; font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--chrome);
  transition:background var(--quick) var(--ease),color var(--quick) var(--ease);
}
.modes button[aria-pressed="true"]{background:var(--accent);color:var(--ink)}
.modes button:not([aria-pressed="true"]):hover{color:var(--fg)}

.hint{
  position:absolute; left:50%; bottom:calc(var(--bar) + 62px); z-index:40;
  transform:translateX(-50%); font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--chrome);
  transition:opacity var(--med) var(--ease); pointer-events:none;
}
.hint.is-gone{opacity:0}

/* ── custom cursor ────────────────────────────────────────────────────────── */
.cur{
  position:fixed; top:0; left:0; z-index:90; pointer-events:none;
  display:flex; align-items:center; gap:8px;
  transform:translate3d(-100px,-100px,0);
  transition:opacity var(--quick) var(--ease);
}
.cur__ring{width:11px;height:11px;border:1px solid var(--accent);flex:0 0 auto;
  transition:width var(--med) var(--ease),height var(--med) var(--ease),
             background var(--med) var(--ease),border-color var(--med) var(--ease)}
.cur__label{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg);white-space:nowrap;opacity:0;
  transition:opacity var(--quick) var(--ease)}
.cur.is-active .cur__ring{width:7px;height:7px;background:var(--accent)}
.cur.is-active .cur__label{opacity:1}
.cur.is-hidden{opacity:0}
@media (hover:none),(pointer:coarse){.cur{display:none}.tile,.stage,.sheet__cell{cursor:auto}}

/* ── sections ─────────────────────────────────────────────────────────────── */
.sec{border-bottom:1px solid var(--rule);padding:clamp(54px,7vw,104px) clamp(16px,4vw,54px)}
.sec__label{margin-bottom:26px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.sec h2{font-family:var(--display);font-size:clamp(34px,5.6vw,74px);font-weight:700;
  letter-spacing:-.04em;line-height:.95;text-transform:lowercase;margin-bottom:18px}
.sec p.lede{max-width:62ch;color:var(--dim);font-size:clamp(15px,1.2vw,17px);line-height:1.6}

.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cell{background:var(--bg);padding:26px 24px 30px}
.cell__n{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--accent)}
.cell__cost{float:right;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;color:var(--chrome)}
.cell h3{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.02em;
  margin:16px 0 10px}
.cell p{color:var(--dim);font-size:14.5px;line-height:1.6}
.cell ul{list-style:none;margin-top:14px}
.cell li{color:var(--dim);font-size:14px;line-height:1.5;padding:7px 0 7px 18px;position:relative;
  border-top:1px solid var(--rule)}
.cell li:first-child{border-top:0}
.cell li::before{content:'▸';position:absolute;left:0;color:var(--accent)}

.contact{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:40px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.contact a{background:var(--bg);padding:26px 24px;display:block;
  transition:background var(--quick) var(--ease)}
.contact a:hover{background:var(--bg-alt)}
.contact .k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chrome)}
.contact .v{font-family:var(--display);font-size:clamp(20px,2vw,28px);font-weight:700;
  letter-spacing:-.02em;margin:12px 0 8px}
.contact a:hover .v{color:var(--teal)}
.contact .hint{position:static;transform:none;color:var(--dim);font-size:13px;
  font-family:var(--body);letter-spacing:0;text-transform:none}

/* ── staged overlay ───────────────────────────────────────────────────────── */
.stagemodal{
  position:fixed; inset:0; z-index:80; display:none;
  background:rgba(4,6,10,.94); backdrop-filter:blur(8px);
  padding:calc(var(--bar) + 22px) 22px;
}
.stagemodal.is-open{display:grid;place-items:center}
.stagemodal__box{display:grid;grid-template-columns:auto minmax(0,340px);gap:1px;
  background:var(--rule);border:1px solid var(--rule-2);max-height:100%}
.stagemodal__media{background:var(--bg);display:grid;place-items:center;padding:1px}
.stagemodal__media img,.stagemodal__media video{max-height:min(74vh,760px);width:auto}
.stagemodal__meta{background:var(--bg);padding:26px 24px;overflow:auto}
.stagemodal__meta h3{font-family:var(--display);font-size:30px;font-weight:700;
  letter-spacing:-.03em;margin-bottom:6px}
.stagemodal__meta dl{margin-top:22px}
.stagemodal__meta dt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--chrome);padding-top:13px;border-top:1px solid var(--rule)}
.stagemodal__meta dd{font-size:14.5px;line-height:1.5;padding:5px 0 12px}
.stagemodal__close{position:fixed;top:calc(var(--bar) + 14px);right:20px;z-index:2;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--chrome)}
.stagemodal__close:hover{color:var(--fg)}

.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--accent);
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.tag--concept{border-color:var(--rule-2);color:var(--dim)}

/* ── boot ─────────────────────────────────────────────────────────────────── */
.boot{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;
  transition:opacity var(--slow) var(--ease)}
.boot.is-done{opacity:0;pointer-events:none}
.boot__line{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.18em;
  color:var(--fg);display:flex;gap:10px;align-items:center}
.boot__line .c{width:9px;height:15px;background:var(--teal)}

/* reveal-on-scroll */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .nav,.bar .hide-sm{display:none}
  .bar{gap:12px;padding:0 12px;font-size:10px;letter-spacing:.1em}
  /* lift the caption clear of the hint and the mode toggle */
  .caption{left:14px;right:14px;width:auto;max-width:none;bottom:calc(var(--bar) + 96px);padding:13px 14px}
  .hint{bottom:calc(var(--bar) + 58px)}
  .grid--4,.grid--3,.contact{grid-template-columns:1fr}
  .sheet{grid-template-columns:repeat(2,1fr)}
  .stagemodal__box{grid-template-columns:1fr;overflow:auto}
  .headline h1{white-space:normal}
  .field{inset:-10% -10%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .rv{opacity:1;transform:none}
  .cur{display:none}
}