@font-face {
    font-family:"Xirod";
    src: url(fonts/Xirod.otf);
}
  
@font-face {
  font-family:"QEHADEX";
    src: url(fonts/QEHADEX.ttf);
}
    
@font-face {
    font-family:"The\ Last\ Shuriken";
    src: url(fonts/The\ Last\ Shuriken.otf);

} 
/* ✅ THE FIX: Every font gets its own block */

@font-face {
    font-family: "Xirod";
    src: url("fonts/Xirod.otf");
} 

@font-face {
    font-family: "Valorant";
    src: url("fonts/Valorant Font.ttf");
}

@font-face {
    font-family: "CORETDemo";
    src: url("fonts/CORETDemo.otf");
}

@font-face {
    font-family: "Create Future";
    src: url("fonts/Create Future.otf");
}

@font-face {
    font-family: "telon";
    src: url("fonts/TELONE-Thinpersonal.otf");
}

@font-face {
    font-family: "911porsc";
    src: url("fonts/911porschav3bold.ttf");
}
 :root {
        /* Main Layout Colors */
        --bg-color: #fafafa;
        --line-color: #eaeaea;
        --text-main: #0a0a0a;
        --font-mono: 'Courier New', Courier, monospace;
        --font-sans: 'Helvetica Neue', Arial, sans-serif;
        
        /* Menu Colors */
        --neon-green: #C6FF4D;
        --menu-bg: #000000;
        --white: #FFFFFF;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: var(--font-sans);
        background-color: var(--bg-color);
        color: var(--text-main);
        overflow-x: hidden;
        margin: 0;
    }
    
/* ==========================================
   PERFORMANCE & 60FPS OPTIMIZATIONS
   ========================================== */

/* 1. Forces the GPU to handle the heavy lifting for all moving parts */
.motion-item, 
.bg-huge-title, 
.social-icons a, 
.return-up-btn,
.tech-input {
    /* Tells the browser "Hey, be ready to animate these specific properties!" */
    will-change: transform, opacity; 
    
    /* Secret trick: Forces hardware acceleration and stops text from glitching/flickering during animations */
    backface-visibility: hidden; 
    transform: translateZ(0); 
}

/* ==========================================
   LOADING SCREEN STYLES
   ========================================== */
/* Locks the screen from scrolling while loading */
body.loading {
    overflow: hidden; 
}

#ldr-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #050505; /* Deep void black */
    z-index: 9999; /* Keeps it on top of absolutely everything */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Snappy, heavy slide-up effect when it finishes */
    transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1); 
}

/* Slides the whole black screen up and off the monitor */
#ldr-loader.slide-away {
    transform: translateY(-100%);
}

.slot-machine {
    display: flex;
    gap: 5vw; /* Spaces the icons out nicely */
    margin-bottom: 30px;
}

