/* ACID - Gallery Styles (Digital Decay) */

:root {
    --gal-neon: #aeff00;
    --gal-border: #3a6b7c;
    --gal-line-col: hsla(120, 100%, 60%, 0.25); 
}

/* --- Overlay Container --- */
#gallery-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    
    background-color: rgba(0, 0, 0, 0.94);
    box-shadow: inset 0 0 150px 50px black; /* Vignette */

    opacity: 1;
    transition: opacity 0.3s ease;
    isolation: isolate;
}

.gallery-hidden { pointer-events: none; opacity: 0 !important; }

/* --- Background Effects --- */
#gallery-overlay::before,
#gallery-overlay::after {
    content: "";
    position: fixed;
    top: 50%; left: 50%;
    width: 2vmax; height: 2vmax; /* Tiny source */
    margin-top: -1vmax; margin-left: -1vmax;
    
    will-change: transform, filter;
    image-rendering: pixelated;
    pointer-events: none;
    mix-blend-mode: screen;
    
    /* Edge Blur Mask */
    -webkit-mask-image: radial-gradient(circle, black 30%, transparent 80%);
    mask-image: radial-gradient(circle, black 30%, transparent 80%);
}

#gallery-overlay::before {
    z-index: -2;
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 0.1px, var(--gal-line-col) 0.1px, var(--gal-line-col) 0.2px);
    animation: decay-1 30s linear infinite alternate;
}

#gallery-overlay::after {
    z-index: -1;
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 0.2px, var(--gal-line-col) 0.2px, var(--gal-line-col) 0.4px);
    animation: decay-2 45s linear infinite alternate;
}

@keyframes decay-1 {
    0% { transform: translate(0, 0) rotate(0deg) scale(60.0, 60.0); filter: hue-rotate(0deg); }
    25% { transform: translate(5vw, -5vh) rotate(90deg) scale(120.0, 40.0); }
    50% { transform: translate(-10vw, 10vh) rotate(180deg) scale(80.0, 150.0); filter: hue-rotate(180deg); }
    75% { transform: translate(5vw, 5vh) rotate(270deg) scale(140.0, 90.0); }
    100% { transform: translate(0, 0) rotate(360deg) scale(60.0, 60.0); filter: hue-rotate(360deg); }
}

@keyframes decay-2 {
    0% { transform: translate(0, 0) rotate(0deg) scale(80.0, 80.0); filter: hue-rotate(180deg); }
    33% { transform: translate(-15vw, 15vh) rotate(-120deg) scale(40.0, 130.0); }
    66% { transform: translate(15vw, -15vh) rotate(-240deg) scale(150.0, 50.0); filter: hue-rotate(270deg); }
    100% { transform: translate(0, 0) rotate(-360deg) scale(80.0, 80.0); filter: hue-rotate(540deg); }
}

/* --- UI Elements --- */
#gallery-close-btn {
    position: fixed;
    top: 20px; right: 20px;
    background: black;
    border: 2px solid var(--gal-neon);
    color: var(--gal-neon);
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 4px 4px 0 var(--gal-border);
    transition: all 0.1s;
}
#gallery-close-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--gal-border);
    background: var(--gal-neon);
    color: black;
}

.gallery-content { width: 90%; max-width: 1000px; margin-top: 80px; margin-bottom: 50px; text-align: center; }
.gallery-header h2 { font-family: 'Press Start 2P', cursive; color: var(--gal-neon); margin-bottom: 5px; text-shadow: 3px 3px 0 #000; background: black; display: inline-block; padding: 5px 10px; }
.gallery-subtitle { font-family: 'Press Start 2P', cursive; font-size: 0.7rem; color: #fff; opacity: 0.8; margin-bottom: 40px; background: black; display: inline-block; padding: 2px 5px; }

#gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; }

.gallery-item {
    border: 2px solid var(--gal-border);
    background: rgba(0, 0, 0, 0.9);
    padding: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.gallery-item:hover { border-color: var(--gal-neon); box-shadow: 0 0 20px rgba(174, 255, 0, 0.3); }

.gallery-thumb { width: 100%; height: 250px; object-fit: cover; border-bottom: 2px solid var(--gal-border); margin-bottom: 10px; display: block; filter: grayscale(80%) contrast(1.1); transition: filter 0.3s; }
.gallery-item:hover .gallery-thumb { filter: grayscale(0%) contrast(1.2) brightness(1.1); }

.gallery-info { font-family: 'Press Start 2P', cursive; text-align: left; padding: 0 5px; }
.gallery-title { font-size: 0.7rem; color: var(--gal-neon); display: block; margin-bottom: 5px; line-height: 1.4; transition: color 0.2s; }
.gallery-year { font-size: 0.55rem; color: #888; }

@keyframes text-chroma-flash {
    0% { opacity: 1; text-shadow: none; }
    20% { color: #fff; text-shadow: -3px 0 #ff00de, 3px 0 #00ffff; transform: skewX(-5deg); }
    40% { color: #fff; text-shadow: 3px 0 #ff00de, -3px 0 #00ffff; transform: skewX(5deg); }
    100% { color: #fff; text-shadow: 0 0 8px var(--gal-neon), 0 0 15px var(--gal-neon); transform: skewX(0deg); }
}
.gallery-item:hover .gallery-title { animation: text-chroma-flash 0.4s ease-out forwards; }

/* --- Lightbox --- */
#lightbox {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 3, 8, 0.95);
    z-index: 2000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.2s;
}
.lightbox-hidden { opacity: 0; pointer-events: none; }

#lightbox-img { max-width: 85%; max-height: 75vh; border: 2px solid var(--gal-neon); box-shadow: 0 0 40px rgba(174, 255, 0, 0.1); }

.lightbox-controls { margin-top: 20px; font-family: 'Press Start 2P', cursive; color: white; text-align: center; background: black; border: 1px solid var(--gal-border); padding: 10px 20px; }
#lb-title { color: var(--gal-neon); margin-right: 10px; text-transform: uppercase; }
#lb-year { font-size: 0.7rem; opacity: 0.8; }

#lb-prev, #lb-next, #lb-close {
    position: absolute; background: none; border: none; color: var(--gal-neon);
    font-family: 'Press Start 2P', cursive; font-size: 2rem; cursor: pointer;
    padding: 20px; top: 50%; transform: translateY(-50%);
    opacity: 0.7; transition: opacity 0.2s, text-shadow 0.2s;
}
#lb-prev:hover, #lb-next:hover, #lb-close:hover { opacity: 1; text-shadow: 0 0 10px var(--gal-neon); }
#lb-prev { left: 10px; }
#lb-next { right: 10px; }
#lb-close { top: 30px; right: 30px; font-size: 1rem; transform: none; border: 1px solid var(--gal-neon); padding: 10px; background: rgba(0,0,0,0.8); }

@media (max-width: 600px) {
    #gallery-grid { grid-template-columns: 1fr; gap: 20px; }
    .gallery-title { font-size: 0.6rem; }
    .gallery-header h2 { font-size: 1.2rem; }
    #lb-prev, #lb-next { font-size: 1.5rem; padding: 10px; background: rgba(0,0,0,0.6); border-radius: 4px; }
}