/* vhs.css — Scanlines, tracking line, phosphor palette, VHS-specific animations */

/* ── Scanline overlay (AC-07.1) ────────────────────────────────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.12) 3px,
    rgba(0, 0, 0, 0.12) 4px
  );
}

/* ── VHS status bar (top-left: PLAY indicator + fake tape counter) ───────
   AC-07.3 — updated by renderer.js on each render call                    */
#vhs-status {
  position: fixed;
  top: 1rem;
  left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-red);
  z-index: 500;
  letter-spacing: 0.08em;
  display: none; /* shown by renderer when phase === 'playing' */
  gap: 1rem;
  align-items: center;
}

#vhs-status.visible { display: flex; }

#vhs-play-indicator {
  animation: blink-play 1s step-start infinite;
}

@keyframes blink-play {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

#vhs-tape-counter {
  font-variant-numeric: tabular-nums;
}

/* ── Elapsed timer (AC-05.1, AC-05.4) ─────────────────────────────────── */
#vhs-elapsed {
  position: fixed;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-red);
  letter-spacing: 0.12em;
  z-index: 500;
  font-variant-numeric: tabular-nums;
}

/* ── Tracking line (AC-07.2) ───────────────────────────────────────────── */
@keyframes tracking-line {
  from { transform: translateY(100vh); }
  to   { transform: translateY(-4px); }
}

.vhs-tracking::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 999;
  animation: tracking-line 0.8s linear forwards;
}

/* ── Blinking "PRESS PLAY" on title screen ─────────────────────────────── */
.blink {
  animation: blink-text 1.2s step-start infinite;
}

@keyframes blink-text {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Static-noise canvas overlay ──────────────────────────────────────── */
#static-canvas {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* ── Interruption overlay (AC-04.2, AC-10.1, AC-10.2) ────────────────── */

/* Full-screen dark overlay with flashing border (~0.5 s period, AC-04.2) */
#screen-interruption {
  border: 4px solid transparent;
  /* Background already set inline; ensure text is readable at full coverage */
  background: rgba(0, 0, 0, 0.92);
}

#screen-interruption.active {
  animation: interruption-flash 0.5s step-start infinite;
}

@keyframes interruption-flash {
  0%, 100% { border-color: var(--color-red);   }
  50%       { border-color: var(--color-white); }
}

/* Interruption instruction text — large, centred, high-contrast (AC-10.1) */
#interrupt-text {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--color-white);       /* #f0f0f0 against rgba(0,0,0,0.92) ≥ 12:1 */
  text-align: center;
  max-width: 60ch;
  font-weight: bold;
  letter-spacing: 0.04em;
}

/* DISMISS button — prominent, keyboard-focusable (AC-10.2) */
#btn-dismiss {
  color: var(--color-red);
  border-color: var(--color-red);
  font-size: 1.1rem;
  padding: 0.6rem 1.8rem;
  letter-spacing: 0.15em;
  /* Ensure it is always on top of any overlay */
  position: relative;
  z-index: 10;
}

#btn-dismiss:focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: 3px;
}

/* ── Round transition "LOADING TAPE" text (AC-01.2) ────────────────────── */
#tape-loader {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  color: var(--color-phosphor);
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  z-index: 800;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}

#tape-loader.visible { display: flex; }

/* ── REW animation (AC-02.5) ───────────────────────────────────────────── */
@keyframes rew-marquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

#rew-banner {
  display: none;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  color: var(--color-amber);
  position: fixed;
  top: 2rem;
  left: 0;
  right: 0;
  z-index: 810;
  text-align: left;
}

#rew-banner.visible { display: block; }
#rew-banner span { display: inline-block; animation: rew-marquee 1.5s linear; }


/* ═══════════════════════════════════════════════════════════════════════
   T-17 — Host character SVG animations (AC-03.2)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Idle sway: gentle left-right rock on the whole SVG ─────────────── */
@keyframes host-idle-sway {
  0%   { transform: rotate(-2deg) translateY(0); }
  25%  { transform: rotate(0deg)  translateY(-2px); }
  50%  { transform: rotate(2deg)  translateY(0); }
  75%  { transform: rotate(0deg)  translateY(-2px); }
  100% { transform: rotate(-2deg) translateY(0); }
}

