/**
 * 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
 */

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

/* 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;
}