/* Self-hosted Google Sans variable fonts (OFL licensed, see zip). */
@font-face {
    font-family: "Google Sans";
    src: url("assets/fonts/GoogleSans-Variable.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans";
    src: url("assets/fonts/GoogleSans-Italic-Variable.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ————————————————————————————————————————————————————————————————
   Color system. Every colored surface and text in the app reads from
   these variables, so a future accent theme only needs to override
   this block (e.g. `html[data-theme="ember"] { --accent: ...; }`).
   `-rgb` triplets feed every translucent layer via rgba(), keeping
   tints, scrims, and frosts in sync with their base color.
   ———————————————————————————————————————————————————————————————— */
:root {
    color-scheme: dark;
    font-family: "Google Sans", "Product Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Brand accent (default: monochrome white). */
    --accent: #ffffff;
    --accent-ink: #111111;
    --accent-hover: #e1e0e0;

    /* Base channels. */
    --bg: #080909;
    --bg-rgb: 8, 9, 9;
    --ink-rgb: 10, 12, 14;
    --frost-rgb: 255, 255, 255;
    --shadow-rgb: 0, 0, 0;

    /* Solid surfaces. */
    --surface-raised: #141518;
    --surface-control: #202023;
    --surface-control-hover: #343438;
    --surface-placeholder: #191919;

    /* Text. */
    --text-primary: #f5f3ef;
    --text-display: #fff8e9;
    --text-strong: #e8e6e1;
    --text-body: #f0eeea;
    --text-quiet: #f2f0f0;
    --text-nav: #8f8f8f;
    --text-muted: #8e8e93;
    --text-faint: #99999f;
    --text-soft: #aaaab0;
    --text-separator: #77797b;

    /* Translucent whites. */
    --line-frost: rgba(var(--frost-rgb), 0.12);
    --line-frost-strong: rgba(var(--frost-rgb), 0.32);
    --control-frost: rgba(var(--frost-rgb), 0.1);
    --control-frost-hover: rgba(var(--frost-rgb), 0.2);
    --track-frost: rgba(var(--frost-rgb), 0.4);
    --dot-idle: rgba(var(--frost-rgb), 0.45);

    /* Dark acrylic tints. */
    --tint-rail-1: rgba(var(--ink-rgb), 0.62);
    --tint-rail-2: rgba(var(--ink-rgb), 0.32);
    --tint-rail-3: rgba(var(--ink-rgb), 0);
    --tint-control: rgba(var(--ink-rgb), 0.45);
    --tint-control-hover: rgba(var(--ink-rgb), 0.62);

    /* Hero readability scrim. */
    --scrim-1: rgba(var(--bg-rgb), 0.92);
    --scrim-2: rgba(var(--bg-rgb), 0.62);
    --scrim-3: rgba(var(--bg-rgb), 0.18);
    --scrim-4: rgba(var(--bg-rgb), 0);

    /* Shadows. */
    --shadow-text: rgba(var(--shadow-rgb), 0.55);
    --shadow-logo: rgba(var(--shadow-rgb), 0.45);
}

/* Predictable element sizing */
* {
    box-sizing: border-box;
}

/* No accidental text selection or link dragging anywhere. */
* {
    -webkit-user-select: none;
    user-select: none;
}

/* …except where the user actually types. */
input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

img {
    -webkit-user-drag: none;
}

/* Hide native scrollbars everywhere without disabling scrolling */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Page defaults */
body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text-primary);
}

/* Links and buttons */
a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    cursor: pointer;
}

/* Sidebar */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 72px;
    height: 100vh;
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 20px 0;

    /* Floating acrylic rail: hero art flows underneath with a
       Windows-style heavy blur + saturation, fading out to no seam. */
    background: linear-gradient(
        90deg,
        var(--tint-rail-1) 0%,
        var(--tint-rail-2) 70%,
        var(--tint-rail-3) 100%
    );
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
}

/* Film-grain noise over the rail, Windows acrylic style. */
.sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sidebar > * {
    position: relative;
    z-index: 1;
}

/* Brand mark */
.brand-mark {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;
    margin-bottom: 28px;

    font-size: 24px;
    font-weight: 700;
}

.brand-logo {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Navigation layout: main group takes all free space between the
   logo and the footer icons, centering its icons exactly. (margin
   auto alone splits free space three ways and parks the group high.) */
.nav-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex: 1 1 auto;

    width: 100%;
    margin: 0;
    min-height: 0;
}

