/* =========================================================
   LYRA STREAM
   Main Streaming Interface
   ========================================================= */


/* ==================== VARIABLES ==================== */

:root {

    --bg-main: #080808;
    --bg-secondary: #111111;
    --bg-card: #181818;
    --bg-card-hover: #222222;

    --text-main: #ffffff;
    --text-secondary: #b3b3b3;
    --text-muted: #777777;

    /* Lyra Synchron */
    --lyra-yellow: #ffd000;
    --lyra-teal: #2a8b94;

    --accent: var(--lyra-yellow);
    --accent-hover: #ffe066;

    --border: rgba(255, 208, 0, 0.12);

    --hero-overlay:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.75) 40%,
            rgba(0, 0, 0, 0.25) 75%,
            rgba(0, 0, 0, 0.8) 100%
        );

    --card-radius: 6px;

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    --content-width: 1500px;
}


/* ==================== RESET ==================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background: var(--bg-main);
    color: var(--text-main);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.5;
}


/* ==================== LINKS ==================== */

a {
    color: inherit;
    text-decoration: none;
}


/* ==================== HEADER ==================== */

.stream-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 70px;

    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 4%;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.95),
            rgba(0, 0, 0, 0)
        );

    transition:
        background var(--transition-normal);
}


/* Header becomes solid when needed */

.stream-header.scrolled {
    background: rgba(8, 8, 8, 0.97);
}


/* ==================== HEADER LEFT ==================== */

.header-left {

    display: flex;
    align-items: center;

    gap: 40px;
}


/* ==================== LYRA LOGO ==================== */

.lyra-logo {

    font-size: 1.5rem;
    font-weight: 800;

    letter-spacing: 4px;

    color: var(--lyra-yellow);

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}


.lyra-logo:hover {

    opacity: 0.75;

    transform: scale(1.03);
}


/* ==================== NAVIGATION ==================== */

.stream-nav {

    display: flex;

    gap: 25px;
}


.stream-nav a {

    position: relative;

    color: var(--text-secondary);

    font-size: 0.95rem;
    font-weight: 600;

    transition:
        color var(--transition-fast);
}


.stream-nav a:hover,
.stream-nav a.active {

    color: var(--lyra-yellow);
}


/* Navigation underline */

.stream-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background: var(--lyra-yellow);

    transition:
        width var(--transition-fast);
}


.stream-nav a:hover::after,
.stream-nav a.active::after {

    width: 100%;
}


/* ==================== HEADER RIGHT ==================== */

.header-right {

    display: flex;
    align-items: center;

    gap: 15px;
}


/* ==================== SEARCH ==================== */

.search-button {

    width: 40px;
    height: 40px;

    border: none;

    background: transparent;

    color: var(--text-main);

    font-size: 1.1rem;

    cursor: pointer;

    border-radius: 50%;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}


.search-button:hover {

    background: rgba(255, 255, 255, 0.1);

    transform: scale(1.05);
}


/* ==================== MAIN ==================== */

main {

    width: 100%;

    overflow: hidden;
}


/* ==================== HERO ==================== */

.hero {

    position: relative;

    min-height: 700px;

    display: flex;
    align-items: center;

    background-color: #111;

    background-position: center;
    background-size: cover;

    isolation: isolate;
}


/* Dark overlay */

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background: var(--hero-overlay);
}


/* Bottom fade */

.hero::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 180px;

    z-index: -1;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--bg-main)
        );
}


/* ==================== HERO CONTENT ==================== */

.hero-content {

    width: min(650px, 90%);

    margin-left: 6%;
    padding-top: 70px;
}


.hero-label {

    margin: 0 0 10px;

    color: var(--text-secondary);

    font-size: 0.8rem;
    font-weight: 700;

    letter-spacing: 3px;
}


.hero h1 {

    margin: 0;

    font-size: clamp(2.5rem, 5vw, 5rem);

    line-height: 1;

    font-weight: 800;
}


.hero-project {

    margin: 12px 0;

    font-size: 1.2rem;
    font-weight: 600;

    color: var(--text-secondary);
}


.hero-description {

    max-width: 600px;

    margin: 20px 0;

    color: #dddddd;

    font-size: 1rem;
}


/* ==================== HERO META ==================== */

