/* Standalone study: the portfolio's existing ground, ink, panel, line,
   accent and Geist UI stack. Theme values are local to this page. */
.time-scrubber-page {
  --bg: #202020;
  --ink: #f8f3ea;
  --muted: #aaa49a;
  --line: rgba(248, 243, 234, .18);
  --accent: #ff6048;
  --panel: rgba(12, 12, 12, .94);
  --panel-ease: cubic-bezier(.22,1,.36,1);
  --theme-icon-color: #fff;
  --theme-toggle-bg: rgba(5,5,5,.48);
  --theme-toggle-button-bg: rgba(248,243,234,.07);
  --theme-toggle-active-bg: rgba(248,243,234,.16);
  --theme-toggle-border: rgba(248,243,234,.2);
  --cyan: var(--accent);
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
}
.time-scrubber-page[data-theme="light"] {
  --bg: #fdfdfd;
  --ink: #0a0a0a;
  --muted: #625e57;
  --line: rgba(10, 10, 10, .16);
  --panel: rgba(247, 244, 238, .92);
  --theme-icon-color: #0a0a0a;
  --theme-toggle-bg: rgba(255,255,255,.58);
  --theme-toggle-button-bg: rgba(10,10,10,.045);
  --theme-toggle-active-bg: rgba(10,10,10,.11);
  --theme-toggle-border: rgba(10,10,10,.18);
  color-scheme: light;
}
.time-scrubber-page[data-theme="dark"] { color-scheme: dark; }
.time-scrubber-page * { box-sizing: border-box; }
.scrubber-header { display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px clamp(20px, 5vw, 64px); }
.scrubber-header a { color:inherit;text-decoration:none;font-size:14px; }
.scrubber-header a:hover { text-decoration:underline;text-underline-offset:5px; }
.scrubber-main { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100svh - 180px);padding:48px 20px 96px;text-align:center; }
.scrubber-main h1 { margin:0 0 12px;font-size:clamp(28px, 5vw, 40px);font-weight:400;letter-spacing:-.03em; }
.scrubber-intro { margin:0 0 40px;max-width:32ch;color:var(--muted);font-size:15px;line-height:1.6; }
.scrubber-mount { max-width:100%; }
.scrubber-format { display:flex;justify-content:center;gap:24px;margin-top:28px;font-size:13px; }
.scrubber-format label { display:flex;gap:8px;align-items:center;cursor:pointer;min-height:32px; }
.scrubber-format input { accent-color:var(--accent); }
.scrubber-help { margin:20px 0 0;color:var(--muted);font-size:12px;line-height:1.6;max-width:35ch; }
.scrubber-header :focus-visible,.scrubber-format input:focus-visible { outline:2px solid var(--ink);outline-offset:4px; }

/* ══ Time scrubber ═══════════════════════════════════════ */
/* Bencho token mapping, using this project's existing roles directly:
   --card / --fill-slab → --panel; --fill-on → --ink;
   --font-ui → inherited portfolio UI font; --pane-edge → --line;
   --signal → --accent. No Bencho tokens are installed as globals. */
.tms {
  width: 300px;
  max-width: 100%;
  padding: 20px 20px 16px;
  border-radius: var(--tms-r, 20px);
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  user-select: none;
  -webkit-user-select: none;
}
[data-stroke="on"] .tms { box-shadow: 0 0 0 1px var(--line); }
.tms-read { display:flex;align-items:baseline;justify-content:center;gap:8px; }
.tms-time { display:inline-flex;font-size:30px;font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums; }
/* a digit rolls through a window that FADES rather than clips.
   Each cell is 1.5em for a 1em line, the digit centred in it, so
   at rest the neighbours sit wholly outside the window; the mask
   takes the top and bottom quarter-em to nothing, so a digit on
   the move leaves and arrives through a fade, never an edge. The
   negative margin keeps the line box at 1em. */
