/* ================================================================
           PROJECT GALLERY — cinematic offset rhythm + WebGL shader distortion
           ================================================================ */
        .project-gallery-shell {
            width: 100%;
            padding-top: 2rem;
        }

        .project-gallery-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 24px;
            align-items: start;
        }

        .gallery-frame {
            position: relative;
            overflow: hidden;
            background: var(--color-surface, #0D0D10);
            isolation: isolate;
            min-height: 280px;
            cursor: default;
        }

        .gallery-frame::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            border: 1px solid rgba(255,255,255,.08);
            opacity: 0;
            transition: opacity 300ms ease;
            z-index: 4;
        }

        .gallery-frame .gallery-media {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transform: scale(1.018);
            transition: opacity 260ms ease, transform 700ms var(--ease-pulse);
            will-change: transform, opacity;
        }

        /* Slight overscan prevents displaced vertices from revealing clean corners. */
        .gallery-frame .gallery-shader-canvas {
            position: absolute;
            inset: -3%;
            width: 106% !important;
            height: 106% !important;
            max-width: none;
            display: block;
            z-index: 2;
            pointer-events: none;
            opacity: 0;
            transform: translateZ(0);
            transition: opacity 220ms ease;
            will-change: opacity;
        }

        .gallery-frame.shader-ready .gallery-shader-canvas {
            opacity: 1;
        }

        /* Original image remains underneath as a fallback if WebGL is unavailable. */
        .gallery-frame.shader-ready .gallery-media {
            opacity: 0;
        }

        .gallery-frame.gallery-layout-0 {
            grid-column: 1 / span 8;
            aspect-ratio: 16 / 10;
        }

        .gallery-frame.gallery-layout-1 {
            grid-column: 8 / span 5;
            aspect-ratio: 4 / 5;
            margin-top: 12vw;
        }

        .gallery-frame.gallery-layout-2 {
            grid-column: 2 / span 10;
            aspect-ratio: 16 / 9;
            margin-top: 4vw;
        }

        .gallery-frame.gallery-layout-3 {
            grid-column: 1 / span 5;
            aspect-ratio: 3 / 4;
            margin-top: 6vw;
        }

        .gallery-frame.gallery-layout-4 {
            grid-column: 6 / span 7;
            aspect-ratio: 16 / 10;
            margin-top: 1vw;
        }

        .gallery-index {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 5;
            font-family: 'Space Mono', monospace;
            font-size: 10px;
            letter-spacing: .08em;
            color: rgba(245,245,247,.78);
            mix-blend-mode: difference;
            pointer-events: none;
        }


        @media (max-width: 767px) {
            #hero-media-scene { transform: none !important; }
            .tilt-card { transform: none !important; }
            .tilt-card .tilt-media-inner { transform: none !important; }
            .project-gallery-grid { grid-template-columns: 1fr; gap: 18px; }
            .gallery-frame,
            .gallery-frame.gallery-layout-0,
            .gallery-frame.gallery-layout-1,
            .gallery-frame.gallery-layout-2,
            .gallery-frame.gallery-layout-3,
            .gallery-frame.gallery-layout-4 {
                grid-column: 1;
                margin-top: 0;
                aspect-ratio: 4 / 5;
                min-height: 0;
            }
            .gallery-frame:nth-child(3n) { aspect-ratio: 16 / 10; }
        }

        @media (prefers-reduced-motion: reduce) {
            #hero-media-scene,
            .tilt-card,
            .tilt-card .tilt-media-inner,
            .gallery-frame .gallery-media,
            .gallery-frame .gallery-shader-canvas {
                transform: none !important;
                transition: none !important;
                filter: none !important;
            }
        }