.hero-meta {

    display: flex;

    gap: 20px;

    margin-bottom: 25px;

    color: var(--text-secondary);

    font-size: 0.9rem;
}


/* ==================== WATCH BUTTON ==================== */

.watch-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 150px;

    padding: 12px 22px;

    border-radius: 4px;

    background: var(--lyra-yellow);

    color: #000000;

    font-weight: 700;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast);
}


.watch-button:hover {

    background: var(--lyra-yellow);

    transform: scale(1.04);
}


/* ==================== STREAM SECTIONS ==================== */

.stream-section {

    width: min(
        var(--content-width),
        92%
    );

    margin: 0 auto 45px;
}


.section-heading {

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 15px;
}


.section-heading h2 {

    margin: 0;

    font-size: 1.4rem;
}


/* ==================== EPISODE ROW ==================== */

.episode-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    padding: 25px 30px 35px;
    scrollbar-width: thin;
}


/* Hide scrollbar on WebKit */

.episode-row::-webkit-scrollbar {

    height: 6px;
}


.episode-row::-webkit-scrollbar-track {

    background: transparent;
}


.episode-row::-webkit-scrollbar-thumb {

    background: #333;

    border-radius: 10px;
}


/* ==================== EPISODE CARD ==================== */

.episode-card {

    position: relative;

    flex: 0 0 240px;

    min-width: 240px;

    border-radius: var(--card-radius);

    background: var(--bg-card);

    overflow: visible;

    z-index: 1;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


/* Thumbnail */

.episode-thumbnail {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: var(--card-radius);
}


.episode-thumbnail img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform var(--transition-normal);
}


/* ==================== CARD INFORMATION ==================== */

.episode-info {

    max-height: 0;

    padding: 0 14px;

    overflow: hidden;

    background: var(--bg-card);

    border-radius:
        0
        0
        var(--card-radius)
        var(--card-radius);

    transition:
        max-height var(--transition-normal),
        padding var(--transition-normal);
}


.episode-card h3 {

    margin: 0;

    font-size: 1rem;
}


.episode-card p {

    margin: 4px 0;

    color: var(--text-secondary);

    font-size: 0.85rem;
}


/* ==================== CARD HOVER ==================== */

.episode-card:hover {

    transform: scale(1.08);

    z-index: 20;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.65);
}


.episode-card:hover .episode-thumbnail img {

    transform: scale(1.03);
}


.episode-card:hover .episode-info {

    max-height: 160px;

    padding:
        12px
        14px
        16px;
}


/* ==================== CARD BUTTONS ==================== */

.card-actions {

    display: flex;

    gap: 8px;

    margin-top: 10px;
}


.card-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 7px 11px;

    border-radius: 4px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    background: var(--lyra-teal);

    border-color: var(--lyra-teal);

    color: #ffffff;

    font-size: 0.8rem;
    font-weight: 600;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}


.card-button:hover {

    background: rgba(255, 255, 255, 0.18);

    transform: translateY(-1px);
}


/* ==================== PROJECT SECTIONS ==================== */

.project-section {

    width: min(
        var(--content-width),
        92%
    );

    margin: 0 auto 45px;
}


.project-title {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 15px;
}


.project-title img {

    max-width: 120px;
    max-height: 45px;

    object-fit: contain;
}


.project-title h2 {

    margin: 0;

    font-size: 1.4rem;
}


/* ==================== FOOTER ==================== */

.stream-footer {

    padding: 50px 5%;

    color: var(--text-muted);

    text-align: center;

    font-size: 0.8rem;

    border-top: 1px solid var(--border);
}


.stream-footer p {

    margin: 5px 0;
}


/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {

    .stream-header {

        height: 60px;

        padding: 0 20px;
    }


    .header-left {

        gap: 20px;
    }


    .lyra-logo {

        font-size: 1.2rem;

        letter-spacing: 3px;
    }


    .stream-nav {

        gap: 15px;
    }


    .stream-nav a {

        font-size: 0.85rem;
    }


    .hero {

        min-height: 600px;

        align-items: flex-end;
    }


    .hero-content {

        width: 90%;

        margin: 0 auto;

        padding:
            0
            0
            70px;
    }


    .hero-description {

        font-size: 0.9rem;
    }


    .episode-card {

        flex-basis: 190px;

        min-width: 190px;
    }


    .episode-card:hover {

        transform: scale(1.03);
    }


    .project-title h2,
    .section-heading h2 {

        font-size: 1.2rem;
    }
}


