:root {
            --x: 50vw;
            --y: 50vh;
        }
        /* For Lenis smooth scroll */
        html.lenis {
            height: auto;
        }
        .lenis.lenis-smooth {
            scroll-behavior: auto !important;
        }
        .lenis.lenis-stopped {
            overflow: hidden;
        }
        body {
            font-family: 'Fira Code', monospace;
            background-color: #000000; /* Pure Black for infinite contrast */
            color: #c9d1d9;
            overflow-x: hidden;
        }
        .container {
            position: relative;
            z-index: 2;
        }
        .terminal-header {
            background-color: #161b22;
            border-bottom: 1px solid #30363d;
        }
        .terminal-window {
            border: 1px solid #30363d;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
        }
        .prompt::before {
            content: 'irfan@:~$ ';
            color: #58a6ff;
        }
        .cursor {
            display: inline-block;
            background-color: #58a6ff;
            width: 10px;
            height: 1.2em;
            animation: blink 1s step-end infinite;
        }
        @keyframes blink {
            from, to { background-color: transparent }
            50% { background-color: #58a6ff; }
        }
        .scanlines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: repeating-linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.2),
                rgba(0, 0, 0, 0.2) 1px,
                transparent 1px,
                transparent 3px
            );
            z-index: 9999;
        }
        .clickable-tag, .project-card, .certificate-card, .experience-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #30363d;
            transform: translateZ(0);
            backface-visibility: hidden;
        }
        .clickable-tag:hover, .project-card:hover, .certificate-card:hover, .experience-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 0 15px rgba(88, 166, 255, 0.4);
            border-color: #58a6ff;
            z-index: 10;
            position: relative;
        }
        .skill-tag {
            transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .skill-tag:hover {
            transform: scale(1.05);
            /* Removed the hardcoded background/text color so Tailwind hover classes work correctly */
        }
        .certificate-card {
            overflow: hidden;
            position: relative;
        }
        .certificate-card .card-bg {
            width: 100%;
            height: 150%; /* Taller to allow for movement */
            background-size: cover;
            background-position: center;
            position: absolute;
            top: -25%; /* Start in the middle */
            left: 0;
            will-change: transform;
            transform: translateZ(0); /* GPU layer promotion */
        }
        
        #matrix-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.15;
            will-change: contents;
            transform: translateZ(0);
        }
                
        /* High-End Custom Cursor */
        
        
        

        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            will-change: opacity, transform;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
            will-change: auto;
        }
        .reveal-child {
            transition-delay: var(--delay, 0s);
        }
        .glitch-title {
            position: relative;
        }
        .glitch-title.visible::before,
        .glitch-title.visible::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            overflow: hidden;
        }
        .glitch-title.visible::before {
            left: 2px;
            text-shadow: -1px 0 #ff00c1;
            animation: glitch-anim-1 2s infinite linear alternate-reverse;
        }
        .glitch-title.visible::after {
            left: -2px;
            text-shadow: -1px 0 #00fff9;
            animation: glitch-anim-2 2s infinite linear alternate-reverse;
        }
        @keyframes glitch-anim-1 {
            0% { clip-path: inset(10% 0 80% 0); } 20% { clip-path: inset(50% 0 20% 0); } 40% { clip-path: inset(25% 0 60% 0); } 60% { clip-path: inset(80% 0 10% 0); } 80% { clip-path: inset(40% 0 45% 0); } 100% { clip-path: inset(65% 0 25% 0); }
        }
        @keyframes glitch-anim-2 {
            0% { clip-path: inset(70% 0 15% 0); } 20% { clip-path: inset(20% 0 70% 0); } 40% { clip-path: inset(65% 0 5% 0); } 60% { clip-path: inset(30% 0 55% 0); } 80% { clip-path: inset(90% 0 2% 0); } 100% { clip-path: inset(40% 0 38% 0); }
        }
        
        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.6);
            backdrop-filter: blur(5px);
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background-color: #050505;
            padding: 2.5rem;
            border: 1px solid rgba(34, 197, 94, 0.4);
            box-shadow: 0 0 30px rgba(34, 197, 94, 0.15);
            width: 90%;
            max-width: 800px;
            border-radius: 12px;
            position: relative;
            transform: translateX(100%);
            opacity: 0;
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
        }
        .modal.active .modal-content {
            transform: translateX(0);
            opacity: 1;
        }
        #modal-cert-image {
            transform: scale(0.9);
            transition: transform 0.5s 0.2s cubic-bezier(0.25, 1, 0.5, 1);
        }
         .modal.active #modal-cert-image {
            transform: scale(1);
        }

        .close-button { color: #aaa; position: absolute; top: 15px; right: 25px; font-size: 35px; font-weight: bold; }
        .close-button:hover, .close-button:focus { color: #58a6ff; }
        .social-icon { color: #c9d1d9; transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease; }
        .social-icon:hover { transform: scale(1.1) translateY(-3px); color: #58a6ff; filter: drop-shadow(0 0 8px #58a6ff); }
        
        .expand-fade {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 200px;
            background: linear-gradient(to top, #0d1117, transparent);
            pointer-events: auto;
            transition: opacity 0.5s ease, pointer-events 0.5s ease;
            z-index: 5;
        }
        #skills-container + .expand-fade { height: 100px; } /* Smaller fade for skills */
        
        .expandable-container.expanded + .expand-fade {
            opacity: 0;
            pointer-events: none;
        }
        
        .terminal-btn {
            position: relative;
            overflow: hidden;
        }
        .terminal-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.2), transparent);
            transition: left 0.5s ease;
        }
        .terminal-btn:hover::before {
            left: 100%;
        }
        /* Side Navigation */
        #side-nav-container {
            position: fixed;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            z-index: 1001;
            height: 300px;
            width: 250px; /* Increased width for text */
            pointer-events: none;
        }
        #nav-trigger {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 35px;
            height: 120px;
            background-color: rgba(88, 166, 255, 0.15);
            border: 1px solid rgba(88, 166, 255, 0.4);
            border-left: none;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
            cursor: pointer;
            pointer-events: all;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #58a6ff;
            font-weight: bold;
            font-size: 0.85rem;
            letter-spacing: 2px;
            box-shadow: 0 0 10px rgba(88, 166, 255, 0.2);
            animation: nav-pulse 3s infinite alternate;
        }
        .nav-trigger-text {
            transform: rotate(-90deg);
            white-space: nowrap;
            text-shadow: 0 0 5px rgba(88, 166, 255, 0.5);
        }
        @keyframes nav-pulse {
            0% { box-shadow: 0 0 5px rgba(88, 166, 255, 0.1); background-color: rgba(88, 166, 255, 0.1); }
            100% { box-shadow: 0 0 15px rgba(88, 166, 255, 0.5); background-color: rgba(88, 166, 255, 0.25); }
        }
        #side-nav-container:hover #nav-trigger {
            background-color: rgba(88, 166, 255, 0.4);
            box-shadow: 0 0 20px rgba(88, 166, 255, 0.6);
            animation: none;
        }
        #side-nav {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(13, 17, 23, 0.8);
            backdrop-filter: blur(5px);
            border: 1px solid #30363d;
            border-left: none;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            transform: translateX(-100%);
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            pointer-events: all;
        }
        #side-nav-container:hover #side-nav {
            transform: translateX(0);
        }
        /* Accessibility: Focus visible */
        :focus-visible {
            outline: 2px solid #58a6ff;
            outline-offset: 4px;
            border-radius: 4px;
        }

        /* Accessibility: Reduced Motion */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
            .glitch-title.visible::before,
            .glitch-title.visible::after {
                animation: none !important;
                display: none !important;
            }
            .scanlines {
                display: none !important;
            }
            #nav-trigger {
                animation: none !important;
            }
        }
        
        /* ========================================
           MOBILE EXPERIENCE OPTIMIZATION
           ======================================== */
        @media (max-width: 768px) {
            /* --- Typography --- */
            html { font-size: 14px; }
            body { font-family: 'Space Grotesk', sans-serif; line-height: 1.6; }
            h2.glitch-title {
                font-size: 1.6rem !important;
                margin-bottom: 1.5rem !important;
                padding-bottom: 0.75rem !important;
                line-height: 1.3;
            }
            h3 { font-size: 1.15rem !important; }
            p, li { font-size: 0.9rem; line-height: 1.65; }

            /* --- Section Spacing (tighter on mobile) --- */
            section.mb-24 { margin-bottom: 3rem !important; }
            section.mb-48 { margin-bottom: 3rem !important; }

            /* --- Layout Wrapper --- */
            #layout-wrapper {
                padding-top: 4.5rem !important; /* Space for mobile navbar */
                padding-left: 1rem !important;
                padding-right: 1rem !important;
                padding-bottom: 2rem !important;
            }

            /* --- Grid gap on mobile --- */
            #layout-wrapper > .grid {
                gap: 1.5rem !important;
            }

            /* --- Cards --- */
            .experience-card, .project-card {
                padding: 1.25rem !important;
            }
            .experience-card {
                border-radius: 0.75rem;
            }

            /* --- Experience logos: smaller on mobile --- */
            .experience-card img {
                width: 5rem !important; /* 80px instead of 192px */
                height: auto;
            }
            /* Education logos slightly larger */
            #education .experience-card img {
                width: 4.5rem !important;
            }

            /* --- Experience card flex layout on mobile --- */
            .experience-card .flex {
                gap: 1rem !important;
                align-items: flex-start !important;
            }
            

            /* --- Certificates --- */
            #certificates-container {
                padding-bottom: 1rem !important;
            }
            .certificate-card {
                height: 10rem !important; /* Shorter on mobile */
            }
            #certificate-grid {
                gap: 0.75rem !important;
                grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on mobile */
            }
            
            
            

            /* --- Skills grid --- */
            #skills-grid {
                padding: 1rem !important;
                gap: 0.5rem !important;
            }
            .skill-tag {
                font-size: 0.75rem !important;
                padding: 0.35rem 0.75rem !important;
            }

            /* --- Projects grid: single column on mobile --- */
            #project-grid {
                grid-template-columns: 1fr !important;
                gap: 0.75rem !important;
                padding-bottom: 0 !important;
            }

            /* --- Interests grid --- */
            #interests-grid {
                padding: 1rem !important;
                gap: 0.5rem !important;
            }

            /* --- Contact --- */
            #contact .text-center {
                padding: 1.5rem !important;
            }

            /* --- Glitch title pseudo-elements: disable on mobile for perf --- */
            .glitch-title::before,
            .glitch-title::after {
                display: none !important;
            }

            /* --- Modal on mobile --- */
            .modal-content {
                width: 95% !important;
                padding: 1.5rem !important;
                max-height: 85vh;
                overflow-y: auto;
            }

            /* --- Floating terminal position on mobile --- */
            #floating-terminal-wrapper {
                bottom: 1rem !important;
                right: 1rem !important;
            }
            #floating-terminal-window {
                bottom: 3.5rem !important;
            }

            /* --- Boot sequence terminal on mobile --- */
            #terminal-body {
                height: 300px !important;
                font-size: 0.75rem;
            }

            /* --- Disable hover transforms on mobile (perf) --- */
            .clickable-tag:hover, .project-card:hover,
            .certificate-card:hover, .experience-card:hover {
                transform: none !important;
                box-shadow: none !important;
            }
            
            /* --- Mobile Tactile Feedback --- */
            .clickable-tag:active, .project-card:active,
            .certificate-card:active, .experience-card:active {
                transform: scale(0.98) !important;
                border-color: rgba(34, 197, 94, 0.5) !important;
                transition: transform 0.1s ease-out, border-color 0.1s ease-out !important;
            }
        }

        /* Tablet tweaks (769px - 1024px) */
        @media (min-width: 769px) and (max-width: 1024px) {
            #certificate-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
            #project-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }


/* Hide scrollbar for minimap */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Screen reader only - for accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Performance: contain layout for cards */
.experience-card, .project-card {
    contain: layout style;
}

/* Optimize logo images */
.experience-card img {
    aspect-ratio: auto;
    object-fit: contain;
}

/* Smooth transitions on all interactive elements */
a, button, .clickable-tag {
    -webkit-tap-highlight-color: transparent;
}

/* Mobile Polish Animations */
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.animate-cursor-blink {
    animation: cursor-blink 1s step-end infinite;
}

.mobile-nav-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.mobile-menu-active .mobile-nav-item {
    opacity: 1;
    transform: translateY(0);
}