/* ============================================================
   CineBot — modern dark cinema UI
   Foundation: cool near-black, borders over shadows, one amber
   accent used only for meaning (primary action, status, badges).
   Layout: idle state lives in normal document flow (no overlap
   possible); connected video docks to a fixed corner PiP.
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Surfaces */
    --bg: #0b0d10;
    --surface: #14171d;
    --surface-2: #1a1e26;

    /* Lines */
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);

    /* Text: four-level hierarchy */
    --text: #f2f4f8;
    --text-secondary: #a8b0bd;
    --text-muted: #7a828f;
    --text-faint: rgba(255, 255, 255, 0.35);

    /* Accent + semantics */
    --accent: #e3b25b;
    --accent-strong: #edc172;
    --accent-ink: #221703;
    --danger: #e5484d;
    --ok: #3fb950;

    /* Shape & motion */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --ease: cubic-bezier(0.25, 1, 0.5, 1);

    --header-h: 57px;
}

html {
    color-scheme: dark;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(227, 178, 91, 0.3);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.app-container {
    width: 100%;
    min-height: 100vh;
}

.hidden {
    display: none !important;
}

/* Thin scrollbars for carousels */
.cast-carousel::-webkit-scrollbar,
.movies-carousel::-webkit-scrollbar,
.trending-carousel::-webkit-scrollbar,
.filmography-carousel::-webkit-scrollbar {
    height: 8px;
}

.cast-carousel::-webkit-scrollbar-thumb,
.movies-carousel::-webkit-scrollbar-thumb,
.trending-carousel::-webkit-scrollbar-thumb,
.filmography-carousel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.cast-carousel::-webkit-scrollbar-track,
.movies-carousel::-webkit-scrollbar-track,
.trending-carousel::-webkit-scrollbar-track,
.filmography-carousel::-webkit-scrollbar-track {
    background: transparent;
}

/* ============ HEADER ============ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding: 0 20px;
    background: rgba(11, 13, 16, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-mark {
    color: var(--accent);
    flex-shrink: 0;
}

.brand-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.brand-tagline {
    font-size: 12px;
    color: var(--text-muted);
    padding-left: 12px;
    border-left: 1px solid var(--border);
    white-space: nowrap;
}

.github-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: all 150ms var(--ease);
}

.github-link:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.04);
}

/* ============ HERO (idle layout, normal flow) ============ */
.hero {
    min-height: calc(100dvh - var(--header-h));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 24px 20px;
}

/* When the video docks to the corner, the hero collapses and the
   controls float at the bottom of the viewport instead. */
.hero:has(.agent-container.corner) {
    min-height: 0;
    padding: 0;
}

.hero:has(.agent-container.corner) .connection-controls-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
}

/* ============ AGENT VIDEO ============ */
.agent-container.centered {
    /* Width is clamped by viewport height so the card always fits
       between header and controls, at any window size. */
    width: max(240px, min(88vw, 680px, calc((100dvh - 300px) * 1.5)));
}

.agent-container.corner {
    position: fixed;
    right: 16px;
    bottom: 84px;
    width: 224px;
    z-index: 300;
    animation: pip-in 250ms var(--ease);
}

@keyframes pip-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.agent-container.corner .video-container {
    box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Idle placeholder, removed automatically once a video attaches */
.video-container:not(:has(video))::after {
    content: 'Ready when you are';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-faint);
    letter-spacing: 0.02em;
}

.video-container video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* ============ CONNECTION CONTROLS ============ */
.connection-controls-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: all 150ms var(--ease);
}

.connect-btn {
    background: var(--accent);
    color: var(--accent-ink);
}

.connect-btn:hover:not(:disabled) {
    background: var(--accent-strong);
}

