/* Visible without JS. Motion only fades and translates; it does not change layout. */
:root {
	--pe-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
	img.pe-motion-photo {
		transition: transform 0.45s var(--pe-ease);
	}

	img.pe-motion-photo.pe-photo-live {
		will-change: transform;
	}

	.pe-faq__item summary::after {
		transition: transform 280ms var(--pe-ease), background-color 220ms ease, border-color 220ms ease, background-size 280ms var(--pe-ease);
	}

	.pe-lead-dialog[open] {
		animation: pe-dialog-enter 280ms var(--pe-ease);
	}

	.pe-lead-dialog[open]::backdrop {
		animation: pe-backdrop-enter 220ms ease;
	}
}

@keyframes pe-dialog-enter {
	from {
		opacity: 0.3;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pe-backdrop-enter {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.pe-formats__card {
	translate: none;
	rotate: none;
	scale: none;
	transform: none;
	transition: none;
	animation: none;
}

.pe-formats__art.is-format-visible .pe-formats__card {
	will-change: transform;
}

@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
	img.pe-motion-photo {
		transition-duration: 320ms;
	}
}

@media (prefers-reduced-motion: reduce), print {
	img.pe-motion-photo,
	.pe-formats__card,
	.pe-faq__item summary::after,
	.pe-lead-dialog[open],
	.pe-lead-dialog[open]::backdrop {
		animation: none !important;
		transition: none !important;
		will-change: auto !important;
	}

	.pe-formats__card {
		transform: none !important;
	}
}