/* Pinned footer icons at the bottom of the sidebar */
.nav-icons-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    width: 100%;
    margin-top: auto;
}

/* Divider between the Library and Settings icons: horizontal
   hairline on the desktop rail, vertical in the mobile bar. */
.nav-icons-bottom::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--line-frost);
}

/* Navigation links */
.nav-icons a,
.nav-icons-bottom a {
    position: relative;
    background: transparent;

    /* Cool-neutral gray so icons read neutral on pure black
       instead of picking up a warm/golden cast. */
    color: var(--text-nav);

    transition: color 180ms ease;
}

/* Outlined icons by default; the selected destination is filled. */
.nav-icons .material-symbols-rounded,
.nav-icons-bottom .material-symbols-rounded {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.nav-icons a[aria-current="page"],
.nav-icons-bottom a[aria-current="page"] {
    color: var(--text-primary);
}

.nav-icons a[aria-current="page"] .material-symbols-rounded,
.nav-icons-bottom a[aria-current="page"] .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Smooth icon scaling */
.material-symbols-rounded {
    transition: 
        color 180ms ease,    
        transform 180ms ease;
}

.nav-icons a:hover .material-symbols-rounded,
.nav-icons a:focus-visible .material-symbols-rounded,
.nav-icons-bottom a:hover .material-symbols-rounded,
.nav-icons-bottom a:focus-visible .material-symbols-rounded {
    color: var(--text-primary);
    transform: rotate(-1deg) scale(1.15);
}
#discover-link:hover .material-symbols-rounded,
#discover-link:focus-visible .material-symbols-rounded {
    transform: rotate(160deg) scale(1.15);
}

#settings-link:hover .material-symbols-rounded,
#settings-link:focus-visible .material-symbols-rounded {
    transform: rotate(160deg) scale(1.15);
}

.page-view[hidden] {
    display: none !important;
}

.page-header {
    padding: 48px 24px 24px;
}

.page-eyebrow {
    margin: 0 0 10px;
    color: var(--text-faint);
    font-size: 12px;
    letter-spacing: 0.14em;
}

.page-header h2 {
    margin: 0 0 12px;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 650;
}

.page-header > p:last-child {
    color: var(--text-soft);
    line-height: 1.6;
}

/* Search view */
.search-bar {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 24px 8px;
    padding: 0 18px;
    min-height: 52px;

    border: 1px solid var(--line-frost);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text-primary);
}

.search-bar:focus-within {
    border-color: var(--line-frost-strong);
}

.search-bar .material-symbols-rounded {
    color: var(--text-muted);
    flex: 0 0 auto;
}

#search-input {
    flex: 1 1 auto;
    min-width: 0;

    border: 0;
    outline: 0;
    background: transparent;
    padding: 14px 0;

    font: inherit;
    font-size: 16px;
    color: inherit;
}

#search-input::placeholder {
    color: var(--text-muted);
}

#search-input::-webkit-search-cancel-button {
    display: none;
}

.search-clear {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 32px;
    height: 32px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: var(--control-frost);
    color: var(--text-primary);
    cursor: pointer;
}

.search-clear[hidden] {
    display: none;
}

.search-clear:hover {
    background: var(--control-frost-hover);
}

.search-status {
    margin: 12px 24px 16px;
    color: var(--text-muted);
    font-size: 13px;
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 18px 12px;

    padding: 0 24px 40px;
}

.search-grid .media-card {
    flex: none;
    width: 100%;
    min-width: 0;
}

/* Main content */
.page-content {
    margin-left: 72px;
    min-width: 0;
}

.hero {
    min-height: 82vh;

    display: flex;
    align-items: flex-end;

    /* Swipable banner: grab cursor, vertical page scroll untouched. */
    cursor: grab;
    touch-action: pan-y;

    /* Full-bleed underneath the floating sidebar rail; copy stays
       clear of the icons via the left padding. */
    margin-left: -72px;
    padding: 0 24px 48px calc(72px + 24px);

    /* TMDB Integration */
    position: relative;
    overflow: hidden;

    /* Readability gradient kept light so the artwork stays vivid. */
    background-image:
        linear-gradient(
          90deg,
          var(--scrim-1) 0%,
          var(--scrim-2) 30%,
          var(--scrim-3) 60%,
          var(--scrim-4) 85%
        ),
     linear-gradient(
          0deg,
            var(--bg) 0%,
            transparent 32%
        ),
        var(--hero-backdrop, none);

    background-size: cover;
    background-position: center 20%;
}

