@import url("lang-style.css");

:root {
    --bg-dark: #030305;
    --text-main: #ffffff;
    --text-muted: #a0a0b0;

    --plex-color: #e5a00d;
    --seerr-color: #6677ff;

    --plex-bg: #140d04;
    --seerr-bg: #090a14;
}

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

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow: hidden;
    /* Prevent scrolling */
    user-select: none;
}

/* Wrapper and Gap Glow */
.split-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    /* mobile viewport fix - delete to revert */
    background: var(--bg-dark);
    overflow: hidden;
}

.gap-glow {
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 180deg at 50% 50%, #e5a00d 0deg, #ff2a5f 120deg, #6677ff 240deg, #00d2ff 360deg);
    filter: blur(15px);
    animation: rotate-glow 10s linear infinite;
    opacity: 0.8;
}

/* Ambient Dust Particles */
.dust-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    /* Just beneath the watermark and content, but above backgrounds */
    width: 100vw;
    height: 100vh;
    height: 100svh;
    /* mobile viewport fix - delete to revert */
}

/* Analog Film Grain */
.film-grain {
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200%;
    z-index: 9998;
    /* Highest, just below cinematic wipes */
    pointer-events: none;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cfilter id=\"noiseFilter\"%3E%3CfeTurbulence type=\"fractalNoise\" baseFrequency=\"0.85\" numOctaves=\"3\" stitchTiles=\"stitch\"/%3E%3C/filter%3E%3Crect width=\"100%25\" height=\"100%25\" filter=\"url(%23noiseFilter)\"/%3E%3C/svg%3E');
    opacity: 0.05;
    /* Barely visible */
    mix-blend-mode: overlay;
    animation: grain-dance 1.2s steps(4) infinite;
}

@keyframes grain-dance {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-3%, -2%);
    }

    20% {
        transform: translate(-6%, 3%);
    }

    30% {
        transform: translate(5%, -5%);
    }

    40% {
        transform: translate(-2%, 6%);
    }

    50% {
        transform: translate(-7%, -3%);
    }

    60% {
        transform: translate(4%, 5%);
    }

    70% {
        transform: translate(7%, -4%);
    }

    80% {
        transform: translate(-4%, -6%);
    }

    90% {
        transform: translate(6%, 2%);
    }
}

@keyframes rotate-glow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Base Panel Styles */
.panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    /* mobile viewport fix - delete to revert */
    overflow: hidden;
    transition: clip-path 0.9s cubic-bezier(0.75, 0, 0.25, 1);
}

.panel-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    /* mobile viewport fix - delete to revert */
    background-color: var(--bg-dark);
}

/* Left Panel Base */
.panel-left {
    clip-path: polygon(0 0, calc(52% - 2px) 0, calc(48% - 2px) 100%, 0 100%);
}

