/**
 * Scroll Sequence — style.css (editor + frontend)
 *
 * Layered like core/cover:
 *   poster <img> + <canvas>  → background layer (absolute, behind)
 *   .__overlay               → optional dim scrim
 *   .__inner                 → InnerBlocks content, constrained + on top
 */

/*
 * Prevent the 100vw breakout from triggering a horizontal scrollbar (on
 * Windows 100vw includes the scrollbar width). Only loaded on pages with the
 * block. Mirrors the horizontal-scroll block.
 */
body { overflow-x: hidden; }

.oi-scroll-sequence {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	box-sizing: border-box;
}

/*
 * Self-contained full-bleed — do NOT rely on WordPress's root-padding-aware
 * `.has-global-padding > .alignfull` rule: when GSAP pins the block it wraps it
 * in a `.pin-spacer`, so the block is no longer a direct child of the padded
 * container and that rule stops matching, collapsing the block to content width.
 * This breakout works relative to ANY centered parent (the constrained
 * container OR the pin-spacer), and !important beats both the constrained-layout
 * `margin:auto` and GSAP's inline margins. Formula mirrors WP's own alignfull.
 */
.oi-scroll-sequence.alignfull {
	width:        100vw !important;
	max-width:    none  !important;
	margin-left:  calc( (100% - 100vw) / 2 ) !important;
	margin-right: calc( (100% - 100vw) / 2 ) !important;
}

/* Background layer — poster paints first (LCP), canvas draws over it. */
.oi-scroll-sequence__poster,
.oi-scroll-sequence__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	display: block;
}

/* Poster uses object-fit; the canvas does its own object-fit math in JS, so it
   must NOT also be object-fit (it would double-scale the bitmap). */
.oi-scroll-sequence__poster {
	z-index: 0;
	object-fit: cover;
}

.oi-scroll-sequence__canvas {
	z-index: 1;
}

.oi-scroll-sequence__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

/* Content layer — constrained to content width and centered, like the cover
   inner container. Authors nest heading / buttons / groups here. */
.oi-scroll-sequence__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1140px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50, 1.5rem);
	box-sizing: border-box;
}

/* Editor: GSAP doesn't run on the canvas in the editor, so the poster is the
   live preview. Give an empty block a visible frame so it isn't collapsed. */
.oi-scroll-sequence--editor .oi-scroll-sequence__canvas {
	background: transparent;
}

/* Editor: reset the frontend 100vw breakout — the editor canvas handles
   alignfull width itself, so the !important breakout would overflow it. */
.editor-styles-wrapper .oi-scroll-sequence--editor.alignfull {
	width:        auto !important;
	max-width:    none !important;
	margin-left:  0    !important;
	margin-right: 0    !important;
}