/* Beurre Slides (Bricks elements), shipped with Beurre 0.9.10
 *
 * Without JavaScript, in the editor, with reduced motion and in "normal scrolling" the slides are
 * ordinary stacked blocks. When slides mode is on, the stage is pinned (position: sticky) and every
 * slide sits on top of the others. The script gives each slide a role and a progress:
 *   data-role = cur | in | out | off      --p = 0 to 1 (transition progress)
 *   data-x    = the transition, written on both slides taking part. */

.btr-sl {
	position: relative;
}

.btr-sl__stage {
	position: relative;
}

/* Zero specificity, so every Bricks layout setting on a slide wins over these defaults. */
:where(.btr-sl__s) {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
}

:where(.btr-sl:not(.btr-sl--on)) .btr-sl__s {
	min-height: var(--btr-sl-min, 0svh);
}

/* While the script starts up the slides sit in one screen, so the page does not jump. */
@media (scripting: enabled) {
	.btr-sl:not(.is-ready) {
		height: 100vh;
		height: 100svh;
		overflow: hidden;
		animation: btr-sl-failsafe 0s linear 3s forwards;
	}
}

@keyframes btr-sl-failsafe {
	to {
		height: auto;
		overflow: visible;
	}
}

/* ------------------------------------------------------------ slides mode */

.btr-sl--on {
	/* The distance to scroll is added by the script as --btr-sl-px: the steps plus the extra scrolling of slides taller than the screen. */
	height: calc(100vh - var(--btr-sl-top, 0px) + var(--btr-sl-px, 0px));
	height: calc(100svh - var(--btr-sl-top, 0px) + var(--btr-sl-px, 0px));
}

.btr-sl--on .btr-sl__stage {
	position: sticky;
	top: var(--btr-sl-top, 0px);
	height: calc(100vh - var(--btr-sl-top, 0px));
	height: calc(100svh - var(--btr-sl-top, 0px));
	overflow: hidden;
	isolation: isolate;
	perspective: 1600px;
}

.btr-sl--on .btr-sl__s {
	position: absolute;
	inset: 0;
	width: auto;
	min-height: 0;
	overflow: hidden;
	z-index: 1;
}

.btr-sl--on .btr-sl__s[data-h="free"] {
	inset: 0 0 auto 0;
	height: fit-content;
	max-height: 100%;
}

.btr-sl--on .btr-sl__s[data-h="free"][data-va="center"] {
	inset: 0;
	margin-block: auto;
}

.btr-sl--on .btr-sl__s[data-h="free"][data-va="bottom"] {
	inset: auto 0 0 0;
}

.btr-sl--on .btr-sl__s[data-btr-gap]::after {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--btr-sl-end, 1px) - 1px);
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.btr-sl--on .btr-sl__s > * {
	flex-shrink: 0;
}

.btr-sl--on .btr-sl__s[data-role="off"] {
	visibility: hidden;
}

.btr-sl--on .btr-sl__s[data-role="cur"] {
	visibility: visible;
	z-index: 1;
}

.btr-sl--on .btr-sl__s[data-role="in"] {
	visibility: visible;
	z-index: 2;
}

.btr-sl--on .btr-sl__s[data-role="out"] {
	visibility: visible;
	z-index: 1;
}

/* Only slides that move or fade need their own layer. */
.btr-sl--on .btr-sl__s[data-x] {
	will-change: transform, opacity;
}

/* -------------------------------------------------------------- timer mode
 * Slides that change by themselves. The stage is not pinned and nothing is added to the page height:
 * every slide shares one cell of a grid, so the stage is as tall as the tallest slide (or the height set
 * on the element). The roles and transitions below are the same ones the scrolling mode uses.
 * Before the script runs (and without it) only the first slide shows. */

.btr-sl--timer:not(.is-ready) {
	height: auto;
	overflow: visible;
	animation: none;
}

.btr-sl--auto .btr-sl__stage,
.btr-sl--timer:not(.is-ready) .btr-sl__stage {
	display: grid;
	height: var(--btr-sl-ah, auto);
	overflow: hidden;
	isolation: isolate;
	perspective: 1600px;
}

.btr-sl--auto .btr-sl__s,
.btr-sl--timer:not(.is-ready) .btr-sl__s {
	grid-area: 1 / 1;
	min-height: 0;
	z-index: 1;
	overflow: hidden;
}

.btr-sl--timer:not(.is-ready) .btr-sl__s:not(:first-child) {
	visibility: hidden;
}

