/*
 * The pre-launch waitlist page. Standalone on purpose: in waitlist mode the
 * rest of the site's files are not served. Colors come from the S3 mockup's
 * grungy tokens (frontend/mockup/tokens.css); decisions are in DESIGN.md.
 */

@font-face {
    font-family: "Courier Prime";
    src: url("/waitlist/fonts/courier-prime-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Courier Prime";
    src: url("/waitlist/fonts/courier-prime-latin-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --bg: #16140f;
    --surface: #201d17;
    --surface-2: #322d24;
    --line-strong: #5c5240;
    --text: #b8ab95;
    --text-strong: #f3ead8;
    --muted: #998c76;
    --action: #e8c547;
    --action-hover: #f2d565;
    --focus: #40bcf4;
    --error: #ff8f7a;
    --channel-number: #00c030;
    --star: #e8c547;
    --font-body: "Helvetica Neue", -apple-system, system-ui, sans-serif;
    --font-display: "American Typewriter", "Courier Prime", "Courier New", monospace;
    --radius: 1px;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* display: flex on .signup-row would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }
html, body, h1, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font: 400 1rem/1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Layout: copy on the left, the set on the right ---------- */
.door {
    flex: 1;
    width: min(1120px, 100% - 48px);
    margin: 0 auto;
    padding: 32px 0 48px;
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0, 1fr);
    /* Spare height goes below the content, never between its rows. */
    align-content: start;
}

/* ---------- Copy ---------- */
.brand { color: var(--text-strong); }
/* The viewBox has empty space on its left, so pull the loop back to the text edge. */
.brand-word { display: block; width: 150px; height: 56px; margin-left: -6px; }

h1 {
    color: var(--text-strong);
    /* Sized so the widest face in the stack (Courier Prime, 13.2em) stays on two lines. */
    font: 700 min(6.2vw, 2.75rem)/1.1 var(--font-display);
}
h1 span { display: block; white-space: nowrap; }
.pitch { margin-top: 12px; max-width: 58ch; font-size: 1.125rem; }

.signup { margin-top: 32px; max-width: 520px; }
.signup > label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-strong);
    font-size: 0.875rem;
    font-weight: 600;
}
.signup-row { display: flex; gap: 8px; }
.signup input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 12px;
    border: 1px solid var(--muted);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-strong);
    font: inherit;
}
.signup input[type="email"]::placeholder { color: var(--muted); opacity: 1; }
.signup button {
    height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--radius);
    background: var(--action);
    color: var(--bg);
    font: 700 1rem/1 var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, transform 120ms var(--ease-out);
}
.signup button:active { transform: translateY(1px); }
.signup button:disabled { opacity: 0.6; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
    .signup button:hover:not(:disabled) { background: var(--action-hover); }
}

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.status { min-height: 1.55em; margin-top: 8px; font-size: 0.9375rem; }
.status.is-error { color: var(--error); }
/* The signup row hides on success, so the note takes its place: taped to the page. */
.status.is-done {
    position: relative;
    margin-top: 16px;
    padding: 16px;
    background: var(--surface-2);
    color: var(--text-strong);
    font: 400 1rem/1.4 var(--font-display);
    transform: rotate(-1deg);
}
.status.is-done::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 64px;
    height: 16px;
    margin-left: -32px;
    background: linear-gradient(rgba(240, 225, 170, 0.55), rgba(225, 205, 140, 0.45));
    transform: rotate(-3deg);
}
.fine { font-size: 0.875rem; color: var(--muted); }

.coming { display: grid; align-content: start; gap: 12px; max-width: 58ch; }

/* ---------- The set ---------- */
.tv { width: 100%; max-width: 480px; }
/* --sketch-flip is how long each of the two drawings stays up. Larger is slower. */
.tv-set { --sketch-flip: 400ms; position: relative; aspect-ratio: 320 / 290; }

/* Hand-drawn outlines, generated in waitlist.js. Two takes of one drawing, swapped in turn. */
.sketch {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--text-strong);
    pointer-events: none;
}
.take-1, .take-2 { animation: sketch-flip calc(var(--sketch-flip) * 2) linear infinite; }
.take-2 { animation-delay: calc(var(--sketch-flip) * -1); }
@keyframes sketch-flip {
    0%, 49.99% { visibility: visible; }
    50%, 100% { visibility: hidden; }
}
.tv-set.is-paused .take-1, .tv-set.is-paused .take-2 { animation-play-state: paused; }