#host-character {
  transform-origin: center bottom;
  animation: host-idle-sway 3s ease-in-out infinite;
}

/* ── Blink keyframe: collapses closed-eye rects over open eyes ────────
   Uses opacity: closed eyes start invisible, pop visible for 120 ms
   every ~4 s.  Open eyes invert.                                       */
@keyframes host-blink {
  0%,  94%  { opacity: 1; }   /* eyes open          */
  95%, 97%  { opacity: 0; }   /* mid-blink hidden   */
  98%, 100% { opacity: 1; }   /* back open          */
}

@keyframes host-blink-closed {
  0%,  94%  { opacity: 0; }   /* lids hidden normally */
  95%, 97%  { opacity: 1; }   /* lids visible during blink */
  98%, 100% { opacity: 0; }
}

.host-eye-open {
  animation: host-blink 4s step-end infinite;
}

.host-eye-closed {
  animation: host-blink-closed 4s step-end infinite;
}

/* ── Talking class: applied to #host-character while typewriter runs ── */
/* Hide idle closed mouth, show open talking mouth */
#host-character .host-mouth-idle,
#host-character:not(.talking) #host-mouth-idle  { display: block; }
#host-character:not(.talking) #host-mouth-talking { display: none; }

#host-character.talking #host-mouth-idle    { display: none; }
#host-character.talking #host-mouth-talking { display: block; }

/* Talking also speeds up the sway slightly */
@keyframes host-talking-sway {
  0%   { transform: rotate(-3deg) translateY(0); }
  25%  { transform: rotate(0deg)  translateY(-3px); }
  50%  { transform: rotate(3deg)  translateY(0); }
  75%  { transform: rotate(0deg)  translateY(-3px); }
  100% { transform: rotate(-3deg) translateY(0); }
}

#host-character.talking {
  animation: host-talking-sway 0.8s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════
   T-18 — Typewriter cursor blink (clue text reveal)
   ═══════════════════════════════════════════════════════════════════════ */

/* Blinking block cursor appended while typewriter is running */
@keyframes typewriter-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.typewriter-cursor::after {
  content: "█";
  color: var(--color-phosphor);
  animation: typewriter-cursor 0.6s step-end infinite;
  font-size: 0.9em;
  margin-left: 1px;
}

/* ── Hide Continue button while typewriter is running ─────────────────
   Renderer adds .revealing to #screen-round during reveal              */
#screen-round.revealing #btn-continue {
  visibility: hidden;
}

#screen-round.revealing #btn-end-round {
  pointer-events: none;
  opacity: 0.35;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════
   T-19 — LOADING TAPE pulse animation enhancement
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes tape-loader-pulse {
  0%, 100% { opacity: 1;   letter-spacing: 0.2em; }
  50%       { opacity: 0.5; letter-spacing: 0.35em; }
}

#tape-loader.visible span:first-child {
  animation: tape-loader-pulse 0.9s ease-in-out infinite;
}

/* ── REW banner marquee enhancement — add amber glow ─────────────────── */
#rew-banner {
  text-shadow: 0 0 8px var(--color-amber), 0 0 20px rgba(255,176,0,0.4);
}

/* ═══════════════════════════════════════════════════════════════════════
   prefers-reduced-motion — disable / simplify every animation above
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* T-17: host character — remove all motion */
  #host-character,
  #host-character.talking {
    animation: none;
    transform: none;
  }

  /* T-17: blink — freeze eyes open */
  .host-eye-open  { animation: none; opacity: 1; }
  .host-eye-closed { animation: none; opacity: 0; }

  /* T-18: typewriter cursor — freeze visible */
  .typewriter-cursor::after {
    animation: none;
    opacity: 1;
  }

  /* T-19: tape loader pulse — disable */
  #tape-loader.visible span:first-child {
    animation: none;
  }

  /* T-19: REW marquee — disable marquee scroll (text stays centred) */
  #rew-banner span {
    animation: none;
    display: block;
    text-align: center;
  }

  /* Existing: blink-play indicator */
  #vhs-play-indicator { animation: none; opacity: 1; }

  /* Existing: PRESS PLAY blink */
  .blink { animation: none; opacity: 1; }

  /* Existing: interruption flash border */
  #screen-interruption.active { animation: none; border-color: var(--color-red); }

  /* Existing: tracking line */
  .vhs-tracking::before { animation: none; }
}