.connect-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.hangup-btn {
    background: rgba(229, 72, 77, 0.1);
    border-color: rgba(229, 72, 77, 0.35);
    color: #ff8b8f;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hangup-btn:hover {
    background: rgba(229, 72, 77, 0.18);
    border-color: rgba(229, 72, 77, 0.5);
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 12px;
    background: rgba(20, 23, 29, 0.85);
    border: 1px solid var(--border);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.status-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

.status-pulse.connecting {
    background: var(--accent);
}

.status-pulse.error {
    background: var(--danger);
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ============ SHARED BADGES (JS-created) ============ */
.position-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    background: rgba(11, 13, 16, 0.8);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.media-type-badge,
.in-theaters-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    padding: 3px 8px;
    background: rgba(11, 13, 16, 0.8);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.date-info {
    margin-bottom: 20px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ============ MOVIE / TV DETAILS ============ */
.movie-display {
    width: 100%;
    min-height: calc(100vh - var(--header-h));
    position: relative;
    animation: fadeIn 250ms var(--ease);
}

.movie-backdrop-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.movie-backdrop {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.backdrop-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 13, 16, 0.4) 0%,
        rgba(11, 13, 16, 0.75) 55%,
        var(--bg) 100%
    );
}

.movie-content {
    position: relative;
    z-index: 10;
    padding: 48px 5% 220px;
    max-width: 1400px;
    margin: 0 auto;
}

.movie-primary {
    display: flex;
    gap: 48px;
    margin-bottom: 64px;
}

.movie-poster {
    width: 300px;
    aspect-ratio: 2 / 3;
    height: auto;
    align-self: flex-start;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    flex-shrink: 0;
}

.movie-info {
    flex: 1;
    min-width: 0;
}

.movie-title {
    font-size: clamp(28px, 4.5vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin-bottom: 8px;
}

.movie-logo {
    max-width: 100%;
    max-height: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.movie-tagline {
    font-size: 15px;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 20px;
}

.movie-meta {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-secondary);
}

.movie-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.star-icon {
    width: 15px;
    height: 15px;
    fill: var(--accent);
    flex-shrink: 0;
}

.movie-rating {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.movie-rating .rating-number {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Content Rating Badge (G, PG, PG-13, R, NC-17) — monochrome; the
   rating text carries the meaning, color isn't needed */
.content-rating {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.movie-genres {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.genre-tag {
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.movie-overview {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 28px;
    max-width: 65ch;
}

.movie-actions-info {
    margin-bottom: 28px;
}

.action-hint {
    display: inline-block;
    font-size: 13px;
    color: var(--text-muted);
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius);
}

/* Watch Providers */
.watch-providers {
    display: inline-block;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.watch-providers h3 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.providers-heading {
    display: none;
}

.providers-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.provider-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    overflow: hidden;
    display: inline-block;
    border: 1px solid var(--border);
    transition: transform 150ms var(--ease);
}

.provider-logo:hover {
    transform: translateY(-2px);
}

.provider-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.provider-type {
    display: none;
}

/* ============ SECTION HEADINGS ============ */
.cast-section h2,
.similar-section h2,
.seasons-section h2,
.filmography-section h2 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.cast-section,
.similar-section {
    margin-bottom: 48px;
}

/* ============ CAST ============ */
.cast-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.cast-member {
    width: 132px;
    flex-shrink: 0;
}

.cast-photo {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    margin-bottom: 8px;
    display: block;
}

.cast-name {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 2px;
}

.cast-character {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ============ CARDS (grid + carousels) ============ */
.movies-carousel,
.trending-carousel,
.filmography-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.movie-card {
    position: relative;
}

.movies-carousel .movie-card,
.trending-carousel .movie-card,
.filmography-carousel .movie-card {
    width: 160px;
    flex-shrink: 0;
}

.movie-card-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
}

.movie-card-title {
    padding: 8px 2px 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.movie-card-year {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 1px;
}

/* ============ SEARCH RESULTS / TRENDING ============ */
.search-results,
.trending-section {
    padding: 40px 5% 220px;
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeIn 250ms var(--ease);
}

.results-title,
.trending-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 28px 16px;
}

/* ============ PERSON ============ */
.person-display {
    min-height: calc(100vh - var(--header-h));
    position: relative;
    animation: fadeIn 250ms var(--ease);
}

.person-backdrop {
    display: none;
}

.person-content {
    position: relative;
    z-index: 10;
    padding: 48px 5% 220px;
    display: flex;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-start;
}

.person-photo {
    width: 220px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    flex-shrink: 0;
}

.person-info {
    flex: 1;
    min-width: 0;
}

.person-name {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 6px;
}

.person-department {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.person-birthday {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.person-biography {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 28px;
    max-width: 70ch;
    max-height: 190px;
    overflow-y: auto;
}

/* Person header block injected into the results title by JS */
.person-header {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.person-header-photo {
    width: 140px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.person-header-info {
    flex: 1;
    min-width: 0;
}

.person-header-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.person-header-dept {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.person-header-dates,
.person-header-count {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.person-header-bio {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
    max-height: 150px;
    overflow-y: auto;
    margin-top: 8px;
}

.person-known-for {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 3px;
}

/* ============ SEASONS ============ */
.seasons-section {
    margin-top: 40px;
}

.seasons-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    max-height: 480px;
    overflow-y: auto;
}

.season-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 108px;
    transition: border-color 150ms var(--ease);
}

.season-card:hover {
    border-color: var(--border-strong);
}

.season-number {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px;
}

.season-name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.season-episodes {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.season-year {
    font-size: 12px;
    color: var(--text-faint);
}

/* ============ EPISODES ============ */
.episode-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.episode-card {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    transition: border-color 150ms var(--ease);
}

.episode-card:hover {
    border-color: var(--border-strong);
}

.episode-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    padding: 3px 8px;
    background: rgba(11, 13, 16, 0.8);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.episode-thumbnail {
    width: 240px;
    object-fit: cover;
    flex-shrink: 0;
}

.episode-info {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.episode-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.episode-air-date,
.episode-runtime {
    font-size: 12px;
    color: var(--text-muted);
}

.episode-overview {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.episode-rating {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    margin-top: auto;
    padding-top: 6px;
}

.no-data-message {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ============ TRAILER MODAL ============ */
.trailer-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 9, 11, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 150ms var(--ease);
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 1000px;
}

.close-btn {
    position: absolute;
    top: -44px;
    right: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: all 150ms var(--ease);
}

.close-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.12);
}

.trailer-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: #000;
}

.trailer-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ============ LOADING ============ */
.loading-state {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1100;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============ ANIMATIONS ============ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        /* Without this, an `infinite` animation does not stop -- it cycles
           ~100,000 times a second. Chromium clamps that to a static frame, but
           Firefox samples it once per paint, so the marquee bulbs strobed
           erratically for anyone with "reduce motion" enabled. Capping the
           iteration count is what actually ends the animation; it settles on
           the 100% keyframe (bulbs fully lit). */
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    .movie-primary {
        flex-direction: column;
        gap: 28px;
    }

    .movie-poster {
        width: 220px;
    }

    .person-content {
        flex-direction: column;
        gap: 24px;
    }

    .person-photo {
        width: 180px;
    }
}

@media (max-width: 768px) {
    .brand-tagline {
        display: none;
    }

    .github-link span {
        display: none;
    }

    .github-link {
        width: 32px;
        padding: 0;
        justify-content: center;
    }

    .movie-content,
    .search-results,
    .trending-section,
    .person-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .movies-grid {
        grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
        gap: 20px 12px;
    }

    .agent-container.corner {
        width: 148px;
        bottom: 76px;
        right: 12px;
    }

    .episode-card {
        flex-direction: column;
    }

    .episode-thumbnail {
        width: 100%;
        height: 180px;
    }

    .person-header {
        flex-direction: column;
    }

    .person-header-photo {
        width: 110px;
    }
}

@media (max-width: 480px) {
    .movies-grid {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        gap: 16px 10px;
    }

    .movies-carousel .movie-card,
    .trending-carousel .movie-card,
    .filmography-carousel .movie-card {
        width: 124px;
    }

    .cast-member {
        width: 108px;
    }

    .movie-poster {
        width: 170px;
    }
}

/* ============================================================================
   OLD HOLLYWOOD THEATER LAYER
   ============================================================================
   Ported forward from the pre-3f0fc69 theme onto the current build, rather
   than reverting to it. Everything below is additive or a retint; none of the
   structural fixes in the modernize commit are undone:

     - the idle layout stays in NORMAL DOCUMENT FLOW (the theater header is not
       sticky and .hero keeps flowing), so elements still cannot overlap at
       small window sizes -- that was the whole point of the rewrite
     - the video still docks to a bottom-right PiP; the frame just shrinks with it
     - displayTVDetails still rebuilds .movie-meta per display (a JS fix, untouched)
     - the badge / person-header classes the modernize commit introduced keep
       their layout and are retinted here, not redefined

   Two things are deliberately NOT ported from the old theme:
     - .btn-film-hole spans. The old app.js read the button label with
       querySelector('span:not(.btn-film-hole)'); the current one uses
       querySelector('span'), so extra spans inside the button would be picked
       up as the label. The holes are ::before/::after here instead.
     - .status-indicator. The current app.js queries .status-pulse.
   ========================================================================= */

:root {
    /* Old Hollywood palette */
    --gold: #d4af37;
    --gold-light: #f4d03f;
    --gold-dark: #b8860b;
    --burgundy: #4a0e0e;
    --burgundy-light: #6b1515;
    --velvet-red: #8b0000;
    --maroon: #800020;
    --cream: #f5f0e1;
    --theater-black: #0d0908;
    --warm-black: #1a1515;

    /* Retint the existing tokens: every badge, star, position marker and
       card in the current stylesheet already reads these, so warming them
       here carries the theme through the whole app with no new selectors. */
    --bg: #0d0908;
    --surface: #1a1515;
    --surface-2: #241c1c;
    --border: rgba(212, 175, 55, 0.14);
    --border-strong: rgba(212, 175, 55, 0.30);
    --text: #f5f0e1;
    --text-secondary: #c9b99a;
    --text-muted: #9a8a70;
    --accent: #d4af37;
    --accent-strong: #f4d03f;
    --accent-ink: #0d0908;

    --curtain-w: 60px;
}

body {
    background-image:
        radial-gradient(ellipse at top, rgba(139, 0, 0, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(74, 14, 14, 0.20) 0%, transparent 50%);
    background-attachment: fixed;
}

/* ============ CURTAINS ============ */
/* z-index 0 against .app-container's 1: the curtains sit behind every piece
   of app chrome, so the PiP (300), header (400) and trailer modal (1100)
   all paint over them. pointer-events:none keeps them non-interactive. */
.curtain-left,
.curtain-right {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--curtain-w);
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        var(--burgundy) 0%,
        var(--velvet-red) 20%,
        var(--burgundy-light) 50%,
        var(--velvet-red) 80%,
        var(--burgundy) 100%);
}

.curtain-left  { left: 0;  box-shadow: inset -20px 0 30px rgba(0, 0, 0, 0.5); }
.curtain-right { right: 0; box-shadow: inset  20px 0 30px rgba(0, 0, 0, 0.5); }

.curtain-left::after,
.curtain-right::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 50%, var(--gold) 100%);
}

.curtain-left::after  { right: 0; }
.curtain-right::after { left: 0; }

.app-container {
    position: relative;
    z-index: 1;
}

/* ============ THEATER HEADER ============ */
/* Deliberately NOT sticky. A sticky header of this height would eat the
   viewport on short windows, which is the overlap class of bug the modernize
   commit fixed. It scrolls away like any other block. */
.theater-header {
    position: relative;
    z-index: 400;
    height: auto;
    padding: 0;
    text-align: center;
    background: linear-gradient(180deg, var(--theater-black) 0%, var(--warm-black) 100%);
    border-bottom: 4px solid var(--gold);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.8),
        inset 0 -2px 0 rgba(212, 175, 55, 0.3);
    margin-left: var(--curtain-w);
    margin-right: var(--curtain-w);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.header-content {
    padding: 6px 0 10px;
}

/* Marquee bulbs */
.marquee-lights {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 8px 0;
    background: var(--theater-black);
    overflow: hidden;
}

.marquee-lights span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold-light), 0 0 30px rgba(244, 208, 63, 0.5);
    animation: marquee-blink 1.5s ease-in-out infinite;
}

.marquee-lights span:nth-child(odd) { animation-delay: 0.75s; }

@keyframes marquee-blink {
    0%, 100% { opacity: 1;   box-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold-light); }
    50%      { opacity: 0.4; box-shadow: 0 0 5px var(--gold-dark); }
}

/* Art deco rules */
.art-deco-border {
    height: 3px;
    max-width: 500px;
    margin: 10px auto;
    background: linear-gradient(90deg,
        transparent 0%, var(--gold-dark) 15%, var(--gold) 30%,
        var(--gold-light) 50%, var(--gold) 70%, var(--gold-dark) 85%, transparent 100%);
}

.art-deco-border.top::before,
.art-deco-border.bottom::before {
    content: '\25C6';
    display: block;
    margin-top: -6px;
    text-align: center;
    font-size: 10px;
    color: var(--gold);
}

.theater-title {
    margin: 0;
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 900;
    letter-spacing: 0.15em;
    color: var(--gold);
    text-shadow:
        0 0 20px rgba(212, 175, 55, 0.5),
        0 0 40px rgba(212, 175, 55, 0.3),
        2px 2px 0 var(--gold-dark),
        4px 4px 0 rgba(0, 0, 0, 0.5);
}

.star-accent {
    font-size: 0.7em;
    vertical-align: middle;
    color: var(--gold-light);
    text-shadow: 0 0 15px var(--gold);
    animation: star-pulse 2s ease-in-out infinite;
}

/* Matches the deployed theme byte for byte. The stars SWELL (scale 1.1) and
   dim only slightly; an earlier pass here had them shrink to 0.9 and dim to
   0.65, which reads as a sharper, faster blink even at the same 2s duration. */
@keyframes star-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.1); }
}

.theater-tagline {
    margin-top: 5px;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    font-style: italic;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream);
}