.panel-left .panel-inner {
    background: linear-gradient(135deg, var(--plex-bg) 0%, #000 100%);
}

/* Right Panel Base */
.panel-right {
    clip-path: polygon(calc(52% + 2px) 0, 100% 0, 100% 100%, calc(48% + 2px) 100%);
}

.panel-right .panel-inner {
    background: linear-gradient(225deg, var(--seerr-bg) 0%, #000 100%);
}

/* Hover Adjustments */
.split-wrapper.hover-left .panel-left {
    clip-path: polygon(0 0, calc(75% - 2px) 0, calc(65% - 2px) 100%, 0 100%);
}

.split-wrapper.hover-left .panel-right {
    clip-path: polygon(calc(75% + 2px) 0, 100% 0, 100% 100%, calc(65% + 2px) 100%);
}

.split-wrapper.hover-right .panel-left {
    clip-path: polygon(0 0, calc(35% - 2px) 0, calc(25% - 2px) 100%, 0 100%);
}

.split-wrapper.hover-right .panel-right {
    clip-path: polygon(calc(35% + 2px) 0, 100% 0, 100% 100%, calc(25% + 2px) 100%);
}

.split-wrapper.hover-left .panel,
.split-wrapper.hover-right .panel {
    will-change: clip-path;
}

/* ---------------------------------
   MASSIVE BACKGROUND WATERMARKS -> FLIP TABS
----------------------------------*/
.bg-watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 22vh;
    height: 22vh;
    z-index: 5;
    transform-origin: center center;
    pointer-events: none;
    transition: transform 0.9s cubic-bezier(0.75, 0, 0.25, 1), opacity 0.6s ease;
}

.bg-watermark svg {
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 1px;
    transition: stroke 0.6s ease, stroke-width 0.6s ease, filter 0.6s ease;
    overflow: visible;
}

/* Hover Watermark Glows */
.split-wrapper.hover-left .panel-left .bg-watermark svg {
    filter: drop-shadow(0 0 15px rgba(229, 160, 13, 0.4));
}

.split-wrapper.hover-right .panel-right .bg-watermark svg {
    filter: drop-shadow(0 0 15px rgba(102, 119, 255, 0.4));
}

.bg-watermark svg path,
.bg-watermark svg circle {
    vector-effect: non-scaling-stroke;
}

/* --- UNIFIED COORDINATE FLIP ENGINE --- */

/* DEFAULT 50/50 STATE */
/* Both text and icon docked at visually aligned content box coordinates */

/* Plex Default */
.plex-brand {
    /* Flush left edge aligning with .content padding offset */
    transform: translate(calc(8vw + 2rem), calc(44vh + 0.5rem)) translateY(-50%) rotate(0deg) scale(1);
    opacity: 0.9;
    color: var(--text-color);
    transition: transform 0.9s cubic-bezier(0.75, 0, 0.25, 1), opacity 0.6s ease, text-shadow 0.6s ease;
}

.panel-left .bg-watermark {
    /* Flush left edge aligning with .content padding offset */
    transform: translate(calc(8vw + 2rem - 8.25vh), calc(44vh - 2.5rem - 11vh)) rotate(0deg) scale(0.25);
    opacity: 1;
}

.panel-left .bg-watermark svg,
.panel-left .bg-watermark svg path,
.panel-left .bg-watermark svg g,
.panel-left .bg-watermark svg circle {
    stroke: var(--plex-color);
    stroke-width: 4px;
    opacity: 1;
}

/* Seerr Default */
.seerr-brand {
    /* Flush right edge aligning with .content padding offset */
    transform: translate(calc(100vw - 8vw - 2rem), calc(44vh + 0.5rem)) translate(-100%, -50%) rotate(0deg) scale(1);
    opacity: 0.9;
    color: var(--text-color);
    transition: transform 0.9s cubic-bezier(0.75, 0, 0.25, 1), opacity 0.6s ease, text-shadow 0.6s ease;
}

.panel-right .bg-watermark {
    /* Flush right edge aligning with .content padding offset */
    transform: translate(calc(100vw - 8vw - 2rem - 13.75vh), calc(44vh - 2.5rem - 11vh)) rotate(0deg) scale(0.25);
    opacity: 1;
}

.panel-right .bg-watermark svg,
.panel-right .bg-watermark svg path,
.panel-right .bg-watermark svg g,
.panel-right .bg-watermark svg circle {
    stroke: var(--seerr-color);
    stroke-width: 4px;
    opacity: 1;
}

/* BRAND GLOW ON HOVER */
.split-wrapper.hover-left .panel-left .plex-brand {
    text-shadow: 0 0 20px rgba(229, 160, 13, 0.6);
}

.split-wrapper.hover-right .panel-right .seerr-brand {
    text-shadow: 0 0 20px rgba(102, 119, 255, 0.6);
}

/* EXPANDED CINEMATIC WATERMARK OVERRIDES */
/* Flies from docked position into cinematic center */
.split-wrapper.hover-left .panel-left .bg-watermark {
    /* Center expands */
    transform: translate(calc(35vw - 11vh), calc(37vh - 11vh)) rotate(0deg) scale(3.5);
}

.split-wrapper.hover-left .panel-left .bg-watermark svg {
    stroke: rgba(229, 160, 13, 0.25);
    stroke-width: 1px;
}

.split-wrapper.hover-right .panel-right .bg-watermark {
    /* Center expands */
    transform: translate(calc(60vw - 11vh), calc(37vh - 11vh)) rotate(0deg) scale(3.5);
}

.split-wrapper.hover-right .panel-right .bg-watermark svg {
    stroke: rgba(102, 119, 255, 0.25);
    stroke-width: 1px;
}

/* COLLAPSED VERTICAL TAB OVERRIDES */
/* Both text and icon fly entirely to the screen edge */

/* Left Tab Collapsed (Plex) */
.split-wrapper.hover-right .plex-brand {
    transform: translate(12vw, 45vh) translate(-50%, -50%) rotate(-90deg) scale(2.2);
    opacity: 0.8;
    letter-spacing: 0.4rem;
    padding-left: 0.4rem;
    /* Mirrors letter spacing to exactly center visual string */
}

.split-wrapper.hover-right .panel-left .bg-watermark {
    transform: translate(calc(12vw - 11vh), calc(30vh - 11vh)) rotate(0deg) scale(0.25);
    opacity: 1;
}

.split-wrapper.hover-right .panel-left .bg-watermark svg,
.split-wrapper.hover-right .panel-left .bg-watermark svg * {
    stroke: var(--plex-color);
    stroke-width: 4px;
    opacity: 1;
}

/* Right Tab Collapsed (Seerr) */
.split-wrapper.hover-left .seerr-brand {
    transform: translate(88vw, 45vh) translate(-50%, -50%) rotate(90deg) scale(2.2);
    opacity: 0.8;
    letter-spacing: 0.4rem;
    padding-left: 0.4rem;
    /* Mirrors letter spacing */
}

.split-wrapper.hover-left .panel-right .bg-watermark {
    transform: translate(calc(88vw - 11vh), calc(30vh - 11vh)) rotate(0deg) scale(0.25);
    opacity: 1;
}

.split-wrapper.hover-left .panel-right .bg-watermark svg,
.split-wrapper.hover-left .panel-right .bg-watermark svg * {
    stroke: var(--seerr-color);
    stroke-width: 4px;
    opacity: 1;
}


/* ---------------------------------
   COLLAPSED VERTICAL TABS
----------------------------------*/
.collapsed-tab {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateZ(0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.75, 0, 0.25, 1);
    z-index: 20;
    pointer-events: none;
}

/* Pin perfectly inside their 25vw strip */
.panel-left .collapsed-tab {
    left: 8vw;
    transform: translateY(-50%) translateX(-5vw);
    /* Initial offset to slide in */
}

.panel-right .collapsed-tab {
    right: 8vw;
    transform: translateY(-50%) translateX(5vw);
    /* Initial offset to slide in */
}

/* SVG removed, dynamically mapped by bg-watermark instead */

/* Activate tab on collapsed panel */
.split-wrapper.hover-right .panel-left .collapsed-tab {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    transition-delay: 0.15s;
    /* Wait for clip path slightly */
}

.split-wrapper.hover-left .panel-right .collapsed-tab {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    transition-delay: 0.15s;
}


/* ---------------------------------
   FOREGROUND GLASS CARDS -> FREE FLOATING TEXT
----------------------------------*/
.content {
    position: absolute;
    top: 44vh;
    /* Use top anchoring so the origin completely ignores dynamic text-wrap height */
    z-index: 10;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 3rem 2rem 2rem 2rem;
    /* Extra padding completely dodges the floating brand typography */

    transition: all 0.8s cubic-bezier(0.75, 0, 0.25, 1);
    /* Removed vertical 20px translation to keep the logo-to-title gap completely static across hover states */
}

.panel-left .content {
    left: 8vw;
}

.panel-right .content {
    right: 8vw;
    align-items: flex-end;
    text-align: right;
}

/* Hide Unhovered Foreground Cards Completely */
.split-wrapper.hover-right .panel-left .content {
    /* Slide out further to ensure complete clearing */
    transform: translateX(-50vw);
    opacity: 0 !important;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.75, 0, 0.25, 1);
}

