/* A posts section as a disc screen (templates/screen.html; the look was
   built in design/mockups/picks). The disc screen: one 4:3 picture scaled to fit, every position in % of
   it and every size in cqw (1cqw = 1% of its width; 6.4px at 640). */
@font-face { font-family: "Anton"; src: url("fonts/Anton-Regular.ttf"); }
@font-face { font-family: "VT323"; src: url("fonts/VT323-Regular.ttf"); }
@font-face { font-family: "Stencil"; src: url("fonts/SairaStencilOne-Regular.ttf"); }
@font-face { font-family: "BlackOps"; src: url("fonts/BlackOpsOne-Regular.ttf"); }
@font-face { font-family: "Oswald"; src: url("fonts/Oswald.ttf"); font-weight: 200 700; }
@font-face { font-family: "Jost"; src: url("fonts/Jost.ttf"); font-weight: 100 900; }
@font-face { font-family: "Jost"; src: url("fonts/Jost-Italic.ttf"); font-weight: 100 900; font-style: italic; }
@font-face { font-family: "Cutive"; src: url("fonts/Cutive.ttf"); }
@font-face { font-family: "Rounded"; src: url("fonts/MRounded-ExtraBold.ttf"); }
@font-face { font-family: "ArchivoBlack"; src: url("fonts/ArchivoBlack.ttf"); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; }
body { display: grid; place-items: center; overflow: hidden; color: #fff; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
body.empty [data-when="filled"], body:not(.empty) [data-when="empty"] { display: none !important; }

.tv { position: relative; width: min(100vw, calc(100vh * 4 / 3)); aspect-ratio: 4 / 3; overflow: hidden; container-type: inline-size; background: #000; }
.tv > .still { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* The set: faint scanlines and the tube's vignette over everything. */
.tv::after { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(0,0,0,.45) 100%); }
.lay { position: absolute; z-index: 5; }

/* Motion (motion.js): the fly-in plays over the still, then the idle loop;
   the words come up once the camera has landed (body.lit). */
.vid { object-fit: cover; opacity: 0; }
body.flying .vid.fly, body.lit .vid.idle { opacity: 1; }
.tv > :not(.still) { transition: opacity .45s steps(5); }
body.flying .tv > :not(.still) { opacity: 0 !important; }
/* The pattern of a surface drawn in strips (screen.js) is never shown. */
.tv > .pattern { visibility: hidden !important; }

.quad { position: absolute; left: 0; top: 0; z-index: 4; transform-origin: 0 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* The movie (docs/PLAN-str.md): X on an entry with a video cuts to it full
   screen, black round a 4:3 picture, no prompts, as the discs did. */
.movie { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #000; cursor: none; }
.movie canvas { width: min(100vw, 133.333vh); height: auto; aspect-ratio: 4 / 3; background: #000; }
body.playing .promptrow { visibility: hidden; }