:root {
    --zoom-ratio: 1;
    /* Fallback value, JS will overwrite this immediately */
    --base-cell-size: 110px; 
    
    --cell-size: calc(var(--base-cell-size) / var(--zoom-ratio)); 
    
    /* These use ratios of the base size to keep lines sharp across monitors */
    --line-base: calc((var(--base-cell-size) * 0.027) / var(--zoom-ratio));     
    --line-glow: calc((var(--base-cell-size) * 0.027) / var(--zoom-ratio));    
    --blur-grid: calc((var(--base-cell-size) * 0.022) / var(--zoom-ratio));    
    --blur-icon: calc((var(--base-cell-size) * 0.013) / var(--zoom-ratio));    
}




body {
    margin: 0;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background-color: #000C24;
}

/* MASTER WRAPPER */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    isolation: isolate; 
}

/* LAYER 1: Gradient */
.gradient-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #219BFF 0%, #184787 50%, #000C24 100%);
}

/* --- PARALLAX WRAPPER --- */
.parallax-wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    /* No transitions! We want the stop-motion snap */
    transform: translateY(0px);
}

/* LAYER 2: Grid & Icons */
.rotated-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Massive size to ensure no edges are seen at any scroll/zoom level */
    width: 160vw; 
    height: 250vh;
    transform: translate(-50%, -50%) rotate(6deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--cell-size));
    grid-auto-rows: var(--cell-size);
}

.grid-cell {
    position: relative;
    width: var(--cell-size);
    height: var(--cell-size);
    box-sizing: border-box;
    z-index: 1; 
    
    /* Uses the 2px equivalent */
    border-right: var(--line-base) solid rgba(255, 255, 255, 0.05);
    border-bottom: var(--line-base) solid rgba(255, 255, 255, 0.05);
    
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Grid Blur Effect */
.grid-cell::before {
    content: '';
    position: absolute;
    top: -0px; left: -0px; right: -0px; bottom: -0px;
    z-index: 2;
    
    /* Uses the 2.5px equivalents */
    border-right: var(--line-glow) solid rgba(255, 255, 255, 0.6);
    border-bottom: var(--line-glow) solid rgba(255, 255, 255, 0.6);
    filter: blur(var(--blur-grid));
    pointer-events: none;
}

/* --- WRAPPER FOR ICONS --- */
.icon-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-icon {
    width: calc(var(--cell-size) * 0.8);
    height: calc(var(--cell-size) * 0.8);
    object-fit: contain;
    
    opacity: 0.35; 
    /* Uses the 1.5px equivalent */
    filter: blur(var(--blur-icon));
    transform-origin: center center;
    transform: scale(1);
}

/* --- STOP MOTION ANIMATION FRAMES --- */
.grid-icon.anim-frame-1 { transform: scale(.9); }
.grid-icon.anim-frame-2 { transform: scale(.8); }
.grid-icon.anim-frame-3 { transform: scale(1.05); }
.grid-icon.anim-frame-4 { transform: scale(.95); }

/* LAYER 3: Paper Texture */
/* The Container */
.paper-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

/* Portrait Mobile Fix: Rotate the container itself */
@media (orientation: portrait) {
    .paper-texture {
        width: 100vh;
        height: 100vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

/* The Images */
.paper-texture img {
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* Back to standard percentages to maintain the rectangle */
    width: 125%;
    height: 125%;
    
    object-fit: cover;
    opacity: 0;
    mix-blend-mode: luminosity;
    transform: translate(-50%, -50%); /* Base centering */
}

.paper-texture img.active {
    opacity: 0.5; /* Snaps instantly */
}

/* Lock background aspect and blend modes on portrait/mobile */
@media (orientation: portrait) {
    .paper-texture { /* Replace with your actual background wrapper class */
        /* Forces the background to cover the space without stretching the focal point */
        background-size: cover !important;
        background-position: center center !important;
        
        /* Re-enforce blend modes that browsers sometimes drop on resize */
        mix-blend-mode: luminosity; 
    }

}