/* Panoramic Background — Frontend */

.pano-bg-wrap {
    position: relative;
    isolation: isolate; /* own stacking context — keeps canvas z-index:-1 inside the wrap */
    display: flex;          /* lets .pano-bg-content fill the section (flex:1) */
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    /* Ensure the wrap div always has a painted height before JS measures it.
       The inline style height (100vh etc) takes precedence but this prevents
       a zero-height flash on slow connections / mobile tunnels. */
    min-height: 100px;
}

/* Full-height rail for the canvas. Absolute, so it never affects content
   layout. In default mode it's just a passthrough; in sticky mode the
   canvas slides along it. */
.pano-bg-canvas-holder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pano-bg-canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
}

/* ── Sticky viewport mode (opt-in: "Pin background to viewport") ──────────
   Canvas is viewport-sized and sticks to the top of the screen while the
   section scrolls past, instead of stretching to content height. */
.pano-bg-wrap.pano-bg-sticky {
    /* clip, not hidden: overflow:hidden creates a scroll container which
       kills position:sticky on the canvas. clip only clips. */
    overflow: clip;
}

.pano-bg-wrap.pano-bg-sticky .pano-bg-canvas {
    position: sticky;
    height: min(100%, 100vh);
}

@supports (height: 100dvh) {
    .pano-bg-wrap.pano-bg-sticky .pano-bg-canvas { height: min(100%, 100dvh); }
}

.pano-bg-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Editor empty state */
.pano-bg-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #888;
    font-family: sans-serif;
    font-size: 14px;
    min-height: 200px;
}

/* Gutenberg editor block outline */
.wp-block[data-type="panoramic-background/section"] > div {
    outline: 2px dashed rgba(100,100,255,0.3);
    outline-offset: -2px;
}