/**
 * Motion.
 *
 * Hidden and moving states hang on html.sincro-anim, which a snippet in the
 * head sets only when the visitor has not asked for reduced motion. Without
 * it, or without the script, the page is the static one.
 */

/* Lenis needs the document to size itself and native smoothing off. */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: clip;
}

/* ================================================================ reveals */

html.sincro-anim .sincro-rev {
	opacity: 0;
	transform: translateY( 2rem );
	transition:
		opacity 0.8s cubic-bezier( 0.2, 0.7, 0.2, 1 ) var( --d, 0s ),
		transform 0.8s cubic-bezier( 0.2, 0.7, 0.2, 1 ) var( --d, 0s );
}

html.sincro-anim .sincro-rev.is-in {
	opacity: 1;
	transform: none;
}

/* Headline words rise out of a mask. The padding keeps descenders inside it. */
.sincro-pal {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding: 0 0.05em 0.16em;
	margin: 0 -0.05em -0.16em;
}

.sincro-pal__i {
	display: inline-block;
}

html.sincro-anim .sincro-split .sincro-pal__i {
	transform: translateY( 115% );
	transition: transform 0.9s cubic-bezier( 0.2, 0.75, 0.2, 1 ) calc( 0.1s + var( --w, 0 ) * 0.09s );
}

html.sincro-anim .sincro-split.is-in .sincro-pal__i {
	transform: none;
}

/* The festival lettering is written left to right. */
html.sincro-anim .sincro-festival__rotulo img {
	clip-path: inset( 0 100% 0 0 );
	transition: clip-path 1.2s cubic-bezier( 0.65, 0, 0.2, 1 ) 0.2s;
}

html.sincro-anim .sincro-festival__rotulo.is-in img {
	clip-path: inset( 0 0 0 0 );
}

/* ======================================================= scroll-linked */

/* The diagonal opens from a flat edge; the script sets --sincro-p from 0 to 1. */
html.sincro-anim .sincro-banda--corte::after {
	clip-path: polygon( 0 calc( 100% - 100% * var( --sincro-p, 1 ) ), 100% 100%, 0 100% );
}

/* contain leaves no horizontal slack, so the knife moves with a pixel offset. */
html.sincro-anim .sincro-banda--navaja {
	background-position: center, calc( 50% + var( --sincro-nx, 0px ) ) 50%;
}

html.sincro-anim .sincro-cinta__item {
	overflow: hidden;
}

html.sincro-anim .sincro-cinta img {
	transform: translateY( var( --cy, 0px ) ) scale( 1.16 );
	will-change: transform;
}

.sincro-progreso {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100000;
	height: 3px;
	background: var( --wp--preset--color--tinta );
	transform: scaleX( 0 );
	transform-origin: 0 50%;
	pointer-events: none;
}

/* ================================================================ hover */

@media ( prefers-reduced-motion: no-preference ) {
	.wp-element-button {
		transition:
			transform 0.25s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
			translate 0.25s ease-out,
			background-color 0.2s ease,
			border-color 0.2s ease,
			color 0.2s ease;
	}

	.wp-element-button:hover {
		transform: translateY( -2px );
	}

	.sincro-agenda__item {
		transition:
			background-color 180ms ease,
			transform 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 );
	}

	.sincro-agenda__item:hover {
		transform: translateY( -3px );
	}
}

/* ================================================================ cursor */

/* White with difference blending reads on every band colour; the native cursor stays. */
.sincro-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 2px solid white;
	border-radius: 50%;
	mix-blend-mode: difference;
	opacity: 0;
	pointer-events: none;
	transition:
		width 0.25s ease,
		height 0.25s ease,
		margin 0.25s ease,
		background-color 0.25s ease,
		opacity 0.25s ease,
		scale 0.15s ease;
}

.sincro-cursor.is-on {
	opacity: 1;
}

.sincro-cursor.is-hot {
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	background: white;
}

.sincro-cursor.is-text {
	opacity: 0;
}

.sincro-cursor.is-down {
	scale: 0.8;
}

@media ( prefers-reduced-motion: reduce ) {
	.sincro-cursor,
	.sincro-progreso {
		display: none;
	}
}