/* GitHub link, vintage ticket */
.github-ticket {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold);
    font-family: 'Cinzel Decorative', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.github-ticket:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    transform: translateY(-50%) translateY(-2px);
}

/* ============ HERO ============ */
/* min-height drops to auto because the theater header is tall and in flow;
   keeping the old calc() against --header-h (57px) would over-reserve and
   push the fold. Still pure flow, so still no overlap. */
.hero {
    min-height: auto;
    padding: 40px 20px 56px;
}

/* ============ ORNATE FRAME ============ */
.agent-video-wrapper {
    position: relative;
    width: 100%;
}

.ornate-frame {
    position: absolute;
    inset: -15px;
    z-index: 10;
    border: 8px solid;
    border-image: linear-gradient(135deg,
        var(--gold-light) 0%, var(--gold) 25%, var(--gold-dark) 50%,
        var(--gold) 75%, var(--gold-light) 100%) 1;
    border-radius: 8px;
    pointer-events: none;
    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.3),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
}

.ornate-frame::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 4px;
}

.frame-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid var(--gold);
}

.frame-corner.top-left     { top: -5px;    left: -5px;  border-right: none; border-bottom: none; }
.frame-corner.top-right    { top: -5px;    right: -5px; border-left: none;  border-bottom: none; }
.frame-corner.bottom-left  { bottom: -5px; left: -5px;  border-right: none; border-top: none; }
.frame-corner.bottom-right { bottom: -5px; right: -5px; border-left: none;  border-top: none; }

