/* ═══════════════════════════════════════════
   PHOTO — Gallery / Embla Coverflow
   ═══════════════════════════════════════════ */

.gallery-panel {
    padding-bottom: 4.5rem;
}

/* ── Embla root ── */
.embla {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}
.embla:focus-visible {
    outline: none;
}

/* ── Viewport ── */
.embla__viewport {
    overflow: hidden;
    padding: 3rem 0;
    perspective: 1600px;
    perspective-origin: 50% 50%;
}

/* ── Track ── */
.embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
    will-change: transform;
    cursor: grab;
}
.embla__container:active {
    cursor: grabbing;
}

/* ── Slide ── */
.embla__slide {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    width: min(56vw, 360px);
    margin: 0 -34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.embla__slide__inner {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 1.75rem;
    overflow: hidden;
    background: #0a0207;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: box-shadow 0.7s cubic-bezier(.22, 1, .36, 1),
                border-color 0.7s cubic-bezier(.22, 1, .36, 1);
    will-change: transform, filter, opacity;
}
.embla__slide__inner.is-active {
    border-color: rgba(255, 42, 133, 0.55);
    box-shadow: 0 30px 90px rgba(255, 42, 133, 0.4),
                0 0 70px rgba(255, 42, 133, 0.28),
                0 0 0 1px rgba(255, 42, 133, 0.2);
}

.embla__slide__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 0.25s ease-out;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* ── Glass overlay ── */
.slide-glass {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}
.slide-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.05) 22%,
        rgba(255, 255, 255, 0) 42%,
        rgba(255, 255, 255, 0) 68%,
        rgba(255, 255, 255, 0.07) 100%
    );
    mix-blend-mode: overlay;
}
.slide-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22),
                inset 0 -30px 50px rgba(0, 0, 0, 0.4);
}

/* ── Caption ── */
.gallery-caption {
    max-width: 340px;
    margin: 2rem auto 0;
    text-align: center;
}
.caption-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 42, 133, 0.5), transparent);
}
.caption-row {
    display: flex;
    justify-content: center;
    gap: 1.8rem;
    flex-wrap: wrap;
    padding: 1rem 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.caption-row.in {
    opacity: 1;
    transform: translateY(0);
}
.caption-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #ddd;
}
.caption-icon {
    font-size: 0.9rem;
}

/* ── Dot indicators ── */
.embla__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.6rem;
}
.embla__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.5s cubic-bezier(.34, 1.56, .64, 1),
                background 0.4s ease,
                box-shadow 0.4s ease;
}
.embla__dot:hover {
    background: rgba(255, 42, 133, 0.55);
}
.embla__dot.is-selected {
    width: 28px;
    background: var(--neon);
    box-shadow: 0 0 12px var(--neon-glow);
}
.embla__dot:focus-visible {
    outline: 2px solid var(--neon);
    outline-offset: 3px;
}