.split-wrapper.hover-left .panel-right .content {
    /* Slide out entirely */
    transform: translateX(50vw);
    opacity: 0 !important;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.75, 0, 0.25, 1);
}

/* ---------------------------------
   SHARED FLYING BRAND TEXT (FLIP CSS)
----------------------------------*/
.shared-brand {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.3rem;
    padding-left: 0.3rem;
    /* Symmetrically mirrors tracking for flexbox true center */
    text-transform: uppercase;
    transition: all 0.9s cubic-bezier(0.75, 0, 0.25, 1);
    pointer-events: none;

    /* Strict layout pivot locking */
    width: max-content;
    height: 1.5rem;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Typography inside glass card */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: relative;
}

.status-badge.online .status-dot {
    background-color: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.status-badge.online .status-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(34, 197, 94, 0.5);
    animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-dot {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.status-text {
    color: var(--text-muted);
}

.status-badge.online .status-text {
    color: #e5e7eb;
}

.status-badge.offline .status-dot {
    background-color: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.status-badge.offline .status-text {
    color: #e5e7eb;
}

.status-badge.checking .status-dot {
    background-color: #eab308;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
}

.status-badge.checking .status-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(234, 179, 8, 0.5);
    animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-badge.checking .status-text {
    color: #e5e7eb;
}

.title {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: -1px;
    z-index: 10;
    position: relative;
    /* Smooth transition for hover glow */
    transition: text-shadow 0.6s ease;
}

/* TITLE GLOW ON HOVER */
.split-wrapper.hover-left .panel-left .title {
    text-shadow: 0 0 30px rgba(229, 160, 13, 0.5), 0 0 10px rgba(229, 160, 13, 0.2);
}

.split-wrapper.hover-right .panel-right .title {
    text-shadow: 0 0 30px rgba(102, 119, 255, 0.5), 0 0 10px rgba(102, 119, 255, 0.2);
}

.panel-left .title {
    background: linear-gradient(to bottom right, #fff, var(--plex-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.panel-right .title {
    background: linear-gradient(to bottom right, #fff, var(--seerr-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.desc-wrapper {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.7s cubic-bezier(0.75, 0, 0.25, 1);

    /* Expand the bounding box to prevent glow clipping */
    padding: 60px;
    margin: -60px;
}

.panel:hover .desc-wrapper {
    max-height: 420px;
    opacity: 1;
    margin-top: calc(1.5rem - 60px);
}

.subtitle {
    font-size: 1.05rem;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Button Redesign */
.launch-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    border-radius: 100px;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    color: white;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.launch-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100px;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.panel-left .launch-btn::before {
    background: linear-gradient(135deg, rgba(229, 160, 13, 0.5), transparent);
}

.panel-right .launch-btn::before {
    background: linear-gradient(135deg, rgba(102, 119, 255, 0.5), transparent);
}

.launch-btn span,
.launch-btn svg {
    position: relative;
    z-index: 2;
}

.panel-left .launch-btn:hover {
    background: rgba(229, 160, 13, 0.1);
    border-color: rgba(229, 160, 13, 0.5);
    box-shadow: 0 0 40px rgba(229, 160, 13, 0.4);
    transform: translateY(-2px);
}

.panel-right .launch-btn:hover {
    background: rgba(102, 119, 255, 0.1);
    border-color: rgba(102, 119, 255, 0.5);
    box-shadow: 0 0 40px rgba(102, 119, 255, 0.4);
    transform: translateY(-2px);
}

.launch-btn:hover::before {
    opacity: 1;
}

.launch-btn svg {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.launch-btn:hover svg {
    transform: translateX(6px) scale(1.1);
}

/* Global hidden state for mobile indicators */
.mobile-scroll-indicator {
    display: none;
}

/* ---------------------------------
   LOW EFFECTS MODE
----------------------------------*/
.effects-lite .dust-overlay,
.effects-lite .film-grain,
.effects-lite .gap-glow,
.effects-lite .transition-overlay {
    display: none;
}

.effects-lite .panel,
.effects-lite .content,
.effects-lite .shared-brand,
.effects-lite .bg-watermark,
.effects-lite .desc-wrapper,
.effects-lite .launch-btn,
.effects-lite .status-badge,
.effects-lite .lang-btn,
.effects-lite .lang-dropdown,
.effects-lite .title {
    transition: none !important;
    animation: none !important;
}

.effects-lite .panel {
    will-change: auto;
}

.effects-lite .desc-wrapper {
    max-height: 420px !important;
    opacity: 1 !important;
    margin: 1.5rem 0 0 !important;
    padding: 0 !important;
}

.effects-lite .status-badge,
.effects-lite .launch-btn,
.effects-lite .lang-btn,
.effects-lite .lang-dropdown {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.effects-lite .status-badge.online .status-dot,
.effects-lite .status-badge.offline .status-dot,
.effects-lite .status-badge.checking .status-dot {
    box-shadow: none;
}

.effects-lite .status-badge.online .status-dot::after,
.effects-lite .status-badge.checking .status-dot::after {
    animation: none;
}

.effects-lite .panel-left .launch-btn:hover,
.effects-lite .panel-right .launch-btn:hover,
.effects-lite .lang-btn:hover {
    transform: none;
    box-shadow: none;
}

.effects-lite .launch-btn::before {
    display: none;
}

.effects-lite .launch-btn svg {
    transition: none !important;
}

.effects-lite .launch-btn:hover svg {
    transform: none !important;
}

.effects-lite .bg-watermark svg,
.effects-lite .scroll-down svg,
.effects-lite .scroll-up svg {
    filter: none !important;
}

.effects-lite .title,
.effects-lite .shared-brand {
    text-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .dust-overlay,
    .film-grain,
    .gap-glow,
    .transition-overlay {
        display: none;
    }
}

/* ---------------------------------
   MOBILE RESPONSIVE ADAPTATION 
   (Vertical Scroll Snapping)
----------------------------------*/
@media (max-width: 768px) {
    body {
        overflow-y: auto;
    }

    .split-wrapper {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100svh;
        /* mobile viewport fix - delete to revert */
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        /* Disable horizontal overflow */
        overflow-x: hidden;
    }

    /* Convert panels to full viewport blocks */
    .panel {
        position: relative;
        width: 100vw;
        height: 100vh;
        height: 100svh;
        /* mobile viewport fix - delete to revert */
        clip-path: none !important;
        /* Disable all complex masking */
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* Make Seerr the first panel on mobile */
    .panel-right {
        order: -1;
    }

    .panel-inner {
        position: relative;
    }

    /* Keep the ambient radial glow permanently engaged in the center */
    .panel-inner::before {
        opacity: 1;
        background: radial-gradient(circle 500px at 50% 30%, rgba(229, 160, 13, 0.25), transparent 70%);
    }

    .panel-right .panel-inner::before {
        background: radial-gradient(circle 500px at 50% 30%, rgba(102, 119, 255, 0.25), transparent 70%);
    }

    /* Reposition Watermarks to act as top logos */
    .bg-watermark {
        transform: translate(50vw, 21vh) translate(-50%, -50%) scale(0.65) !important;
        opacity: 0.9;
    }

    .panel-right .bg-watermark {
        transform: translate(50vw, 23vh) translate(-50%, -50%) scale(0.65) !important;
    }

    .panel-left .bg-watermark svg,
    .panel-right .bg-watermark svg {
        stroke-width: 4px !important;
    }

    /* Unpack Content Cards and Disable Hover Shifting */
    .content,
    .panel:hover .content,
    .split-wrapper.hover-left .panel-right .content,
    .split-wrapper.hover-right .panel-left .content {
        position: absolute;
        top: 59vh;
        top: 59svh;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        align-items: center !important;
        text-align: center !important;
        width: 100vw;
        padding: 0 1.5rem;
        box-sizing: border-box;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .panel-right .content,
    .split-wrapper.hover-left .panel-right .content {
        top: 56vh;
        top: 56svh;
    }

    /* Reset Seerr status badge layout for mobile */
    #seerr-status {
        flex-direction: row-reverse;
    }

    /* Neutralize all nested hover translation animations on text and wraps */
    .subtitle,
    .title,
    .desc-wrapper,
    .status-badge {
        transform: none !important;
        transition: none !important;
        /* Kill the CSS transitions so they can't stick */
    }


    /* Permanently reveal the description blocks */
    .desc-wrapper,
    .panel:hover .desc-wrapper,
    .split-wrapper.hover-left .panel-left .desc-wrapper,
    .split-wrapper.hover-right .panel-right .desc-wrapper {
        max-height: 400px !important;
        opacity: 1 !important;
        margin-top: 1rem !important;
        padding: 0 !important;
        /* Reset desktop glow margin trick */
    }

    .subtitle {
        font-size: 1rem;
        padding: 0;
        line-height: 1.5;
        max-width: 280px;
        /* Force text to wrap into 2-3 neat rows */
        margin-left: auto;
        margin-right: auto;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Mobile Scroll Indicators */
    .mobile-scroll-indicator {
        display: flex;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        z-index: 50;
        pointer-events: none;
    }

    .mobile-scroll-indicator svg {
        width: 36px;
        height: 36px;
    }

    .scroll-down {
        bottom: 2.5rem;
        color: var(--seerr-color);
        animation: bounce-down 2s infinite ease-in-out;
    }

    .scroll-down svg {
        filter: drop-shadow(0 0 12px rgba(102, 119, 255, 0.8));
    }

    .scroll-up {
        top: 2.5rem;
        color: var(--plex-color);
        animation: bounce-up 2s infinite ease-in-out;
    }

    .scroll-up svg {
        filter: drop-shadow(0 0 12px rgba(229, 160, 13, 0.8));
    }

    @keyframes bounce-down {

        0%,
        100% {
            transform: translate(-50%, 0);
        }

        50% {
            transform: translate(-50%, 12px);
        }
    }

    @keyframes bounce-up {

        0%,
        100% {
            transform: translate(-50%, 0);
        }

        50% {
            transform: translate(-50%, -12px);
        }
    }

    /* Hide desktop specific elements */
    .shared-brand,
    .collapsed-tab,
    .gap-glow {
        display: none !important;
    }

    /* Neutralize Watermark Hover Physics */
    .split-wrapper.hover-left .panel-left .bg-watermark,
    .split-wrapper.hover-right .panel-right .bg-watermark {
        transform: translate(50vw, 28vh) translate(-50%, -50%) scale(0.65) !important;
    }
}

/* ---------------------------------
   CINEMATIC PAGE TRANSITIONS
----------------------------------*/
.transition-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    transform: translate(-50%, -50%);
    background: var(--transition-color, #000);
    z-index: 9999;
    pointer-events: none;
    clip-path: circle(0% at center);
    transition: clip-path 0.35s cubic-bezier(0.75, 0, 0.25, 1);
}

.transition-overlay.active {
    clip-path: circle(100% at center);
    pointer-events: all;
}