/* --- Color palette & typography --- */
:root {
  /* Colors */
  --bg: #000000;
  --fg: #ffffff;
  --accent: #888888;
  --muted: #aaaaaa;

  --credit-step-mode: 0; /* 0 smooth, 1 terminal line-by-line */

  /* Global typography */
  --font-family: Arial, Helvetica, sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --ui-letter-spacing: 0.02em;

  /* Single source of truth for size & spacing (used by ALL screens & canvas) */
  --ui-font-size: calc(1.5vw + 1.5vh);
  --ui-line-height: 1.12;

  /* Panels */
  --panel-fade-ms: 600;

  /* Statement (panel 1) */
  --statement-max-width: 1000px;
  --statement-width: 88vw;

  /* Jump screen (panel 2) */
  --jump-max-width: 1100px;
  --jump-width: 92vw;

  /* Scroller layout */
  --scroller-padding-v: 6vh;
  --scroller-padding-h: 2vw;
  --scroller-gap: 2vh;
  --scroller-header-size-min: 12px;
  --scroller-header-size-vh: 1.8vh;
  --scroller-header-size-max: 18px;

  /* Film-credit column */
  --credit-column-width-ch: 68ch;
  --credit-font-size-px: 28;
  --credit-line-height: 1.12;

  /* Fade masks (top/bottom) */
  --fade-height: 12vh;
  --fade-strength: 21vh;

  /* Canvas scroller behavior */
  --credit-speed-px-per-sec: 220;
  --credit-speed-min: 220;
  --credit-speed-max: 500;
  --credit-ramp-in-sec: 0;
  --credit-ramp-out-sec: 0;
  --credit-prefetch-lines: 200;
  --credit-bottom-buffer-lines: 10;
  --credit-show-numbers: 0;

/* x-position of the vertical guide */

  --credit-left-vw: 0vw;         /* FIX: was 'Ovw' */
  --credit-right-vw: 0vw;        /* right-side offset from the edge */
  --credit-guide-width: 0.3vw;
  --credit-guide-color: rgba(255,255,255,1);

}



/* The scrolling container */
.scrollerWrap{
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: var(--scroller-padding-v) var(--scroller-padding-h);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--scroller-gap);

  /* two vertical lines: left + right */
  background-image:
    linear-gradient(to right, var(--credit-guide-color), var(--credit-guide-color)),
    linear-gradient(to right, var(--credit-guide-color), var(--credit-guide-color));
  background-repeat: no-repeat, no-repeat;
  background-size:
    var(--credit-guide-width) 100%,
    var(--credit-guide-width) 100%;
background-position:
  var(--credit-left-vw) 0,
  calc(100% - var(--credit-left-vw)) 0;
}

/* Fade masks sit above the lines so they fade under them */
.scrollerWrap::before,
.scrollerWrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--fade-height);
  pointer-events: none;
  z-index: 2;
}
.scrollerWrap::before { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); }
.scrollerWrap::after  { bottom: 0; background: linear-gradient(to top,    rgba(0,0,0,1), rgba(0,0,0,0)); }



#panel-scroll { background: transparent; }



/* --- Global base --- */
html, body {
  font-size: var(--ui-font-size) !important;
  line-height: var(--ui-line-height) !important;
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  letter-spacing: var(--ui-letter-spacing);
}

/* --- Panels (shared) --- */
.panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  color: var(--fg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--panel-fade-ms) ease-in-out;
  z-index: 10;
}
.panel.active { opacity: 1; pointer-events: auto; }

/* --- Statement (panel 1) — pure stack, no extra gaps --- */
.statement {
  width: var(--statement-width);
  max-width: var(--statement-max-width);
  text-align: center;
  font-size: var(--ui-font-size);
  line-height: var(--ui-line-height);
  letter-spacing: var(--ui-letter-spacing);
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  margin: 0;
  padding: 0;
}

/* --- Jump screen (panel 2) — identical metrics, no grid/gap --- */
.jump {
  display: block; /* remove grid & gap; rely solely on line-height */
  width: var(--jump-width);
  max-width: var(--jump-max-width);
  text-align: center;
  margin: 0;
  padding: 0;
}

/* Each jump line adopts the exact same metrics as statement */
.jump__headline,
.jump__lineNum,
.jump__from {
  display: block;
  margin: 0;
  padding: 0;
  font-size: var(--ui-font-size);
  line-height: var(--ui-line-height);
  letter-spacing: var(--ui-letter-spacing);
  font-weight: var(--font-weight-regular);
}

/* Optional emphasis (keeps line-height identical) */
.jump__headline,
.jump__lineNum { font-weight: var(--font-weight-bold); }

/* The URL line stays single-line, with ellipsis if needed */
.jump__from {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Scroller (panel 3) --- */
.scrollerWrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: var(--scroller-padding-v) var(--scroller-padding-h);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--scroller-gap);
}
.scrollerWrap::before,
.scrollerWrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--fade-height);
  pointer-events: none;
  z-index: 2;
}
.scrollerWrap::before { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); }
.scrollerWrap::after  { bottom: 0; background: linear-gradient(to top,    rgba(0,0,0,1), rgba(0,0,0,0)); }