/* Frame scales down with the PiP so it does not swamp a 224px card. */
.agent-container.corner .ornate-frame { inset: -8px; border-width: 4px; }
.agent-container.corner .frame-corner { width: 15px; height: 15px; border-width: 2px; }

/* Clear the right curtain so the docked PiP does not straddle the velvet. */
.agent-container.corner { right: calc(var(--curtain-w) + 16px); }

/* ============ VINTAGE BUTTONS ============ */
.vintage-btn {
    position: relative;
    padding-left: 26px;
    padding-right: 26px;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--theater-black);
    border: 3px solid var(--gold-light);
    box-shadow:
        0 5px 20px rgba(212, 175, 55, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    overflow: visible;
}

.vintage-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    box-shadow:
        0 8px 30px rgba(212, 175, 55, 0.6),
        0 0 40px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
}

/* Film-sprocket holes as pseudo-elements -- see the note at the top of this
   block for why these are not spans. */
.vintage-btn::before,
.vintage-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: var(--theater-black);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.vintage-btn::before { left: 8px; }
.vintage-btn::after  { right: 8px; }

.hangup-btn.vintage-btn {
    background: linear-gradient(135deg, var(--velvet-red) 0%, #5a0000 100%);
    border-color: var(--maroon);
    color: var(--cream);
}

.hangup-btn.vintage-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #a00000 0%, var(--velvet-red) 100%);
    box-shadow: 0 8px 30px rgba(139, 0, 0, 0.5);
}

