.bdcfx-host {
    isolation: isolate;
}

.bdcfx-source,
.bdcfx-output,
.bdcfx-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

.bdcfx-source,
.bdcfx-output {
    pointer-events: none;
}

.bdcfx-source {
    z-index: 0;
}

.bdcfx-output,
.bdcfx-canvas {
    z-index: var(--bdcfx-z, 20);
}

.bdcfx-source > .bdcfx-content-clone {
    position: relative !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    pointer-events: auto;
}


/* Immediate visual fallback for visitors who request reduced motion.
   frontend.js also avoids starting/destroys the JavaScript animation engines. */
@media (prefers-reduced-motion: reduce) {
    .bdcfx-source,
    .bdcfx-output,
    .bdcfx-canvas {
        display: none !important;
    }
}


/* Object effects sourced from an existing Breakdance Image/SVG render in a
   separate geometry-locked overlay. The source stays in normal layout and is
   therefore still the responsive sizing anchor. */
.bdcfx-object-stage {
    position: absolute !important;
    display: block !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    pointer-events: none;
}

.bdcfx-object-stage > .bdcfx-canvas {
    display: block !important;
}

@media (prefers-reduced-motion: reduce) {
    .bdcfx-object-stage {
        display: none !important;
    }
}

/* ASCII Sweep uses two persistent Canvas UI slots. Breakdance's real tab
   panels remain the source of truth and are restored immediately after each
   transition. Generated clones never receive pointer input. */
.bdcfx-ascii-slot-content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    background-color: transparent !important;
}

.bdcfx-ascii-panel-clone {
    box-sizing: border-box !important;
    color: inherit;
    pointer-events: none !important;
}

.bdcfx-ascii-source,
.bdcfx-ascii-output {
    pointer-events: none !important;
}

/* Window-scroll adapters. Canvas UI's Bend, Particle Scroll and Laser engines
   read scrollTop from their content element. Breakdance sections normally move
   with the document instead of scrolling internally, so frontend.js supplies a
   virtual scroll position and dispatches matching scroll events. */
.bdcfx-scroll-proxy {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.bdcfx-page-scroll-host {
    isolation: isolate;
}

.bdcfx-page-scroll-canvas {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    pointer-events: none !important;
}

.bdcfx-source > .bdcfx-scroll-capture-viewport {
    position: relative !important;
    inset: auto !important;
    width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.bdcfx-scroll-document-clone {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    pointer-events: none !important;
    will-change: transform;
}

/* Laser's upstream shader intentionally paints a solid bezel below the beam.
   The runtime crops that region while retaining the beam and lower glow. */
.bdcfx-laser-output {
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Peel uses the generated output canvas as its visible foreground. The source
   remains paintable but is visually transparent, while an optional element
   selected with data-bdcfx-under-selector is cloned into this under layer. */
.bdcfx-peel-host {
    overflow: hidden;
}

.bdcfx-peel-under {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: calc(var(--bdcfx-z, 20) - 1) !important;
    pointer-events: none !important;
}

.bdcfx-peel-output {
    z-index: var(--bdcfx-z, 20) !important;
    pointer-events: none !important;
}


/* Flame Wrap renders into an enlarged output canvas. Its upstream layout
   intentionally reaches above and beyond the wrapped content; the target must
   therefore allow the generated canvas to overflow its own box. */
.bdcfx-flame-host {
    overflow: visible !important;
}

.bdcfx-output.bdcfx-flame-output {
    overflow: visible !important;
    pointer-events: none !important;
}

/* Defense in depth for editor requests where another optimization layer may
   have cached the frontend stylesheet or script independently. */
html[data-bdcfx-editor-disabled="1"] .bdcfx-source,
html[data-bdcfx-editor-disabled="1"] .bdcfx-output,
html[data-bdcfx-editor-disabled="1"] .bdcfx-canvas,
html[data-bdcfx-editor-disabled="1"] .bdcfx-object-stage,
html[data-bdcfx-editor-disabled="1"] .bdcfx-ascii-slot-content,
html[data-bdcfx-editor-disabled="1"] .bdcfx-scroll-proxy,
html[data-bdcfx-editor-disabled="1"] .bdcfx-peel-under {
    display: none !important;
}