/* =========================================================
   WATCH PAGE
   ========================================================= */

.watch-page {
    min-height: 100vh;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.watch-page .stream-header {

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 4%;

    position: relative;
    z-index: 10;
}


/* LYRA logo */

.watch-page .stream-logo {

    color: #ffd000;

    font-size: 1.4rem;
    font-weight: 800;

    letter-spacing: 3px;

    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.watch-page .stream-logo:hover {

    color: #ffffff;

    transform: scale(1.05);
}


/* Home link */

.watch-page .stream-home {

    color: #ffffff;

    text-decoration: none;

    font-size: 0.95rem;
    font-weight: 600;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.watch-page .stream-home:hover {

    color: #ffd000;

    transform: translateX(-3px);
}


/* ---------------------------------------------------------
   Main watch container
   --------------------------------------------------------- */

.watch-container {

    width: min(1400px, 92%);

    margin: 0 auto;

    padding:
        30px 0 80px;
}


/* ---------------------------------------------------------
   Video
   --------------------------------------------------------- */

.video-container {

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #000;

    border-radius: 8px;

    overflow: hidden;
}


.video-container video {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #000;
}


/* ---------------------------------------------------------
   Information
   --------------------------------------------------------- */

.watch-information {

    padding:
        30px 4px 0;
}


.watch-project {

    margin: 0 0 6px;

    color: #2a8b94;

    font-size: 0.85rem;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.watch-title {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(1.8rem, 4vw, 3rem);

    line-height: 1.1;
}


.watch-metadata {

    margin-top: 12px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 0.9rem;
}


.watch-description {

    max-width: 850px;

    margin-top: 20px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 1rem;

    line-height: 1.6;
}


/* =========================================================
   WATCH PAGE - EPISODES
   ========================================================= */

.watch-episodes {

    padding: 45px 0 0;
}


.watch-episodes .watch-section-title {

    margin-left: 4px;
}


.watch-season {

    margin-top: 28px;
}


.watch-season:first-child {

    margin-top: 0;
}


.watch-season-title {

    margin:
        0
        0
        8px
        4px;

    color: #ffffff;

    font-size: 1.1rem;
    font-weight: 600;
}


/*
 * Current episode
 */

.watch-episodes .episode-card.current-episode {

    box-shadow:
        0 0 0 2px var(--lyra-yellow);
}


.watch-episodes .episode-card.current-episode:hover {

    box-shadow:
        0 0 0 2px var(--lyra-yellow),
        0 12px 30px rgba(0, 0, 0, 0.65);
}


/* =========================================================
   WATCH PAGE - CREDITS
   ========================================================= */

.watch-credits {

    padding: 45px 4px 0;
}


.watch-section-title {

    margin: 0 0 20px;

    color: #ffffff;

    font-size: 1.5rem;
    font-weight: 700;
}


/* Production credits */

.production-credits {

    display: flex;

    flex-direction: column;

    max-width: 850px;
}


.production-credit {

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 20px;

    padding: 12px 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.production-credit:first-child {

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.production-credit-label {

    color:
        rgba(255, 255, 255, 0.55);

    font-size: 0.9rem;
}


.production-credit-name {

    color: #ffffff;

    font-size: 0.95rem;
}


/* Cast */

.cast-table-wrapper {

    width: 100%;

    overflow-x: auto;
}


.cast-table {

    width: 100%;

    max-width: 1100px;

    border-collapse: collapse;
}


.cast-table th {

    padding: 12px 16px;

    color:
        rgba(255, 255, 255, 0.5);

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 1px;

    text-align: left;

    text-transform: uppercase;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.15);
}


.cast-table td {

    padding: 15px 16px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);

    vertical-align: middle;
}


.cast-character {

    color: #ffffff;

    font-weight: 600;
}


.cast-va {

    color: #ffffff;

    font-weight: 500;
}


.cast-original {

    color:
        rgba(255, 255, 255, 0.5);
}


/* =========================================================
   WATCH PAGE - RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .watch-page .stream-header {

        padding:
            15px 5%;
    }


    .watch-container {

        width: 100%;

        padding-top: 15px;
    }


    .video-container {

        border-radius: 0;
    }


    .watch-information {

        padding:
            25px 5% 0;
    }


    .watch-episodes {

        padding:
            35px 0 0;
    }


    .watch-episodes .watch-section-title {

        margin-left: 5%;
    }


    .watch-season-title {

        margin-left: 5%;
    }


    .watch-episodes .episode-row {

        padding-left: 5%;
        padding-right: 5%;
    }


    .watch-credits {

        padding:
            35px 5% 0;
    }


    .production-credit {

        grid-template-columns: 1fr;

        gap: 5px;
    }


    .cast-table {

        min-width: 650px;
    }
}

/* =========================================================
   BROWSE PAGE
   ========================================================= */

.browse-page {
    min-height: 100vh;
}


/* ---------------------------------------------------------
   Main container
   --------------------------------------------------------- */

.browse-page main {
    overflow: visible;
}


.browse-container {
    width: min(
        var(--content-width),
        92%
    );

    margin: 0 auto;

    padding:
        120px
        0
        80px;
}


/* ---------------------------------------------------------
   Search
   --------------------------------------------------------- */

.browse-search {
    width: 100%;

    margin-bottom: 25px;
}


.browse-search-form {
    display: flex;

    gap: 12px;

    width: 100%;
}


.browse-search-input-wrapper {
    position: relative;

    flex: 1;
}


.browse-search-icon {
    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--text-secondary);

    font-size: 1rem;

    pointer-events: none;
}


.browse-search-input {
    width: 100%;

    height: 50px;

    padding:
        0
        18px
        0
        46px;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 5px;

    background: var(--bg-card);

    color: var(--text-main);

    font-family: inherit;

    font-size: 1rem;

    outline: none;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}


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


.browse-search-input:focus {
    border-color: var(--lyra-yellow);

    background: var(--bg-card-hover);
}


.browse-search-button {
    height: 50px;

    padding:
        0
        24px;

    border: none;

    border-radius: 5px;

    background: var(--lyra-yellow);

    color: #000000;

    font-family: inherit;

    font-size: 0.95rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast);
}


.browse-search-button:hover {
    background: var(--accent-hover);

    transform: scale(1.03);
}


/* ---------------------------------------------------------
   Filters
   --------------------------------------------------------- */

.browse-filters {
    display: flex;

    gap: 10px;

    margin-bottom: 40px;
}


.browse-filter {
    padding:
        8px
        18px;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 20px;

    background: transparent;

    color: var(--text-secondary);

    font-family: inherit;

    font-size: 0.9rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}


.browse-filter:hover {
    border-color: rgba(255, 208, 0, 0.5);

    color: var(--text-main);
}


.browse-filter.active {
    border-color: var(--lyra-yellow);

    background: var(--lyra-yellow);

    color: #000000;
}


/* ---------------------------------------------------------
   Heading
   --------------------------------------------------------- */

.browse-heading {
    margin-bottom: 25px;
}


.browse-heading h1 {
    margin: 0;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.5rem
        );

    line-height: 1.1;
}


.browse-subtitle {
    margin: 8px 0 0;

    color: var(--text-secondary);

    font-size: 0.9rem;
}


/* ---------------------------------------------------------
   Search result grid
   --------------------------------------------------------- */

.browse-results-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(220px, 1fr)
        );

    gap:
        30px
        18px;

    padding:
        15px
        30px
        40px;
}


.browse-results-grid .episode-card {
    width: 100%;

    min-width: 0;
}


/* ---------------------------------------------------------
   Empty results
   --------------------------------------------------------- */

.browse-empty {
    padding:
        70px
        20px;

    text-align: center;
}


.browse-empty h2 {
    margin: 0 0 10px;

    font-size: 1.4rem;
}


.browse-empty p {
    margin: 0;

    color: var(--text-secondary);
}



/* ---------------------------------------------------------
   Episode row
   --------------------------------------------------------- */

/*
 * Extra space is intentional.
 *
 * Cards scale up on hover and their information panel
 * expands vertically. The padding keeps the first/last
 * cards and the expanded panel from being clipped.
 */

.episode-row {
    display: flex;

    gap: 12px;

    align-items: flex-start;

    overflow-x: auto;

    overflow-y: visible;

    padding:
        25px
        30px
        35px;

    scrollbar-width: thin;
}

.episode-thumbnail-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}