/* --- 1. CORE VARIABLES & RESET --- */
        :root {
            --bg-dark: #050505;
            --bg-panel: #0a0a0a;
            --primary-orange: #FF5E00;
            --primary-glow: rgba(255, 94, 0, 0.4);
            --text-white: #ffffff;
            --text-gray: #888888;
            --glass-border: rgba(255, 255, 255, 0.08);
            --glass-bg: rgba(255, 255, 255, 0.03);
            --font-head: 'Space Grotesk', sans-serif;
            --font-body: 'Outfit', sans-serif;
            --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
            
            /* Fluid Padding */
            --fluid-pad: max(2rem, 5vw); 
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        html.lenis { height: auto; }
        .lenis.lenis-smooth { scroll-behavior: auto !important; }
        .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
        .lenis.lenis-stopped { overflow: hidden; }

        body {
            background-color: var(--bg-dark);
            color: var(--text-white);
            font-family: var(--font-body);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* --- 3. UTILITIES & GRAIN --- */
        .noise-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 9000; opacity: 0.03;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }
        
        .text-orange { color: var(--primary-orange); }
        .text-outline { -webkit-text-stroke: 1px rgba(255,255,255,0.8); color: transparent; }
        .center { text-align: center; }
        .section-tag {
            display: block; font-family: var(--font-head); font-size: 0.85rem;
            letter-spacing: 3px; color: var(--primary-orange); margin-bottom: 1rem;
            text-transform: uppercase;
        }

      
        /* --- 5. HERO SECTION --- */
        .hero-section {
            height: 100vh; width: 100%; position: relative;
            display: flex; justify-content: center; align-items: center;
            overflow: hidden;
        }
        .hero-bg { position: absolute; inset: 0; z-index: -1; }
        .grid-overlay {
            position: absolute; inset: 0;
            background-image: linear-gradient(var(--bg-dark) 2px, transparent 2px), linear-gradient(90deg, var(--bg-dark) 2px, transparent 2px);
            background-size: 60px 60px; background-color: rgba(255,255,255,0.015);
            mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
        }
        .gradient-orb {
            position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5;
        }
        .orb-1 {
            width: 500px; height: 500px; background: var(--primary-orange);
            top: 10%; left: 10%; animation: float 10s infinite ease-in-out;
        }
        .orb-2 {
            width: 400px; height: 400px; background: #9b2c2c;
            bottom: 10%; right: 10%; animation: float 14s infinite ease-in-out reverse;
        }
        @keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, -60px); } }

        .hero-content { text-align: center; z-index: 2; padding: 0 1rem; }
        .hero-label {
            font-family: var(--font-head); letter-spacing: 8px; font-size: 0.8rem;
            margin-bottom: 1.5rem;
        }
        /* Advanced: Fluid Typography using clamp() */
        .hero-title {
            font-family: var(--font-head); 
            font-size: clamp(3rem, 12vw, 7rem); 
            line-height: 0.95; font-weight: 800; margin-bottom: 2rem;
            text-transform: uppercase;
        }
        .hero-title .line { display: block; overflow: hidden; }
        .hero-title .word { transform: translateY(100%); }
        .hero-sub {
            max-width: 600px; margin: 0 auto 3rem; 
            font-size: clamp(1rem, 2vw, 1.1rem); 
            color: var(--text-gray);
        }

        /* Magnetic Button */
        .btn-magnetic {
            display: inline-block; padding: 1.2rem 3rem;
            border: 1px solid var(--primary-orange); color: var(--primary-orange);
            text-decoration: none; font-family: var(--font-head);
            text-transform: uppercase; font-weight: 600; letter-spacing: 2px;
            border-radius: 50px; position: relative; overflow: hidden;
            transition: color 0.4s;
        }
        .btn-fill {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--primary-orange); z-index: -1;
            transform: translateY(100%); transition: transform 0.4s var(--ease-out);
        }
        .btn-magnetic:hover { color: #000; }
        .btn-magnetic:hover .btn-fill { transform: translateY(0); }

        /* --- 6. FEATURED SECTION --- */
        .featured-section { padding: 10vh var(--fluid-pad); }
        .featured-container { margin-top: 3rem; perspective: 1000px; }
        .featured-card {
            background: var(--glass-bg); border: 1px solid var(--glass-border);
            border-radius: 20px; padding: 3rem; display: grid;
            grid-template-columns: 1.2fr 1fr; gap: 4rem;
            backdrop-filter: blur(20px); transform-style: preserve-3d;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
            /* Initial state for GSAP */
            opacity: 0;
            transform: translateY(50px);
            
            /* General Hover Effect for the Card */
            transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease;
        }
        .featured-card:hover {
            /* Slight lift and enhanced shadow on hover */
            transform: translateY(-5px) translateZ(50px);
            box-shadow: 0 40px 80px -15px rgba(0,0,0,0.8);
        }
        .featured-image {
            position: relative; border-radius: 12px; overflow: hidden;
            height: 450px; transform: translateZ(20px);
        }
        .featured-image img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.7s var(--ease-out);
        }
        .featured-card:hover .featured-image img { transform: scale(1.05); }
        
        .featured-info {
            display: flex; flex-direction: column; justify-content: center;
            transform: translateZ(40px);
        }
        /* Advanced: Fluid Typography for game titles */
        .game-title {
            font-family: var(--font-head); 
            font-size: clamp(2rem, 5vw, 3.5rem); 
            margin-bottom: 1rem; line-height: 1; font-weight: 700;
        }
        .game-desc { color: var(--text-gray); line-height: 1.7; margin-bottom: 2rem; font-size: 1.05rem; }
        .game-stats { display: flex; gap: 2rem; margin-bottom: 2.5rem; }
        .stat {
            display: flex; align-items: center; gap: 0.5rem;
            font-family: var(--font-head); font-size: 0.9rem; color: var(--primary-orange);
        }
        .stat i {
            transition: text-shadow 0.3s ease;
            text-shadow: none;
        }
        .featured-card:hover .stat i {
            text-shadow: 0 0 10px var(--primary-orange);
        }

        /* Hover Effect 3: Button Push Effect */
        .btn-glass {
            background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
            color: #fff; padding: 1rem 2rem; font-family: var(--font-head);
            text-transform: uppercase; cursor: pointer; display: flex;
            align-items: center; gap: 10px; width: fit-content;
            position: relative;
            transform: translateZ(0); 
            box-shadow: 0 0 0 transparent;
            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background 0.3s, border-color 0.3s, color 0.3s;
        }
        .btn-glass:hover { 
            background: var(--primary-orange); 
            border-color: var(--primary-orange); 
            color: #000; 
            transform: scale(0.98); 
            box-shadow: 0 5px 20px rgba(255, 94, 0, 0.4); 
        }

        /* --- 7. HORIZONTAL GAMES SECTION (IMPROVED) --- */
        .horizontal-games-section {
            padding: 10vh 0;
            position: relative;
            overflow: hidden;
            background: var(--bg-panel); 
        }

        .horizontal-header {
            padding: 0 var(--fluid-pad);
            margin-bottom: 4rem;
            /* Initial state for GSAP */
            opacity: 0;
            transform: translateY(20px);
        }

        .horizontal-scroll-container {
            position: relative;
            width: 100%;
            height: 85vh; 
            overflow-x: scroll;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }

        /* Hide scrollbar on mobile devices for cleaner look */
        .horizontal-scroll-container {
            scrollbar-width: none; 
        }
        .horizontal-scroll-container::-webkit-scrollbar {
            display: none; 
        }

        .games-horizontal {
            display: flex;
            height: 100%;
            width: max-content;
        }

        .horizontal-game-card {
            width: 100vw;
            height: 100%;
            flex-shrink: 0;
            scroll-snap-align: start;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 var(--fluid-pad);
        }

        .horizontal-game-content {
            display: grid;
            grid-template-columns: 1.3fr 1fr; 
            gap: 5rem; 
            align-items: center;
            width: 100%;
            max-width: 1500px;
            
            /* Enhanced Initial State & Transition */
            opacity: 0.4;
            transform: scale(0.95) translateX(50px);
            transition: all 0.8s var(--ease-out);
        }

        .horizontal-game-card.active .horizontal-game-content {
            opacity: 1;
            transform: scale(1) translateX(0);
        }
        
        /* New Hover Effect for Horizontal Card Content */
        .horizontal-game-content {
            transition: all 0.5s var(--ease-out);
        }
        .horizontal-game-card:hover .horizontal-game-content {
            transform: scale(1.01) translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
        }


        .horizontal-game-media {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            height: 550px; 
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7);
            border: 1px solid var(--glass-border);
        }

        .horizontal-game-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s var(--ease-out);
        }
        .horizontal-game-card:hover .horizontal-game-media img {
            transform: scale(1.05);
        }

        .horizontal-game-info {
            padding: 0;
        }
        
        .horizontal-game-title {
            font-family: var(--font-head);
            font-size: clamp(2.5rem, 6vw, 4.5rem); 
            margin-bottom: 1.5rem;
            line-height: 1.1;
            font-weight: 800;
        }

        .horizontal-game-desc {
            color: var(--text-gray);
            line-height: 1.7;
            margin-bottom: 2rem;
            font-size: 1.1rem;
        }

        .horizontal-game-stats {
            display: flex;
            gap: 2rem;
            margin-bottom: 2.5rem;
        }
        .horizontal-game-card:hover .stat i {
            text-shadow: 0 0 10px var(--primary-orange);
        }

        .horizontal-game-tags {
            margin-bottom: 1.5rem;
        }

        /* Hover Effect 5: Tag Lift */
        .horizontal-tag {
            font-size: 0.8rem;
            background: var(--primary-orange);
            color: var(--bg-dark);
            padding: 6px 12px;
            border-radius: 4px; 
            margin-right: 10px;
            font-family: var(--font-head);
            text-transform: uppercase;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 0.5rem;
            box-shadow: 0 0 0 transparent;
            transform: translateY(0);
            transition: all 0.2s ease-out;
        }
        .horizontal-tag:hover {
            transform: translateY(-2px); 
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
            filter: brightness(1.1); 
        }

        .scroll-indicator {
            position: absolute;
            bottom: 40px; 
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px; 
            z-index: 10;
        }

        .scroll-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .scroll-dot.active {
            width: 25px; 
            border-radius: 10px;
            background: var(--primary-orange);
        }

        .scroll-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 60px; 
            height: 60px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            opacity: 0.8;
        }

        .scroll-arrow:hover {
            background: var(--primary-orange);
            color: #000;
            opacity: 1;
            transform: translateY(-50%) scale(1.05);
        }

        .scroll-arrow.left {
            left: var(--fluid-pad);
        }

        .scroll-arrow.right {
            right: var(--fluid-pad);
        }

        /* --- 8. PARALLAX SECTION --- */
        .parallax-section {
            height: 60vh; position: relative; overflow: hidden;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
        }
        .parallax-bg {
            position: absolute; top: -20%; left: 0; width: 100%; height: 140%;
            background: url('https://images.unsplash.com/photo-1511512578047-dfb367046420?q=80&w=2071&auto=format&fit=crop') no-repeat center/cover;
            opacity: 0.15; z-index: -1; filter: grayscale(100%);
        }
        /* Advanced: Fluid Typography for Parallax Text */
        .parallax-text {
            font-family: var(--font-head); 
            font-size: clamp(4rem, 10vw, 9vw); 
            font-weight: 800;
            line-height: 0.85; text-transform: uppercase; mix-blend-mode: overlay;
            /* Initial state for GSAP */
            transform: scale(0.8);
            opacity: 0;
        }
        
        /* --- 9. BEHIND THE SCENES --- */
        .dev-section { 
        padding: 10vh var(--fluid-pad);
        background: #020202; 
        position: relative;

        /* Background Image */
        background-image: url('../images/backpic-game.png');
        background-size: 150% ;
        background-repeat: no-repeat;

        /* FIXED BACKGROUND (correct property) */
        background-attachment: fixed;

        /* Optional: Better center the image */
        background-position: center;
       }

        .dev-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
        .code-block {
            background: #0f0f0f; border: 1px solid #222; border-radius: 10px;
            padding: 2rem; font-family: 'Courier New', monospace; font-size: 0.9rem;
            box-shadow: -20px 20px 60px rgba(0,0,0,0.8);
            transform: perspective(1000px) rotateY(10deg); transition: 0.5s;
            /* Initial state for GSAP */
            opacity: 0;
            transform: translateX(-50px);
            transform-origin: left center;
            transform-style: preserve-3d;
            transform: perspective(1000px) rotateY(10deg);
            transition: transform 0.5s ease;
            /* General Hover Effect for the Card */
            transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease;
            
        }
        .dev-visual:hover .code-block { transform: perspective(1000px) rotateY(0deg); }
        .code-header { display: flex; gap: 8px; margin-bottom: 1.5rem; }
        .dot { width: 12px; height: 12px; border-radius: 50%; }
        .red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }
        
        .c-p { color: #c678dd; } .c-b { color: #61afef; } .c-y { color: #e5c07b; } .c-o { color: #d19a66; } .c-w { color: #dcdfe4; }

        .dev-text h2 {
            font-family: var(--font-head); 
            font-size: clamp(2.5rem, 5vw, 3rem); 
            margin-bottom: 1.5rem; font-weight: 700;
        }
        .dev-text p { color: var(--text-gray); line-height: 1.7; margin-bottom: 2rem; }
        .tech-list li {
            list-style: none; margin-bottom: 10px; color: #fff;
            font-family: var(--font-head);
        }
        .tech-list i { color: var(--primary-orange); margin-right: 10px; }
        /* Initial state for GSAP */
        .dev-text {
            opacity: 0;
            transform: translateX(50px);
        }



        /* --- RESPONSIVE ADJUSTMENTS --- */
        @media (max-width: 900px) {
            .featured-card { 
                grid-template-columns: 1fr; 
                gap: 2rem; 
                padding: 2rem; 
            }
            .dev-layout { grid-template-columns: 1fr; }
            .featured-image { height: 300px; }
            
            /* Horizontal Section Mobile Improvements */
            .horizontal-game-content { 
                grid-template-columns: 1fr; 
                gap: 1.5rem; 
                padding: 1rem;
                max-width: 500px; 
                margin: 0 auto; 
            }
            .horizontal-game-card {
                padding: 0 var(--fluid-pad); 
            }
            .horizontal-game-media { 
                height: 250px; 
            }
            .horizontal-game-title {
                font-size: clamp(2rem, 8vw, 3rem); 
            }
            .scroll-arrow { 
                display: none; 
            }
            .horizontal-scroll-container {
                 height: auto; 
                 padding-bottom: 60px; 
            }
            .scroll-indicator {
                bottom: 10px; 
            }
            /* Reset dev section animation on mobile for better flow */
            .code-block, .dev-text {
                 transform: none !important;
                 opacity: 1 !important;
            }
        }
        @media (max-width: 500px) {
            .hero-sub { font-size: 0.9rem; }
            .horizontal-game-stats { flex-direction: column; gap: 1rem; }

        }