/*
 * Image sequence on scroll (Osmo Supply). Structuur ongewijzigd; aangevuld met
 * box-sizing (Webflow-code, zie valkuil 5) en een donkere grond, zodat er vóór
 * het eerste frame geen lichte vlek staat.
 */

.image-sequence__wrap,
.image-sequence__wrap * {
	box-sizing: border-box;
}

.image-sequence__wrap {
	width: 100%;
	height: 300vh;
	position: relative;
	background-color: var(--wp--preset--color--ink, #1b0b09);
}

.image-sequence__sticky {
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	display: flex;
	position: sticky;
	top: 0;
}

.image-sequence__element {
	z-index: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0%;
}

.image-sequence__canvas {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	position: relative;
}

/* ------------------------------------------- kleurlaag + tekst (optioneel) */

/* Doorzichtige kleurlaag over de frames (shortcode: overlay="wine-deep" dekking="62").
   color-mix in plaats van opacity: dan houdt de filmkorrel (::after van
   .boozt-grain) zijn eigen sterkte. Selector met twee classes, zodat
   `position: absolute` wint van `.boozt-grain { position: relative }`. */
.image-sequence__sticky > .image-sequence__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-color: color-mix(in srgb, var(--seq-overlay) var(--seq-dekking, 62%), transparent);
}

/* Tekst over de sequence (shortcode: kicker="…" tekst="regel|regel|regel").
   Dekking 62% ossebloed geeft ook over de lichte lucht nog genoeg contrast
   voor het kleine label; lager zetten gaat ten koste van leesbaarheid. */
.image-sequence__content {
	position: relative;
	z-index: 3;
	/* Zelfde linkerlijn als .alignwide-blokken: 72rem breed, of het scherm minus de
	   randafstand. De randafstand zit buiten de breedte, net als bij WordPress'
	   constrained layout — met padding erbinnen stond de tekst 1,5rem te ver naar rechts. */
	width: min(var(--wp--style--global--wide-size, 72rem), 100% - 2 * var(--wp--style--root--padding-left, 1.5rem));
	padding-inline: 0;
	color: var(--wp--preset--color--cream, #ebe0d6);
	/* Onderaan uitgelijnd, zodat de tekst niet over het ingeschonken glas valt. Loopt het venster door achter het
	   dock, dan schuift de tekst precies dat stukje omhoog (29-09: de onderste regel viel weg achter het dock). */
	align-self: flex-end;
	padding-bottom: calc(50px + var(--boozt-verborgen-onder, 0px));
}