/* Media viewer layer - sits between background and content */
        
        .media-viewer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            /* pointer-events: none; */
            pointer-events: auto;
            opacity: 0;
            transition: opacity 0.6s ease;
        }
        
        .media-viewer.active {
            opacity: 1;
        }
        
        .media-viewer video,
        .media-viewer img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.7) contrast(1.1);
        }
        /* Ensure collapse1 content is above media viewer */
        
        #collapse1 {
            position: relative;
            z-index: 2;
        }
        /* Button row fade states */
        
        #collapse1 .row {
            transition: opacity 0.4s ease;
        }
        
        #collapse1.buttons-hidden .row {
            opacity: 0;
            pointer-events: none;
        }
        
        #collapse1.buttons-visible .row {
            opacity: 1;
            pointer-events: all;
        }
        /* Mouse indicator */
        
        .mouse-indicator {
            position: fixed;
            left: 18px;
            width: 14px;
            height: 14px;
            border: 2px solid #e0e9fe;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transition: transform 0.15s ease;
            opacity: 0;
            mix-blend-mode: difference;
        }
        
        .mouse-indicator.active {
            opacity: 1;
        }
        /* Video Controls */
        
        .video-controls {
            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 3;
            display: flex;
            gap: 8px;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }
        
        .video-controls.visible {
            opacity: 1;
            pointer-events: all;
        }
        
        .video-control-btn {
            background: rgba(0, 0, 0, 0.5);
            /* border: 1px solid #e0e9fe; */
            color: #ffffff;
            width: 32px;
            height: 32px;
            border-radius: 0px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            font-size: 14px;
        }
        
        .video-control-btn:hover {
            background: rgba(26, 58, 204, 1);
            transform: scale(1.05);
        }
        
        .video-control-btn i {
            pointer-events: none;
        }
        /* When video is user-paused, controls are hover-only */
        
        #collapse1.video-paused .media-controls {
            opacity: 0;
            pointer-events: none;
        }
        
        #collapse1.video-paused .media-controls:hover {
            opacity: 1;
            pointer-events: all;
        }