/* -----------------------------------------
           BACKGROUND LAYERS CONTROLLER
        ----------------------------------------- */
        .bg-layer {
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: 1;
            visibility: visible;
            transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
        }

        /* Active State */
        .hero-wrapper[data-theme="threads"] .layer-threads,
        .hero-wrapper[data-theme="pulse"] .layer-pulse,
        .hero-wrapper[data-theme="shards"] .layer-shards {
            opacity: 1;
            visibility: visible;
        }

        /* -----------------------------------------
           OPTION 1: DIGITAL STITCHING (Falling Threads)
        ----------------------------------------- */
        .layer-threads {
            background-color: #050505;
            overflow: hidden;
        }

        .stitch {
            position: absolute;
            width: 1px;
            height: 150vh;
            background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4), #fff, rgba(255, 255, 255, 0.4), transparent);
            animation: fallStitch linear infinite;
            opacity: 0;
        }

        .stitch-1 { left: 10%; animation-duration: 4s; animation-delay: 0s; }
        .stitch-2 { left: 30%; animation-duration: 6s; animation-delay: 1s; width: 2px; }
        .stitch-3 { left: 50%; animation-duration: 3s; animation-delay: 2s; }
        .stitch-4 { left: 70%; animation-duration: 5s; animation-delay: 0.5s; width: 2px; }
        .stitch-5 { left: 90%; animation-duration: 7s; animation-delay: 1.5s; }

        @keyframes fallStitch {
            0% { transform: translateY(-100%); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(100%); opacity: 0; }
        }

        /* -----------------------------------------
           OPTION 2: SONIC RUNWAY (Pulsing Rings)
        ----------------------------------------- */
        .layer-pulse {
            
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1!important;
            visibility: visible!important;
        }

        .pulse-ring {
            position: absolute;
            border: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: 50%;
            box-shadow: 0 0 40px rgba(255, 255, 255, 0.05) inset;
            animation: ripple 8s infinite ease-out;
            opacity: 0;
        }

        .ring-1 { animation-delay: 0s; }
        .ring-2 { animation-delay: 2.6s; }
        .ring-3 { animation-delay: 5.2s; }

        @keyframes ripple {
            0% { width: 0; height: 0; opacity: 1; border-width: 3px; }
            100% { width: 150vw; height: 150vw; opacity: 0; border-width: 1px; }
        }

/* -----------------------------------------
           OPTION 2: PAPARAZZI (Runway Camera Flashes)
        ----------------------------------------- */
        .layer-flash {
            /*background-color: #000000;*/
            overflow: hidden;
        }

        .camera-flash {
            position: absolute;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, transparent 60%);
            opacity: 0;
            border-radius: 50%;
            animation: flashAnim 6s infinite;
            transform: translate(-50%, -50%);
        }

        /* Randomly scattered flashes with different timings */
        .flash-1 { top: 25%; left: 30%; animation-delay: 1.2s; animation-duration: 7s; }
        .flash-2 { top: 60%; left: 80%; animation-delay: 3.5s; animation-duration: 8s; }
        .flash-3 { top: 85%; left: 15%; animation-delay: 0.5s; animation-duration: 5s; }
        .flash-4 { top: 35%; left: 75%; animation-delay: 5.1s; animation-duration: 9s; }
        .flash-5 { top: 50%; left: 45%; animation-delay: 2.8s; animation-duration: 6.5s; }
        .flash-6 { top: 15%; left: 60%; animation-delay: 4.2s; animation-duration: 7.5s; }

        @keyframes flashAnim {
            0%, 96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            98% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
        }

        /* -----------------------------------------
           OPTION 3: PATTERN GEOMETRY (Tailoring Drafts)
        ----------------------------------------- */
        .layer-pattern {
            /*background-color: #030303;*/
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .geo-shape {
            position: absolute;
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 50%;
            /* Gives a subtle glowing edge like tailor's chalk */
            box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.01);
        }

        .geo-1 {
            width: 90vw; height: 90vw;
            max-width: 1200px; max-height: 1200px;
            animation: spin 60s linear infinite;
            border-left: 1px solid rgba(255, 255, 255, 0.15);
        }

        .geo-2 {
            width: 65vw; height: 65vw;
            max-width: 900px; max-height: 900px;
            animation: spin 40s linear infinite reverse;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
        }

        .geo-3 {
            width: 40vw; height: 40vw;
            max-width: 500px; max-height: 500px;
            animation: spin 20s linear infinite;
            border-right: 1px solid rgba(255, 255, 255, 0.15);
        }
        
        .geo-4 {
            width: 15vw; height: 15vw;
            max-width: 200px; max-height: 200px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

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