/* gposes gallery — extends css/style.css (palette, fonts, CRT base, flicker keyframe) */

:root { --gap: 10px; }

/* the gallery scrolls, so opt this page out of style.css's vertical-centering body */
body.page-scroll { display: block; }
.page.gposes-page { max-width: none; margin: 0; padding: 34px clamp(16px, 3vw, 44px) 80px; }

/* directory section headers */
.dir { margin-bottom: clamp(34px, 5vw, 60px); }
.dir-head {
    display: flex; align-items: center; gap: .6em;
    padding-bottom: 10px; margin-bottom: var(--gap);
    border-bottom: 1px dashed rgba(208, 208, 224, .1);
}
.dir-head .ico { font-size: 1.15em; }
.dir-head .name { font-weight: 700; letter-spacing: .06em; font-size: 1.05em; }

/* masonry columns — preserves each shot's aspect ratio; column-width lets the
   browser add/drop columns to fill any width as the window resizes */
.frames { column-gap: var(--gap); column-width: 250px; }

.shot-link { display: block; cursor: zoom-in; }

/* images sit above the global CRT overlays at all times; their own veil supplies
   the scanlines so it can fade smoothly on hover instead of snapping */
figure.frame {
    position: relative; z-index: 10000; break-inside: avoid; margin: 0 0 var(--gap);
    border: 1px solid rgba(208, 208, 224, .1); border-radius: 4px; overflow: hidden;
    background: linear-gradient(180deg, rgba(155, 48, 255, .05), rgba(10, 10, 15, 0));
    box-shadow: 0 0 0 1px rgba(155, 48, 255, .04) inset, 0 0 22px rgba(155, 48, 255, .05);
    transition: box-shadow .3s, border-color .3s;
}
figure.frame::before, figure.frame::after {
    content: ""; position: absolute; width: 12px; height: 12px; z-index: 3;
    opacity: .55; transition: opacity .3s; pointer-events: none;
}
figure.frame::before { top: 0; left: 0; border-top: 1px solid var(--violet); border-left: 1px solid var(--violet); }
figure.frame::after { bottom: 0; right: 0; border-bottom: 1px solid var(--violet); border-right: 1px solid var(--violet); }
figure.frame .shot { display: block; width: 100%; height: auto; filter: saturate(1.03) contrast(1.02); transition: filter .4s; }
figure.frame .veil {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 1;
    mix-blend-mode: multiply; transition: opacity .4s ease;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 1px, rgba(0, 0, 0, .16) 1px, rgba(0, 0, 0, .16) 2px),
        repeating-linear-gradient(90deg, transparent 0, transparent 1px, rgba(0, 0, 0, .08) 1px, rgba(0, 0, 0, .08) 2px);
}
figure.frame:hover {
    z-index: 10001; border-color: rgba(155, 48, 255, .45);
    box-shadow: 0 0 0 1px rgba(155, 48, 255, .12) inset, 0 0 30px rgba(155, 48, 255, .2);
}
figure.frame:hover::before, figure.frame:hover::after { opacity: 1; }
figure.frame:hover .veil { opacity: 0; }
figure.frame:hover .shot { filter: none; }

/* flicker-in on scroll (reveal class added by gposes.js); hidden only when JS is present */
.js figure.frame { opacity: 0; }
.js figure.frame.in { animation: flicker .3s step-end both; }

/* lightbox — single overlay toggled by .show; gposes.js handles open/close/nav */
.lightbox {
    position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
    padding: 4vh 4vw; opacity: 0; visibility: hidden; pointer-events: none; background: rgba(8, 8, 12, .93);
    transition: opacity .35s ease, visibility .35s ease;
}
.lightbox.show { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox .lb-bg { position: absolute; inset: 0; cursor: zoom-out; }
.lightbox .lb-frame { position: relative; display: flex; transform: scale(.985); transition: transform .35s ease; }
.lightbox.show .lb-frame { transform: scale(1); }
.lightbox .lb-img {
    display: block; max-width: 92vw; max-height: 92vh; width: auto; height: auto; object-fit: contain;
    border: 1px solid rgba(155, 48, 255, .4);
    box-shadow: 0 0 0 1px rgba(155, 48, 255, .15), 0 0 44px rgba(155, 48, 255, .22), 0 0 100px rgba(0, 0, 0, .6);
}
.lightbox .lb-frame::before, .lightbox .lb-frame::after {
    content: ""; position: absolute; width: 22px; height: 22px; z-index: 2; pointer-events: none; opacity: .75;
}
.lightbox .lb-frame::before { top: 0; left: 0; border-top: 1px solid var(--violet); border-left: 1px solid var(--violet); }
.lightbox .lb-frame::after { bottom: 0; right: 0; border-bottom: 1px solid var(--violet); border-right: 1px solid var(--violet); }
.lb-x {
    position: absolute; top: 16px; right: 22px; z-index: 2; font-size: 22px; line-height: 1;
    color: var(--violet); text-shadow: 0 0 10px var(--violet-glow); text-decoration: none;
    background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.lb-x:hover { text-shadow: 0 0 16px var(--violet-glow), 0 0 30px rgba(155, 48, 255, .3); }
.lb-hint {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 100001;
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim-strong);
    opacity: 0; pointer-events: none; transition: opacity .35s ease .05s;
}
.lb-hint .k { color: var(--violet); }
.lightbox.show ~ .lb-hint { opacity: .85; }

.gposes-foot { margin-top: 48px; padding-top: 14px; border-top: 1px dashed rgba(208, 208, 224, .18); font-size: .92em; }
.gposes-foot a { color: inherit; text-decoration: none; transition: color .25s, text-shadow .25s; }
.gposes-foot a:hover { color: var(--violet); text-shadow: var(--violet-hover-glow); }

@media (prefers-reduced-motion: reduce) {
    .js figure.frame { opacity: 1; animation: none; }
}