.hangup-btn.vintage-btn::before,
.hangup-btn.vintage-btn::after { background: rgba(0, 0, 0, 0.55); }

/* ============ DISPLAY TYPE ============ */
/* Display faces on headings only. Inter stays on dense UI -- badges, meta
   rows, cast cards -- where Cormorant is unreadable at 11-13px. */
.movie-title,
.person-header-name {
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0.01em;
}

/* The one class the current app.js emits that never had a rule. */
.no-results {
    padding: 28px 20px;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-secondary);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    :root { --curtain-w: 30px; }
    .curtain-left::after,
    .curtain-right::after { width: 8px; }
}

@media (max-width: 700px) {
    .github-ticket { right: 10px; padding: 8px; }
    .github-ticket span { display: none; }
}

@media (max-width: 600px) {
    :root { --curtain-w: 0px; }
    .curtain-left,
    .curtain-right { display: none; }
    .theater-header { margin-left: 0; margin-right: 0; }
    .agent-container.corner { right: 16px; }
    .marquee-lights { gap: 12px; }
    .marquee-lights span { width: 8px; height: 8px; }
}

/* ============ MARQUEE UNDER REDUCED MOTION ============ */
/* The blanket rule above settles every animation after one cycle. For the
   marquee bulbs that leaves a dead sign, which is not what the deployed
   theme does -- tryit ships no reduced-motion block at all, so its lights
   blink for everyone. Restoring just the bulbs here so the header matches.
   
   Why this is a safe exemption rather than ignoring the preference:
     - marquee-blink animates OPACITY only. No transform, no movement, so
       none of the vestibular triggers prefers-reduced-motion exists for.
     - the cycle is 1.5s == 0.67 Hz, an order of magnitude under the WCAG
       2.3.1 three-flashes-per-second threshold.
   star-pulse is deliberately NOT restored: it animates scale(), which is
   real movement, so it stays settled for reduced-motion users.
   
   To respect the preference completely instead, delete this block -- the
   bulbs then sit lit and static, which is also a correct-looking sign. */
@media (prefers-reduced-motion: reduce) {
    .marquee-lights span {
        animation-duration: 1.5s !important;
        animation-iteration-count: infinite !important;
    }
}

/* Mic-paused caption inside the trailer modal. See muteMicForTrailer() in
   app.js: the mic is muted for the duration so the trailer's own dialogue is
   not transcribed as caller speech. Without this line the demo just looks
   like voice stopped working. */
.trailer-mic-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 0.01em;
    color: var(--gold);
    opacity: 0.85;
}

/* ============ BUILD FOOTER ============ */
/* Names the commit this instance is running, fetched from /api/version so it
   follows a deploy without anything being rebuilt into the page. Deliberately
   quiet: it is for whoever is debugging the demo, not for the audience. */
.build-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.build-label {
    text-transform: uppercase;
    opacity: 0.7;
}