.btr-sl--auto .btr-sl__s[data-role="off"] { visibility: hidden; }
.btr-sl--auto .btr-sl__s[data-role="cur"] { visibility: visible; z-index: 1; }
.btr-sl--auto .btr-sl__s[data-role="in"] { visibility: visible; z-index: 2; }
.btr-sl--auto .btr-sl__s[data-role="out"] { visibility: visible; z-index: 1; }
.btr-sl--auto .btr-sl__s[data-x] { will-change: transform, opacity; }
.btr-sl--auto .btr-sl__s[data-x^="reveal-"][data-role="out"] { z-index: 2; }
.btr-sl--auto .btr-sl__s[data-x^="reveal-"][data-role="in"] { z-index: 1; }
.btr-sl--auto .btr-sl__s[data-x="mask-out"][data-role="out"] { z-index: 2; }
.btr-sl--auto .btr-sl__s[data-x="mask-out"][data-role="in"] { z-index: 1; }

.btr-sl__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	z-index: 10;
	background: var(--btr-sl-ui, #fff);
	opacity: .75;
	transform-origin: 0 50%;
	transform: scaleX(var(--btr-sl-prog, 0));
	pointer-events: none;
}

.btr-sl__pause {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 11;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .45);
	color: var(--btr-sl-ui, #fff);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btr-sl__pause:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.btr-sl__pause svg { width: 14px; height: 14px; fill: currentColor; }

/* -------------------------------------------------------------- transitions */

/* Cut */
.btr-sl__s[data-x="none"][data-role="in"] { opacity: clamp(0, calc((var(--p) - .5) * 1000), 1); }
.btr-sl__s[data-x="none"][data-role="out"] { opacity: clamp(0, calc((.5 - var(--p)) * 1000), 1); }

/* Fade */
.btr-sl__s[data-x="fade"][data-role="in"] { opacity: var(--p); }

/* Blur fade */
.btr-sl__s[data-x="blur"][data-role="in"] { opacity: var(--p); filter: blur(calc((1 - var(--p)) * 24px)); }
.btr-sl__s[data-x="blur"][data-role="out"] { filter: blur(calc(var(--p) * 24px)); }

/* Slide over: the new slide travels across a still one. */
.btr-sl__s[data-x="cover-up"][data-role="in"] { transform: translate3d(0, calc((1 - var(--p)) * var(--btr-sh, 100%)), 0); }
.btr-sl__s[data-x="cover-down"][data-role="in"] { transform: translate3d(0, calc((1 - var(--p)) * -1 * var(--btr-sh, 100%)), 0); }
.btr-sl__s[data-x="cover-left"][data-role="in"] { transform: translate3d(calc((1 - var(--p)) * var(--btr-sw, 100%)), 0, 0); }
.btr-sl__s[data-x="cover-right"][data-role="in"] { transform: translate3d(calc((1 - var(--p)) * -1 * var(--btr-sw, 100%)), 0, 0); }

/* Push: both slides move together. */
.btr-sl__s[data-x="push-up"][data-role="in"] { transform: translate3d(0, calc((1 - var(--p)) * var(--btr-sh, 100%)), 0); }
.btr-sl__s[data-x="push-up"][data-role="out"] { transform: translate3d(0, calc(var(--p) * -1 * var(--btr-sh, 100%)), 0); }
.btr-sl__s[data-x="push-down"][data-role="in"] { transform: translate3d(0, calc((1 - var(--p)) * -1 * var(--btr-sh, 100%)), 0); }
.btr-sl__s[data-x="push-down"][data-role="out"] { transform: translate3d(0, calc(var(--p) * var(--btr-sh, 100%)), 0); }
.btr-sl__s[data-x="push-left"][data-role="in"] { transform: translate3d(calc((1 - var(--p)) * var(--btr-sw, 100%)), 0, 0); }
.btr-sl__s[data-x="push-left"][data-role="out"] { transform: translate3d(calc(var(--p) * -1 * var(--btr-sw, 100%)), 0, 0); }
.btr-sl__s[data-x="push-right"][data-role="in"] { transform: translate3d(calc((1 - var(--p)) * -1 * var(--btr-sw, 100%)), 0, 0); }
.btr-sl__s[data-x="push-right"][data-role="out"] { transform: translate3d(calc(var(--p) * var(--btr-sw, 100%)), 0, 0); }

/* Uncover: the old slide leaves and shows the new one standing underneath. */
.btr-sl--on .btr-sl__s[data-x^="reveal-"][data-role="out"] { z-index: 2; }
.btr-sl--on .btr-sl__s[data-x^="reveal-"][data-role="in"] { z-index: 1; }
.btr-sl__s[data-x="reveal-up"][data-role="out"] { transform: translate3d(0, calc(var(--p) * -1 * var(--btr-sh, 100%)), 0); }
.btr-sl__s[data-x="reveal-down"][data-role="out"] { transform: translate3d(0, calc(var(--p) * var(--btr-sh, 100%)), 0); }
.btr-sl__s[data-x="reveal-left"][data-role="out"] { transform: translate3d(calc(var(--p) * -1 * var(--btr-sw, 100%)), 0, 0); }
.btr-sl__s[data-x="reveal-right"][data-role="out"] { transform: translate3d(calc(var(--p) * var(--btr-sw, 100%)), 0, 0); }

/* Parallax: slide over, while the old slide drifts the same way, slower. */
.btr-sl__s[data-x="parallax-up"][data-role="in"] { transform: translate3d(0, calc((1 - var(--p)) * var(--btr-sh, 100%)), 0); }
.btr-sl__s[data-x="parallax-up"][data-role="out"] { transform: translate3d(0, calc(var(--p) * -1 * .3 * var(--btr-sh, 100%)), 0); }
.btr-sl__s[data-x="parallax-down"][data-role="in"] { transform: translate3d(0, calc((1 - var(--p)) * -1 * var(--btr-sh, 100%)), 0); }
.btr-sl__s[data-x="parallax-down"][data-role="out"] { transform: translate3d(0, calc(var(--p) * .3 * var(--btr-sh, 100%)), 0); }
.btr-sl__s[data-x="parallax-left"][data-role="in"] { transform: translate3d(calc((1 - var(--p)) * var(--btr-sw, 100%)), 0, 0); }
.btr-sl__s[data-x="parallax-left"][data-role="out"] { transform: translate3d(calc(var(--p) * -1 * .3 * var(--btr-sw, 100%)), 0, 0); }
.btr-sl__s[data-x="parallax-right"][data-role="in"] { transform: translate3d(calc((1 - var(--p)) * -1 * var(--btr-sw, 100%)), 0, 0); }
.btr-sl__s[data-x="parallax-right"][data-role="out"] { transform: translate3d(calc(var(--p) * .3 * var(--btr-sw, 100%)), 0, 0); }

/* Zoom: the new slide appears while the old one fades in the second half, so there is never a gap. */
.btr-sl__s[data-x="zoom-in"] { transform-origin: var(--btr-ox, 50%) var(--btr-oy, 50%); }
.btr-sl__s[data-x="zoom-in"][data-role="in"] { opacity: calc(var(--p) * 2); transform: scale(calc(.7 + .3 * var(--p))); }
.btr-sl__s[data-x="zoom-in"][data-role="out"] { opacity: calc((1 - var(--p)) * 2); transform: scale(calc(1 + .25 * var(--p))); }
.btr-sl__s[data-x="zoom-out"] { transform-origin: var(--btr-ox, 50%) var(--btr-oy, 50%); }
.btr-sl__s[data-x="zoom-out"][data-role="in"] { opacity: calc(var(--p) * 2); transform: scale(calc(1.3 - .3 * var(--p))); }
.btr-sl__s[data-x="zoom-out"][data-role="out"] { opacity: calc((1 - var(--p)) * 2); transform: scale(calc(1 - .25 * var(--p))); }

/* Wipe */
.btr-sl__s[data-x="wipe-up"][data-role="in"] { clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0); }
.btr-sl__s[data-x="wipe-down"][data-role="in"] { clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0); }
.btr-sl__s[data-x="wipe-left"][data-role="in"] { clip-path: inset(0 0 0 calc((1 - var(--p)) * 100%)); }
.btr-sl__s[data-x="wipe-right"][data-role="in"] { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }

