/* presentation.css — Full-screen slideshow styles */

:root {
    --ll-p-bg:     #000;
    --ll-p-text:   #fff;
    --ll-p-overlay-bg: rgba(0,0,0,0.88);
    --ll-p-accent: #e8422a;
    --ll-p-font:   system-ui, -apple-system, sans-serif;
}

/*
 * Reset any theme/block-editor layout constraints that narrow or centre content.
 * Block themes apply `.is-layout-constrained > * { max-width: ...; margin: auto }`
 * which would cap the presentation container to the content column width.
 * `position: fixed` takes the element out of normal flow entirely, so layout
 * constraints from ancestor elements can no longer affect it, and it always
 * covers the full viewport regardless of where the shortcode is placed in the page.
 */
.lumaloop-presentation {
    position:   fixed;
    inset:      0;
    width:      100%;
    height:     100vh;        /* fallback for browsers without dvh support */
    height:     100dvh;       /* dynamic viewport — accounts for mobile browser chrome */
    max-width:  none !important;
    margin:     0    !important;
    background: var(--ll-p-bg);
    overflow:   hidden;
    font-family: var(--ll-p-font);
    color:      var(--ll-p-text);
    z-index:    9999;         /* sit above theme header/footer */
}

/* ── Slide stage ── */
.ll-slide-stage {
    position: absolute;
    inset:    0;
}

.ll-slide {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: contain;
    opacity:    0;
}

/* ── Fade transition ── */
.ll-slide--fade { transition: opacity 0.8s ease; }
.ll-slide--fade.ll-slide--visible { opacity: 1; }
.ll-slide--fade.ll-slide--exit    { opacity: 0; }

/* ── Slide transition ── */
.ll-slide--slide { transform: translateX(100%); transition: transform 0.7s ease, opacity 0.3s; }
.ll-slide--slide.ll-slide--visible { transform: translateX(0); opacity: 1; }
.ll-slide--slide.ll-slide--exit    { transform: translateX(-100%); opacity: 0; }

/* ── Zoom transition ── */
.ll-slide--zoom  { transform: scale(1.08); transition: transform 0.8s ease, opacity 0.6s; }
.ll-slide--zoom.ll-slide--visible { transform: scale(1); opacity: 1; }
.ll-slide--zoom.ll-slide--exit    { transform: scale(0.94); opacity: 0; }

/* ── Overlays (pause / end) ── */

/*
 * Explicitly hide elements with the [hidden] attribute. Without this, author-level
 * `display: flex` below wins over the browser's built-in `[hidden] { display: none }`
 * rule, causing both overlays to be permanently visible on page load.
 */
.lumaloop-presentation [hidden] { display: none !important; }

.ll-overlay {
    position:       absolute;
    inset:          0;
    display:        flex;
    align-items:    center;
    justify-content: center;
    background:     var(--ll-p-overlay-bg);
    z-index:        10;
}
.ll-overlay__message {
    font-size:   3rem;
    font-weight: 700;
    text-align:  center;
    padding:     2rem;
}
.ll-overlay__image {
    max-width:  100%;
    max-height: 100%;
    object-fit: contain;
}

/* ── Empty state ── */
.ll-empty-state {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           rgba(255,255,255,0.4);
    font-size:       1.5rem;
    letter-spacing:  0.05em;
}

/* ── Fullscreen button ── */
.ll-fullscreen-btn {
    position:      absolute;
    bottom:        1.25rem;
    right:         1.25rem;
    background:    rgba(255,255,255,0.12);
    border:        none;
    border-radius: 8px;
    color:         rgba(255,255,255,0.7);
    cursor:        pointer;
    padding:       0.5rem;
    z-index:       20;
    transition:    background 0.2s;
    display:       flex;
    align-items:   center;
}
.ll-fullscreen-btn:hover { background: rgba(255,255,255,0.22); color: #fff; }