/**
 * Casas Choice — motion (inc/animations.php).
 *
 * Restrained on purpose, in the spirit of the ASA site: only opacity and
 * movement are animated (nothing changes size or pushes the layout), each
 * thing moves once, and nothing moves for people who prefer reduced motion.
 *
 *  1. First screen   Plays on load, in reading order: the breadcrumb, the
 *                    title, the intro, the buttons. Hero photos are never
 *                    faded themselves (they are what the browser times the
 *                    page load by): a veil the colour of the page lifts off
 *                    them, or a photo inside a frame settles from a slight
 *                    zoom.
 *  2. Scroll reveals Below the first screen, assets/js/animations.js gives
 *                    what comes into view `data-cc-fx` and, as it arrives,
 *                    `cc-fx-in` plus its place in the queue (--cc-fx-delay),
 *                    so the cards of a row come in one after the other. It
 *                    lists what moves and what doesn't.
 *
 * For the editor: the class `cc-fx-off` on a block (Advanced > Additional CSS
 * class) keeps it, and everything inside it, still.
 *
 * Fills are `backwards` only: once a reveal ends nothing of it stays applied,
 * so it leaves no stacking context or transform behind for hover effects,
 * sticky elements or dropdowns.
 */

@keyframes cc-fx-rise {
	from {
		opacity: 0;
		translate: 0 var( --cc-fx-rise );
	}
}

@keyframes cc-fx-fade {
	from {
		opacity: 0;
	}
}

@keyframes cc-fx-settle {
	from {
		scale: 1.06;
	}
}

@keyframes cc-fx-veil {
	from {
		opacity: 1;
	}
}

:root {
	--cc-fx-rise: 24px;
	--cc-fx-ease: cubic-bezier( 0.22, 1, 0.36, 1 );
	--cc-fx-time: 900ms;
}

@media ( max-width: 689.98px ) {
	:root {
		--cc-fx-rise: 16px;
	}
}

@media ( prefers-reduced-motion: no-preference ) {

	/* ---------- 1. First screen ---------- */

	/* Greenshift pages: the first row. (Its other blocks — a long legal text
	 * in Política de Privacidade — stay still.) */
	main > .gspb_row:first-child .cc-breadcrumb-nav,
	.cc-article__breadcrumb,
	.cc-lp-hero .cc-breadcrumb-nav,
	.imv-title-row .cc-breadcrumb-nav {
		animation: cc-fx-fade 700ms var( --cc-fx-ease ) backwards;
	}

	main > .gspb_row:first-child h1.gspb_heading,
	.cc-article__meta,
	.cc-lp-hero__title,
	.imv-title-row__heading {
		animation: cc-fx-rise var( --cc-fx-time ) var( --cc-fx-ease ) 80ms backwards;
	}

	.cc-article__title {
		animation: cc-fx-rise var( --cc-fx-time ) var( --cc-fx-ease ) 160ms backwards;
	}

	main > .gspb_row:first-child .gspb_text,
	.cc-lp-hero__lead,
	.imv-title-row .imv-subtitle {
		animation: cc-fx-rise var( --cc-fx-time ) var( --cc-fx-ease ) 170ms backwards;
	}

	.cc-article__lead,
	main > .gspb_row:first-child :is( .gspb_button_wrapper, .ccf-om-actions ),
	.cc-lp-hero .cc-lp-btn,
	.imv-title-row__actions {
		animation: cc-fx-rise var( --cc-fx-time ) var( --cc-fx-ease ) 260ms backwards;
	}

	/* Hero photos. A photo set as the background of the first row's last
	 * column (the pages), or a photo in a frame (Local pages, articles): a
	 * veil the colour of the page lifts off it. */
	main > .gspb_row:first-child > .wp-block-greenshift-blocks-row-column:last-child:not( :first-child ),
	.cc-lp-hero__media,
	.cc-article__photo {
		position: relative;
	}

	main > .gspb_row:first-child > .wp-block-greenshift-blocks-row-column:last-child:not( :first-child )::after,
	.cc-lp-hero__media::after,
	.cc-article__photo::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: var( --cc-fx-veil, var( --theme-palette-color-8, #F2F3F4 ) );
		opacity: 0;
		pointer-events: none;
		animation: cc-fx-veil 1100ms ease-out 120ms backwards;
	}

	.cc-article__photo {
		--cc-fx-veil: var( --theme-palette-color-9, #FFFFFF );
		overflow: hidden;
	}

	/* ...and a framed photo settles from a slight zoom: the Local pages, the
	 * articles, the listing page (under the header, so no veil there) and
	 * the first slide of the home hero. */
	.cc-lp-hero__photo,
	.cc-article__photo img,
	.imv-hero__img,
	.cc-hero-slider .swiper-slide:first-child img {
		animation: cc-fx-settle 1800ms var( --cc-fx-ease ) backwards;
	}

	/* Cards already on the first screen of Perspetivas, Comprar and
	 * Vendidos (lower ones wait for the scroll, assets/js/animations.js).
	 * Only on the first load (html.cc-fx-loaded comes 1.5s after it): cards
	 * those pages bring in or show again later have their own transitions. */
	html:not( .cc-fx-loaded ) .cc-persp-grid > .cc-persp-card:nth-child( -n + 3 ),
	html:not( .cc-fx-loaded ) .cc-listing:not( .cc-listing--bare ) .cc-listing-grid > .cc-listing-card:nth-child( -n + 3 ) {
		animation: cc-fx-rise var( --cc-fx-time ) var( --cc-fx-ease ) 300ms backwards;
	}

	html:not( .cc-fx-loaded ) .cc-persp-grid > .cc-persp-card:nth-child( 2 ),
	html:not( .cc-fx-loaded ) .cc-listing:not( .cc-listing--bare ) .cc-listing-grid > .cc-listing-card:nth-child( 2 ) {
		animation-delay: 390ms;
	}

	html:not( .cc-fx-loaded ) .cc-persp-grid > .cc-persp-card:nth-child( 3 ),
	html:not( .cc-fx-loaded ) .cc-listing:not( .cc-listing--bare ) .cc-listing-grid > .cc-listing-card:nth-child( 3 ) {
		animation-delay: 480ms;
	}

	/* The home hero's listing card. */
	.cc-hero-slider__card {
		animation: cc-fx-rise var( --cc-fx-time ) var( --cc-fx-ease ) 350ms backwards;
	}

	/* ---------- 2. Scroll reveals ---------- */

	[data-cc-fx]:not( .cc-fx-in ) {
		opacity: 0;
	}

	[data-cc-fx].cc-fx-in {
		animation: cc-fx-rise var( --cc-fx-time ) var( --cc-fx-ease ) var( --cc-fx-delay, 0ms ) backwards;
	}

	/* Photos take a little longer; a wide band only fades. */
	[data-cc-fx="image"].cc-fx-in {
		animation-duration: 1100ms;
	}

	[data-cc-fx="fade"].cc-fx-in {
		animation-name: cc-fx-fade;
		animation-duration: 1100ms;
	}
}