/* Iris */
.btr-sl__s[data-x="iris"][data-role="in"] {
	clip-path: circle(calc(var(--p) * 150%) at var(--btr-ox, 50%) var(--btr-oy, 50%));
}

/* Flip (3D): the stage provides the perspective. */
.btr-sl__s[data-x^="flip-"] { backface-visibility: hidden; }
.btr-sl__s[data-x="flip-up"][data-role="out"] { transform: rotateX(calc(var(--p) * 180deg)); }
.btr-sl__s[data-x="flip-up"][data-role="in"] { transform: rotateX(calc((1 - var(--p)) * -180deg)); }
.btr-sl__s[data-x="flip-down"][data-role="out"] { transform: rotateX(calc(var(--p) * -180deg)); }
.btr-sl__s[data-x="flip-down"][data-role="in"] { transform: rotateX(calc((1 - var(--p)) * 180deg)); }
.btr-sl__s[data-x="flip-left"][data-role="out"] { transform: rotateY(calc(var(--p) * -180deg)); }
.btr-sl__s[data-x="flip-left"][data-role="in"] { transform: rotateY(calc((1 - var(--p)) * 180deg)); }
.btr-sl__s[data-x="flip-right"][data-role="out"] { transform: rotateY(calc(var(--p) * 180deg)); }
.btr-sl__s[data-x="flip-right"][data-role="in"] { transform: rotateY(calc((1 - var(--p)) * -180deg)); }