.slot-icon {
    font-size: clamp(3rem, 8vw, 6rem);
    color: #ffffff; /* Flashing icons are pure white */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    transition: color 0.1s, filter 0.1s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* The style when the final icons lock into place */
.slot-icon.locked {
    color: var(--neon-green, #C6FF4D); 
    filter: drop-shadow(0 0 25px rgba(198, 255, 77, 0.6)); /* Massive neon glow */
    transform: scale(1.15); /* Pops out slightly */
}

.loading-text {
    font-family: var(--font-mono);
    color: #555;
    letter-spacing: 8px;
    font-size: 0.9rem;
    animation: blinkText 1s infinite;
}

@keyframes blinkText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}


    /* CONTAINER FOR HERO PAGE */
    .hero-viewport {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    /* PARALLAX SECTION */
    .parallax-scene {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
    }
/* ==========================================
   THE NEON BUILDING SIGN
   ========================================== */
.parallax.neon-sign {
    /* 1. Placement (You will need to tweak these numbers!) */
    /* Adjust the + pixels until it sits perfectly on the dark side of your building */
    top: calc(50% + 320px); 
    left: calc(50% + 785px); 
    
    /* Ensures it sits in front of building 5 (which is z-index 7) */
    z-index: 8; 
    
   
    
    /* 3. Text Styling */
    font-family: "911porsc"; /* Using your custom tech font */
    color: #C6FF4D;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    
   
}
    .parallax {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        will-change: transform;
        transition: transform 0.1s cubic-bezier(0.2, 0.49, 0.32, 0.99);
    }

    .parallax.bg { width: 120vw; height: 110vh; object-fit: cover; z-index: 1; }
    .parallax.text { width: 1080px; z-index: 2; pointer-events: auto; top: calc(30% + 20px); left: calc(50% - 280px); }
    .parallax.b1 { width: 350px; top: calc(50% + 230px); left: calc(50% - 820px); z-index: 4; }
    .parallax.b2 { width: 580px; top: calc(50% + 190px); left: calc(50% - 620px); z-index: 3; }
    .parallax.b31 { width: 280px; top: calc(40% + 340px); left: calc(50% - 10px); z-index: 7; }
    .parallax.b3 { width: 280px; top: calc(40% + 480px); left: calc(50% - 150px); z-index: 5; }
    .parallax.b4 { width: 330px; top: calc(50% + 130px); left: calc(50% + 350px); z-index: 6; }
    .parallax.b5 { width: 480px; top: calc(50% + 200px); left: calc(50% + 870px); z-index: 7; }

    .vignette {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.6));
    }

    /* UI LAYOUT OVER HERO */
    .layout-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20;
        display: flex;
        width: calc(100% - 4vw);
        height: 96vh;
        margin: 2vh 2vw;
        border: 1px solid var(--neon-green, #C6FF4D);
        background: transparent;
    }

    /* Sidebar */
    .sidebar {
        width: 60px;
        border-right: 1px solid var(--line-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0;
    }

    #menuTrigger { background: none; border: none; cursor: pointer; padding: 10px; }
    .menu-lines span { display: block; width: 20px; height: 2px; background: var(--text-main); margin-bottom: 6px; }
    .crosshair-icon { font-size: 24px; font-weight: 300; }
    .bottom-dots { font-family: var(--font-mono); font-weight: bold; }

    /* Main Content Area */
    .main-content { flex: 1; display: flex; flex-direction: column; }
    .top-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; border-bottom: 1px solid var(--line-color); }
    .logo-box { font-family: "Create Future"; width: 40px; height: 30px;color: #d3d3d3 ;; display: flex; align-items: center; justify-content: center; font-size: 30px; }
    .nav-links { display: flex; gap: 30px; }
    .top-nav a { text-decoration: none; color: var(--text-main); font-family: var(--font-mono); font-size: 0.75rem; font-weight: bold; letter-spacing: 1px; }

/* ==========================================
   THE "HIRE" TARGETING BUTTON
   ========================================== */
.hire-btn {
    background: transparent;
    border: 2px solid var(--neon-green, #C6FF4D);
    color: var(--neon-green, #C6FF4D);
    
    
    font-family:"Xirod" ; 
    font-weight: 800; /* Makes the text nice and thick */
    font-size: 1.1rem;
    letter-spacing: 1px;
    
    padding: 12px 35px;
    cursor: pointer;
    
    /* THE MAGIC SHAPE: Top-Left, Top-Right, Bottom-Right, Bottom-Left */
    border-radius: 4px 4px 4px 10px; 
    
    transition: all 0.3s ease;
}

/* Optional Hover Effect: Fills with green and glows */
.hire-btn:hover {
    background: var(--neon-green, #C6FF4D);
    color: #000;
    box-shadow: 0 0 20px rgba(198, 255, 77, 0.4);
    transform: translateY(-2px);
}
/* ==========================================
   GLOBAL STICKY NAV (FLOATS OVER EVERYTHING)
   ========================================== */
.global-sticky-nav {
    position: fixed; /* 📌 THIS is the magic word that freezes it on screen! */
    top: 0;
    left: 0;
    width: 100%;
    padding: 45px; /* Spacing from top and sides */
    display: flex;
    justify-content: space-between; /* Pushes Logo left, Menu right */
    align-items: center;
    
    z-index: 9999; /* Forces it to sit on top of all images and videos */
    pointer-events: none; /* Lets you click the background between them */
}
.global-sticky-nav #menuTrigger {
    pointer-events: auto; 
}
/* --- THE TARGETING RETICLE MENU BUTTON --- */
.global-sticky-nav #menuTrigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 45px;
    height: 45px;
    /* The color is set to white, but your mix-blend-mode will auto-invert it! */
    color: #C6FF4D; 
    outline: none;
}

/* Sizing the SVG container */
.target-icon {
    width: 100%;
    height: 100%;
    overflow: visible; /* Allows the animation to expand slightly outside the box */
}

/* Setting up the smooth animation timing */
.target-icon .bracket {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.target-icon .center-cross {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* Forces it to rotate perfectly from the dead center of the 32x32 SVG */
    transform-origin: 16px 16px; 
}

/* --- THE HOVER ANIMATIONS --- */

/* 1. The corners push outward */
#menuTrigger:hover .target-icon .tl { transform: translate(-2px, -2px); }
#menuTrigger:hover .target-icon .tr { transform: translate(2px, -2px); }
#menuTrigger:hover .target-icon .bl { transform: translate(-2px, 2px); }
#menuTrigger:hover .target-icon .br { transform: translate(2px, 2px); }

/* 2. The center cross rotates and scales up slightly like a camera focusing */
#menuTrigger:hover .target-icon .center-cross {
    transform: scale(1.2) rotate(90deg);
}
    /* SLIDE-OUT MENU */
    .side-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 600px;
        height: 100vh;
        background-color: var(--menu-bg);
        font-family: "QEHADEX";
        color: var(--white);
        z-index: 10000;
        padding: 40px 60px;
        display: flex;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        border-right: 1px solid #333;
    }
    .side-menu.open { transform: translateX(0); }
    .menu-header { display: flex; justify-content: flex-end; margin-bottom: 20px; }
    .close-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; }
    .menu-container { width: 100%; }
    .side-menu .label { font-size: 12px; font-weight: bold; margin-bottom: 20px; display: block; letter-spacing: 1px; color: var(--white); }
    .menu-list { list-style: none; padding: 0; margin: 0; }
    .menu-link {
        display: inline-flex; align-items: center; text-decoration: none;
        color: var(--white); background-color: transparent;
        font-size: clamp(30px, 5vw, 60px); font-weight: 900; line-height: 1;
        padding: 5px 20px; margin-bottom: 10px;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    .menu-link:hover, .menu-link.active {
        background-color: var(--neon-green); color: var(--menu-bg);
        clip-path: polygon(0% 0%, 92% 0%, 100% 30%, 100% 100%, 0% 100%);
        transform: translateX(15px); padding-left: 30px; 
    }
    .page-num { font-size: 12px; margin-left: 15px; font-family: var(--font-mono); opacity: 0; transform: translateX(-10px); transition: all 0.4s ease; }
/* --- 1. HERO PAGE (1ST PAGE) MOBILE FIXES --- */

@media (max-width: 1024px) {
    /* Slightly shrinks the giant text for tablets */
    .parallax.text { width: 800px; left: calc(50% - 200px); }
}

@media (max-width: 768px) {
    /* 1. Reset the Parallax Zoom so the background fills the screen */
    .parallax-scene { 
        transform: scale(1); 
    }
    
    /* 2. Make the background image stretch properly */
    .parallax.bg {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
    }

    /* 3. Resize the giant PORTFOLIO text to fit the phone screen */
    .parallax.text { 
        width: 90vw; /* Takes up 90% of the screen width */
        left: 50%;   /* Centers it perfectly */
        top: 40%;
    }

    /* 4. Hide some extra floating buildings on mobile to reduce clutter */
    .parallax.b1, .parallax.b4 {
        display: none;
    }

    /* 5. Fix the sidebar: Hide decorations, but keep the menu button alive! */
    .sidebar {
        width: 0; 
        border-right: none;
        position: absolute; /* Takes it out of the layout flow so it doesn't squish your page */
    }
    
    .scroll-indicator, .bottom-dots {
        display: none; /* Hides the crosshair and dots on mobile */
    }

    /* Move the menu button a little closer to the corner for phone screens */
    .global-sticky-nav {
        padding: 20px 25px; 
    }

    /* 6. Remove the green border box and let content fill the screen */
    .layout-wrapper {
        margin: 0;
        width: 100%;
        border: none;
    }

    /* 7. Put the Logo and HIRE button side-by-side again */
    .top-nav { 
        flex-direction: row; 
        justify-content: space-between;
        padding: 20px 25px; 
    }
}
    /* ==========================================
       MYSELF SECTION (WITH CUSTOM SHAPE)
       ==========================*/
        .myself-section {
        min-height: 100vh;
        background-color: #000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 100px 20px;
       /* Ensure the background matches your theme */
         /* 1. Semi-transparent background (adjust the 0.1 for more/less opacity) */
    background: rgba(255, 255, 255, 0.05); 
    
    /* 2. The magic frosted glass blur */
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    
    /* Optional: A subtle inner glow to mimic a glass edge */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
    /* Replacing solid black with a dark techy gradient */
    background: radial-gradient(circle at 15% 50%, rgba(0, 119, 255, 0.15), transparent 55%),
                radial-gradient(circle at 85% 30%, rgba(31, 1, 12, 0.13), transparent 45%);
    background-color: #000000; /* Deep dark background */
    }

    .shape-container {
        position: relative;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        background-color: #8e8f91; /* Light gray from image */
        clip-path: url(#folder-clip);
        display: flex;
        flex-direction: column;
        padding: 8% 6% 6% 6%;

        /* Apply the animation */
animation: fadeInScale linear;
animation-timeline: view();
animation-range: entry 0% cover 35%;
    }

   /* Update your existing shape-content class */
.shape-content {
    color: #000000;
    height: 100%;
    overflow-y: hidden;
    
    /* NEW: Grid Layout for two columns */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Splits 50/50 */
    gap: 40px; /* Space between text and image */
    align-items: center; /* Centers everything vertically */
}



/* ==========================================
   CYBER QUOTE BLOCK
   ========================================== */



/* Optional styling for the new right-side graphic container to match your tech theme */
/* Container for the right column to align it */
/* |||| add IMG ||| */
/* Container for the right column to align it */
.right-col {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* 1. The Outer Layer (The glowing neon border) */
.hero-border-wrap {
    width: 70%;
    height: 90%;
    min-height: 300px;
    
    padding: 2px; /* Border thickness */
    /* Adds radius to the uncut corners (Top-Right & Bottom-Left) */
    border-radius: 30px;
  -webkit-mask: 
        top left / 50% 100% no-repeat,
        bottom right / 50% 100% no-repeat;
    mask: 
        linear-gradient(135deg, transparent 30px, #000 31.5px) top left / 50% 100% no-repeat,
        linear-gradient(-45deg, transparent 30px, #000 31.5px) bottom right / 50% 100% no-repeat;
}

/* 2. The Inner Layer (Clips the image) */
/* 2. The Inner Layer (Clips the image) */
.hero-inner {
    width: 100%;
    height: 100%;
    background-color: #050505; 
    border-radius: 18px;
    clip-path: polygon(
        40px 0, 
        100% 0, 
        100% calc(100% - 40px), 
        calc(100% - 40px) 100%, 
        0 100%, 
        0 39px
    );
    
    /* FIX: Changed from 'fixed' to 'relative' so it stays inside your grid */
    position: relative; 
    overflow: hidden;
}
/* 3. The Image Formatting */
.hero-img {
    width: 110%;
    height: 110%;
    object-fit: cover; 
    
    /* 🟢 ADDED: High-contrast black and white filter */
    filter: grayscale(100%) contrast(1.4) brightness(0.8);
    
    /* Smooth transition for when we hover over it */
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
}

/* 🟢 ADDED: When you hover the box, the color returns and the contrast normalizes! */
.hero-inner:hover .hero-img {
    filter: grayscale(0%) contrast(1) brightness(1);
    transform: scale(1.05); /* Slight zoom */
}
/* ==========================================
   THE RIBBED GLASS OVERLAY EFFECT
   ========================================== */
.hero-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none; /* Ensures the hover effect still works through the glass */
    
    /* 1. Draws the heavy, uneven vertical glass ridges */
    background: repeating-linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.6) 0px,
        rgba(255, 255, 255, 0.1) 8px,
        transparent 8px,
        transparent 25px,
        rgba(0, 0, 0, 0.4) 25px,
        rgba(255, 255, 255, 0.05) 30px
    );
    
    /* 2. Adds the thick refraction blur to the image underneath */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    /* 3. Blends the dark/light ridges heavily into your face */
    mix-blend-mode: hard-light;
    
    /* Prepares the glass for the hover animation */
    transition: all 0.5s ease;
}

/* 🟢 ADDED: The glass slides away/fades out when hovered! */
.hero-inner:hover::after {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}
.hero-graphic {
    width: 100%;
    height: 100%;
    min-height: 250px;
    
    /* Creates a subtle frosted glass box inside your main shape */
    background: rgba(255, 255, 255, 0.03); 
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    
    /* Matches your neon green theme */
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.815); 
    
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ==========================================
   MYSHELF: BOTTOM RIGHT CORNER IMAGE
   ========================================== */
.corner-graphic {
    position: absolute; /* Takes it out of the normal layout flow */
    bottom: 40px;       /* Distance from the bottom edge */
    right: 40px;        /* Distance from the right edge */
    width: 120px;       /* Adjust this to make it bigger or smaller! */
    height: auto;       /* Keeps the image proportions perfect */
    z-index: 10;        /* Ensures it sits on top of the background */
    opacity: 0.60;
    /* Optional: A cool hover effect to match your interactive theme */
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3)); /* Adds a little shadow */
}

/* Optional: Makes it pop slightly when you hover over it */



/* Make sure the layout stacks neatly on mobile phones */
@media (max-width: 768px) {
    .shape-content {
        grid-template-columns: 1fr; /* Stacks into 1 column */
        text-align: center; /* Centers text for mobile */
    }
    
    .left-col .mt-8 {
        justify-content: center; /* Centers the LOC box on mobile */
    }
      .corner-graphic {
        width: 80px;
        bottom: 20px;
        right: 20px;
    }
}
/* ==========================================
   LEFT COLUMN ALIGNMENT FIX
   ========================================== */
.left-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Forces every element to hug the absolute left wall */
    text-align: left;
}

/* ==========================================
   MYSHELF "HELLO I'M" TEXT
   ========================================== */