.tms-col { display:inline-block;height:1.5em;margin:-.25em 0;overflow:hidden;mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent); }
.tms-strip { display:flex;flex-direction:column;transition:transform 220ms cubic-bezier(.24,1.34,.38,1); }
.tms-strip > span { height:1.5em;line-height:1.5em;flex:none; }
/* and it smears a little while it rolls */
.tms-strip[data-flip="a"] { animation:tms-blur-a 260ms ease-out; }
.tms-strip[data-flip="b"] { animation:tms-blur-b 260ms ease-out; }
.tms-colon { padding:0 .02em; }
.tms-mer { font-size:14px;font-weight:500;color:color-mix(in srgb,var(--ink) 52%,var(--panel));letter-spacing:-.01em; }
.tms-ruler {
  position:relative;height:58px;margin-top:16px;cursor:grab;touch-action:pan-y;outline:none;
  /* the ruler fades out at both ends, like a wheel turning away */
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
.dts { touch-action:pan-y;cursor:grab; }
@media(pointer:coarse) { .dts { touch-action:none; } }
.dts :is(.tms-track,.tms-mark) { pointer-events:none; }
.tms-ruler:active { cursor:grabbing; }
.tms-ruler:focus-visible { box-shadow:inset 0 0 0 2px var(--accent);border-radius:10px; }
.tms-track { position:absolute;left:50%;top:0;bottom:0; }
.tms-tick { position:absolute;left:-1px;top:8px;width:2px;height:10px;border-radius:1px;background:var(--ink);transform-origin:50% 0; }
.tms-tick[data-kind="quarter"] { height:17px; }
.tms-tick[data-kind="hour"] { height:25px; }
.tms-hour { position:absolute;left:0;top:38px;font-size:11px;font-weight:400;white-space:nowrap;color:color-mix(in srgb,var(--ink) 52%,var(--panel));letter-spacing:0; }
/* the fixed mark the ruler runs under */
.tms-mark { position:absolute;left:50%;top:2px;width:3px;height:32px;margin-left:-1.5px;border-radius:2px;background:var(--accent); }
.tms-status { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
@keyframes tms-blur-a { from { filter:blur(2px); } to { filter:blur(0); } }
@keyframes tms-blur-b { from { filter:blur(2px); } to { filter:blur(0); } }
@media(prefers-reduced-motion:reduce) { .tms-strip { transition:none;animation:none !important; } }

/* The film leads; the original ruler and theme remain the interaction. */
.scrubber-main { min-height:calc(100svh - 130px);padding:24px 20px 48px; }
.scrubber-main h1 { font-size:clamp(24px,4vw,34px); }
.scrubber-intro { margin-bottom:24px;max-width:none; }
.film { position:relative;width:min(100%,calc(46svh * 9 / 16));background:#111;aspect-ratio:9/16;overflow:hidden;border-radius:12px; }
.film-stage,.film-stage video { width:100%;height:100%; }
.film-stage { position:absolute;inset:0; }
.film-stage video { position:absolute;inset:0;object-fit:cover;transform:translateZ(0) scale(1.005); }
.film-stage video[hidden] { display:block;visibility:hidden;pointer-events:none; }
.film-opening-image { display:none; }
@media(max-width:899px) and (pointer:coarse) {
  .film-opening-image:not([hidden]) { display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;pointer-events:none; }
}
.film-message { position:absolute;inset:0;display:grid;place-content:center;margin:0;padding:24px;color:#f8f3ea;background:rgba(0,0,0,.55);font-size:14px; }
.film-message[hidden] { display:none; }
.film-fullscreen { display:none; }
@media (max-width:899px) and (pointer:coarse) {
  .film-fullscreen:not(:disabled) { display:grid; }
}
.film:fullscreen .film-fullscreen:not(:disabled) { display:grid; }
.film-fullscreen {
  position:absolute;z-index:1;right:max(12px, env(safe-area-inset-right));top:max(12px, env(safe-area-inset-top));
  width:44px;height:44px;padding:0;place-items:center;border:1px solid rgb(255 255 255 / .4);
  border-radius:8px;background:rgb(17 17 17 / .76);color:#fff;cursor:pointer;
}
.film-fullscreen svg { width:20px;height:20px; }
.film-fullscreen svg[hidden] { display:none; }
.film-fullscreen:focus-visible { outline:2px solid currentColor;outline-offset:3px; }
.film:fullscreen { width:100%;height:100%;border-radius:0;background:#000; }
.film:fullscreen video { object-fit:contain;transform:none; }
.film-controls { display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(600px,100%);margin:12px 0 26px; }
.film-controls button { border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:12px;min-height:38px;padding:8px 12px;cursor:pointer; }
.film-controls button:hover:not(:disabled):not([aria-pressed="true"]) { background:var(--panel); }
.film-controls button:disabled { opacity:.5;cursor:wait; }
.film-controls button[aria-pressed="true"] { background:var(--ink);color:var(--bg);border-color:var(--ink); }
.film-years { display:flex;gap:6px; }
.film-controls button:focus-visible { outline:2px solid var(--accent);outline-offset:4px; }
.dts { background:transparent; }
[data-stroke="on"] .dts { box-shadow:none; }
.dts .tms-time { font-size:26px; }
.dts .tms-mer { font-size:20px;color:var(--ink);font-weight:400; }
.date-footage { color:var(--muted);font-size:12px;line-height:1.5;max-width:55ch;min-height:18px;margin:16px 0 0; }
.scrubber-help { margin-top:8px;max-width:52ch; }
@media(max-width:480px) {
  .scrubber-header { padding:20px;gap:12px; }
  .scrubber-header a { font-size:12px; }
  .scrubber-main { padding-top:16px; }
  .film { border-radius:8px; }
  .film-controls { gap:6px; }
  .film-controls button { padding:8px;font-size:11px; }
  .film-years { gap:3px; }
}

/* The portfolio's existing compact icon toggle, placed in this page's header. */
.scrubber-header .theme-toggle { position:static;flex:none;padding:0;box-shadow:none;backdrop-filter:none; }
.scrubber-header .theme-toggle-button { width:38px;height:38px; }

/* Phosphor regular speaker icons; a vertical volume control above its mute button. */
.film-audio { display:flex;flex-direction:column-reverse;align-items:center;gap:8px; }
.film-controls #muteFilm { width:38px;height:38px;padding:8px;display:grid;place-items:center;color:var(--ink);background:transparent; }
#muteFilm svg { width:20px;height:20px; }
#muteFilm svg[hidden] { display:none; }
.film-volume { display:flex;align-items:center;justify-content:center;width:38px; }
.film-volume input { writing-mode:vertical-lr;direction:rtl;appearance:none;width:4px;height:72px;margin:0 17px;background:linear-gradient(to top,#fff var(--volume-fill,0%),rgba(180,180,180,.35) var(--volume-fill,0%));border-radius:4px;cursor:pointer; }
.film-volume input::-webkit-slider-thumb { appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:1px solid #aaa; }
.film-volume input::-moz-range-thumb { width:12px;height:12px;border-radius:50%;background:#fff;border:1px solid #aaa; }
.film-volume input:disabled { opacity:.5;cursor:default; }
.film-volume input:focus-visible { outline:2px solid var(--ink);outline-offset:6px; }
.time-scrubber-page[data-theme="light"] .film-volume input { box-shadow:0 0 0 1px #aaa; }

#playFilm { width:38px;height:38px;padding:8px;display:grid;place-items:center; }
#playFilm svg { width:20px;height:20px; }
#playFilm svg[hidden] { display:none; }
@media(min-width:900px) {
  .scrubber-header { justify-content:flex-start; }
  .scrubber-main { display:grid;grid-template-columns:minmax(340px,420px) auto;grid-template-rows:repeat(7,auto);column-gap:clamp(64px,8vw,144px);align-content:center;justify-content:center;align-items:center;max-width:1200px;margin:0 auto;padding:32px 48px 64px; }
  .scrubber-main > :not(.film-view) { grid-column:1;justify-self:center; }
  .scrubber-main h1 { grid-row:1; }
  .scrubber-intro { grid-row:2;margin-bottom:32px; }
  .film-controls { grid-row:3;margin:0 0 24px;gap:12px; }
  .scrubber-mount { grid-row:4;margin-bottom:24px; }
  .date-picker-mount { grid-row:5; }
  .date-footage { grid-row:6; }
  .scrubber-help { grid-row:7; }
  .scrubber-main > .film-view { grid-column:2;grid-row:1 / 8;width:min(32vw,calc(min(72svh,760px) * 9 / 16));justify-self:center; }
}

/* Keep both glyphs mounted so outgoing and incoming icons crossfade through blur. */
:is(#playFilm,#muteFilm) svg,
.scrubber-header .theme-icon {
  grid-area:1 / 1;
  opacity:1;
  filter:blur(0);
  transform:scale(1);
  transition:opacity 200ms ease-in-out,filter 200ms ease-in-out,transform 200ms ease-in-out;
}
:is(#playFilm,#muteFilm) svg[hidden],
.scrubber-header .theme-icon[hidden] {
  display:block;
  opacity:0;
  filter:blur(3px);
  transform:scale(.65);
  pointer-events:none;
}
.scrubber-header .theme-toggle-button { display:grid;place-items:center; }
@media(prefers-reduced-motion:reduce) {
  :is(#playFilm,#muteFilm) svg,.scrubber-header .theme-icon { transition:none; }
}

.film-view { width:min(100%,calc(46svh * 9 / 16)); }
.film-view .film { width:100%; }
.playback-controls { width:100%;margin:12px 0 0; }
.year-controls { justify-content:center; }
.film-audio { position:relative; }
.film-volume { position:absolute;bottom:46px;left:50%;padding:14px 0;width:38px;border:1px solid var(--line);border-radius:12px;background:var(--panel);opacity:0;filter:blur(3px);transform:translate(-50%,8px) scale(.95);transform-origin:bottom center;pointer-events:none;visibility:hidden;transition:opacity 180ms ease,filter 220ms ease,transform 260ms cubic-bezier(.22,1,.36,1),visibility 260ms; }
.film-audio[data-open="true"] .film-volume { opacity:1;filter:blur(0);transform:translate(-50%,0) scale(1);pointer-events:auto;visibility:visible; }
.film-audio::before { content:'';position:absolute;bottom:30px;left:-10px;width:calc(100% + 20px);height:24px; }
@media(prefers-reduced-motion:reduce) { .film-volume { transition:none; } }

.scrubber-content { display:contents; }
.scrubber-mount { position:relative; }
.scrubber-drag-hint { position:absolute;left:50%;top:calc(100% - 8px);z-index:4;white-space:nowrap;padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:12px;pointer-events:none;opacity:0;filter:blur(3px);transform:translate(-50%,5px);transition:opacity 180ms ease,filter 180ms ease,transform 220ms cubic-bezier(.22,1,.36,1); }
.scrubber-drag-hint[data-visible="true"] { opacity:1;filter:blur(0);transform:translate(-50%,0); }
@media(min-width:900px) {
  .scrubber-main { grid-template-rows:auto; }
  .scrubber-main > .scrubber-content { display:flex;flex-direction:column;align-items:center;gap:24px;grid-column:1;grid-row:1; }
  .scrubber-content > :is(h1,.scrubber-intro,.film-controls,.scrubber-mount,.date-footage,.scrubber-help) { margin:0; }
  .scrubber-content .scrubber-intro { margin-top:-12px; }
  .scrubber-content .date-footage:empty { display:none; }
  .scrubber-content .scrubber-help { margin-top:4px; }
  .scrubber-main > .film-view { grid-row:1; }
}
@media(max-width:899px) {
  .scrubber-main h1 { order:1; }
  .scrubber-intro { order:2; }
  .film-view { order:3;width:min(100%,380px);margin-bottom:20px; }
  .year-controls { order:4; }
  .scrubber-mount { order:5; }
  .date-picker-mount { order:6; }
  .date-footage { order:7; }
  .scrubber-help { order:8; }
}
@media(prefers-reduced-motion:reduce) { .scrubber-drag-hint { transition:none; } }

.film-stage { cursor:pointer; }

.scrubber-header { justify-content:space-between; }
.scrubber-story { max-width:42ch;margin:0 0 20px;color:var(--muted);font-size:15px;line-height:1.65;text-wrap:pretty; }
@media(min-width:900px) {
  .scrubber-content .scrubber-story { margin:0; }
  .scrubber-content .scrubber-intro { margin-top:0; }
}
@media(max-width:899px) {
  .scrubber-story { order:2; }
}

.scrubber-drag-hint::before {
  content:'';
  position:absolute;
  top:-5px;
  left:calc(50% - 4px);
  width:8px;
  height:8px;
  background:inherit;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  transform:rotate(45deg);
}

.film-years { flex-wrap:wrap;justify-content:center; }

.film-years button[aria-disabled="true"] { cursor:default; }
.film-years button[aria-disabled="true"]:hover { background:transparent; }

/* The future-year hint overlays the row without changing button geometry. */
.film-years button[data-year="4"]{position:relative;}
.year-five-hint{position:absolute;bottom:calc(100% + 10px);right:0;z-index:5;width:max-content;max-width:calc(100vw - 32px);padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:12px;line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;filter:blur(3px);transform:translateY(5px);transition:opacity 180ms ease-out,filter 180ms ease-out,transform 180ms ease-out,visibility 180ms;}
.year-five-hint::after{content:"";position:absolute;right:20px;bottom:-5px;width:8px;height:8px;background:inherit;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);}
.film-years button[data-year="4"]:is(:hover,:focus-visible) .year-five-hint{opacity:1;visibility:visible;filter:blur(0);transform:translateY(0);}
@media(prefers-reduced-motion:reduce){.year-five-hint{transition:none;filter:none;transform:none;}}

/* Stage the first paint until the date controls have their final dimensions. */
@media (prefers-reduced-motion: no-preference) {
  [data-spencer-entrance="pending"] .time-scrubber-page > :is(.scrubber-header,.scrubber-main) {
    visibility: hidden;
  }

  [data-spencer-entrance="ready"] .scrubber-header {
    animation: spencer-enter 320ms var(--panel-ease) both;
  }

  [data-spencer-entrance="ready"] .scrubber-content {
    animation: spencer-enter 420ms var(--panel-ease) 40ms both;
  }

  [data-spencer-entrance="ready"] .film-view {
    animation: spencer-film-enter 460ms var(--panel-ease) 100ms both;
  }

  @keyframes spencer-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes spencer-film-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}