.build-commit {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dotted rgba(212, 175, 55, 0.4);
    transition: color 150ms var(--ease);
}

.build-commit:hover {
    color: var(--accent-strong);
    border-bottom-color: var(--accent-strong);
}

/* The PiP and the floating call controls sit above the fold at the bottom
   right; keep the footer clear of them once a call is up. */
body:has(.agent-container.corner) .build-footer {
    padding-bottom: 96px;
}

/* ============ THEME PICKER ============ */
.theme-picker {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.theme-picker select {
    /* appearance:none is required or Chrome paints the native light control
       and ignores background/color entirely, which reads as a foreign grey
       box on both themes. The caret is drawn back on as a background image. */
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 11px;
    padding: 5px 24px 5px 9px;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
    background-color: rgba(0, 0, 0, 0.45);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--text);
    cursor: pointer;
}

/* The dropdown list itself is rendered by the OS; only these two carry over. */
.theme-picker select option {
    background: #14171d;
    color: #f2f4f8;
}

.theme-picker select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ============================================================================
   THEME: STREAMING
   ============================================================================
   The base stylesheet above IS the Old Hollywood theme, so this block is the
   override — same approach the other demos use (base + html[data-theme="x"])
   rather than scoping several hundred lines of decoration.

   This is the poster-first look of a streaming service: near-black ground, one
   red accent, tight bold type, artwork doing the work, and cards that lift on
   hover. Deliberately an homage to the idiom, not a copy of anyone's brand —
   no wordmark, no logo, and the red is a plain crimson.

   The markup is identical in both themes; nothing is added or removed by JS.
   ========================================================================= */
html[data-theme="modern"] {
    --bg: #141414;
    --surface: #181818;
    --surface-2: #232323;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.22);
    --text: #ffffff;
    --text-secondary: #b3b3b3;
    --text-muted: #8c8c8c;
    --text-faint: rgba(255, 255, 255, 0.45);
    --accent: #e50914;
    --accent-strong: #f6121d;
    --accent-ink: #ffffff;
    --radius-sm: 3px;
    --radius: 4px;
    --radius-lg: 6px;
    --curtain-w: 0px;
}

html[data-theme="modern"] body {
    background-image: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Decoration: present in the DOM, simply not shown here. */
html[data-theme="modern"] .curtain-left,
html[data-theme="modern"] .curtain-right,
html[data-theme="modern"] .marquee-lights,
html[data-theme="modern"] .art-deco-border,
html[data-theme="modern"] .ornate-frame,
html[data-theme="modern"] .star-accent {
    display: none;
}

/* ---- header: solid bar, red wordmark ---- */
html[data-theme="modern"] .theater-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 76px;
    margin: 0;
    padding: 0 4%;
    text-align: left;
    background: #141414;
    border-bottom: none;
    box-shadow: none;
}

html[data-theme="modern"] .header-content {
    padding: 0;
    margin-right: auto;
}

html[data-theme="modern"] .theater-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 1;
    color: var(--accent);
    text-shadow: 0 2px 10px rgba(229, 9, 20, 0.28);
    text-transform: uppercase;
}

html[data-theme="modern"] .theater-tagline {
    display: none;
}

/* ---- buttons: white primary, translucent secondary ---- */
html[data-theme="modern"] .vintage-btn {
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    height: 44px;
    padding: 0 26px;
    border: none;
    border-radius: var(--radius);
    background: #ffffff;
    color: #000000;
    box-shadow: none;
    transition: background 150ms ease;
}

html[data-theme="modern"] .vintage-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.78);
    box-shadow: none;
    transform: none;
}

html[data-theme="modern"] .vintage-btn::before,
html[data-theme="modern"] .vintage-btn::after {
    display: none;
}

html[data-theme="modern"] .hangup-btn.vintage-btn {
    background: rgba(109, 109, 110, 0.7);
    color: #ffffff;
    border: none;
}

html[data-theme="modern"] .hangup-btn.vintage-btn:hover:not(:disabled) {
    background: rgba(109, 109, 110, 0.5);
}

html[data-theme="modern"] .github-ticket {
    /* Both this and the theme picker come out of absolute positioning here and
       flow as flex children instead. Hand-tuned `right` offsets for two items
       of different widths is how they ended up overlapping. */
    position: static;
    transform: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
    background: transparent;
    border: none;
}

html[data-theme="modern"] .github-ticket:hover {
    color: #ffffff;
    background: transparent;
    box-shadow: none;
}

