/* ================================================
   PREMIUM BACKGROUND SYSTEM v2.0
   Enhanced with glass morphism, particles & smooth animations
   Subtle, professional, GPU-accelerated
   ================================================ */

/* Root background body styling with enhanced grid */
.bg-system-container {
    position: relative;
    background:
        /* ── MAJOR engineering marks: 100px, crisp white whisper ─────────── */
        repeating-linear-gradient(0deg,  transparent, transparent 99px,  rgba(255, 255, 255, 0.038) 99px,  rgba(255, 255, 255, 0.038) 100px),
        repeating-linear-gradient(90deg, transparent, transparent 99px,  rgba(255, 255, 255, 0.038) 99px,  rgba(255, 255, 255, 0.038) 100px),
        /* ── MINOR subdivisions: 20px, deep crimson — barely-there feel ─── */
        repeating-linear-gradient(0deg,  transparent, transparent 19px,  rgba(200, 0, 0, 0.082) 19px,  rgba(200, 0, 0, 0.082) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px,  rgba(200, 0, 0, 0.082) 19px,  rgba(200, 0, 0, 0.082) 20px),
        /* ── Ambient light sources — staged red glow, like studio lighting ─ */
        radial-gradient(ellipse 1100px 750px at 16%    0%, rgba(185, 0, 0, 0.17), transparent 60%),
        radial-gradient(ellipse  750px 560px at 88%  100%, rgba(145, 0, 0, 0.12), transparent 60%),
        radial-gradient(ellipse 1500px 700px at 50%   36%, rgba(90,  0, 0, 0.07), transparent 68%),
        /* ── Near-black base: NOT pure #000, warmth adds depth ─────────── */
        #030000;
    min-height: 100vh;
    overflow-x: clip; /* clip (not hidden): avoids creating a scroll container so position:sticky children work correctly against the viewport */
}

/* Premium noise texture overlay for film quality feel */
.bg-system-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0wIDBoMzAwdjMwMEgweiIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=');
    opacity: 0.045; /* Premium film grain — subtle tactile texture */
    z-index: 1;
    pointer-events: none;
    animation: noiseMove 3s steps(2) infinite;
}

@keyframes noiseMove {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-2%, -2%); }
    100% { transform: translate(0, 0); }
}

/* Moving white diagonal slashes - REMOVED (User Request: Feb 13, 2026) */

/* Background wrapper - contains all animated elements */
.bg-hero-bg-elements {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

/* Subtle gradient wave effect - barely visible premium touch */
.bg-hero-bg-elements::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(204, 0, 0, 0.02) 30%, 
        rgba(255, 0, 0, 0.03) 50%, 
        rgba(204, 0, 0, 0.02) 70%, 
        transparent 100%);
    animation: gradientWave 60s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    opacity: 0.4;
    z-index: 0;
    display: none; /* Hidden - gradient wave removed */
}

@keyframes gradientWave {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(50%, 0, 0); }
}

/* Geometric shapes - animated background elements */
.bg-geometric-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none; /* Hidden - floating shapes removed */
}

.bg-shape {
    position: absolute;
    opacity: 0.06;
    filter: blur(40px);
    border-radius: 50%;
    mix-blend-mode: screen;
    will-change: transform;
    /* Glass morphism effect */
    box-shadow: 
        inset 0 0 60px rgba(255, 255, 255, 0.03),
        0 0 80px rgba(204, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.bg-shape-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at 30% 30%, rgba(102, 0, 0, 0.6), rgba(102, 0, 0, 0.2) 50%, transparent 70%);
    top: -200px;
    left: -100px;
    animation: float-shape-1 24s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.bg-shape-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle at 70% 40%, rgba(128, 0, 0, 0.5), rgba(128, 0, 0, 0.2) 50%, transparent 70%);
    top: 20%;
    right: -150px;
    animation: float-shape-2 28s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.bg-shape-3 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle at 50% 50%, rgba(90, 0, 0, 0.5), rgba(90, 0, 0, 0.15) 50%, transparent 70%);
    bottom: -250px;
    left: 10%;
    animation: float-shape-3 32s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.bg-shape-4 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle at 60% 60%, rgba(77, 0, 0, 0.6), rgba(77, 0, 0, 0.2) 50%, transparent 70%);
    top: 50%;
    right: 5%;
    animation: float-shape-4 30s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.bg-shape-5 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle at 40% 50%, rgba(112, 0, 0, 0.5), rgba(112, 0, 0, 0.2) 50%, transparent 70%);
    bottom: 10%;
    right: 15%;
    animation: float-shape-5 26s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Gradient orbs - additional depth */
.bg-gradient-orbs {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none; /* Hidden - gradient orbs removed */
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    mix-blend-mode: multiply;
    opacity: 0.04;
    will-change: transform;
    box-shadow: 0 0 120px rgba(204, 0, 0, 0.06);
}

.bg-orb-1 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle at 35% 35%, rgba(100, 0, 0, 0.5), rgba(100, 0, 0, 0.2) 50%, transparent 70%);
    top: -300px;
    right: -200px;
    animation: float-orb-1 45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.bg-orb-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at 65% 45%, rgba(80, 0, 0, 0.4), rgba(80, 0, 0, 0.15) 50%, transparent 70%);
    top: 30%;
    left: -150px;
    animation: float-orb-2 50s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.bg-orb-3 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle at 50% 60%, rgba(90, 30, 30, 0.35), rgba(90, 30, 30, 0.12) 50%, transparent 70%);
    bottom: -200px;
    right: 10%;
    animation: float-orb-3 55s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Particle canvas container */
