/*
 * The pre-launch waitlist page. Standalone on purpose: in waitlist mode the
 * rest of the site's files are not served. Colors and type match the S3
 * mockup's formal tokens (front template/mockup/tokens.css).
 */

:root {
    color-scheme: dark;
    --bg: #14181c;
    --surface: #1c2228;
    --surface-2: #2c3440;
    --text: #9ab;
    --text-strong: #e8eef4;
    --muted: #7d8c9b;
    --action: #00ac1c;
    --action-hover: #00c030;
    --focus: #40bcf4;
    --error: #ff8f7a;
    --font-body: "Graphik", "Helvetica Neue", -apple-system, system-ui, sans-serif;
    --font-display: "Tiempos Headline", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

*, *::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 { 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; }

/* Decorative wall of posters, faded into the page. Columns drift up and down
   like a catalog being browsed; waitlist.js builds them and leans the wall
   away from a mouse pointer. */
.poster-wall {
    position: fixed;
    /* The 4deg tilt lifts the corners by about 3.5% of the width: overscan to match. */
    inset: calc(-40px - 4vw) -40px;
    z-index: 0;
    display: flex;
    /* Columns take their posters' height, not the wall's, so -50% means half the posters. */
    align-items: flex-start;
    gap: 10px;
    overflow: hidden;
    opacity: 0.32;
    transform: rotate(-4deg) scale(1.08);
    pointer-events: none;
}
.poster-col {
    flex: 1 1 0;
    min-width: 0;
    /* The column holds its posters twice, so -50% lands on an identical frame. */
    animation: wall-drift linear infinite;
    will-change: transform;
}
.poster-col:nth-child(even) { animation-direction: reverse; }
.poster-wall img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    /* Margin, not gap: each half of the column must be exactly 50% of it. */
    margin-bottom: 10px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--surface-2);
}
@keyframes wall-drift {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .poster-col { animation: none; }
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 60% 70% at 50% 45%, rgba(20, 24, 28, 0.94) 30%, rgba(20, 24, 28, 0.6) 100%),
        linear-gradient(180deg, transparent 60%, var(--bg) 100%);
    pointer-events: none;
}

.door {
    position: relative;
    z-index: 2;
    flex: 1;
    width: min(560px, 100% - 32px);
    margin: 0 auto;
    padding: 12vh 0 48px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-strong); }
.brand-bars { display: inline-flex; height: 26px; border-radius: 2px; overflow: hidden; }
.brand-bars i { width: 6px; }
.brand-bars i:nth-child(1) { background: #e8c547; }
.brand-bars i:nth-child(2) { background: #40bcf4; }
.brand-bars i:nth-child(3) { background: #00c030; }
.brand-bars i:nth-child(4) { background: #d45ac0; }
.brand-bars i:nth-child(5) { background: #ee5a3b; }
.brand-bars i:nth-child(6) { background: #3d6fd9; }
.brand-word { font: 700 1.9rem/1 var(--font-display); letter-spacing: -0.02em; }

h1 {
    margin-top: 40px;
    color: var(--text-strong);
    font: 700 clamp(2.1rem, 6vw, 3.2rem)/1.08 var(--font-display);
    letter-spacing: -0.01em;
}
.pitch { margin-top: 16px; font-size: 1.1rem; max-width: 46ch; }

.signup { margin-top: 32px; }
.signup > label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}
.signup-row { display: flex; gap: 8px; }
.signup input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #456;
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-strong);
    font: inherit;
}
.signup input[type="email"]::placeholder { color: var(--muted); }
.signup button {
    height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 4px;
    background: var(--action);
    color: #fff;
    font: 700 0.875rem/1 var(--font-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.signup button:hover { background: var(--action-hover); }
.signup button:disabled { opacity: 0.6; cursor: progress; }

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

.status { min-height: 1.55em; margin-top: 10px; font-size: 0.9375rem; }
.status.is-error { color: var(--error); }
.status.is-done { color: var(--text-strong); }
.fine { font-size: 0.875rem; color: var(--muted); }

.coming { margin-top: 40px; padding-top: 20px; border-top: 1px solid #456; display: grid; gap: 8px; font-size: 0.9375rem; }

.foot {
    position: relative;
    z-index: 2;
    padding: 20px 16px 28px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--muted);
}
.foot p { margin: 0; }
.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.6875rem; }
.noscript { position: relative; z-index: 2; text-align: center; padding-bottom: 16px; }

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