/* ============================================================
   v3 — TV · an endless, full-screen channel of motion work.
   A Reels/broadcast hybrid: a vertical scroll-snap feed where each
   clip fills the screen over its own blurred ambient backdrop, the
   in-view clip autoplays, audio toggles on tap, and the feed loops
   forever (js/v3-tv.js keeps appending reshuffled passes).
   ============================================================ */

:root { --tv-ink: #f4f4f2; --tv-mute: rgba(244,244,242,0.62); --tv-line: rgba(244,244,242,0.24); }

body.tv-page { background: #000; color: var(--tv-ink); height: 100svh; overflow: hidden; }

/* —— Header floats over the feed, inverted to white; transparent so the feed shows through —— */
.v3head--tv { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: transparent; border: 0;
  color: var(--tv-ink); pointer-events: none; text-shadow: 0 1px 14px rgba(0,0,0,0.45); }
.v3head--tv .v3brand, .v3head--tv .v3nav a, .v3head--tv .v3head__mid { pointer-events: auto; color: var(--tv-ink); }
.v3head--tv .v3brand { font-size: 1rem; }   /* match the home masthead brand's scaled-down (scrolled) size so DAVID · STAMATIS · © spacing is identical */
.v3head--tv .v3nav a { opacity: 0.9; }
.v3head--tv .v3nav a:hover { opacity: 0.5; }
.v3head--tv .v3nav a.is-current { opacity: 1; }
.v3head--tv .v3head__mid { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--mono);
  font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.06em; max-width: 46ch; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-bug { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255,59,48,0.6); animation: tvBug 2.2s ease-out infinite; }
@keyframes tvBug { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,0.5);} 70%,100% { box-shadow: 0 0 0 7px rgba(255,59,48,0);} }

/* —— The feed —— */
.tv { height: 100svh; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.tv::-webkit-scrollbar { display: none; }

.tv__slide { position: relative; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; display: grid; place-items: center; background: #000; }
/* blurred ambient backdrop — fills any aspect ratio gracefully */
.tv__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15);
  filter: blur(40px) brightness(0.4) saturate(1.2); opacity: 0; transition: opacity 0.7s ease; will-change: opacity; }
/* sharp, contained foreground clip */
.tv__vid { position: relative; z-index: 1; max-width: 100%; max-height: 100svh; width: auto; height: auto;
  object-fit: contain; opacity: 0; transition: opacity 0.55s ease; }
.tv__slide.is-ready .tv__bg { opacity: 1; }
.tv__slide.is-ready .tv__vid { opacity: 1; }
/* portrait / square clips fill the screen edge-to-edge (true reels) */
.tv__slide.is-fill .tv__vid { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

/* legibility scrim — dark at top (for the header) and bottom (for the caption) */
.tv__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 18%),
    linear-gradient(to top, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.28) 22%, rgba(0,0,0,0) 46%); }

/* now-playing caption */
.tv__meta { position: absolute; z-index: 3; left: var(--margin); bottom: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);
  max-width: min(46ch, 78vw); display: flex; flex-direction: column; gap: 0.5rem; }
.tv__eyebrow { font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tv-mute); }
.tv__title { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 1.1rem + 3.6vw, 4.2rem);
  line-height: 1.02; letter-spacing: -0.025em; color: var(--tv-ink); text-wrap: balance; }
.tv__link { margin-top: 0.45rem; align-self: flex-start; font-family: var(--mono); font-size: var(--t-cap);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--tv-ink); border-bottom: 1px solid var(--tv-line);
  padding-bottom: 2px; transition: border-color 0.3s ease; }
.tv__link:hover { border-color: var(--tv-ink); }

/* —— fixed broadcast progress bar —— */
.tv-progress { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; z-index: 45; background: rgba(255,255,255,0.12); }
.tv-progress span { display: block; height: 100%; width: 0; background: var(--tv-ink); transition: width 0.12s linear; }

/* —— fixed sound toggle —— */
.tv-sound { position: fixed; right: var(--margin); bottom: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); z-index: 46;
  display: inline-flex; align-items: center; gap: 0.6em; padding: 0.55em 0.95em; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid var(--tv-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: calc(var(--t-cap) * 0.9); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--tv-ink); transition: background 0.25s ease, border-color 0.25s ease; }
.tv-sound:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.42); }
.tv-sound__wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.tv-sound__wave i { width: 2px; height: 3px; background: var(--tv-ink); border-radius: 1px; transition: height 0.2s ease; }
.tv-sound.is-on .tv-sound__wave i { animation: tvWave 0.9s ease-in-out infinite; }
.tv-sound.is-on .tv-sound__wave i:nth-child(2){ animation-delay: 0.15s; }
.tv-sound.is-on .tv-sound__wave i:nth-child(3){ animation-delay: 0.3s; }
.tv-sound.is-on .tv-sound__wave i:nth-child(4){ animation-delay: 0.45s; }
@keyframes tvWave { 0%,100%{ height: 3px; } 50%{ height: 12px; } }

/* —— scroll hint —— */
.tv-hint { position: fixed; left: 50%; bottom: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); transform: translateX(-50%); z-index: 44;
  font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.14em; color: var(--tv-mute);
  transition: opacity 0.5s ease; }
.tv-hint span { display: inline-block; animation: tvHint 1.8s ease-in-out infinite; }
@keyframes tvHint { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(4px); } }
.tv-hint.is-hidden { opacity: 0; pointer-events: none; }

/* cursor visible on the dark page */
body.tv-page .v3cursor__blob { background: var(--tv-ink); }

@media (max-width: 760px) {
  /* REC dot + now-playing name drops to its own line below the header row so it never overlaps the brand */
  .v3head--tv .v3head__mid { position: absolute; top: 100%; left: var(--margin); right: auto;
    justify-self: start; margin-top: 0.3rem; }
  .tv__meta { bottom: clamp(3.2rem, 2rem + 6vw, 5.4rem); }
  .tv-hint { display: none; }
}