/**
 * Bricksify: Text Roll.
 *
 * Loads only with the companion plugin, together with text-roll.js. Every
 * visual rule targets markup the script creates, so an element carrying
 * `bxc-text-roll` without the plugin is simply normal text.
 *
 * Tuning without JavaScript, as CSS custom properties on the element (Style >
 * CSS or a global class):
 *   --bxtr-shift  how far a letter travels, % of its line box     (120%)
 *   --bxtr-ease   timing curve               (cubic-bezier(.19,1,.22,1))
 *   --bxtr-clip   the per-word mask; the default leaves room for
 *                 descenders at tight line heights  (inset(0 0 -.12em 0))
 */

.bxc-text-roll .bxtr__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bxc-text-roll .bxtr__word {
	display: inline-block;
	white-space: nowrap;
	clip-path: var(--bxtr-clip, inset(0 0 -.12em 0));
}

.bxc-text-roll .bxtr__char {
	position: relative;
	display: inline-block;
	transition: transform var(--bxtr-speed, 1.25s) var(--bxtr-ease, cubic-bezier(.19, 1, .22, 1)) calc(var(--bxtr-delay, 0s) + var(--i, 0) * var(--bxtr-stagger, .03s));
}

.bxc-text-roll .bxtr__char::after {
	content: attr(data-char);
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(var(--bxtr-shift, 120%));
}

/* View trigger: letters wait below their mask, then rise into place. */
.bxc-text-roll.is-waiting .bxtr__char {
	transform: translate3d(0, var(--bxtr-shift, 120%), 0);
}

/* Hover: letters leave upwards while their copies rise from below. */
.bxc-text-roll.is-hovered .bxtr__char {
	transform: translate3d(0, calc(var(--bxtr-shift, 120%) * -1), 0);
}

/*
 * Rise (data-roll-effect="rise"): hidden one line below, tilted, at rest.
 * Showing, letters go in first-to-last after the delay; hiding, they leave
 * last-to-first with no delay - a reversed timeline, in CSS.
 *   --bxtr-tilt       start rotation                          (10deg)
 *   --bxtr-rise-ease  timing curve  (power1.inOut: cubic-bezier(.455,.03,.515,.955))
 *   --bxtr-rise-clip  the per-word mask. Tight to the line box, like the
 *                     reference's overflow:hidden: the roll's descender
 *                     allowance would let the tilted letters peek out.
 */
.bxc-text-roll[data-roll-effect="rise"] .bxtr__word {
	clip-path: var(--bxtr-rise-clip, inset(0));
}

.bxc-text-roll[data-roll-effect="rise"] .bxtr__char {
	transform: translate3d(0, 100%, 0) rotate(var(--bxtr-tilt, 10deg));
	transition: transform var(--bxtr-speed, .5s) var(--bxtr-rise-ease, cubic-bezier(.455, .03, .515, .955)) calc((var(--bxtr-count, 1) - 1 - var(--i, 0)) * var(--bxtr-stagger, .01s));
}

.bxc-text-roll[data-roll-effect="rise"] .bxtr__char::after {
	content: none;
}

.bxc-text-roll[data-roll-effect="rise"]:is(.is-hovered, .is-shown) .bxtr__char {
	transform: translate3d(0, 0, 0) rotate(0deg);
	transition-delay: calc(var(--bxtr-delay, .1s) + var(--i, 0) * var(--bxtr-stagger, .01s));
}

/*
 * Before the script runs, text set to reveal on view is hidden so it cannot
 * flash and then drop out of sight. `bx-js` is printed in <head> by the
 * companion only on pages that use the effect. If the script never arrives,
 * the failsafe shows the text after 3 seconds.
 */
html.bx-js body.bricks-is-frontend .bxc-text-roll:is([data-roll-trigger*="view"], [data-roll-trigger*="both"], [data-roll-trigger*="scroll"], [data-roll-trigger*="load"], [data-roll-effect="rise"]):not(.is-ready) {
	visibility: hidden;
	animation: bxtr-failsafe 0s 3s forwards;
}

@keyframes bxtr-failsafe {
	to {
		visibility: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bxc-text-roll .bxtr__char {
		transition: none;
	}
}