/* =========================================
   MOBILE OVERRIDES (Max Width 768px)
========================================= */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;

        width: 100%;
        margin: 0;
        padding: 0;
    }
    

    /* 1. Fix the Jumping Scroll / Height Glitch */
    .parallax-container {
        /* We make the container 20% taller than the phone screen... */
        height: 120vh; 
        /* ...and pull it up 10%. This hides the URL bar size changes! */
        top: -10vh; 
    }
    
    /* 2. Fix the Grey Screen */
    .parallax-layer {
        /* 'cover' forces the background to be tall enough to fill the phone */
        background-size: cover !important; 
        
        /* Centers the most interesting part of the background */
        background-position: center !important; 
        
        /* Stop it from repeating, since cover handles the sizing */
        background-repeat: no-repeat !important; 
    }




    .billboard-sign h2 { font-size: 2rem; }
    .billboard-sign h3 { font-size: 1.5rem; }
    #main-title { font-size: 3rem; }

    /* 3. Rebuild the Grid for 1 Column */


    /* 4. Shrink the Cards so the Pistons stay on screen */
    .piston-card-wrapper {
        transform: scale(0.8);
    }
    .card {
    width: 100%;
    min-width: 400px;
    padding: 30px 30px;
}
    .projects-grid img {
        width: 100%; /* Ensures the screenshot fits inside the newly shrunk card */
    }
    
    /* Shrink the gear containers so they don't block the screen */
    .top-gear-container, .bottom-gear-container {
        transform: scale(0.6);
        transform-origin: right center; /* This is the correct mechanical term */
    }

    /* Hovering ON OR Scrolled Into View (Piston Extends) */
    .piston-card-wrapper:hover .piston-sprite,
    .piston-card-wrapper.is-visible .piston-sprite {
        animation: extend-piston 0.4s steps(5) forwards;
    }

    .piston-card-wrapper:hover .piston-spriteRight,
    .piston-card-wrapper.is-visible .piston-spriteRight {
        animation: extend-piston 0.4s steps(5) forwards;
    }

    /* Hovering OFF OR Scrolled Out Of View (Piston Retracts) */
    .piston-card-wrapper:not(:hover):not(.is-visible) .piston-sprite,
    .piston-card-wrapper:not(:hover):not(.is-visible) .piston-spriteRight {
        animation: retract-piston 0.4s steps(5) forwards;
    }

    /* Add the .is-visible hook to all your gear animations too! */
    .piston-card-wrapper:hover .pistonGear-sprite,
    .piston-card-wrapper.is-visible .pistonGear-sprite {
        animation: spin-counterclockwisePiston 0.4s linear forwards;
    }
    .piston-card-wrapper:not(:hover):not(.is-visible) .pistonGear-sprite {
        animation: spin-clockwisePiston 0.4s linear forwards;
    }

    .piston-card-wrapper:hover .pistonGear-spriteRight,
    .piston-card-wrapper.is-visible .pistonGear-spriteRight {
        animation: spin-clockwisePistonRight 0.4s linear forwards;
    }
    .piston-card-wrapper:not(:hover):not(.is-visible) .pistonGear-spriteRight {
        animation: spin-counterclockwisePistonRight 0.4s linear forwards;
    }

    ::-webkit-scrollbar {
    width: 0px; /* Make it wide enough to fit your sprite */
}
}