/* Placed inside the drawn screen, as fractions of the 320 x 290 viewBox. */
.screen {
    position: absolute;
    left: 7.19%;
    top: 21.72%;
    width: 66.25%;
    height: 63.45%;
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;
    border-radius: 10.85% / 12.5%;
    background: var(--bg);
}
.picture, .channel, .channel > img, .channel > svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.picture { will-change: transform, filter; }
.channel > img { object-fit: cover; filter: saturate(0.85) contrast(1.05); }
.channel-number {
    position: absolute;
    top: 5cqw;
    right: 8cqw;
    padding: 0.5cqw 2cqw;
    background: var(--bg);
    color: var(--channel-number);
    font: 700 7cqw/1.2 var(--font-display);
}
.channel-bar {
    position: absolute;
    inset: auto 0 0;
    padding: 2.6cqw 8cqw 4.6cqw;
    background: var(--bg);
    color: var(--text-strong);
}
.channel-kicker { display: block; color: var(--text); font: 400 5.2cqw/1.25 var(--font-body); white-space: nowrap; }
.channel-line { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; }
/* Long titles wrap rather than truncate: the name of the episode is the point. */
.channel-title { min-width: 0; font: 700 6.4cqw/1.25 var(--font-display); }
.channel-stars { flex: none; color: var(--star); font: 400 5.4cqw/1 var(--font-body); }

/* What a channel change passes through. All hidden until waitlist.js animates them. */
.snow, .band, .hum, .scanlines { position: absolute; pointer-events: none; }
.snow { inset: -64px; opacity: 0; image-rendering: pixelated; background-size: 256px 256px; will-change: transform, opacity; }
.band { inset: 44% 0 auto; height: 12%; opacity: 0; background: linear-gradient(transparent, #fff7e6 35%, #fff7e6 65%, transparent); }
.hum { inset: 0 0 auto; height: 30%; opacity: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.42), transparent); }
.scanlines {
    inset: 0;
    background: repeating-linear-gradient(transparent 0 3px, rgba(0, 0, 0, 0.28) 3px 4px);
    box-shadow: inset 0 0 12cqw rgba(0, 0, 0, 0.45);
}

/* The channel knob. Centre (276, 94), radius 22 in the viewBox. */
.knob {
    position: absolute;
    left: 79.375%;
    top: 24.83%;
    width: 13.75%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-strong);
    cursor: pointer;
}
.knob svg { display: block; width: 100%; height: 100%; fill: currentColor; overflow: visible; }
#tv-pointer { transform-box: view-box; transform-origin: 22px 22px; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .knob:hover { color: var(--action); }
}

.tv-note {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    font-size: 0.875rem;
    color: var(--muted);
}
.tv-pause {
    flex: none;
    min-height: 28px;
    padding: 2px 10px;
    border: 1px solid var(--muted);
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

/* ---------- Footer ---------- */
.foot {
    padding: 20px 16px 28px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text);
}
.foot a { color: inherit; }
/* TMDB's logo stays smaller than our own wordmark (their terms, S1 tmdb-attribution). */
.foot-logo { height: 10px; width: auto; vertical-align: baseline; margin-left: 2px; }
/* TMDB's terms require this notice; it can be quiet, not hidden. */
.foot-notice { margin-top: 6px; font-size: 0.75rem; }
.noscript { text-align: center; padding-bottom: 16px; }

@media (min-width: 900px) {
    /* One group, centered in whatever height is spare, with the footer staying at the bottom. */
    .door {
        flex: 0 1 auto;
        margin: auto;
        padding: 40px 0;
        width: min(1120px, 100% - 96px);
        gap: 28px 64px;
        grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
        grid-template-areas: "brand brand" "copy tv" "coming tv";
    }
    .brand { grid-area: brand; }
    .copy { grid-area: copy; }
    .coming { grid-area: coming; }
    .tv { grid-area: tv; align-self: center; justify-self: end; }
    /* Courier Prime is 13.2em wide here; the left column is 563px at its widest. */
    h1 { font-size: min(3.3vw, 2.625rem); }
}

/* Big monitors: larger type and a larger set, with the same line lengths. */
@media (min-width: 1600px) {
    .door { width: 1320px; gap: 32px 96px; }
    h1 { font-size: 3rem; }
    .pitch { font-size: 1.25rem; }
    .coming { font-size: 1.125rem; }
    .tv { max-width: 580px; }
}

@media (max-width: 520px) {
    .signup-row { flex-direction: column; }
    /* In a column, flex: 1 would size the height and override the 48px. */
    .signup input[type="email"] { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
    .signup button, #tv-pointer { transition: none; }
    /* Hold still on the first drawing. */
    .take-1, .take-2 { animation: none; }
    .take-2 { visibility: hidden; }
}