.shape-content h1 {
    /* Swap "Valorant" with any of your custom fonts! 
       Try: "CORETDemo", "911porsc", or var(--font-mono) */
    font-family: "Xirod", var(--font-sans); 
    
    font-size: clamp(1.5rem, 3vw, 2.5rem); /* Keeps it responsive */
    color: var(--neon-green, #C6FF4D); /* Let's give it that cyberpunk accent color */
    
    margin-bottom: 5px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: normal;
}

    .shape-content h2 {
        font-family: "Xirod";
        font-size: clamp(12rem, 5vw, 4rem);
        color: var(--neon-green, #C6FF4D);
        line-height: 1;
        margin-bottom: 20px;
        text-transform: uppercase;
        /* ADD THIS LINE: Tweak this number (-5px, 2px, etc.) until it lines up perfectly with AVIK */
    transform: translateX(-1px);
        
    }
    /* ==========================================
   TWO-TONE NAME STYLING
   ========================================== */
.name-av {
    /* Set the color for 'AV' */
    color: #ffffff; /* Pure white */
}

.name-ik {
    /* Set the color for 'IK.' */
    color: #181616; /* Your cyberpunk accent color */
    
    /* Optional: Add a subtle neon glow to the green half! */
    
}
.name-Designer{
    color: #C6FF4D;
    font-size: 1rem;

}

    .shape-content p {
        font-family:"Xirod" ;
        font-size: 0.9rem;
        color: #ffffff;
        line-height: 1.6;
        max-width: 650px;
    }

    /* ==========================================
   AVIK 4-WAY LETTER ASSEMBLY (BULLETPROOF)
   ========================================== */
.fly-a, .fly-v, .fly-i, .fly-k {
    display: inline-block; 
    opacity: 0; /* Keep them invisible until you scroll down */
}

/* These run exactly once when JS adds the 'animate' class */
#avik-name.animate .fly-a { animation: flyFromLeft 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
#avik-name.animate .fly-v { animation: flyFromTop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
#avik-name.animate .fly-i { animation: flyFromBottom 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
#avik-name.animate .fly-k { animation: flyFromRight 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

/* The movement math */
@keyframes flyFromLeft {
    0% { opacity: 0; transform: translateX(-150px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes flyFromTop {
    0% { opacity: 0; transform: translateY(-150px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes flyFromBottom {
    0% { opacity: 0; transform: translateY(150px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes flyFromRight {
    0% { opacity: 0; transform: translateX(150px); }
    100% { opacity: 1; transform: translateX(0); }
}
/* ==========================================
   TYPEWRITER CURSOR
   ========================================== */
.typing-cursor {
    display: inline-block;
    width: 8px;
    height: 1.1em;
    
    vertical-align: bottom;
    margin-left: 4px;
    animation: solidBlink 1s step-end infinite;
}

@keyframes solidBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
    .section-title {
        color: var(--neon-green);
        font-family: var(--font-mono);
        margin-bottom: 40px;
        font-size: 1.2rem;
        letter-spacing: 6px;
        text-transform: uppercase;
    }
/* Define the keyframe animation */

@keyframes fadeInScale {
from{
opacity: 0;
scale: 0.5;
}to{

opacity: 1;
scale: 1;
}
}
/* --- 2. MYSHELF SECTION STACKING FIX --- */
@media (max-width: 900px) {
    .shape-container {
        /* 1. 🟢 THE CURE: Turn off the complex folder shape on mobile! */
        clip-path: none !important; 
        -webkit-clip-path: none !important;
        
        /* 2. Give it the clean, rounded corners from your image */
        border-radius: 20px; 
        border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle tech border */
        
        /* 3. Let the box grow naturally to fit the content */
        aspect-ratio: auto; 
        height: auto;
        min-height: auto; 
        
        /* 4. Normal, balanced padding now that the danger zones are gone */
        padding: 60px 20px 80px 20px; 
    }
    
    .shape-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px; /* Space between text and image */
        align-items: center; 
    }
    
    .left-col {
        align-items: center; 
        text-align: center;
        width: 100%;
    }
    
    /* 5. 🟢 Brings "HEY I'M" back and makes it visible! */
    .shape-content h1 {
        display: block;
        font-size: clamp(1.2rem, 5vw, 2rem);
        color: #fff;
        margin-bottom: 5px;
    }

    /* 6. Makes AVIK massive and strictly horizontal */
    .shape-content h2 {
        display: block;
        font-size: clamp(3rem, 15vw, 5rem); 
        white-space: nowrap; 
        margin-bottom: 25px;
        transform: translateX(0); /* Centers it perfectly */
    }
    
    .shape-content p {
        font-size: 0.85rem; 
        padding: 0 10px; 
        line-height: 1.6;
    }

    /* 7. 🟢 Gives your Profile Image massive space! */
    .hero-border-wrap {
        width: 100%;
        max-width: 320px; /* Much bigger than before */
        height: 350px;    /* Nice and tall */
        min-height: auto;
        margin: 0 auto;
    }
    
    /* Moves the triangle logo to sit cleanly in the corner */
    .corner-graphic {
        bottom: 20px;
        right: 20px;
        width: 70px;
    }
}
/* ==========================================
   VIDEO SHAPE SECTION
   ========================================== */
.video-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 20px;
    width: 100%;
    /* Ensure the background matches your theme */
         /* 1. Semi-transparent background (adjust the 0.1 for more/less opacity) */
    background: rgba(255, 255, 255, 0.05); 
    /* Make sure the file name matches exactly what you saved it as! */
    background-image: url('Img/BG\ Black.png'); 
    
    background-size: cover; /* Stretches the image to perfectly fill the section */
    background-position: center; /* Keeps the coolest parts of the design centered */
    background-repeat: no-repeat;
    /* 2. The magic frosted glass blur */
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    
    /* Optional: A subtle inner glow to mimic a glass edge */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
    /* Replacing solid black with a dark techy gradient */
   
    background-color: #000000; /* Deep dark background */
}

.video-shape-wrapper {
    position: relative;
    width: 100%;
    max-width: 1800px; 
    aspect-ratio: 16 / 9; 
    background-color: #ffffff; 
    
    /* POINTS TO THE SMOOTHED SHAPE ID */
    clip-path: url(#creative-room-mask);
    -webkit-clip-path: url(#creative-room-mask); 
    
    overflow: hidden;
    
    animation: fadeInScale linear;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
}
.shape-video {
    width: 100%;
    height: 100%;
    
    /* object-fit: cover ensures the video scales perfectly to fill the 
       shape without stretching or squishing */
    object-fit: cover; 
    display: block;
    
    
}

/* ==========================================
   VIDEO TEXT OVERLAY
   ========================================== */

/* This container sits perfectly over the video */
.video-overlay {
    position: absolute;
    inset: 0; /* Shorthand for top: 0, bottom: 0, left: 0, right: 0 */
    z-index: 10; /* Keeps it above the video */
    
    /* Centers the text perfectly inside the shape */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10%;
    
    /* Adds a slight dark tint over the video so the text is easier to read */
    background: rgba(0, 0, 0, 0.185); 
}

/* Style for the main text over the video */
.overlay-title {
    color: var(--neon-green, #C6FF4D); /* Using your neon green theme color */
    font-family:"Xirod";
    
    font-size: clamp(2rem, 5vw, 4rem);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 15px;
}

/* Style for the subtext */
.overlay-text {
    color: #ffffff;
    font-family: var(--font-mono); /* Using your monospace font */
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 600px;
    margin-bottom: 30px;
    line-height: 1.5;
}
/* ==========================================
   SCROLL REVEAL BARS
   ========================================== */
.video-section {
  position: relative; /* Make sure this is set */
}

.reveal-bars {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  pointer-events: none;
}

.reveal-bars .bar {
  flex: 1;
  background: #000;
  height: 100%;
  transform: translateY(0%);
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  border-right: 1px solid #111;
  z-index: 2;
}

/* Staggered delay: center bar goes first */
.reveal-bars .bar:nth-child(1) { transition-delay: 0.30s; }
.reveal-bars .bar:nth-child(2) { transition-delay: 0.12s; }
.reveal-bars .bar:nth-child(3) { transition-delay: 0.01s; } /* center - first */
.reveal-bars .bar:nth-child(4) { transition-delay: 0.12s; }
.reveal-bars .bar:nth-child(5) { transition-delay: 0.30s; }

/* When triggered, bars slide DOWN off screen */
.reveal-bars.revealed .bar {
  transform: translateY(100%);
}

.chevrons {
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.1rem;
  line-height: 2.2;
  margin-top: 20px;
  text-align: center;
  animation: chevronFall 1.2s ease-in infinite;
}

@keyframes chevronFall {
  0%   { opacity: 0.1; transform: translateY(-10px); }
  50%  { opacity: 0.5; }
  100% { opacity: 0.1; transform: translateY(10px); }
}

/* ==========================================
   PROJECTS SECTION
   ========================================== */
.projects-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #E5E5E5;
    overflow: hidden;
    padding: 100px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Slide up animation tied to scrolling */
 
}




/* ==========================================
   INFINITE SCROLLING HORIZONTAL STRIPS
   ========================================== */
/* ==========================================
   ANGLED INFINITE CAUTION TAPE
   ========================================== */
.caution-tape-wrapper {
    position: absolute;
    /* Pull it left and make it 110% wide so the edges don't show when we rotate it! */
    left: -5%; 
    width: 110%; 
    height: 55px; /* Thickness of the tape */
    z-index: 15; /* Sits above the grid but behind the showcase section */
    display: flex;
    align-items: center;
    overflow: hidden;
    
    /* The thick black borders from your design */
    border-top: 3px solid #111;
    border-bottom: 3px solid #111;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Drop shadow to make it float over the background */
}

/* The Neon Green Top Tape */
.top-tape {
    top: 15px; /* <-- CHANGED: Moved way up to clear the title! */
    background-color: var(--neon-green, #C6FF4D);
    transform: rotate(-3deg); 
    z-index: 15; /* Sits on top of the white tape */
}

/* The White/Grey Intersecting Tape */
.bottom-tape {
    top: 35px; /* <-- CHANGED: Sits right behind the green tape */
    background-color: #e5e5e5;
    transform: rotate(2deg); 
    z-index: 14; /* Sits under the green tape */
}

/* --- The Animation Logic --- */
.tape-track {
    display: flex;
    width: fit-content;
    animation: tapeScroll 15s linear infinite;
}

/* Makes the white tape scroll in the opposite direction */
.bottom-tape .tape-track {
    animation-direction: reverse; 
}

.tape-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.tape-content span {
    /* Swap "Xirod" to "telon" or var(--font-mono) if you want a different tech font */
    font-family: "Xirod", var(--font-sans); 
    font-size: 1.2rem;
    color: #111;
    margin: 0 10px;
    letter-spacing: 1px;
}

/* The Seamless Loop Math */
@keyframes tapeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/*---------ROBOT --------*/
/* 1. Update the Body */


/* 2. New Section Styling */


/* 3. Section Background Colors */
.bg-teal {
  background-color: #244a5d; /* Your original background */
}

.bg-dark {
  background-color: #3b3561; /* The background from your button example */
  color: white; /* Makes the h2 text white */
}
/* Outer white border */

/* ==========================================
   ROBOT WRAPPER
   ========================================== */
/* Ensure the grid respects the robot's strict size */
.robot-wrapper {
    width: 420px;
    height: 280px;
    background-color: white;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    margin: 0; 
}

/* Inner black face */
.robot-face {
  width: 390px;
  height: 250px;
  background-color: black;
  border-radius: 20px;
  position: relative;
}

/* The 'X' in the top right */
.x-mark {
  position: absolute;
  top: 20px;
  right: 25px;
  color: white;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  transform: rotate(45deg); 
  cursor: pointer;
}

/* Eyes Area */
.eyes-container {
  display: flex;
  justify-content: center;
  gap: 50px;
  padding-top: 50px;
}

.eye {
  width: 90px;
  height: 90px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  overflow: hidden; /* Keeps eyelids and pupils inside the circle */
}

/* Black Eyelid / Eyebrow */
.eyelid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Only 40% tall, so it never fully covers the eye */
  height: 40%; 
  background-color: black;
  transition: transform 0.2s ease; 
  z-index: 2;
  /* Default state: moved up (hidden) */
  transform: translateY(-100%); 
}

/* The moving dot */
.pupil {
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  z-index: 1;
}

/* Mouth / Teeth Area */
.mouth-container {
  display: flex;
  gap: 12px;
  position: absolute;
  bottom: 25px;
  left: 25px;
  right: 25px;
  height: 80px;
}

.tooth {
  background-color: white;
  flex: 1; 
  border-radius: 2px;
  /* Add this transition for a smooth color change */
  transition: background-color 0.1s ease, box-shadow 0.1s ease;
}
/* ==========================================
   APNG ICON SIZING & GLOW
   ========================================== */
.cyber-apng {
    width: 50px;
    height: 50px;
    object-fit: contain; /* Keeps it perfectly proportioned */
    
    /* Adds that neon cyberpunk glow to the animation! */
    filter: drop-shadow(0 0 10px rgba(198, 255, 77, 0.4));
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .cyber-apng {
        width:70px;
        height:70px;
    }
}
/* Add this new class at the very bottom of your CSS file */
.tooth.angry {
  
  background-color: #C6FF4D;; /* Bright angry red */
  box-shadow: 0 0 15px #68e679; /* A little red glow */
}

/* ==========================================
   FULL-BLEED LEFT BACKGROUND ART
   ========================================== */
.skull-bg {
    position: absolute;
    top: 10;
    left: 0; /* Locks it to the absolute left edge of your monitor */
    width: 35vw; /* Takes up exactly 45% of the screen width */
    height:80%;
    
    /* ADD YOUR SAMURAI IMAGE FILE NAME HERE */
    background-image: url('Img/Skull\ Icon.png'); 
    
    /* "contain" makes sure the image grows as big as possible WITHOUT cropping! */
    background-size: contain; 
    
    background-position: left center; /* Anchors it to the left wall, centered vertically */
    background-repeat: no-repeat;
    
    opacity: 0.03; /* Dimmed to look like a cool watermark */
    z-index: 1; /* Sits behind your matrix grid and text */
    
    /* Fades the right side into the black background so it doesn't touch the robot */
   /* Change this to make the right edge fade softer */
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

/* ==========================================
   MY SKILL MATRIX PAGE
   ========================================== */
.skills-section {
    position: relative; /* FREEZES the section on screen */
    top: 0;           /* Pins it perfectly to the top */
    z-index: 1;       /* Keeps it on the bottom layer */
    
    width: 100%;
    min-height: 100vh;
    background-color: #050505;
    color: #ffffff;
    padding: 100px 5vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* ==========================================
   SIDE-BY-SIDE LAYOUT CONTAINER
   ========================================== */
.skills-content-wrapper {
    display: grid;
    /* This is the magic line! 
       1fr = flexible left column
       auto = center column perfectly fits the robot
       1fr = flexible right column */
    grid-template-columns: 1fr auto 1fr; 
    align-items: center; 
    width: 100%;
    max-width: 1600px; /* Made slightly wider to fit 3 columns nicely */
    margin: 0 auto;
    gap: 40px; 
    z-index: 10;
    position: relative;
    
}
/* 1. The Container */
.skill-details {
    width: 100%; /* Forces the container to be as wide as the hexagon */
    display: flex;
    justify-content: center; /* Pushes the text perfectly to the middle */
    margin-top: 5px;
}
/* The left and right skill columns */
.skills-column {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
}
/* ==========================================
/* ==========================================
   RIGHT COLUMN ALIGNMENT MAGIC (FIXED)
   ========================================== */

/* 1. Only push the label to the right, let the grid keep its full width */
.skills-column.align-right .category-label {
    align-self: flex-end; 
    text-align: right;
    border-left: none; 
    border-right: 2px solid var(--neon-green, #C6FF4D); 
    padding-left: 0;
    padding-right: 15px;
}

/* 2. Switch the right-side grid to Flexbox to easily group them on the right */
.skills-column.align-right .hex-grid {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Pushes the hexagons to the right */
    flex-wrap: wrap; /* Allows them to wrap to a new line if you add a ton of skills */
    gap: 15px;
    
}

/* 3. Give the right-side items a set width so they match the left side perfectly */
.skills-column.align-right .skill-item {
    width: 110px; /* Keeps the hexagons a consistent size */
}


/* --- THE MATRIX LAYOUT --- */
.skills-matrix {
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 50px;
    flex: 1;
    width: 100%;
}

.skill-category {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.skill-icon {
    font-size: 3rem; /* Set icon size */
    color: #ffffff;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}
.custom-img-icon {
    width: 45px; /* Adjust this to make your image bigger or smaller */
    height: 45px;
    object-fit: contain; /* Keeps the image from stretching */
    margin-bottom: 15px;
}
/* The actual text */
.skill-name {
    text-align: center; /* Ensures the text itself is centered */
    font-family: var(--font-sans, sans-serif);
    font-weight: bold;
    font-size: 0.9rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}
/* --- THE HUGE BACKGROUND GRID --- */
.grid-overlay {
    position: absolute;
    inset: 0;
    /* Draws a faint dotted grid */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
    
    /* Slight continuous breathing animation */
    animation: gridBreathing 10s ease-in-out infinite;
}

@keyframes gridBreathing {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.05); }
}

/* --- SECTION TYPOGRAPHY --- */
.section-header {
    text-align: center;
    margin-bottom: 60px;
    z-index: 10;
}

.cyber-title {
    font-family: 'Xirod', sans-serif; /* Your tech font variable */
    color: var(--neon-green, #C6FF4D); /* established accent color */
    font-size: clamp(2rem, 5vw, 4rem);
    text-transform: uppercase;
    letter-spacing: 4px;
    position: relative;
    display: inline-block;
}

.blinking-cursor {
    animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }



.category-label {
    font-family: var(--font-mono); /* Inherited monospace font */
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
    border-left: 2px solid var(--neon-green, #C6FF4D);
    padding-left: 15px;
    margin-bottom: 10px;
}

/* --- THE HEXAGONAL GRID --- */
.hex-grid {
    display: grid;
    /* Creates a responsive grid of hexagons */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    justify-content: center;
}

.hex-cell {
    position: relative;
    aspect-ratio: 1;
    /* The default stroke color - a faint neon green */
    background-color: rgba(198, 255, 77, 0.2); 
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hex-cell:hover {
    transform: translateY(-5px) scale(1.05);
    /* The stroke becomes solid neon green when hovered */
    background-color: var(--neon-green, #C6FF4D); 
}

/* Inner Container for alignment */
.hex-inner {
    position: absolute;
    inset: 0;
    z-index: 1; /* Pushes content above the ::before background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.hex-cell::before {
    content: '';
    position: absolute;
    /* THIS IS YOUR STROKE THICKNESS. Change to 3px or 4px for a thicker border! */
    inset: 2px; 
    /* The dark background color inside the cell */
    background-color: #0d0d0d; 
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 0;
}


.hex-cell:hover .skill-icon {
    color: var(--neon-green, #C6FF4D); /* Icon lights up on hover */
}
/* This makes custom images (like your PS PNG) glow on hover! */
.hex-cell:hover .custom-img-icon {
    /* Creates a neon green glowing shadow matching your theme */
    filter: drop-shadow(0 0 8px var(--neon-green, #C6FF4D));
    color: var(--neon-green, #C6FF4D);
    /* Optional: Makes the icon pop up slightly, just like the font icons */
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* Make sure your custom image has a smooth transition so the glow fades in */
.custom-img-icon {
    width: 45px;
    height: 45px;
    object-fit: contain;
    margin-bottom: 15px;
    transition: all 0.3s ease; /* Adds the smooth fade */
}
/* ==========================================
   INLINE SVG SKILL ICONS (PROFESSIONAL OUTLINES)
   ========================================== */
.skill-svg {
    width: 2.8rem; 
    height: 2.8rem;
    color: #ffffff; /* Sets the base color for the lines */
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

/* Forces the boxes and paths to be completely transparent/hollow */
.skill-svg rect, 
.skill-svg path, 
.skill-svg circle {
    fill: none !important;
}

/* Ensures the text inside the Adobe icons remains solid */
.skill-svg text {
    fill: currentColor !important;
    stroke: none !important;
}

/* --- The Hover Glow Effect --- */
.hex-cell:hover .skill-svg {
    color: var(--neon-green, #C6FF4D); 
    filter: drop-shadow(0 0 8px var(--neon-green, #C6FF4D));
    transform: scale(1.1);
}

/* --- THE 'POWER LEVEL' BAR --- */
.level-bar {
    width: 60%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
    margin-top: auto; /* Pushes the bar to the bottom of the node */
}

.level-fill {
    height: 100%;
    background-color: var(--neon-green, #C6FF4D); /* Fills with accent color */
    box-shadow: 0 0 8px var(--neon-green, #C6FF4D);
    transition: width 0.5s ease-out; /* smooth animation when triggered */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 1024px) {
    /* On mobile, reset it back to center */

    .skills-column.align-right .category-label {
        align-self: center;
        text-align: center;
        border-right: none;
        border-bottom: 2px solid var(--neon-green, #C6FF4D);
        padding-right: 0;
        padding-bottom: 5px;
    }
    .skills-column.align-right .hex-grid { 
        justify-content: center; 
    }

    .hex-grid {
        /* 🟢 CHANGED: Dropped from 130px to 100px so the hexagons scale down beautifully on tablets */
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 15px;
    }
    
    /* Shrinks the icons and text slightly to fit the new 100px size */
    .skill-icon, .skill-svg, .custom-img-icon {
        font-size: 2rem; /* Dropped from 2.5rem */
        width: 2rem;
        height: 2rem;
    }
    
    .skill-name {
        font-size: 0.7rem; /* Dropped from 0.8rem */
    }
    
    .skills-content-wrapper {
        grid-template-columns: 1fr; /* Turns back into 1 single column */
        gap: 60px; /* 🟢 Reduced from 80px to close up awkward empty space */
    }
    
    /* Center the robot when it's stacked AND adjust its size */
    .robot-wrapper {
        justify-self: center;
        margin: 0 auto;
        /* 🟢 ADDED: This mathematically shrinks the robot to 85% of its original size! */
        transform: scale(0.85); 
        display: none;
    }
}

/* ==========================================
   PROJECTS LAYOUT & PANELS
   ========================================== */

/* ==========================================
   INTERACTIVE PROJECT SHOWCASE
   ========================================== */
.showcase-section {
    position: relative;
    z-index: 10; /* HIGHER than the skills section so it slides OVER it */
    
    /* This must be a solid color so you can't see the skills section through it */
    background-color: #050505; 
    
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 5%;
    overflow: hidden;
    
    /* REMOVE the opacity and transform animations from earlier! */
}
html {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
}
.showcase-section, .skills-section {
    scroll-snap-align: start;
}
/* The giant background text */
.bg-huge-title {
    position: absolute;
    top: 10px; 
    left: 50%;
    transform: translateX(-50%);
    font-family: "Xirod", var(--font-sans);
    font-size: clamp(4rem, 15vw, 12rem);
    color: rgb(204, 204, 203);
    letter-spacing: 10px;
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
    animation: fadeUpProjectText linear;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
    
    /* 🟢 ADD THIS LINE: Controls the speed of the hover effect */
    transition: letter-spacing 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s ease, text-shadow 0.5s ease;
}
/* --- GIANT BACKGROUND TITLE HOVER EFFECT --- */
.showcase-section:hover .bg-huge-title {
    /* Pushes the letters wide apart */
    letter-spacing: 40px; 
    
}
/* The Main Container Shape */
.showcase-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 80vh;
    min-height: 700px;
    margin-top: 80px; /* <-- ADDED: Pushes the entire box down! */
    z-index: 10;
    background-color: #111;
    overflow: hidden; /* This absolutely forces the image to stay inside the shape */
    clip-path: polygon(
        40px 0, calc(100% - 40px) 0, 100% 40px, 100% 45%, 98% 50%, 
        100% 55%, 100% calc(100% - 40px), calc(100% - 40px) 100%, 
        40px 100%, 0 calc(100% - 40px), 0 40px
    );
    display: flex;
    flex-direction: column;
}

.showcase-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Keeps the artwork perfectly centered */
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
    /* --- ADD THIS BLUR --- */
    filter: blur(2.3px); /* A little blur. Try 2px for less, 8px for more. */
}
.showcase-vignette {
    position: absolute;
    inset: 0;
    z-index: 2; /* Layer on top of the image */
    
    /* Radial gradient: transparent in the center (40%), fades to dark black/red at the edges */
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(10, 0, 0, 0.8) 100%);
    pointer-events: none; /* Allows clicks to pass through */
}
.showcase-overlay {
    position: absolute;
    inset: 0;
    /* This makes it dark ONLY at the very bottom so you can read the cards. The middle and top will be 100% transparent so you can see your image. */
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 25%, transparent 50%);
    z-index: 2;
    pointer-events: none;
}

.showcase-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 60px 5%;
}

/* Typography & Layout inside container */
.project-info {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 40px;
    /* This adds a heavy black blur behind all the text to keep it readable */
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.9), 0px 0px 10px rgba(0, 0, 0, 0.5);
}


.project-title {
    font-family: "QEHADEX", var(--font-sans);
    font-size: clamp(2rem, 5vw, 4rem);
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.project-desc {
    font-family: var(--font-sans);
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.project-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.genre-box {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.genre-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #888;
}

.genre-value {
    font-family: "Xirod", var(--font-sans);
    font-size: 1rem;
    color: #fff;
}

/* The 3 Bottom Cards */
.cards-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: auto;
    margin-bottom: 30px;
}

.showcase-card {
    width: 200px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.showcase-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showcase-card:hover {
    opacity: 0.8;
    transform: translateY(-5px);
}

.showcase-card.active {
    opacity: 1;
    border: 2px solid #C6FF4D; /* Highlights the active card */
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* Bottom Action Buttons */
.bottom-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}



.play-btn:hover { background: rgba(255,255,255,0.3); }

.view-all-btn {
    background: #C6FF4D;
    color: #000;
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.8rem;
    padding: 10px 30px;
    border: none;
    cursor: pointer;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .cards-row {
        flex-direction: column;
        align-items: center;
    }
    .showcase-card {
        width: 100%;
        max-width: 300px;
    }
    .showcase-container { height: auto; padding-bottom: 40px; }
}


/* ==========================================
   GRAPHICS DESIGN BENTO GRID
   ========================================== */
.graphics-bento-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #050505; /* Slightly different dark bg to separate sections */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 5%;
    z-index: 10;
}

/* The 6-Column CSS Grid */
/* The 6-Column CSS Grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    
    /* 1. Changed fixed pixels to flexible fractions (fr) */
    grid-template-rows: 2fr 1.5fr 1fr; 
    
    gap: 20px;
    width: 100%;
    
    /* 2. Increased max-width so it stretches wider on large screens */
    max-width: 2000px; 
    
    /* 3. Forces the grid to stretch and fill 75% of your screen height */
    min-height: 75vh; 
}

/* Base style for all boxes */
.bento-item {
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* --- THE BENTO POP-IN ANIMATION --- */
.graphics-bento-section .bento-item {
    /* Triggers the scroll animation */
    animation: popFromCenter linear both;
    animation-timeline: view();
    
    /* Starts popping in when 5% of the box enters the screen, and finishes at 30% */
    animation-range: entry 5% cover 30%; 
    
    /* Ensures it pops exactly from the dead center of each box */
    transform-origin: center; 
}

/* The Keyframes for the Animation */
@keyframes popFromCenter {
    0% {
        opacity: 0;
        scale: 0.3; /* Starts tiny */
    }
    100% {
        opacity: 1;
        scale: 1; /* Pops to full normal size */
    }
}
/* Optional: Subtle hover pop on the boxes */
.bento-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* --- INDIVIDUAL BOX SIZING & STYLING --- */

/* 1. Top Left */
.bento-1 {
    grid-column: 1 / 4; /* Spans 3 columns */
    grid-row: 1 / 2;    /* Spans 1 row */
    background-color: #D1D5DB;
    padding: 40px;
    align-items: center;
}
.bento-1 p {
    font-family:"telon";
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: #111;
    text-transform: uppercase;
    line-height: 1.4;
    
}

/* 2. Top Right (The Border Look) */
.bento-2 {
    grid-column: 4 / 7;
    grid-row: 1 / 2;
    background-color: var(--neon-green, #C6FF4D);
    padding: 12px; /* This padding acts as the thick green border */
}
.bento-2-inner {
    background-color: #111;
    width: 100%;
    height: 100%;
    border-radius: 18px; /* Slightly smaller radius for the inside */
    display: flex;
    justify-content: center;
    align-items: center;
}
.bento-2-inner h2 {
    font-family: "Xirod", sans-serif;
    color: #fff;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    text-align: center;
}

/* 3. Bottom Left (Tall Dark Box) */
.bento-3 {
    grid-column: 1 / 3; /* Spans 2 columns */
    grid-row: 2 / 4;    /* Spans 2 rows (Tall) */
    background-color: #4a4a4a; /* Dark Grey placeholder */
}

/* 4. Middle Top (Light Grey) */
.bento-4 {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
    background-color: #d1d5db;
}

/* 5. Middle Bottom (Green) */
.bento-5 {
    grid-column: 3 / 5;
    grid-row: 3 / 4;
    background-color: var(--neon-green, #C6FF4D);
}

/* 6. Bottom Right (MORE Button) */
.bento-6 {
    grid-column: 5 / 7;
    grid-row: 2 / 4;
    background-color: var(--neon-green, #C6FF4D);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.bento-6 h2 {
    font-family: "Xirod", sans-serif;
    color: #111;
    font-size: clamp(2rem, 3vw, 3.5rem);
    margin-top: 40px; /* Pushes text down below arrow */
}

/* The SVG Arrow Styling */
.bento-arrow {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 80px;
    height: 80px;
    transition: transform 0.3s ease;
}
.bento-6:hover .bento-arrow {
    transform: translate(10px, -10px); /* Arrow shoots up-right on hover */
}
/* ==========================================
   BENTO BOX IMAGES
   ========================================== */
.bento-img {
    /* --- ADD THESE TWO LINES TO FIX THE LAYOUT --- */
    position: absolute;
    inset: 0; /* This pins the image perfectly to all 4 corners of the box */

    width: 100%;
    height: 100%;
    object-fit: cover; 
    
    opacity: 0.85;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Hover Zoom Effect */
.bento-item:hover .bento-img {
    transform: scale(1.08);
    opacity: 1;
}
/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 900px) {
    .bento-grid {
        /* On mobile, stack everything into 1 column */
        grid-template-columns: 1fr;
        grid-template-rows: auto; /* Let content dictate height */
    }
    .bento-item {
        grid-column: 1 / -1 !important; /* Forces all items to span full width */
        grid-row: auto !important;
        min-height: 200px; /* Gives them a consistent height */
    }
}
/* ==========================================
   MOTION GRAPHICS BENTO GRID (STAGGERED)
   ========================================== */
.motion-bento-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #050505; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 5%;
    z-index: 10;
}

/* The Interlocking 4-Column Grid */
.bento-grid-motion {
    display: grid;
    /* This fraction math creates the perfect staggered overlap! */
    grid-template-columns: 2fr 1fr 1fr 2fr; 
    grid-template-rows: repeat(2, minmax(280px, 1fr)); /* Two equal-height rows */
    gap: 20px;
    width: 100%;
    max-width: 2000px;
}

/* Base style for all motion boxes */
.motion-item {
    border-radius: 30px; /* Standard rounded corners */
    overflow: hidden;
    display: flex;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.motion-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* --- INDIVIDUAL BOX SIZING & STYLING --- */

/* 1. Top Left (Black with Green Border) */
.motion-1 {
    grid-column: 1 / 3; /* Spans columns 1 and 2 */
    grid-row: 1 / 2;
    background-color: #111;
    border: 2px solid var(--neon-green, #C6FF4D);
    justify-content: center;
    align-items: center;
}
.motion-1 h2 {
    font-family: "Xirod", sans-serif;
    color: #fff;
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    text-align: center;
}

/* 2. Top Middle (Vertical Green) */
.motion-2 {
    grid-column: 3 / 4; /* Sits in column 3 */
    grid-row: 1 / 2;
    background-color: var(--neon-green, #C6FF4D);
}

/* 3. Top Right (Dark Grey) */
.motion-3 {
    grid-column: 4 / 5; /* Sits in column 4 */
    grid-row: 1 / 2;
    background-color: #4a4a4a;
}

/* 4. Bottom Left (MORE Button) */
.motion-4 {
    grid-column: 1 / 2; /* Sits in column 1 */
    grid-row: 2 / 3;
    background-color: var(--neon-green, #C6FF4D);
    padding: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.motion-4 h2 {
    font-family: "Xirod", sans-serif;
    color: #111;
    font-size: clamp(2rem, 3.5vw, 3.5rem);
}
.bento-arrow-motion {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    transition: transform 0.3s ease;
}
.motion-4:hover .bento-arrow-motion {
    transform: translate(10px, -10px);
}

/* 5. Bottom Middle (Vertical Light Grey) */
.motion-5 {
    grid-column: 2 / 3; /* Sits in column 2 */
    grid-row: 2 / 3;
    background-color: #d1d5db;
}
/* ==========================================
   BENTO BOX VIDEOS
   ========================================== */
.bento-video {
    position: absolute;
    inset: 0; /* Pins the video to all 4 corners */
    width: 100%;
    height: 100%;
    
    /* Forces the video to crop and fill the box without stretching */
    object-fit: cover; 
    
    /* Matches your cyberpunk aesthetic */
    opacity: 0.85; 
    
    /* Prepares the video for the hover zoom effect */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* --- Hover Zoom Effect --- */
/* When you hover over the box, the video zooms in slightly and brightens */
.motion-item:hover .bento-video {
    transform: scale(1.08);
    opacity: 1;
}
/* 6. Bottom Right (Green Text Box) */
.motion-6 {
    grid-column: 3 / 5; /* Spans columns 3 and 4 */
    grid-row: 2 / 3;
    background-color: #d1d5db;
    padding: 50px 80px;
    justify-content: flex-start;
    align-items: center;
   
}
.motion-6 p {
    font-family: "telon";
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    color: #000000;
    text-transform: uppercase;
    line-height: 1.5;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 900px) {
    .bento-grid-motion {
        grid-template-columns: 1fr; /* Stacks to 1 column on phones */
        grid-template-rows: auto;
    }
    .motion-item {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: 200px;
    }
    .motion-6 {
        border-top-left-radius: 30px; /* Resets the dramatic corner back to normal on mobile */
        padding: 40px;
    }
}

/* ==========================================
   UI/UX BENTO GRID
   ========================================== */
/* This invisible block creates the scrolling space needed to pull the curtain up */
.scroll-space {
    height: 100vh; 
    width: 100%;
    pointer-events: none; /* Makes sure it doesn't block any clicks */
}

/* --- 2. THE UI/UX CURTAIN (SLIDES UP) --- */
.uiux-bento-section {
    position: relative; /* Back to normal so it scrolls up naturally */
    z-index: 10;        /* Sits ON TOP of the contact section */
    
    /* 🪄 THE MAGIC: Pulls the contact section up to hide behind this one */
    margin-bottom: -100vh; 
    
    /* The Sliced Bottom Edge */
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9); /* Heavy shadow pointing DOWN */
    border-bottom: 1px solid rgba(198, 255, 77, 0.4);
    width: 100%;
    min-height: 100vh;
    background-color: #050505; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 5%;
}

/* The 4-Column Grid */
.bento-grid-uiux {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
    grid-template-rows: repeat(2, minmax(280px, 1fr)); /* 2 equal rows */
    gap: 20px;
    width: 100%;
    max-width: 2000px;
}

/* Base style for all UI/UX boxes */
.uiux-item {
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.uiux-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* --- INDIVIDUAL BOX SIZING & STYLING --- */

/* 1. Top Left (Black with Thin Green Border) */
.uiux-1 {
    grid-column: 1 / 3; /* Spans 50% of the row */
    grid-row: 1 / 2;
    background-color: #111;
    border: 2px solid var(--neon-green, #C6FF4D);
    justify-content: center;
    align-items: center;
}
.uiux-1 h2 {
    font-family: "Xirod", sans-serif;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 3rem);
    text-align: center;
}

/* 2. Top Right (Large Green) */
.uiux-2 {
    grid-column: 3 / 5; /* Spans 50% of the row */
    grid-row: 1 / 2;
    background-color: var(--neon-green, #C6FF4D);
}

/* 3. Bottom Left (Large Green) */
.uiux-3 {
    grid-column: 1 / 3; /* Spans 50% of the row */
    grid-row: 2 / 3;
    background-color: var(--neon-green, #C6FF4D);
}

/* 4. Bottom Middle (Light Grey Text Box) */
.uiux-4 {
    grid-column: 3 / 4; /* Spans 25% of the row */
    grid-row: 2 / 3;
    background-color: #d1d5db;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}
.uiux-4 p {
    font-family: "telon";
    color: #111;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
}

/* 5. Bottom Right (MORE Button) */
.uiux-5 {
    grid-column: 4 / 5; /* Spans 25% of the row */
    grid-row: 2 / 3;
    background-color: var(--neon-green, #C6FF4D);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.uiux-5 h2 {
    font-family: "Xirod", sans-serif;
    color: #111;
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
}
.bento-arrow-uiux {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease;
}
.uiux-5:hover .bento-arrow-uiux {
    transform: translate(10px, -10px);
}
/* --- Hover Zoom Effect --- */
/* When you hover over the box, the image zooms in slightly and brightens */
.bento-item:hover .bento-img,
.motion-item:hover .bento-video,
.uiux-item:hover .bento-img {    /* <--- ADD THIS LINE HERE */
    transform: scale(1.08);
    opacity: 1;
}
/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 900px) {
    .bento-grid-uiux {
        grid-template-columns: 1fr; /* Stacks to 1 column on phones */
        grid-template-rows: auto;
    }
    .uiux-item {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: 200px;
    }
}

/* ==========================================
   CONTACT SECTION STYLES
   ========================================== */
/* --- 3. THE CONTACT SECTION (REVEALED FROM BEHIND) --- */
.contact-section {
    position: sticky; /* Freezes on the screen while UI/UX slides up */
    top: 0;
    z-index: 1;       /* Hides BEHIND the UI/UX section */
    height: 100vh;    /* Locks height to match the scroll trick */
    
    /* Resets any borders from the previous code */
    border-radius: 0;
    box-shadow: none;
    
    width: 100%;
    background-color: #000; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 100px; 
}

/* --- THE BACKGROUNDS & ACCENTS --- */

/* The Angular Neon Green Bottom Half */
.contact-bg-green {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background-color: var(--neon-green, #C6FF4D);
    z-index: -1;
    
    /* The Magic Cutout! Creates the techy dip in the middle */
    clip-path: polygon(
        0 0, 
        calc(50% - 360px) 0, 
        calc(50% - 320px) 60px, 
        calc(50% + 320px) 60px, 
        calc(50% + 360px) 0, 
        100% 0, 
        100% 100%, 
        0 100%
    );
}
/* ==========================================
   DYNAMIC CONTACT BACKGROUND
   ========================================== */

/* 1. The Fading Cyber Grid */
.cyber-grid-overlay {
    position: absolute;
    inset: 0; /* Fills the whole section */
    /* Draws a 40x40 neon green grid */
    background-image:
        linear-gradient(rgba(198, 255, 77, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(198, 255, 77, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    pointer-events: none;
    
    /* Fades the grid out halfway down so it perfectly blends into your green shape! */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
}

/* 2. The Jumping Tech Blocks (CSS Trick) */
.jumping-blocks {
    position: absolute;
    top: 30%;
    left: 40%;
    width: 40px;
    height: 40px;
    background-color: transparent;
    z-index: 0;
    pointer-events: none;
    
    /* We use box-shadow to generate 5 different blocks from just 1 HTML element! */
    box-shadow:
        120px -80px 0 0 rgba(198, 255, 77, 0.4),
        -200px -120px 0 0 rgba(198, 255, 77, 0.2),
        -160px 160px 0 0 rgba(198, 255, 77, 0.3),
        320px 80px 0 0 rgba(198, 255, 77, 0.5),
        -280px 40px 0 0 rgba(198, 255, 77, 0.2);
        
    /* Triggers the rapid flashing and shifting */
    animation: blockJump 1.5s infinite step-end;
}

@keyframes blockJump {
    0%, 100% { opacity: 1; transform: scale(1); }
    25% { opacity: 0; }
    50% { opacity: 0.8; transform: translate(40px, -40px); } /* Jumps to a new grid square */
    75% { opacity: 0.3; transform: translate(-80px, 40px); } /* Jumps again */
}

/* ==========================================
   INFINITE SCROLLING CHECKER ACCENTS
   ========================================= */
.checker-accent {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    
    /* 1. 🟢 DRAWING THE PATTERN (Procedural Checkerboard) */
    /* This creates perfect 20px x 20px squares infinitely on a loop */
    background-image:
        conic-gradient(var(--neon-green) 90deg, #000 90deg 180deg, var(--neon-green) 180deg 270deg, #000 270deg);
    background-size: 40px 40px; /* Adjust this to change square size (size/2) */
    
    /* 2. 🟢 THE INFINITE SCROLL TIMER */
    /* Smooth, linear, and never-ending motion */
    animation: infiniteVerticalScroll 8s linear infinite;
    
    /* Secret trick: Forces hardware acceleration and keeps the text crisp during movement */
    will-change: background-position;
    backface-visibility: hidden;
}

/* 🟢 THE SCROLLING MATH (Keyframes) */
@keyframes infiniteVerticalScroll {
    0% {
        /* Starts at normal position */
        background-position: 0% 0px; 
    }
    100% {
        /* Scrolls down exactly by 80px (two full checker units) to create the seamless loop! */
        background-position: 0% 80px; 
    }
}
/* The Procedural Checkerboards (No images needed!) */
.checker-accent {
    position: absolute;
    background-image: conic-gradient(var(--neon-green, #C6FF4D) 90deg, #000 90deg 180deg, var(--neon-green, #C6FF4D) 180deg 270deg, #000 270deg);
    background-size: 40px 40px; /* Makes perfect 20px squares */
}
.top-left-checker {
    top: 10%;
    left: 0;
    width: 240px;
    height: 80px; /* 2 rows high */
}
.bottom-right-checker {
    bottom: 10%;
    right: 0;
    width: 240px;
    height: 80px;
}

/* --- THE FOLDER FORM --- */

.contact-form-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-top: -80px; /* Pulls it up to sit perfectly on the horizon line */
    z-index: 5;
}

/* The Folder Tab at the top left */
.folder-tab {
    position: relative;
    width: 220px;
    height: 43px;
    background-color: #fff;
    border-radius: 15px 0 0 0;
    display: flex;
    align-items: center;
    padding-left: 25px;
}
/* Creates the slanted angle on the right side of the tab */
.folder-tab::after {
    content: '';
    position: absolute;
    top: 0;
    right: -31px;
    width: 50px;
    height: 100%;
    background-color: #fff;
    transform-origin: bottom left;
    transform: skewX(30deg);
    border-radius: 0 10px 0 0;
}

.folder-tab h3 {
    font-family: "Xirod", var(--font-mono);
    font-size: 1rem;
    color: #111;
    z-index: 2; /* Keeps text above the slanted background */
}

/* The Main White Box */
.folder-body {
    background-color: #fff;
    border-radius: 0 15px 15px 15px;
    padding: 40px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* --- THE INPUT BOXES --- */
.tech-input {
    width: 100%;
    background-color: #dcdcdc; /* The box background color */
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
    outline: none;
    transition: all 0.3s ease;
    
    /* 🟢 1. FORMAT THE TYPED TEXT HERE */
    /* Swap "Xirod" to var(--font-mono) if you want a hacker/terminal look! */
    font-family: var(--font-mono); 
    font-size: 1rem;       /* Makes the typed text bigger */
    font-weight: bold;     /* Makes the text thicker */
    color: #000000;        /* The color of the text the user types */
    letter-spacing: 1px;   /* Spaces the letters out slightly */
}
.tech-input::placeholder { color: #888; }
.tech-input:focus { background-color: #e8e8e8; }

.tech-textarea {
    resize: none;
    height: 120px;
    margin-bottom: 10px;
}
/* ==========================================
   FORM INPUT ICONS & ALIGNMENT
   ========================================== */

/* 1. The Container that holds both the input and the icon */
.input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 20px; /* Spacing between the fields */
}

/* 2. Remove bottom margin from inputs (the wrapper handles it now), 
      and push the text to the right so it doesn't type over the icon! */
.input-wrapper .tech-input {
    margin-bottom: 0; 
    padding-left: 50px; 
}

/* 3. The Base Icon Style */
.input-icon {
    position: absolute;
    left: 18px;
    top: 17px; /* Centers it perfectly with your input height */
    width: 20px;
    height: 20px;
    color: #777777; /* Matches your placeholder text color */
    pointer-events: none; /* Lets the user click "through" the icon into the box */
    transition: all 0.3s ease;
    z-index: 2;
}

/* 4. The Message Icon (Needs to sit at the top, not the middle of the big box) */
.input-icon.msg-icon {
    top: 18px; 
}

/* 5. 🟢 THE CYBERPUNK MAGIC: Icons glow green when you click the box! */
.input-wrapper:focus-within .input-icon {
    color: var(--neon-green, #C6FF4D);
    filter: drop-shadow(0 0 5px var(--neon-green, #C6FF4D));
    transform: scale(1.1); /* Slight pop-out effect */
}
/* The Floating Submit Button */
.submit-btn {
    position: absolute;
    bottom: -25px;
    right: -25px;
    background-color: var(--neon-green, #C6FF4D);
    border: 2px solid #000;
    border-radius: 10px;
    padding: 15px 30px;
    font-family: "Xirod", var(--font-mono);
    font-size: 1.2rem;
    color: #000;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, background 0.2s ease;
}
.submit-btn:hover {
    transform: translateY(-3px) scale(1.02);
    background-color: #d1ff6b; /* Slightly brighter green on hover */
}

/* --- THE FOOTER / SOCIALS --- */

/* --- THE FOOTER / SOCIALS --- */
.social-footer {
    /* 🟢 CHANGED TO ABSOLUTE: This lets us pin it exactly where we want */
    position: absolute;
    left: 40px;
    bottom: 250px; /* Sits perfectly above the giant text */
    
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 5;
}

.social-label {
    font-family: "Xirod", var(--font-mono);
    font-size: 1.2rem;
    color: #000;
}

.social-icons {
    display: flex;
    gap: 30px;
    /* The thin black lines sandwiching the icons */
    border-top: 1px solid rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding: 15px 0;
}

.social-icons a {
    color: #000;
    font-size: 1.8rem;
    transition: transform 0.3s ease, color 0.3s ease;
}
.social-icons a:hover {
    transform: translateY(-3px);
    color: #202020; /* Icons turn white on hover for contrast */
}

/* Giant Bottom Text */
.giant-contact-text {
    position: absolute;
    /* 🟢 MOVED UP: Was -15px, now sits above the frosted footer */
    bottom: 10px; 
    left: 15px;
    font-family: "Xirod", var(--font-sans);
    
    /* 🟢 MADE BIGGER: Increased the max size from 8rem to 11rem */
    font-size: clamp(5rem, 11vw, 10rem); 
    
    color: #000;
    line-height: 1;
    z-index: 1;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 900px) {
    .contact-bg-green {
        /* Simplifies the background cutout for small screens */
        clip-path: polygon(0 0, 10% 0, 20% 40px, 80% 40px, 90% 0, 100% 0, 100% 100%, 0 100%);
    }
    .folder-body { padding: 30px 20px; }
    .submit-btn { right: 0; bottom: -25px; } /* Pulls button in so it doesn't break mobile layout */
    /* Inside your existing @media (max-width: 900px) block... */
    .social-footer { 
        flex-direction: row; /* Keeps them horizontal on mobile */
        left: 20px; 
        bottom: 140px; /* Sits lower on mobile since the text is smaller */
        margin-top: 0; 
    }
    .giant-contact-text { 
        font-size: 3.8rem; 
        bottom: 70px; 
    }
}
/* ==========================================
   CONTACT SECTION MOBILE FIX
   ========================================== */
@media (max-width: 900px) {
    /* 1. 🟢 Shrink top checker, entirely hide the bottom one! */
    .top-left-checker {
        width: 120px;
        height: 40px;
        background-size: 20px 20px; 
    }
    .bottom-right-checker {
        display: none !important; /* Nukes it from orbit on mobile */
    }

    /* 2. 🟢 Pull the form up slightly to make more room at the bottom */
  /* 2. 🟢 Pull the form UP a bit more to create a larger gap at the bottom */
    .contact-form-container {
        width: 92%; 
        margin-top: -100px; /* Pulls the white box higher up the screen */
    }
    .folder-body {
        padding: 25px 20px 35px 20px; 
    }
    .submit-btn {
        right: 20px; 
        bottom: -20px;
        padding: 10px 25px;
        font-size: 1rem;
    }

/* 3. 🟢 Push the Socials DOWN into the green gap you circled */
    .social-footer {
        left: 50%;
        transform: translateX(-50%);
        
        /* 🪄 THE FIX: Changed from 220px to 160px so it sits lower! */
        bottom: 160px; 
        
        width: 100%;
        justify-content: center;
        margin-top: 0;
        z-index: 10;
    }
    
    .social-label {
        display: none; 
    }
    .social-icons {
        border: none; 
        padding: 0;
        gap: 25px; /* Spaces the icons nicely */
    }

    /* 4. 🟢 Keep Giant Text safely at the bottom, above the footer */
    .giant-contact-text {
        font-size: clamp(2.8rem, 14vw, 4rem); 
        bottom: 70px; 
        left: 50%;
        transform: translateX(-50%); 
        width: 100%;
        text-align: center;
    }
}
/* ==========================================
   FROSTED GLASS CYBER FOOTER
   ========================================== */
.site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* The Frosted Glass Effect */
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* A subtle glowing top edge */
    border-top: 1px solid rgba(198, 255, 77, 0.3);
    z-index: 20; /* Keeps it strictly above the giant background text */
}

/* The Copyright Text */
.footer-text {
    font-family: var(--font-mono);
    color: #ffffff;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-text span {
    color: var(--neon-green, #C6FF4D);
    font-weight: bold;
}

/* The 'Back to Top' Button */
.back-to-top {
    background: transparent;
    border: none;
    color: var(--neon-green, #C6FF4D);
    font-family: "Xirod", var(--font-sans);
    font-size: 0.7rem;
    cursor: pointer;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.back-to-top:hover {
    color: #ffffff;
    text-shadow: 0 0 10px var(--neon-green, #C6FF4D);
    transform: translateY(-2px); /* Slight hop when hovered */
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .site-footer {
        flex-direction: column;
        justify-content: center;
        height: auto;
        padding: 15px 20px;
        gap: 10px;
    }
    .footer-text {
        font-size: 0.65rem;
        text-align: center;
    }
}
/* ==========================================
   SUBPAGE & GALLERY STYLES
   ========================================== */

/* The Top Navigation Bar */
.subpage-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 5%;
    border-bottom: 1px solid rgba(198, 255, 77, 0.2);
}

.subpage-title {
    font-family: "Xirod", sans-serif;
    color: var(--neon-green, #C6FF4D);
    font-size: clamp(1.5rem, 4vw, 3rem);
    letter-spacing: 2px;
}

/* The Return Button */
.return-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.return-btn:hover {
    border-color: var(--neon-green, #C6FF4D);
    color: var(--neon-green, #C6FF4D);
    box-shadow: 0 0 15px rgba(198, 255, 77, 0.2);
}

/* The Auto-Fitting Gallery Grid */
.gallery-container {
    display: grid;
    /* 🟢 THE MAGIC: Automatically makes columns that are at least 350px wide! */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    padding: 50px 5%;
    max-width: 2000px;
    margin: 0 auto;
}

/* Individual Image Cards */
.gallery-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* Keeps all thumbnails uniformly shaped */
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* The Hover Effect */
.gallery-item:hover {
    transform: translateY(-5px);
    border-color: var(--neon-green, #C6FF4D);
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* The hidden text that slides up on hover */
.overlay-info {
    position: absolute;
    bottom: -50px; /* Hidden below the box */
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    color: var(--neon-green, #C6FF4D);
    font-family: var(--font-mono);
    padding: 15px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    transition: bottom 0.3s ease;
}

.gallery-item:hover .overlay-info {
    bottom: 0; /* Slides up! */
}
/* ==========================================
   LIGHTBOX (FULL SCREEN IMAGE VIEWER)
   ========================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999; /* Forces it to sit on top of absolutely everything */
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px); /* Heavy glass blur */
    -webkit-backdrop-filter: blur(15px);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Hidden by default */
    opacity: 0;
    pointer-events: none; 
    transition: opacity 0.4s ease;
}

/* When the JS adds the 'active' class, it fades in! */
.lightbox.active {
    opacity: 1;
    pointer-events: auto; 
}

.lightbox-img {
    max-width: 90vw; /* Won't touch the sides of the screen */
    max-height: 80vh; /* Won't touch the top/bottom */
    object-fit: contain; /* Keeps the whole image visible without cropping */
    border-radius: 10px;
    
    /* A subtle green neon glow matching your theme */
    box-shadow: 0 0 50px rgba(198, 255, 77, 0.15); 
    
    /* Starts slightly shrunk for the zoom animation */
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox.active .lightbox-img {
    transform: scale(1); /* Zooms to full size when opened */
}

/* The Close Button */
.close-lightbox {
    position: absolute;
    top: 30px;
    right: 50px;
    color: var(--neon-green, #C6FF4D);
    font-size: 4rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    line-height: 1;
    z-index: 2;
}

.close-lightbox:hover {
    transform: scale(1.2);
    color: #fff;
}

/* The Text under the image */
.lightbox-caption {
    margin-top: 25px;
    color: #fff;
    font-family: "Xirod", var(--font-mono);
    font-size: 1.2rem;
    letter-spacing: 3px;
    text-align: center;
}

/* 🟢 Make video thumbnails fit the grid just like images */
.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover video {
    transform: scale(1.05); /* Hover zoom effect for videos too! */
}

/* 🟢 Style the Lightbox Video Player */
.lightbox-video {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(198, 255, 77, 0.15);
    outline: none;
    
    /* Starts hidden and shrunk for the animation */
    display: none; 
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Zooms to full size when opened */
.lightbox.active .lightbox-video {
    transform: scale(1); 
}