/* screen.css: SCREEN (wow pass). The Solara's tube, its power-on/off, the 1992 pre-roll and the OSD.
   Loaded after style.css; equal-or-higher specificity, no !important outside the reduced-motion block.
   Namespace: .scr-*, --scr-*; reads the shared --tv-light / --tv-lum / --tv-on it writes from screen.js. */

/* the shared light channel (written by screen.js on :root). Typed numbers restyle far cheaper than raw tokens. */
@property --tv-lum { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --tv-on { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ------------------------------------------------------------------ layers */
.screen > .scr-card { z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit; container-type: size; }
.screen > .scr-gl { z-index: 5; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; transition: opacity .2s; }
.screen[data-mode="off"]:not(.turning-off) > .scr-gl { opacity: 0; }
.screen > .scr-dot { z-index: 8; pointer-events: none; opacity: 0; }

/* the tube glass: the overlay canvas now carries scanlines, grille and the curved vignette,
   so .crt keeps only the glass: convex specular, a soft window streak, and the inner shadow of the curve */
.screen:has(> .scr-gl) > .crt {
  background:
    radial-gradient(ellipse 58% 36% at 27% 13%, rgba(255,255,255,.11), rgba(255,255,255,.03) 45%, transparent 62%),
    linear-gradient(163deg, transparent 8%, rgba(255,255,255,.045) 9% 12.5%, transparent 13.5% 15%, rgba(255,255,255,.025) 15.5% 17%, transparent 18%),
    radial-gradient(ellipse 110% 100% at 50% 50%, transparent 70%, rgba(0,0,0,.35) 100%);
  box-shadow: inset 0 0 4.5cqw rgba(0,0,0,.6), inset 0 0 1cqw rgba(0,0,0,.85), inset 0 .5cqw .8cqw rgba(255,255,255,.04); }

/* bezel lip: the tube's own light, in the film's colors */
.tv.on .screen:has(> .scr-gl) {
  transition: box-shadow .16s linear;
  box-shadow: 0 0 0 .4cqw #050505,
    0 0 calc(1cqw + 2.4cqw * var(--tv-lum, .6)) rgb(var(--tv-light, 150 180 255) / calc(.12 + .3 * var(--tv-lum, .6))),
    0 0 7cqw rgb(var(--tv-light, 120 150 255) / calc(.05 + .14 * var(--tv-lum, .6))); }

/* ------------------------------------------------------------------ OSD: VT323, pure white, drop shadow, faint fringe, bloom */
.screen > .osd { color: #fff; letter-spacing: .03em;
  text-shadow: max(1px, .2cqw) max(1px, .2cqw) 0 rgba(0,0,12,.8), max(-1px, -.09cqw) 0 rgba(255,40,90,.5), max(1px, .09cqw) 0 rgba(60,220,255,.5),
    0 0 .7cqw rgba(255,255,255,.55), 0 0 2cqw rgba(190,210,255,.25); }

/* ------------------------------------------------------------------ the pre-roll card */
.scr-roll, .scr-roll > *, .scr-ident > * { position: absolute; inset: 0; }
.scr-roll > * { opacity: 0; }
.scr-bg { background: #0a0a12; }
.scr-card[data-ph="blue"] .scr-bg, .scr-card[data-ph="tear"] .scr-bg { opacity: 1; background: radial-gradient(ellipse at center, #2c46f2, #1424b8 80%); }
.scr-card[data-ph="tear"] .scr-bg { animation: scr-wob .16s steps(2) infinite; }
.scr-card[data-ph="strack"] .scr-bg { opacity: 1; background: radial-gradient(ellipse at center, #1a1c2a, #07070c 80%); }
.scr-card[data-ph="warn"] .scr-warn, .scr-card[data-ph="glitch"] .scr-warn { opacity: 1; }
.scr-card[data-ph="ident"] .scr-ident, .scr-card[data-ph="hold"] .scr-ident { opacity: 1; }
@keyframes scr-wob { 0% { transform: translateX(0); } 50% { transform: translateX(-.8%); } }

/* warning card: black-blue field, white serif + sans, 1px RGB fringe, slight vertical jitter */
.scr-warn { display: grid; place-items: center; background: radial-gradient(ellipse 85% 75% at 50% 46%, #0b1236, #04061a 62%, #020309); }
.scr-warn-in { width: 76cqw; padding: 5.5cqh 0 6cqh; text-align: center; color: #f3f5ff;
  border-top: max(1px, .45cqh) solid rgba(240,244,255,.88); border-bottom: max(1px, .45cqh) solid rgba(240,244,255,.88);
  text-shadow: -1px 0 rgba(255,50,80,.6), 1px 0 rgba(60,220,255,.55), 0 0 1.2cqw rgba(200,215,255,.45);
  box-shadow: 0 -1px 0 rgba(255,50,80,.35), 0 1px 0 rgba(60,220,255,.35); }
.scr-warn h3 { margin: 0 0 4.5cqh; font: 700 10.5cqw/1 Georgia, 'Times New Roman', Times, serif; letter-spacing: .16em; padding-left: .16em; }
.scr-warn p { margin: 0; font: 600 4.35cqw/1.45 Archivo, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .01em; text-wrap: balance; }
.scr-card[data-ph="warn"] .scr-warn-in { animation: scr-lock .32s steps(4) both, scr-jit 1.1s steps(1) .32s infinite; }
.scr-card[data-ph="glitch"] .scr-warn { animation: scr-tear .3s steps(6) both; }
@keyframes scr-lock { 0% { transform: translateY(-14cqh) skewX(5deg); filter: brightness(1.7); } 40% { transform: translateY(4cqh) skewX(-2deg); } 70% { transform: translateY(-1cqh); } 100% { transform: none; } }
@keyframes scr-jit { 0% { transform: translateY(0); } 23% { transform: translateY(.35cqh); } 31% { transform: translateY(0); } 62% { transform: translateY(-.25cqh); } 70% { transform: translateY(.15cqh); } 78% { transform: translateY(0); } }
@keyframes scr-tear {
  0% { transform: translateX(0); filter: none; }
  20% { transform: translateX(3%) skewX(-8deg); filter: brightness(1.5) hue-rotate(25deg); clip-path: inset(0 0 40% 0); }
  40% { transform: translateX(-5%) translateY(-6%) skewX(6deg); clip-path: inset(18% 0 0 0); }
  60% { transform: translateY(-22%) skewX(-3deg); filter: brightness(.7); clip-path: none; }
  80% { transform: translateY(-48%) translateX(2%); filter: brightness(.45); }
  100% { transform: translateY(-80%); filter: brightness(.2); } }

/* ident: STARLIGHT HOME VIDEO. Chrome letters over a deep-blue starfield and a neon horizon grid. Fictional. */
.scr-ident { overflow: hidden; background: radial-gradient(ellipse 120% 70% at 50% 64%, #1c1663 0%, #0c0f43 30%, #050826 60%, #02030f 100%); }
.scr-ident > .scr-stars { inset: 0 auto auto 0; width: .32cqw; height: .32cqw; border-radius: 50%; background: transparent; }
.scr-ident > .scr-horizon { top: 50%; height: 26cqh; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,90,210,.5), rgba(120,70,255,.18) 45%, transparent 72%); filter: blur(1cqw); }
.scr-ident > .scr-grid { top: 63%; bottom: -14%; left: -60%; right: -60%; transform-origin: 50% 0; transform: perspective(26cqh) rotateX(62deg);
  background: linear-gradient(90deg, rgba(255,110,230,.75) 0 .35cqw, transparent .35cqw) 0 0 / 6cqw 100%,
              linear-gradient(0deg, rgba(150,120,255,.8) 0 .5cqh, transparent .5cqh) 0 0 / 100% 9cqh;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%); mask-image: linear-gradient(to bottom, transparent, #000 35%); }
.scr-ident > .scr-logo { inset: auto 0 auto 0; top: 16%; height: 46%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scr-emblem { position: relative; display: block; width: 9cqw; height: 9cqw; margin-bottom: 2cqh;
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  background: linear-gradient(180deg, #f6fbff 0%, #a9c8ff 40%, #24306f 49%, #ffffff 52%, #f7d99c 64%, #8d5a1f 100%); }
.scr-ww { position: relative; }
.scr-word { display: flex; gap: .2cqw; font: 11.6cqw/1 'Archivo Black', Archivo, Impact, sans-serif; letter-spacing: 0;
  filter: drop-shadow(0 .22cqw 0 #6b3fa8) drop-shadow(0 .22cqw 0 #3b1f6e) drop-shadow(0 .25cqw 0 #120a30) drop-shadow(0 0 1.8cqw rgba(120,140,255,.6)); }
.scr-word b { display: block; font-weight: 400; color: transparent; -webkit-text-stroke: .12cqw rgba(255,255,255,.55);
  background:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,.95) 48%, rgba(255,255,255,.95) 52%, transparent 62%) 160% 0 / 300% 100% no-repeat,
    linear-gradient(180deg, #ffffff 0%, #bcd6ff 22%, #5c86d8 46%, #1a1f52 50%, #ffffff 53%, #ffe7b0 62%, #c98a3a 82%, #6a3c12 100%);
  -webkit-background-clip: text; background-clip: text; }
.scr-sub { margin-top: 2.6cqh; display: flex; align-items: center; gap: 2.4cqw; font: 600 3.6cqw/1 Archivo, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .62em; color: #dfe9ff; text-shadow: 0 0 1cqw rgba(140,170,255,.8), -1px 0 rgba(255,60,120,.45), 1px 0 rgba(60,220,255,.45); }
.scr-sub span { padding-left: .62em; }
.scr-sub::before, .scr-sub::after { content: ''; width: 10cqw; height: max(1px, .35cqh); background: linear-gradient(90deg, transparent, #cfe0ff); }
.scr-sub::after { background: linear-gradient(90deg, #cfe0ff, transparent); }
.scr-glint { position: absolute; left: 96.5%; top: 6%; width: 12cqw; height: 12cqw; margin: -6cqw 0 0 -6cqw; opacity: 0;
  background:
    radial-gradient(circle, #fff 0 4%, rgba(210,225,255,.7) 9%, transparent 26%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.95) 50%, transparent) 50% 50% / 100% 3% no-repeat,
    linear-gradient(0deg, transparent, rgba(255,255,255,.95) 50%, transparent) 50% 50% / 3% 100% no-repeat; }

/* the ident's entry (only while data-ph=ident; "hold" is the settled last frame) */
.scr-card[data-ph="ident"] .scr-ident { animation: scr-in .35s ease-out both; }
.scr-card[data-ph="ident"] .scr-grid, .scr-card[data-ph="ident"] .scr-horizon { animation: scr-rise .9s .15s cubic-bezier(.16,1,.3,1) backwards, scr-grid 1.4s linear infinite; }
.scr-card[data-ph="ident"] .scr-horizon { animation: scr-rise .9s .15s cubic-bezier(.16,1,.3,1) backwards; }
.scr-card[data-ph="hold"] .scr-grid { animation: scr-grid 1.4s linear infinite; }
.scr-card[data-ph="ident"] .scr-emblem { animation: scr-emb .7s .3s cubic-bezier(.2,.9,.3,1.15) backwards; }
.scr-card[data-ph="ident"] .scr-word b { animation: scr-letter .65s calc(.35s + var(--i) * 70ms) cubic-bezier(.16,1,.3,1) backwards, scr-sweep .7s calc(1.5s + var(--i) * 45ms) cubic-bezier(.45,.05,.55,.95) backwards; }
.scr-card[data-ph="ident"] .scr-sub { animation: scr-sub .7s 1.25s cubic-bezier(.16,1,.3,1) backwards; }
.scr-card[data-ph="ident"] .scr-glint { animation: scr-glint .7s 2s ease-out forwards, scr-twk 2.6s 2.7s ease-in-out infinite; }
.scr-card[data-ph="hold"] .scr-glint { opacity: .75; transform: scale(.55) rotate(45deg); animation: scr-twk 2.6s ease-in-out infinite; }
.scr-card[data-ph="ident"] .scr-stars, .scr-card[data-ph="hold"] .scr-stars { animation: scr-twinkle 3.1s ease-in-out infinite; }
.scr-card[data-ph="ident"] .scr-stars.scr-b, .scr-card[data-ph="hold"] .scr-stars.scr-b { animation: scr-twinkle 2.3s ease-in-out -1.1s infinite; }
@keyframes scr-in { from { filter: brightness(2.2) saturate(.4); } to { filter: none; } }
@keyframes scr-rise { from { opacity: 0; transform: perspective(26cqh) rotateX(62deg) translateY(30%); } }
@keyframes scr-grid { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 9cqh; } }
@keyframes scr-emb { from { opacity: 0; transform: scale(0) rotate(-135deg); } }
@keyframes scr-letter { from { opacity: 0; transform: translateX(calc((var(--i) - 4) * 4.5cqw)) scale(1.7); filter: blur(.8cqw) brightness(2); } }
@keyframes scr-sweep { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@keyframes scr-sub { from { opacity: 0; letter-spacing: 1.3em; } }
@keyframes scr-glint { 0% { opacity: 0; transform: scale(0) rotate(0); } 35% { opacity: 1; transform: scale(1.35) rotate(30deg); } 100% { opacity: .75; transform: scale(.55) rotate(45deg); } }
@keyframes scr-twk { 0%, 100% { opacity: .75; transform: scale(.55) rotate(45deg); } 50% { opacity: .45; transform: scale(.42) rotate(45deg); } }
@keyframes scr-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* reveal: the vertical roll slips once and locks; then the card fades under the noise */
.scr-card.scr-rolling .scr-roll { animation: scr-slip .23s cubic-bezier(.45,.05,.55,.95) both; }
.scr-card.scr-rolling { background: #000; }
.scr-card.scr-out { opacity: 0; transition: opacity .18s ease-in; }
@keyframes scr-slip { 0% { transform: none; filter: none; } 45% { transform: translateY(-26%); filter: brightness(1.3); } 75% { transform: translateY(7%); filter: brightness(.8); } 100% { transform: none; filter: brightness(.6); } }

/* search: the big centered glyph, pulsing at 2Hz (drawn as shapes: VT323 has no triangles) */
.screen[data-mode="search"] > .scr-card::before, .screen[data-mode="search"] > .scr-card::after,
.screen[data-mode="rsearch"] > .scr-card::before, .screen[data-mode="rsearch"] > .scr-card::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 30cqw; height: 24cqh; margin: -12cqh 0 0 -15cqw;
  clip-path: polygon(0 0, 50% 50%, 50% 0, 100% 50%, 50% 100%, 50% 50%, 0 100%); animation: scr-pulse .5s steps(1) infinite; }
.screen[data-mode="search"] > .scr-card::after, .screen[data-mode="rsearch"] > .scr-card::after { background: #fff; }
.screen[data-mode="search"] > .scr-card::before, .screen[data-mode="rsearch"] > .scr-card::before { background: rgba(0,0,14,.7); transform: translate(1cqw, 1.2cqh); }
.screen[data-mode="rsearch"] > .scr-card::before, .screen[data-mode="rsearch"] > .scr-card::after { clip-path: polygon(100% 0, 50% 50%, 50% 0, 0 50%, 50% 100%, 50% 50%, 100% 100%); }
@keyframes scr-pulse { 0% { opacity: .95; } 50% { opacity: .3; } }

/* the PLAY OSD gives way to the cards (it would sit on WARNING); it returns with the picture */
.screen:has(> .scr-card:is([data-ph="warn"], [data-ph="glitch"], [data-ph="ident"], [data-ph="hold"])) > .osd > :is(.osd-tl, .osd-tr) { opacity: 0; transition: opacity .25s; }

/* the glitch class: style.css's turning-on rule outranks its glitch rule. Append glitch to the list
   (same first name, so the finished power-on animation is kept, never replayed when glitch goes away) */
.screen.turning-on.glitch > .yt-wrap { animation: scr-open 1.1s linear both, glitch .32s steps(4) 1; }

/* ------------------------------------------------------------------ power on (1100ms) */
/* the animated layers carry the tube's radius themselves, so a transformed layer never shows square corners */
.screen.turning-on > :is(.yt-wrap, .blue, #static, .scr-card, .scr-gl),
.screen.turning-off > :is(.yt-wrap, .blue, #static, .spic, .scr-card, .scr-gl) { border-radius: inherit; }
/* 0-90 dot to an over-bright 1px line, 90-260 it widens, 260-520 the picture opens with brightness 1.6 -> 1,
   520-1100 degauss: a decaying sine shear plus rainbow mottling (crtOn sound already carries the hum). */
.screen.turning-on > .powerfx { animation: scr-on-fx 1.1s linear both; }
.screen.turning-on > .yt-wrap, .screen.turning-on > .blue, .screen.turning-on > #static, .screen.turning-on > .osd,
.screen.turning-on > .scr-card, .screen.turning-on > .scr-gl { animation: scr-open 1.1s linear both; }
.screen.turning-on .crt::after { animation: scr-mottle .6s .52s ease-out forwards; }
.screen.turning-on > .scr-dot { animation: scr-on-dot .55s linear both; }
.screen.turning-on > .scr-dot::before { animation: scr-on-line .55s linear both; }
@keyframes scr-on-fx {
  0% { opacity: 1; transform: scale(.012, .006); }
  8.2% { opacity: 1; transform: scale(.06, .004); }
  23.6% { opacity: 1; transform: scale(1, .004); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  47.3% { opacity: .6; transform: scale(1, 1); }
  62% { opacity: .12; transform: scale(1, 1); }
  100% { opacity: 0; transform: scale(1, 1); } }
@keyframes scr-open {
  0%, 23.6% { clip-path: inset(49.7% 0 49.7% 0); filter: brightness(2.4); transform: none; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  47.3% { clip-path: inset(0 0 0 0); filter: brightness(1.6) saturate(1.3); transform: translateX(1.5%) skewX(-1.2deg); }
  53% { filter: brightness(1.25) hue-rotate(28deg) saturate(1.5); transform: translateX(-1.3%) skewX(1deg); }
  60% { filter: brightness(1.08) hue-rotate(-20deg) saturate(1.3); transform: translateX(1%) skewX(-.8deg); }
  68% { filter: hue-rotate(12deg) saturate(1.15); transform: translateX(-.65%) skewX(.5deg); }
  77% { filter: hue-rotate(-6deg); transform: translateX(.35%) skewX(-.25deg); }
  88% { filter: hue-rotate(2deg); transform: translateX(-.12%); }
  100% { clip-path: inset(0 0 0 0); filter: none; transform: none; } }
@keyframes scr-mottle { 0% { opacity: .85; transform: rotate(0) scale(1); } 45% { opacity: .45; transform: rotate(22deg) scale(1.1); } 100% { opacity: 0; transform: rotate(44deg) scale(1.2); } }
.scr-dot::before { content: ''; position: absolute; left: -6%; right: -6%; top: 50%; height: 14%; margin-top: -7%; opacity: 0; border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(235,244,255,.95), rgba(170,200,255,.4) 30%, transparent 70%); }
.scr-dot { background: radial-gradient(circle 6cqw at 50% 50%, #fff, rgba(225,238,255,.85) 18%, rgba(160,195,255,.3) 45%, transparent 75%); }
@keyframes scr-on-dot { 0% { opacity: 1; transform: scale(.6); } 16% { opacity: 1; transform: scale(1); } 40% { opacity: 0; transform: scale(1.4, .3); } 100% { opacity: 0; } }
@keyframes scr-on-line { 0%, 12% { opacity: 0; transform: scaleX(.05); } 18% { opacity: 1; transform: scaleX(.2); } 47% { opacity: 1; transform: scaleX(1); } 70% { opacity: .6; transform: scale(1.1, 4); } 100% { opacity: 0; transform: scale(1.1, 6); } }

/* ------------------------------------------------------------------ power off (collapse by 300ms; dot glows to 1600ms) */
.screen.turning-off > .yt-wrap, .screen.turning-off > .blue, .screen.turning-off > #static, .screen.turning-off > .osd, .screen.turning-off > .spic,
.screen.turning-off > .scr-card, .screen.turning-off > .scr-gl { animation: scr-collapse .3s linear both; }
.screen.turning-off > .powerfx { animation: scr-off-fx .3s linear both; }
.screen.turning-off .offglass::after { animation: none; }
.screen.turning-off > .scr-dot { animation: scr-afterglow 1.6s linear both; }
@keyframes scr-collapse {
  0% { transform: none; filter: none; animation-timing-function: cubic-bezier(.5,0,.75,0); }
  46.7% { transform: scale(1, .006); filter: brightness(3); animation-timing-function: cubic-bezier(.25,1,.5,1); }
  100% { transform: scale(.012, .006); filter: brightness(4); } }
@keyframes scr-off-fx {
  0% { opacity: 0; transform: scale(1, 1); animation-timing-function: cubic-bezier(.5,0,.75,0); }
  25% { opacity: .55; transform: scale(1, .4); }
  46.7% { opacity: 1; transform: scale(1, .006); animation-timing-function: cubic-bezier(.25,1,.5,1); }
  99% { opacity: 1; transform: scale(.012, .006); }
  100% { opacity: 0; transform: scale(.012, .006); } }
@keyframes scr-afterglow {
  0%, 15% { opacity: 0; transform: scale(.25); }
  19% { opacity: 1; transform: scale(.55); }
  26% { opacity: .95; transform: scale(.42); }
  60% { opacity: .35; transform: scale(.3); }
  100% { opacity: 0; transform: scale(.22); } }

/* ------------------------------------------------------------------ reduced motion: fades, no rolls, no jitter */
@media (prefers-reduced-motion: reduce) {
  .screen.turning-on > .powerfx { animation: scr-fade-on .4s ease-out both !important; }
  .screen.turning-on > .yt-wrap, .screen.turning-on > .blue, .screen.turning-on > #static, .screen.turning-on > .osd,
  .screen.turning-on > .scr-card, .screen.turning-on > .scr-gl, .screen.turning-on .crt::after,
  .screen.turning-on > .scr-dot, .screen.turning-on > .scr-dot::before { animation: none !important; }
  .screen.turning-off > .yt-wrap, .screen.turning-off > .blue, .screen.turning-off > #static, .screen.turning-off > .osd, .screen.turning-off > .spic,
  .screen.turning-off > .scr-card, .screen.turning-off > .scr-gl { animation: scr-fade-out .3s ease-in both !important; }
  .screen.turning-off > .powerfx, .screen.turning-off > .scr-dot { animation: none !important; }
  .scr-card *, .scr-card::after { animation: none !important; }
  .scr-roll > * { transition: opacity .25s; }
  .scr-card[data-ph="ident"] .scr-glint, .scr-card[data-ph="hold"] .scr-glint { opacity: .75; transform: scale(.55) rotate(45deg); }
  .scr-card.scr-rolling .scr-roll { animation: none !important; }
  @keyframes scr-fade-on { from { opacity: .5; } to { opacity: 0; } }
  @keyframes scr-fade-out { to { opacity: 0; } }
}

/* STOP from the theater: the picture drops to black, and the VCR's blue comes up under it as the camera pulls back */
.screen.stopfade:not(.turning-on) > .blue { animation: scr-stopfade .95s cubic-bezier(.35, .1, .3, 1) both; }
@keyframes scr-stopfade { 0% { opacity: 0; filter: brightness(.3); } 30% { opacity: .35; filter: brightness(.55); } 100% { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { .screen.stopfade > .blue { animation-duration: .3s; } }