/* ═══════════════════════════════════════════════════════════════════════
    MINEDEV — webgl canvas, rgb overlay, quote intro, entry screen
    Split from original index.html lines 324-459
    ═══════════════════════════════════════════════════════════════════════ */

        /* ── WEBGL CANVAS ───────────────────────── */
        #webgl-canvas {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 1; display: none; pointer-events: auto;
        }

        /* ── RGB PARALLAX OVERLAY ───────────────── */
        #rgb-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 2; pointer-events: none; display: none;
            mix-blend-mode: screen; opacity: 0;
        }
        #rgb-overlay canvas { width: 100%; height: 100%; }

        /* ── QUOTE INTRO ────────────────────────── */
        #quote-intro {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: #000; display: flex; flex-direction: column;
            justify-content: center; align-items: center; z-index: 10001;
            padding: 40px;
            opacity: 0;
            will-change: opacity, transform, filter;
        }
        .quote-text {
            font-size: clamp(1.1rem, 2.5vw, 1.8rem);
            line-height: 1.45;
            text-align: center;
            max-width: 700px;
            font-variation-settings: "wght" 300;
            letter-spacing: 0.02em;
            color: rgba(255,255,255,0.9);
            opacity: 0;
            transform: translateY(20px);
            filter: blur(4px);
            will-change: opacity, transform, filter;
        }
        .quote-author {
            font-size: clamp(0.7rem, 1.2vw, 0.85rem);
            text-transform: uppercase;
            letter-spacing: 3px;
            color: rgba(255,255,255,0.4);
            font-variation-settings: "wght" 300;
            margin-top: 20px;
            opacity: 0;
            transform: translateY(14px);
            filter: blur(3px);
            will-change: opacity, transform, filter;
        }

        /* ── ENTRY SCREEN ───────────────────────── */
        #entry-screen {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: transparent; display: flex; flex-direction: column;
            justify-content: center; align-items: center; z-index: 10000;
            opacity: 0;
            will-change: opacity;
        }
        #colorbends-canvas {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 9999; pointer-events: none;
        }
        #entry-btn {
            position: relative;
            background: rgba(3,3,3,0.7);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid #262626;
            color: var(--text-color);
            padding: 12px 36px;
            font-size: 13px;
            letter-spacing: 3px;
            border-radius: 6px;
            font-family: inherit;
            font-variation-settings: "wght" 300;
            overflow: hidden;
            text-transform: uppercase;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
            cursor: none;
            z-index: 2;
            opacity: 0;
        }
        #entry-btn:hover {
            transform: translateY(-2px) scale(1.02);
            background: rgba(17,17,17,0.85);
            border-color: rgba(255,255,255,0.2);
        }
        #entry-btn:active {
            transform: scale(0.97);
        }
        /* Border shine sweep */
        #entry-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 6px;
            padding: 1px;
            background: linear-gradient(-75deg, #262626 30%, rgba(255,255,255,0.6) 50%, #262626 70%);
            background-size: 250% 100%;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: borderShine 3s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes borderShine {
            0%, 100% { background-position: 100% 0; opacity: 0.5; }
            50% { background-position: 0% 0; opacity: 1; }
        }
        /* Inner glow sweep */
        #entry-btn::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(-75deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
            background-size: 250% 100%;
            border-radius: 6px;
            z-index: 0;
            animation: entryShine 3s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes entryShine {
            0%, 100% { background-position: 100% 0; opacity: 0; }
            50% { background-position: 0% 0; opacity: 1; }
        }
        #entry-btn .btn-text {
            position: relative;
            z-index: 2;
        }

        #transition-overlay {
            position: fixed; top: -30vh; left: -30vw; width: 160vw; height: 160vh;
            background: radial-gradient(circle at 50% 50%, rgba(255, 239, 255, 0.95) 0%, rgba(150, 150, 255, 0.4) 25%, rgba(80, 40, 120, 0.15) 50%, transparent 75%);
            z-index: 10001; pointer-events: none; opacity: 0; transform: scale(0.1);
            mix-blend-mode: screen; filter: blur(40px);
            will-change: opacity, transform;
        }