/* ==========================================================================
   Parallax Groups — frontend + editor styles
   ========================================================================== */

/*
 * HOW IT WORKS
 * ─────────────────────────────────────────────────────────────────────────
 * Each .is-style-parallax-layer keeps its normal-flow box exactly in place
 * — no gaps between sections. overflow:hidden clips at the section boundary.
 *
 * The INNER container (wp-block-group__inner-container) gets the translateY,
 * so the parallax effect is visible only within each section's own area.
 * The outer block never shifts, so neighbours stay flush.
 * ─────────────────────────────────────────────────────────────────────────
 */

.is-style-parallax-layer {
    overflow: hidden; /* clip the translated inner content at section edges */
}

.is-style-parallax-layer > .wp-block-group__inner-container,
.is-style-parallax-layer > .wp-block-group {
    transform: translateY(var(--pg-offset, 0px));
    will-change: transform;
}

/* ── Editor overrides ────────────────────────────────────────────────────── */
.editor-styles-wrapper .is-style-parallax-layer,
.block-editor-block-list__layout .is-style-parallax-layer {
    overflow: visible !important;
    outline: 2px dashed rgba(100, 100, 255, 0.4);
    outline-offset: -2px;
}

.editor-styles-wrapper .is-style-parallax-layer > .wp-block-group__inner-container,
.editor-styles-wrapper .is-style-parallax-layer > .wp-block-group,
.block-editor-block-list__layout .is-style-parallax-layer > .wp-block-group__inner-container,
.block-editor-block-list__layout .is-style-parallax-layer > .wp-block-group {
    transform: none !important;
}

/* Editor badge */
.editor-styles-wrapper .is-style-parallax-layer::before,
.block-editor-block-list__layout .is-style-parallax-layer::before {
    content: "⟳ Parallax Layer";
    display: inline-block;
    font-size: 10px;
    font-family: monospace;
    background: #1e1e1e;
    color: #fff;
    padding: 2px 8px;
    border-radius: 0 0 4px 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0.75;
}