/* 
 * MultiTube.Live 2026 - Premium "Technical Matrix" Global Background 
 * High-Performance, CSS-Only Orchestration Engine
 * 60FPS Perspective Drifting, Parallax Grids, and Logic-Gate Glitches
 */

:root {
    --matrix-bg: #03050a;
    --matrix-primary: rgba(52, 152, 219, 0.25);
    --matrix-secondary: rgba(138, 43, 226, 0.3);
    --matrix-glitch-1: #ffffff;
    --matrix-glitch-2: #8a2be2;
    --matrix-grid-size: 60px;
}

.mtl-global-background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--matrix-bg);
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(13, 24, 43, 0.4) 0%, transparent 80%),
        radial-gradient(circle at 20% 80%, rgba(52, 152, 219, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(138, 43, 226, 0.05) 0%, transparent 50%);
    z-index: -999;
    overflow: hidden;
    pointer-events: none;
    /* Hardware acceleration for the container */
    transform: translateZ(0); 
    backface-visibility: hidden;
}

/* Base Matrix Layers */
.mtl-grid-engine {
    position: absolute;
    inset: -10% -10% -10% -10%; /* Reduced from -100% to minimize viewport surface area */
    width: 120%; /* Reduced from 300% to optimize compositor plane usage */
    height: 120%;
    transform: perspective(1000px) rotateX(45deg);
    will-change: transform, opacity;
}

/* Layer 1: The Deep Grid (Background Parallax) */
.mtl-grid-engine::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(var(--matrix-primary) 1px, transparent 1px),
        linear-gradient(90deg, var(--matrix-primary) 1px, transparent 1px);
    background-size: var(--matrix-grid-size) var(--matrix-grid-size);
    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
    animation: matrixDrift 60s infinite linear;
    opacity: 0.4;
}

/* Layer 2: The Logic Matrix (Near-Field & Pulsing) */
.mtl-grid-engine::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(var(--matrix-secondary) 1px, transparent 1px),
        linear-gradient(90deg, var(--matrix-secondary) 1px, transparent 1px);
    background-size: calc(var(--matrix-grid-size) * 2) calc(var(--matrix-grid-size) * 2);
    mask-image: radial-gradient(circle at center, black 40%, transparent 70%);
    animation: matrixDrift 40s infinite linear reverse, glitchPulse 8s infinite alternate ease-in-out;
    opacity: 0.6;
}

@keyframes matrixDrift {
    0% { transform: translateY(0); }
    100% { transform: translateY(var(--matrix-grid-size)); }
}

@keyframes glitchPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; } /* Remove hue-rotate: one of the primary causes of MPO conflicts */
}

/* Data Pathway Overlays (Rectangular bit-streams) */
.mtl-data-flow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 50%,
        rgba(255, 255, 255, 0.05) 50.1%,
        rgba(255, 255, 255, 0.05) 50.3%,
        transparent 50.4%
    );
    background-size: 200% 100%;
    animation: sweep 12s linear infinite;
    mix-blend-mode: overlay;
}

@keyframes sweep {
    0% { background-position: -100% 0; }
    100% { background-position: 100% 0; }
}

/* Structured Glitch Bitstreams */
.glitch-path {
    position: absolute;
    background: var(--matrix-glitch-1);
    box-shadow: 0 0 10px var(--matrix-glitch-1), 0 0 20px var(--matrix-glitch-2);
    border-radius: 2px;
    opacity: 0;
    animation: bitRun 4s infinite linear;
}

.gp-v { width: 1px; height: 100px; }
.gp-h { height: 1px; width: 100px; }

/* Randomly Staggered Bit-Streams (Zero stars, just paths) */
.p1 { top: 20%; left: 10%; animation-delay: 0s; }
.p2 { top: 60%; left: 30%; animation-delay: 1.2s; background: var(--matrix-glitch-2); }
.p3 { top: 40%; left: 80%; animation-delay: 2.5s; }
.p4 { top: 85%; left: 50%; animation-delay: 0.8s; background: var(--matrix-glitch-2); }
.p5 { top: 15%; left: 65%; animation-delay: 4.1s; }

@keyframes bitRun {
    0% { transform: scaleY(0.1) translateY(-100%); opacity: 0; }
    20% { opacity: 1; transform: scaleY(1) translateY(0); }
    80% { opacity: 1; transform: scaleY(1) translateY(100vh); }
    100% { opacity: 0; transform: scaleY(0.1) translateY(200vh); }
}

/* Horizontal Glitch Logic */
.p-h1 { top: 30%; left: -10%; animation: bitRunH 6s infinite linear; animation-delay: 0.5s; background: white; }
.p-h2 { top: 75%; left: -10%; animation: bitRunH 7s infinite linear; animation-delay: 3s; background: #8a2be2; }

@keyframes bitRunH {
     0% { transform: translateX(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(200vw); opacity: 0; }
}

/* Layer 4: Broadcast CRT Texture (Vertical Scanline Crawl) */
.mtl-broadcast-overlay {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 400px rgba(0, 0, 0, 0.98);
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.05) 1px,
        transparent 1px,
        transparent 2px
    );
    background-size: 100% 4px;
    animation: scanlineCrawl 10s linear infinite;
    z-index: 10;
}

@keyframes scanlineCrawl {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

/* Global Transparency Support (Removing the 'Boxes') */
body.dashboard-page,
.dashboard-layout,
.main-content,
.sidebar,
#layoutWrapper,
#videoGrid {
    background: transparent !important;
}

.video-item,
.ghost-player {
    background: rgba(10, 12, 20, 0.4) !important;
    backdrop-filter: blur(10px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
}