/* Custom SVG mask. The script sets --btr-ms (size) and --btr-mx / --btr-my (position of the top left corner)
   in pixels, so the shape can start and end anywhere on the screen. */
.btr-sl__s[data-x="mask"][data-role="in"] {
	-webkit-mask-image: var(--btr-mask);
	mask-image: var(--btr-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: var(--btr-mx, 0) var(--btr-my, 0);
	mask-position: var(--btr-mx, 0) var(--btr-my, 0);
	-webkit-mask-size: var(--btr-ms, 0) var(--btr-ms, 0);
	mask-size: var(--btr-ms, 0) var(--btr-ms, 0);
}

/* The same shape as a hole that grows in the old slide. */
.btr-sl--on .btr-sl__s[data-x="mask-out"][data-role="out"] { z-index: 2; }
.btr-sl--on .btr-sl__s[data-x="mask-out"][data-role="in"] { z-index: 1; }
.btr-sl__s[data-x="mask-out"][data-role="out"] {
	-webkit-mask-image: linear-gradient(#000, #000), var(--btr-pm);
	mask-image: linear-gradient(#000, #000), var(--btr-pm);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 0 0, var(--btr-mx, 0) var(--btr-my, 0);
	mask-position: 0 0, var(--btr-mx, 0) var(--btr-my, 0);
	-webkit-mask-size: 100% 100%, var(--btr-ms, 0) var(--btr-ms, 0);
	mask-size: 100% 100%, var(--btr-ms, 0) var(--btr-ms, 0);
}

/* ------------------------------------------------------------ navigation */

.btr-sl__dots {
	position: absolute;
	z-index: 10;
	display: flex;
	gap: 2px;
	color: var(--btr-sl-ui, #fff);
	pointer-events: none;
}

.btr-sl--dots-right .btr-sl__dots,
.btr-sl--dots-left .btr-sl__dots {
	top: 50%;
	flex-direction: column;
	transform: translateY(-50%);
}

.btr-sl--dots-right .btr-sl__dots { right: 12px; }
.btr-sl--dots-left .btr-sl__dots { left: 12px; }

.btr-sl--dots-bottom .btr-sl__dots {
	left: 0;
	right: 0;
	bottom: 14px;
	justify-content: center;
}

.btr-sl__dot {
	position: relative;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	pointer-events: auto;
}

.btr-sl__dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: currentColor;
	opacity: .4;
	transition: opacity .15s ease, transform .15s ease;
}

.btr-sl__dot.is-active::after {
	opacity: 1;
	transform: scale(1.3);
}

.btr-sl__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- editor */

.btr-sl--builder {
	counter-reset: btr-slide;
}

.btr-sl--builder .btr-sl__s {
	position: relative;
	counter-increment: btr-slide;
	min-height: 40vh;
	outline: 1px dashed rgba(128, 128, 128, .55);
	outline-offset: -1px;
}

.btr-sl--ed-full .btr-sl__s {
	min-height: 100vh;
	min-height: 100svh;
}

.btr-sl--builder .btr-sl__s::before {
	content: "Slide " counter(btr-slide);
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 5;
	padding: 2px 8px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .72);
	color: #fff;
	font: 600 11px/1.6 system-ui, sans-serif;
	letter-spacing: .02em;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.btr-sl .btr-sl__s {
		will-change: auto;
	}
}

/* The sound button of a Visualiser set on the Slides element stays above every slide. */
.btr-sl__stage > .btr-viz-ui { z-index: 60; }