/* ============================================================
   Vidzero concept v3. navigation
   Primary nav = a film timeline scrubber (bottom). Playhead tracks scroll.
   Expanded / mobile = a clapperboard scene-select overlay.
   ============================================================ */

/* top: brand only, adapts light-over-hero -> dark once scrolled */
.brandbar { position: fixed; top: 0; left: 0; z-index: var(--z-nav); padding: clamp(1rem,3vw,1.6rem) clamp(1.25rem,5vw,2.5rem);
  color: var(--on-dark); transition: color var(--dur-2); }
.brandbar a { font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; color: currentColor; }
.brandbar .dot { color: var(--accent); }

/* site menu button (top-right) */
.sitemenu-btn { position: fixed; top: 0; right: 0; z-index: var(--z-nav);
  margin: clamp(0.8rem,2.6vw,1.35rem) clamp(1.25rem,5vw,2.5rem);
  display: inline-flex; align-items: center; gap: .7em; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark); border: 1.5px solid color-mix(in srgb, currentColor 34%, transparent); border-radius: var(--r-pill); padding: .7em 1.05em;
  background: rgba(236, 230, 215, 0);
  transition: color var(--dur-2), border-color var(--dur-1), background var(--dur-2); }
.sitemenu-btn:hover { border-color: var(--accent); }
/* shared clapperboard icon: --open sits open (Menu), default sits shut (Cut) */
.clapper { position: relative; width: 18px; height: 15px; }
.clapper .board { position: absolute; left: 0; bottom: 0; width: 18px; height: 9px; background: currentColor; opacity: .85; border-radius: 1px; }
.clapper .stick { position: absolute; left: 0; top: 0; width: 18px; height: 5px; border-radius: 1px; transform-origin: left bottom;
  transform: rotate(0deg); background: repeating-linear-gradient(115deg, currentColor 0 3px, transparent 3px 6px); }
.clapper--open .stick { transform: rotate(-14deg); }
.sitemenu-btn:hover .clapper .stick { animation: menu-clap .5s var(--ease-inout); }
.scenes__close:hover .clapper .stick { animation: cut-clap .45s var(--ease-inout); }
@keyframes menu-clap { 0% { transform: rotate(-14deg); } 45% { transform: rotate(2deg); } 70% { transform: rotate(-6deg); } 100% { transform: rotate(-14deg); } }
@keyframes cut-clap { 0% { transform: rotate(0deg); } 35% { transform: rotate(-20deg); } 70% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } }

/* top elements adapt to the section behind them (set by JS on body) */
body[data-top="light"] .brandbar, body[data-top="light"] .sitemenu-btn { color: var(--ink); }
/* Over paper this backing is the paper's own colour, so nothing visibly
   changes. Over the breakout photographs it keeps the pill readable: the
   count's shirt photograph put a dark image under the transparent ink pill
   and it measured 1.1:1 at 1440. Plain rgba, never backdrop-filter (the
   sticky freeze trap). */
body[data-top="light"] .sitemenu-btn { background: rgba(236, 230, 215, .92); }

/* ---- timeline scrubber ---- */
.tl { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); height: 62px;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); padding: 0 clamp(1rem, 4vw, 2.4rem);
  background: rgba(8, 6, 28, .74); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(239,234,250,.14); color: var(--on-dark); }
.tl__tc { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; color: var(--on-dark-soft);
  display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.tl__tc i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 6px var(--rec); }

.tl__track { position: relative; flex: 1; height: 100%; }
.tl__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: rgba(239,234,250,.18); }
.tl__fill { position: absolute; left: 0; top: 50%; height: 2px; transform: translateY(-50%); width: var(--prog, 0%); background: var(--accent); transition: width .1s linear; }
.tl__head { position: absolute; top: 50%; left: var(--prog, 0%); width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--accent); box-shadow: 0 0 10px var(--accent); transition: left .1s linear; }
.tl__mark { position: absolute; top: 50%; left: var(--x); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer; background: none; }
.tl__mark .tick { width: 2px; height: 9px; background: rgba(239,234,250,.4); transition: background .2s, height .2s; }
.tl__mark .lbl { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); white-space: nowrap; transition: color .2s; }
.tl__mark:hover .lbl, .tl__mark.is-active .lbl { color: #fff; }
.tl__mark:hover .tick, .tl__mark.is-active .tick { background: var(--accent); height: 12px; }

@media (max-width: 820px) {
  .tl { gap: 1rem; }
  .tl__mark .lbl { display: none; }        /* keep the progress bar + ticks; labels via the menu */
}

/* ---- site menu: a scene-select monitor ---- */
.scenes { position: fixed; inset: 0; z-index: var(--z-lightbox); color: var(--on-dark);
  background: radial-gradient(120% 100% at 82% 0%, #14104a 0%, #0a0730 55%, #06041c 100%);
  overflow-y: auto; pointer-events: none;
  clip-path: circle(0% at calc(100% - 4rem) 2.6rem);
  transition: clip-path .6s var(--ease-inout); }
.scenes[hidden] { display: none; }
.scenes.is-open { clip-path: circle(150% at calc(100% - 4rem) 2.6rem); pointer-events: auto; }
/* monitor grid + scanlines */
.scenes::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(239,234,250,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(239,234,250,.05) 1px, transparent 1px);
  background-size: 46px 46px; }
.scenes::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px); }