.bg-particles-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    z-index: 1;
    display: none; /* Hidden - particles removed */
}

/* Smooth GPU-accelerated animation keyframes */
@keyframes float-shape-1 {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    25% { transform: translate3d(30px, -50px, 0) rotate(90deg); }
    50% { transform: translate3d(-20px, 50px, 0) rotate(180deg); }
    75% { transform: translate3d(50px, 20px, 0) rotate(270deg); }
}

@keyframes float-shape-2 {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    25% { transform: translate3d(-40px, 30px, 0) rotate(90deg); }
    50% { transform: translate3d(20px, -40px, 0) rotate(180deg); }
    75% { transform: translate3d(-30px, -20px, 0) rotate(270deg); }
}

@keyframes float-shape-3 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    25% { transform: translate3d(-30px, 40px, 0) scale(1.05); }
    50% { transform: translate3d(40px, -30px, 0) scale(0.95); }
    75% { transform: translate3d(20px, 20px, 0) scale(1.02); }
}

@keyframes float-shape-4 {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    25% { transform: translate3d(35px, -35px, 0) rotate(-90deg); }
    50% { transform: translate3d(-35px, 35px, 0) rotate(-180deg); }
    75% { transform: translate3d(35px, 35px, 0) rotate(-270deg); }
}

@keyframes float-shape-5 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    25% { transform: translate3d(-45px, 25px, 0) scale(1.03) rotate(90deg); }
    50% { transform: translate3d(25px, -45px, 0) scale(0.98) rotate(180deg); }
    75% { transform: translate3d(-25px, -25px, 0) scale(1.01) rotate(270deg); }
}

/* Smooth GPU-accelerated orb animations */
@keyframes float-orb-1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    25% { transform: translate3d(40px, -40px, 0) scale(1.1); }
    50% { transform: translate3d(-40px, 40px, 0) scale(0.9); }
    75% { transform: translate3d(40px, 40px, 0) scale(1.05); }
}

@keyframes float-orb-2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    25% { transform: translate3d(-50px, 30px, 0) scale(0.95); }
    50% { transform: translate3d(30px, -50px, 0) scale(1.05); }
    75% { transform: translate3d(-30px, -30px, 0) scale(1); }
}

@keyframes float-orb-3 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    25% { transform: translate3d(45px, 45px, 0) scale(1.02); }
    50% { transform: translate3d(-45px, -45px, 0) scale(0.98); }
    75% { transform: translate3d(45px, -45px, 0) scale(1.01); }
}

/* Ensure content stays on top of background */
.bg-system-content {
    position: relative;
    z-index: 10;
    min-height: 100vh;
}

/* Premium vignette overlay — dark edges, open center, luxury depth */
.bg-system-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Edge vignette: frames content, corners pull into darkness */
        radial-gradient(ellipse 140% 110% at 50% 50%,
            transparent            22%,
            rgba(0, 0, 0, 0.18)    58%,
            rgba(0, 0, 0, 0.52)   100%),
        /* Top edge — deep red bleed at very top */
        linear-gradient(180deg,
            rgba(120, 0, 0, 0.09)  0%,
            transparent            12%);
    z-index: 5;
    pointer-events: none;
}

/* Responsive adjustments - optimized for mobile */
@media (max-width: 768px) {
    .bg-system-container::before {
        opacity: 0.015; /* Less noise on mobile */
    }
    
    .bg-system-container::after {
        opacity: 0.25; /* Reduce slash visibility */
    }
    
    .bg-shape {
        filter: blur(30px);
        opacity: 0.04;
    }
    
    .bg-shape-1 {
        width: 400px;
        height: 400px;
    }
    
    .bg-shape-2 {
        width: 350px;
        height: 350px;
    }
    
    .bg-shape-3 {
        width: 500px;
        height: 500px;
    }
    
    .bg-shape-4 {
        width: 300px;
        height: 300px;
    }
    
    .bg-shape-5 {
        width: 400px;
        height: 400px;
    }
    
    .bg-orb {
        filter: blur(50px);
        opacity: 0.03;
    }
    
    .bg-orb-1 {
        width: 500px;
        height: 500px;
    }
    
    .bg-orb-2 {
        width: 400px;
        height: 400px;
    }
    
    .bg-orb-3 {
        width: 450px;
        height: 450px;
    }
    
    /* Disable gradient wave on mobile for performance */
    .bg-hero-bg-elements::before {
        display: none;
    }
    
    /* Reduce particle opacity on mobile */
    .bg-particles-canvas {
        opacity: 0.15;
    }
}

/* Performance optimization - disable animations on low-power devices */
@media (prefers-reduced-motion: reduce) {
    .bg-system-container,
    .bg-shape,
    .bg-orb,
    .bg-system-container::before,
    .bg-system-container::after,
    .bg-hero-bg-elements::before {
        animation: none !important;
    }
    
    /* Keep static but visible */
    .bg-system-container::after {
        opacity: 0.2;
    }
}