.hero-copy {
    width: min(760px, 68%);

    /* Keep text legible over brighter artwork. */
    text-shadow: 0 2px 18px var(--shadow-text);
}

h1 {
    margin: 0 0 22px;
    font-family: "Bodoni 72", "Didot", "Times New Roman", serif;
    font-size: clamp(64px, 7.6vw, 112px);
    font-weight: 700;
    letter-spacing: -0.075em;
    line-height: 0.98;
    color: var(--text-display);
}

.metadata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 600;
}

.meta-separator {
    color: var(--text-separator);
}

.rating {
    white-space: nowrap;
}

.rating > span {
    color: inherit;
}

.synopsis {
    max-width: 640px;
    margin: 0;
    color: var(--text-body);
    font-size: 16px;
    line-height: 1.55;
    max-height: 6.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.primary-button,
.quiet-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.primary-button {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 650;
}

.quiet-button .material-symbols-rounded {
    margin-right: 6px;
}

.hero-arrow .material-symbols-rounded {
    margin: 0;
}

.quiet-button {
    /* Dark acrylic tint like the sidebar, so the blur reads clearly. */
    background: var(--tint-control);
    color: var(--text-quiet);

    /* Frosted acrylic accent, matching the sidebar rail. */
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}

.primary-button:hover {
    background: var(--accent-hover);
}

.quiet-button:hover {
    background: var(--tint-control-hover);
}

.hero-logo {
    display: block;
    width: clamp(200px, 42vw, 460px);
    max-width: 100%;
    max-height: clamp(80px, 20vh, 168px);

    object-fit: contain;
    object-position: left center;

    margin: 0 0 24px 0px;
    filter: drop-shadow(0 4px 24px var(--shadow-logo));
}

.hero-logo[hidden] {
    display: none;
}

.hero-carousel {
    position: absolute;
    right: 24px;
    bottom: 42px;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 10px;

    /* Shrink-to-fit, so the control grows as dots are added. */
    width: auto;
    max-width: min(60vw, 480px);
    height: 36px;
}

.hero-arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 36px;
    height: 36px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    /* Dark acrylic tint like the sidebar, so the blur reads clearly. */
    background: var(--tint-control);
    color: var(--text-primary);

    /* Frosted acrylic accent, matching the sidebar rail. */
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);

    cursor: pointer;
}

.hero-arrow:hover {
    background: var(--tint-control-hover);
}

.hero-dots {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 1 auto;
    min-width: 0;

    padding: 8px 2px;

    /* Scroll internally once dots exceed the max width. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.hero-dots::-webkit-scrollbar {
    display: none;
}

.hero-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    padding: 0;

    border: 0;
    border-radius: 99px;
    background: var(--dot-idle);

    cursor: pointer;
    transition: width 180ms ease, background-color 180ms ease;
}

.hero-dot[aria-current="true"] {
    width: 24px;
    background: var(--accent);
}

/*Content shelves*/
.shelf {
    margin: 18px 0 28px;
    padding: 0 24px;
}

.shelf-heading h2 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 650;
}

.shelf-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shelf-controls {
    display: flex;
    gap: 8px;
}

.shelf-arrow {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: var(--surface-control);
    color: var(--text-primary);
    cursor: pointer;
}

.shelf-arrow:hover {
    background: var(--surface-control-hover);
}

.shelf-arrow .material-symbols-rounded {
    margin: 0;
}

/* Horizontally scrollable rows */
.media-row {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;

    /* Bleed past the shelf padding to the viewport edge, so the
       next card peeks in and scrolling is discoverable. */
    margin-right: -24px;
    padding-right: 24px;

    scroll-behavior: auto;
    overscroll-behavior-x: contain;
}

.media-track {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    width: max-content;
    min-width: 100%;
    padding-bottom: 8px;

    transform: translate3d(var(--rubber-band, 0px), 0, 0);
}

.media-row,
.media-row * {
    cursor: default;
}

.media-row.is-dragging {
    user-select: none;
}

.media-row.is-dragging .media-track {
    transition: none;
    will-change: transform;
}