/* ---- billboard: side scrim like a streaming hero, not a bottom fade ---- */
html[data-theme="modern"] .backdrop-gradient {
    background:
        linear-gradient(to right, #141414 0%, rgba(20, 20, 20, 0.85) 32%, rgba(20, 20, 20, 0.12) 66%, rgba(20, 20, 20, 0.35) 100%),
        linear-gradient(to top, #141414 0%, transparent 28%);
}

html[data-theme="modern"] .movie-title,
html[data-theme="modern"] .person-header-name {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* ---- the part that actually reads as a streaming service: the cards ---- */
html[data-theme="modern"] .movie-card,
html[data-theme="modern"] .episode-card,
html[data-theme="modern"] .season-card {
    transition: transform 250ms cubic-bezier(0.25, 1, 0.5, 1);
}

html[data-theme="modern"] .movie-card:hover,
html[data-theme="modern"] .episode-card:hover,
html[data-theme="modern"] .season-card:hover {
    transform: scale(1.09);
    z-index: 5;
}

html[data-theme="modern"] .movie-card-poster,
html[data-theme="modern"] .movie-poster {
    border: none;
    border-radius: var(--radius);
    transition: box-shadow 250ms ease;
}

html[data-theme="modern"] .movie-card:hover .movie-card-poster {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.8);
}

/* Titles sit back so a row reads as a wall of artwork, and come forward on
   hover. Dimmed rather than hidden: hover does not exist on touch, and most
   posters carry the title as artwork anyway, so hiding the text entirely
   leaves nothing to read on a phone. */
html[data-theme="modern"] .movie-card-title,
html[data-theme="modern"] .movie-card-year {
    opacity: 0.62;
    transition: opacity 200ms ease;
}

html[data-theme="modern"] .movie-card:hover .movie-card-title,
html[data-theme="modern"] .movie-card:hover .movie-card-year {
    opacity: 1;
}

@media (hover: none) {
    html[data-theme="modern"] .movie-card-title,
    html[data-theme="modern"] .movie-card-year {
        opacity: 1;
    }
}

html[data-theme="modern"] .position-badge {
    background: var(--accent);
    border: none;
    color: #ffffff;
    font-weight: 700;
}

html[data-theme="modern"] .media-type-badge,
html[data-theme="modern"] .in-theaters-badge,
html[data-theme="modern"] .episode-badge {
    background: var(--accent);
    color: #ffffff;
    border: none;
}

/* Carousels sit tighter, and need room for a card to grow into. */
html[data-theme="modern"] .movies-carousel,
html[data-theme="modern"] .trending-carousel,
html[data-theme="modern"] .filmography-carousel,
html[data-theme="modern"] .cast-carousel,
html[data-theme="modern"] .seasons-carousel {
    gap: 8px;
    padding-block: 26px;
}

html[data-theme="modern"] .movies-grid {
    gap: 8px;
}

/* ---- section headings: small, bold, quiet ---- */
html[data-theme="modern"] .cast-section h3,
html[data-theme="modern"] .similar-section h3,
html[data-theme="modern"] .trending-section h3,
html[data-theme="modern"] .filmography-section h3,
html[data-theme="modern"] .seasons-section h3,
html[data-theme="modern"] .watch-providers h3 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #e5e5e5;
}

/* ---- video card and hero ---- */
html[data-theme="modern"] .video-container {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

html[data-theme="modern"] .hero {
    /* Less the header AND the footer: the theme picker lives down there now,
       so pushing it below the fold would hide the control. */
    min-height: calc(100dvh - 76px - var(--footer-h));
    padding: 24px 4% 56px;
}

html[data-theme="modern"] .agent-container.corner {
    right: 16px;
}

html[data-theme="modern"] .no-results {
    font-family: 'Inter', sans-serif;
    font-style: normal;
}

/* ---- idle state as a billboard, not a box on black ----
   A streaming home page is never empty. Flat #141414 behind a floating card
   was the bare part; this gives the ground some depth and turns the idle
   agent card into a wide hero with its copy sitting over the bottom-left,
   the way a service presents its featured title. */
html[data-theme="modern"] body {
    background-image:
        radial-gradient(1200px 520px at 18% -8%, rgba(229, 9, 20, 0.13), transparent 62%),
        radial-gradient(900px 600px at 100% 0%, rgba(80, 90, 120, 0.10), transparent 60%),
        linear-gradient(to bottom, #1b1b1b 0%, #141414 42%);
    background-attachment: fixed;
}

/* Only while idle -- once the video docks to the PiP the hero collapses. */
html[data-theme="modern"] .hero:has(.agent-container.centered):not(:has(video)) {
    position: relative;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0 0 56px;
    gap: 0;
}

html[data-theme="modern"] .hero:not(:has(video)) .agent-container.centered {
    width: min(100%, 1500px);
    margin: 0 auto;
    padding: 0 4%;
}

html[data-theme="modern"] .hero:has(.agent-container.centered):not(:has(video)) .video-container {
    aspect-ratio: 21 / 9;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75);
}

/* Scrim across the lower third of the billboard, so overlaid copy stays
   legible whatever the avatar is doing behind it. */
html[data-theme="modern"] .hero:has(.agent-container.centered):not(:has(video)) .video-container::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    z-index: 1;
    pointer-events: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: linear-gradient(to top,
        rgba(20, 20, 20, 0.96) 0%,
        rgba(20, 20, 20, 0.72) 38%,
        transparent 100%);
}

/* The tagline returns as the billboard's headline. */
html[data-theme="modern"] .hero:has(.agent-container.centered):not(:has(video)) ~ * .theater-tagline,
html[data-theme="modern"] .theater-tagline {
    display: none;
}

html[data-theme="modern"] .hero:has(.agent-container.centered):not(:has(video)) .connection-controls-container {
    position: absolute;
    left: 0;
    right: auto;
    bottom: 96px;
    z-index: 2;
    align-items: flex-start;
    width: min(100%, 1500px);
    padding: 0 calc(4% + 34px);
    margin: 0 auto;
}

/* A one-line pitch above the button, drawn in CSS so no markup changes. */
html[data-theme="modern"] .hero:has(.agent-container.centered):not(:has(video)) .connection-controls-container::before {
    content: 'Your AI movie companion';
    display: block;
    margin-bottom: 14px;
    font-size: clamp(22px, 3.2vw, 40px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

html[data-theme="modern"] .hero:has(.agent-container.centered):not(:has(video)) .connection-controls-container::after {
    content: 'Ask for a film, a cast list, or a trailer — out loud.';
    display: block;
    margin-top: 12px;
    max-width: 46ch;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* The placeholder text is redundant once the billboard copy is there. */
html[data-theme="modern"] .hero:has(.agent-container.centered):not(:has(video)) .video-container:not(:has(video))::after {
    content: '';
}

/* ---- Connect button: theme-coloured, with a shimmer on hover ----
   The Hollywood button brightens and lifts on hover; this is the streaming
   equivalent, in the theme's red rather than gold. A light band sweeps across
   once per hover, clipped by the button.

   Respects reduced motion for free: the global block caps
   animation-iteration-count, so the sweep settles instead of repeating. */
html[data-theme="modern"] .connect-btn.vintage-btn {
    position: relative;
    overflow: hidden;
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 2px 14px rgba(229, 9, 20, 0.35);
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

html[data-theme="modern"] .connect-btn.vintage-btn:hover:not(:disabled) {
    background: var(--accent-strong);
    box-shadow: 0 6px 26px rgba(229, 9, 20, 0.5);
    transform: translateY(-1px);
}

/* ::after is display:none for vintage buttons in this theme; bring it back
   just for this one, as the sweep. */
html[data-theme="modern"] .connect-btn.vintage-btn::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    /* height must be reset: the Hollywood base sets 8px for the sprocket
       holes, and an explicit height beats top+bottom, which left this as a
       thin strip along the top edge instead of a full-height band. */
    height: auto;
    left: -70%;
    width: 45%;
    transform: skewX(-20deg);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.10) 35%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.10) 65%,
        transparent 100%);
    pointer-events: none;
}

html[data-theme="modern"] .connect-btn.vintage-btn:hover:not(:disabled)::after {
    /* Near-linear on purpose. The site's usual ease-out puts almost all the
       travel in the first 150ms, so the sweep was over before it registered. */
    animation: streaming-shimmer 800ms cubic-bezier(0.35, 0.1, 0.45, 0.95);
}

@keyframes streaming-shimmer {
    from { left: -70%; }
    to   { left: 130%; }
}

/* ---- footer carries the build info and the theme picker ---- */
:root {
    --footer-h: 62px;
}

.build-footer {
    flex-wrap: wrap;
    gap: 8px 18px;
    min-height: var(--footer-h);
}

.build-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Separator only when both halves are present, so an unknown build does not
   leave a stray dot in front of the picker. */
.build-info:not(.hidden) + .theme-picker::before {
    content: '·';
    margin-right: 10px;
    opacity: 0.45;
}

.theme-picker-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}

html[data-theme="modern"] .build-footer {
    padding-bottom: 18px;
}

/* The billboard is the full-bleed idle state; it still has to stop short of
   the footer. */
html[data-theme="modern"] .hero:has(.agent-container.centered):not(:has(video)) {
    min-height: calc(100dvh - 76px - var(--footer-h));
}

/* The base clamps the idle card against viewport height —
   calc((100dvh - 300px) * 1.5) — where 300px allows for a 57px header plus
   the controls. The theatre header is roughly 228px and the footer now
   carries the theme picker, so that allowance is too small and the footer
   dropped below the fold on 768-800px screens, taking the picker with it. */
html[data-theme="hollywood"] .agent-container.centered,
html:not([data-theme]) .agent-container.centered {
    width: max(240px, min(88vw, 680px, calc((100dvh - 470px) * 1.5)));
}