.scenes__head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center;
  padding: clamp(1rem,3vw,1.6rem) clamp(1.25rem,5vw,2.5rem); }
.scenes__title { font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; color: var(--on-dark); }
.scenes__close { display: inline-flex; align-items: center; gap: .7em; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark);
  border: 1.5px solid color-mix(in srgb, currentColor 34%, transparent); border-radius: var(--r-pill); padding: .7em 1.05em; transition: border-color var(--dur-1), color var(--dur-1); }
.scenes__close:hover { color: #fff; border-color: var(--accent); }

.scenes__list { position: relative; z-index: 1; display: grid; max-width: 1100px; margin-inline: auto;
  padding: clamp(1.5rem,5vw,4rem) clamp(1.25rem,5vw,2.5rem) 5rem; }
.scenes__item { position: relative; display: flex; align-items: center; gap: clamp(1rem,3vw,2rem);
  padding: clamp(.7rem,2vw,1.2rem) 0 clamp(.7rem,2vw,1.2rem) 1.5rem; border-top: 1px solid rgba(239,234,250,.12); color: var(--on-dark-soft);
  font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem,5vw,3.1rem); letter-spacing: -0.02em; }
.scenes__item:last-child { border-bottom: 1px solid rgba(239,234,250,.12); }
.scenes__item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 0; background: var(--accent); transition: height var(--dur-2) var(--ease-out); }
.scenes__item:hover { color: #fff; padding-left: 2.4rem; }
.scenes__item:hover::before { height: 62%; }
.scenes__item .sc { font-family: var(--f-mono); font-size: .78rem; font-weight: 400; letter-spacing: .1em; color: var(--accent); flex: none; }
.scenes__item .lbl { flex: 1; }
.scenes__item .tc { font-family: var(--f-mono); font-size: .82rem; font-weight: 400; letter-spacing: .08em; color: var(--on-dark-soft); flex: none; }
.scenes__item:hover .tc { color: #fff; }
/* signal re-key on hover: the row's text scrambles and resolves (JS), and
   flickers while it does, the same feed-switch the portfolio label uses when
   the camera lands on the next film. Shared keyframe lives in base.css. */
.scenes__item.is-rekey .sc,
.scenes__item.is-rekey .lbl,
.scenes__item.is-rekey .tc { animation: rekey-flicker .42s steps(1, end); }
/* the label box is flex-sized, so scrambled characters cannot shift the row */
.scenes__item .lbl { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .scenes__item.is-rekey .sc,
  .scenes__item.is-rekey .lbl,
  .scenes__item.is-rekey .tc { animation: none; }
}

/* opening experience: header + rows rack into focus, staggered */
.scenes__head > *, .scenes__item { opacity: 0; transform: translateY(18px); filter: blur(7px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), filter .5s var(--ease-out), color var(--dur-1), padding-left var(--dur-2) var(--ease-out); }
.scenes.is-open .scenes__head > *, .scenes.is-open .scenes__item { opacity: 1; transform: none; filter: none; }
.scenes.is-open .scenes__head > * { transition-delay: .1s; }
.scenes.is-open .scenes__item:nth-child(1) { transition-delay: .16s; }
.scenes.is-open .scenes__item:nth-child(2) { transition-delay: .22s; }
.scenes.is-open .scenes__item:nth-child(3) { transition-delay: .28s; }
.scenes.is-open .scenes__item:nth-child(4) { transition-delay: .34s; }
.scenes.is-open .scenes__item:nth-child(5) { transition-delay: .40s; }
.scenes.is-open .scenes__item:nth-child(6) { transition-delay: .46s; }
.scenes.is-open .scenes__item:hover { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .scenes { transition: opacity var(--dur-2); clip-path: none; opacity: 0; }
  .scenes.is-open { opacity: 1; }
  .scenes__head > *, .scenes__item { transition: none; opacity: 1; transform: none; filter: none; }
}