.media-row.is-springing .media-track {
    transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.media-row img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

/* Hide scrollbars for WebKit browsers */
.media-row::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Edge */
}

.media-card {
    flex: 0 0 150px;
    min-width: 0;
    transition: transform 200ms ease;
}

.media-card--continue {
    flex-basis: 260px;
}

/* Artwork containers */
.media-art {
    position: relative;
    overflow: hidden;

    aspect-ratio: 2 / 3;
    border-radius: 8px;
    background: var(--surface-placeholder);
}

.media-card--continue .media-art {
    aspect-ratio: 16 / 9;
}

.media-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 260ms ease-out;
}

.media-card:hover .media-image {
    transform: scale(1.035);
}

/* Playback progress */
.media-progress {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;

    height: 4px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--track-frost);
}

.media-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 99px;
}

/* Card text */
.media-card-details {
    padding: 6px 2px;
}

.media-card-details h3 {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;

    /* Titles always hold a single line; JS condenses long titles
       before the ellipsis needs to kick in. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.media-card-details h3 > span {
    display: inline-block;
    transform-origin: left center;
}

.media-card-details p {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
}

/* Half-width windows and smaller: drop the synopsis to reduce clutter. */
@media (max-width: 1024px) {
    .synopsis {
        display: none;
    }
}

@media (max-width: 640px) {
    .hero {
        min-height: clamp(520px, 75svh, 680px);
        align-items: flex-end;
        padding: 32px 18px 82px;
        background-position: 60% center;
    }

    .hero-copy {
        width: 100%;
    }

    .hero-logo {
        width: min(280px, 100%);
        max-height: clamp(64px, 14svh, 105px);
        margin-bottom: 18px;
    }

    .hero-carousel {
        right: 16px;
        bottom: 20px;
    }
}

/* Tablet and phone: side rail becomes a bottom bar. */
@media (max-width: 768px) {
    body {
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar {
        inset: auto 0 0 0;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        padding: 10px 8px calc(10px + env(safe-area-inset-bottom));

        /* Same acrylic, fading upward instead of sideways. */
        background: linear-gradient(
            0deg,
            var(--tint-rail-1) 0%,
            var(--tint-rail-2) 70%,
            var(--tint-rail-3) 100%
        );

        /* Lighter blur for mobile GPUs. */
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        backdrop-filter: blur(18px) saturate(140%);
    }

    .brand-mark {
        display: none;
    }

    .nav-icons,
    .nav-icons-bottom {
        flex-direction: row;
        justify-content: center;
        flex: none;
        width: auto;
        margin: 0;
        gap: 4px;
    }

    .nav-icons a,
    .nav-icons-bottom a {
        padding: 10px 12px;
    }

    .nav-icons-bottom::before {
        width: 1px;
        height: 24px;
    }

    /* Content reclaims the rail width; bottom pad clears the bar. */
    .page-content {
        margin-left: 0;
        padding-bottom: 92px;
    }

    .hero {
        margin-left: 0;
        padding: 24px 18px 82px;
    }

    h1 {
        font-size: clamp(42px, 13vw, 64px);
    }

    .hero-actions .primary-button,
    .hero-actions .quiet-button {
        flex: 1 1 140px;
    }

    /* Compact shelves; arrows retire in favor of touch drag. */
    .shelf {
        padding: 0 16px;
    }

    .shelf-heading h2 {
        font-size: 18px;
    }

    .shelf-controls {
        display: none;
    }

    .media-row {
        margin-right: -16px;
        padding-right: 16px;
    }

    .media-card {
        flex-basis: 128px;
    }

    .media-card--continue {
        flex-basis: 220px;
    }

    .search-bar {
        margin: 0 16px 8px;
    }

    .search-status {
        margin: 12px 16px 16px;
    }

    .search-grid {
        grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
        padding: 0 16px 32px;
    }
}

@keyframes card-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.media-card {
    animation: card-enter 420ms ease both;
}

@keyframes hero-content-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-dot {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content-enter {
    animation: hero-content-enter 350ms ease both;
}

@media (prefers-reduced-motion: reduce) {
    .media-card,
    .media-image,
    .hero-content-enter,
    .hero-dot {
        animation: none;
        transition: none;
    }

    .media-row,
    .hero-dots {
        scroll-behavior: auto;
    }
}