/* css/lightbox.css */

#popover-image-lightbox {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    width: 90vw;
    height: 85vh;
    max-width: 1200px;
    max-height: 900px;
    box-sizing: border-box;
    overflow: hidden;
}

.lightbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
    height: 35px;
    box-sizing: border-box;
}

.lightbox-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lightbox-zoom-text {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-left: 0.5rem;
}

/* Holds the image viewport and (when present) the annotation slider side by side. */
.lightbox-body {
    display: flex;
    gap: 0.75rem;
    height: calc(100% - 75px);
}

.lightbox-viewport {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    cursor: grab;
    touch-action: none;

    /* Isolates the viewport into its own compositing layer so rapid zoom/pan doesn't
       leave visual artifacts (tearing/ghosting) behind. */
    isolation: isolate;
    transform: translateZ(0);
}

.lightbox-target,
.lightbox-annotated-target {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.1s ease-out;

    /* Keeps the transform on the GPU and skips backface rendering during scaling —
       same anti-artifact fix as .lightbox-viewport above, applied to the image itself. */
    will-change: transform;
    backface-visibility: hidden;
}

/* Layered above the base image; opacity is driven by the annotation slider. */
.lightbox-annotated-target {
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}

.lightbox-caption {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 20px;
    line-height: 20px;
    margin-bottom: 0;
}

/* --- Annotation crossfade slider ------------------------------------------------ */
/* Hidden by default; lightbox.js only shows it when the open image has an
   annotated version. Hidden outright on narrow viewports (see media query below). */

.annotation-slider {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 90px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.annotation-slider-label {
    font-size: 0.7rem;
    text-align: center;
    color: #94a3b8;
    line-height: 1.25;
    padding: 0.35rem 0;
}

.annotation-rail {
    position: relative;
    width: 64px;
    flex: 1;
    min-height: 120px;
}

.annotation-rail-top,
.annotation-rail-bottom {
    position: absolute;
    left: 0;
    width: 64px;
    background-repeat: no-repeat;
    background-size: 64px auto;
    pointer-events: none;
}

.annotation-rail-top {
    top: 0;
    height: 96px;
    background-image: url('/img/rail_top.png');
    background-position: top center;
}

.annotation-rail-bottom {
    bottom: 0;
    height: 93px;
    background-image: url('/img/rail_bottom.png');
    background-position: bottom center;
}

/* Populated by JS with a stack of tile divs (not a plain CSS background-repeat) so
   a future set of alternate middle-section art can be picked at random per tile. */
.annotation-rail-middle-container {
    position: absolute;
    left: 0;
    top: 96px;
    bottom: 93px;
    width: 64px;
    overflow: hidden;
    background-image: url(/img/rail_middle.png);
    background-repeat: repeat-y;
    background-size: 64px 99px;
}

.annotation-rail-middle-tile {
    width: 64px;
    height: 99px;
    background-image: url('/img/rail_middle.png');
    background-size: 64px 99px;
    background-repeat: no-repeat;
    background-position: top center;
}

.annotation-handle {
    position: absolute;
    left: 50%;
    top: 20px;
    width: 36px;
    height: 11px;
    background-image: url('/img/handle.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    cursor: grab;
    touch-action: none;
}

.annotation-handle:active {
    cursor: grabbing;
}

@media (max-width: 768px) {
    .annotation-slider {
        display: none !important;
    }
}

/* --- Mobile opacity slider ------------------------------------------------------- */
/* Replaces the zoom buttons in the header when body.is-mobile — pinch-to-zoom still
   works without them, and the header space is put to better use blending annotations
   with a thumb-sized control instead of the sidebar rail, which is cramped/hidden at
   that width anyway (see the .annotation-slider media query above). Hidden otherwise;
   lightbox.js only ever adds .has-annotations when the open image has an annotated
   version, same gating as the vertical slider. */

.mobile-opacity-slider {
    display: none;
    flex: 1;
    align-items: center;
    min-width: 0;
    margin: 0 0.75rem;
}

body.is-mobile .lightbox-header {
    height: 64px;
}

body.is-mobile .lightbox-controls {
    display: none;
}

body.is-mobile .mobile-opacity-slider.has-annotations {
    display: flex;
}

/* Belt-and-suspenders: is-mobile (header-overflow-driven) and the 768px viewport
   breakpoint above are two different signals and can disagree at some widths. Without
   this, a viewport that's is-mobile but wider than 768px could show both sliders at
   once. !important is required here because the vertical slider's own display is set
   inline by JS (see open()/setAnnotationValue), which no plain selector can beat. */
body.is-mobile .annotation-slider {
    display: none !important;
}

.mobile-opacity-rail {
    position: relative;
    width: 100%;
    aspect-ratio: 1262 / 181;
    touch-action: none;
}

.mobile-opacity-rail-base,
.mobile-opacity-rail-glow {
    position: absolute;
    /* Matches the glow strip's own inset within the rail frame's cutout window (see
       MOBILE_RAIL_INSET_FRACTION in lightbox.js), so the glow strip lines up with the
       frame's transparent slot instead of running under its ornate end caps. */
    top: 26.52%;
    bottom: 26.52%;
    left: 7.805%;
    right: 7.805%;
    border-radius: 999px;
}

.mobile-opacity-rail-base {
    /* Flat "off" tone, always fully visible underneath — no image, so nothing to scale
       or stretch. What shows through once the glow layer above fades toward 0. */
    background: #2a2a2a;
}

.mobile-opacity-rail-glow {
    /* The "on" look, cross-faded in with plain opacity (--glow-opacity, set in
       lightbox.js straight from annotationValue) rather than a spatial mask — the whole
       strip changes color together as one, instead of a left-to-right reveal with a seam
       somewhere in the middle. background-size: cover scales without distorting the
       image's own proportions (no independent-axis stretch). */
    background-image: url('/img/m_background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--glow-opacity, 0);
}

.mobile-opacity-rail-frame {
    position: absolute;
    inset: 0;
    background-image: url('/img/m_rail.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

.mobile-opacity-knob {
    position: absolute;
    top: 50%;
    left: 0;
    height: 120%;
    aspect-ratio: 1 / 1;
    background-image: url('/img/m_knob.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    cursor: grab;
    touch-action: none;
}

.mobile-opacity-knob:active {
    cursor: grabbing;
}