/* ============================================
   LXE — SITE ENHANCEMENTS (shared, additive)
   Scroll progress · back-to-top · gallery lightbox
   selection & focus states · page fade-in
   ============================================ */

/* ── Brand text selection ─────────────────── */
::selection {
    background: rgba(152, 123, 88, 0.85);
    color: #F5EFE6;
}

/* ── Visible keyboard focus (a11y) ────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 1.5px solid #987B58;
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Skip link ────────────────────────────── */
.skip-link {
    position: fixed;
    top: -60px;
    left: 16px;
    z-index: 10000;
    background: #0F0D0A;
    color: #987B58;
    padding: 10px 22px;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(152, 123, 88, 0.4);
    transition: top 0.25s ease;
}
.skip-link:focus {
    top: 16px;
}

/* ── Scroll progress bar ──────────────────── */
.lxe-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 9999;
    pointer-events: none;
    background: transparent;
}
.lxe-progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(152,123,88,0.55), #987B58);
    transform-origin: 0 50%;
    transform: scaleX(0);
    will-change: transform;
}

/* ── Back to top ──────────────────────────── */
.lxe-top-btn {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 46px;
    height: 46px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 13, 10, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(152, 123, 88, 0.35);
    border-radius: 50%;
    color: #987B58;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s ease, background 0.3s ease;
}
.lxe-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.lxe-top-btn:hover {
    border-color: #987B58;
    background: rgba(15, 13, 10, 0.8);
}
.lxe-top-btn svg {
    width: 15px;
    height: 15px;
}
@media (max-width: 768px) {
    /* Smaller and translucent at rest on mobile: with content scrolling
       continuously beneath a persistent fixed button, full opacity means
       it inevitably sits squarely on top of text or photography at some
       point. Full brightness returns on touch so it's still unmistakably
       a control, not a decoration. */
    .lxe-top-btn { right: 14px; bottom: 14px; width: 36px; height: 36px; }
    .lxe-top-btn.visible { opacity: 0.5; }
    .lxe-top-btn:active {
        opacity: 1;
        background: rgba(15, 13, 10, 0.8);
    }
}

/* ── Gallery lightbox ─────────────────────── */
.lxe-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 9, 7, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.lxe-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}
.lxe-lightbox img {
    max-width: 88vw;
    max-height: 84vh;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    transform: scale(0.96);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    user-select: none;
}
.lxe-lightbox.open img {
    transform: scale(1);
}
.lxe-lb-close,
.lxe-lb-prev,
.lxe-lb-next {
    position: absolute;
    background: none;
    border: 1px solid rgba(152, 123, 88, 0.35);
    color: #987B58;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: border-color 0.3s ease, color 0.3s ease;
}
.lxe-lb-close:hover, .lxe-lb-prev:hover, .lxe-lb-next:hover {
    border-color: #987B58;
    color: #F5EFE6;
}
.lxe-lb-close { top: 24px; right: 24px; }
.lxe-lb-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lxe-lb-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.lxe-lb-counter {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(245, 239, 230, 0.55);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
}
@media (max-width: 768px) {
    .lxe-lb-prev { left: 10px; }
    .lxe-lb-next { right: 10px; }
    .lxe-lightbox img { max-width: 96vw; }
}

/* Zoom-in affordance on gallery images */
.g-item img,
.image-pair-wrap img,
.project-full-image img {
    cursor: zoom-in;
}

/* ── Page fade-in (non-index pages) ───────── */
body.project-page,
body.contact-page,
body.pall-page {
    animation: lxePageFade 0.7s ease both;
}
@keyframes lxePageFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body.project-page, body.contact-page, body.pall-page { animation: none; }
    .lxe-lightbox, .lxe-lightbox img, .lxe-top-btn { transition: none; }
}