.scrollerHeader {
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(var(--scroller-header-size-min), var(--scroller-header-size-vh), var(--scroller-header-size-max));
}

.creditsList {
  position: relative;
  height: 100%;
  width: min(var(--credit-column-width-ch), 92vw);
  margin: 0 auto;
  transform: translate3d(0,0,0);
  will-change: transform;
  contain: strict;
}

/* Utility / status */
.status {
  position: absolute;
  left: 1vw;
  bottom: 1.2vh;
  font-size: clamp(10px, 1.4vh, 14px);
  color: #6a6a6a;
  opacity: 0.8;
  letter-spacing: 0.02em;
}

#scrollerHeader {
  position: absolute;
  bottom: 1vh;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3vw;
  font-size: 2vw;
  line-height: var(--ui-line-height);
  background: transparent;
  pointer-events: none;
  white-space: nowrap;
}
#scrollerHeader .block {
  flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis;
}
#scrollerHeader .block:first-child { text-align: left; }
#scrollerHeader .block:last-child  { text-align: right; }

/* Keep black background for statement and jump; scroll is transparent */
#panel-statement, #panel-jump { background: #000; }
#panel-scroll { background: transparent; }

/* Info bars */
/* Info bars (anchored, always on top) */
.infoBar {
  position: fixed;          /* anchored to viewport */
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2vw;
  font-size: var(--ui-font-size);
  letter-spacing: 0.05em;
  color: var(--fg);
  background: ;         /* solid black strip */
  z-index: 3;               /* above the guide line & fades */
  pointer-events: none;     /* bars are informational; let mouse pass through */
}

.topBar {
  top: 0;
  height: 5vh;
  border: 0.3vw solid #ffffffbb;
  color: #ffffffdd;
    z-index: 3;      
}

.infoBar .left {
  flex: 0 0 auto;            /* BLACKLISTS is fixed, no shrink */
  margin-right: 2vw;
}

.infoBar .right {
  flex: 1 1 auto;            /* URL takes remaining space */
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottomBar {
  bottom: 0;
  height: 5vh;
  border: 0.3vw solid #ffffffbb;
  color: #ffffffdd;
    z-index: 3;      
}



/* Force same metrics everywhere (safety net) */
.statement,
.jump,
.jump__headline,
.jump__lineNum,
.jump__from,
.infoBar,
.infoBar .block,
.status,
.divider,
.row,
.row .n {
  font-size: var(--ui-font-size) !important;
  line-height: var(--ui-line-height) !important;
  letter-spacing: var(--ui-letter-spacing) !important;
}

/* Optional minor tweaks */
.row .n { color: var(--accent); margin-right: 1ch; }
.divider { color: var(--muted); }

/* Base colors for the two 5s panels: white bg, black text */
#panel-statement,
#panel-jump {
  background: #ffffff;
  color: #000000;
}

#panel-statement, #panel-jump { background:#fff; color:#000; }

/* sweeping invert overlay */
.panel.invert-wipe::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  mix-blend-mode:difference;
  transform-origin:bottom center;
  transform:scaleY(0);
  animation:invertWipe 6s linear forwards;
  pointer-events:none;
  z-index:11;
}

/* Global sweep overlay used only at scroll start */
.invert-overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  mix-blend-mode: difference;      /* invert what’s underneath */
  transform-origin: bottom center; /* grow from bottom up */
  transform: scaleY(0);
  animation: invertWipe 6s linear forwards; /* exact 5s sweep */
  pointer-events: none;
  z-index: 9;                      /* above the canvas (z:1), below any modal panels (z:10) */
}

@keyframes invertWipe { to { transform: scaleY(1); } }


/* Bars always on top */
.infoBar.topBar,
.infoBar.bottomBar {
  position: fixed;
  left: 0; right: 0;
  height: 5vh;
  background: #000;
  color: #fff;
  z-index: 5;           /* above cover & canvas */
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
}
.infoBar.topBar { top: 0; }
.infoBar.bottomBar { bottom: 0; }

/* Fade masks should remain above canvas but below bars */
.scrollerWrap::before,
.scrollerWrap::after { z-index: 2; }

/* Canvas container (implicit) sits below: z ~ 1 */

/* White cover that reveals from bottom → top over EXACTLY 6s */
.reveal-cover {
  position: fixed;
  inset: 0;
  background: #fff;        /* starts fully white, hides list */
  transform: translateY(0);/* fully covering */
  animation: revealUp 6s linear forwards;  /* 6s */
  pointer-events: none;
  z-index: 3;              /* above canvas/fades, below bars */
}

@keyframes revealUp {
  to { transform: translateY(-100%); } /* slides up, revealing from bottom */
}

/* Scroll panel must NOT be white; let the black show through */
#panel-scroll { background: transparent; }


/* Accessibility & safety */
.error { color: #ff6666; }