/*
 * Italthai Reveal
 *
 * One entrance everywhere: a fade and a 24px rise on soft, settling curves -- the fade a little
 * gentler than the rise, so nothing pops. The hidden state hangs off html.it-reveal-on, which only
 * the head script sets (and never under reduced motion), so a page without JavaScript shows
 * everything. --it-d is each element's delay, written by the script so a group arriving together
 * comes in one after another.
 *
 * Individual translate, not transform, so it composes with anything an element already does
 * with transform (carousels, hover lifts).
 */

:root {
	--it-reveal-dur: 1300ms;
	--it-reveal-fade-dur: 1100ms;
	--it-reveal-rise: 24px;
	--it-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--it-reveal-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--it-page-in: 700ms;
}

/* Every page arrives with a soft fade of the whole page; the sections then come in one by one. */
.it-reveal-on body {
	animation: it-page-in var(--it-page-in) var(--it-reveal-fade-ease) both;
}

@keyframes it-page-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.it-reveal-on .it-reveal:not(.is-revealed) {
	opacity: 0;
	translate: 0 var(--it-reveal-rise);
}

/* A large block -- a whole panel -- only fades; its contents do the rising. */
.it-reveal-on .it-reveal.it-reveal--fade:not(.is-revealed) {
	translate: none;
}

.it-reveal-on .it-reveal.is-revealed {
	opacity: 1;
	translate: none;
	transition:
		opacity var(--it-reveal-fade-dur) var(--it-reveal-fade-ease) var(--it-d, 0ms),
		translate var(--it-reveal-dur) var(--it-reveal-ease) var(--it-d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	.it-reveal-on .it-reveal:not(.is-revealed),
	.it-reveal-on .it-reveal.is-revealed {
		opacity: 1;
		translate: none;
		transition: none;
	}
}

/* Phones and tablets: entrances that slide in from the side (the CTA photo, carousels) must never
 * widen the page while they run -- a mobile browser would let it pan sideways or zoom out. clip,
 * not hidden, so the body does not become a scroll container and the sticky header keeps working.
 * On both: the html's value goes to the viewport, which leaves the body's to clip its own content. */
@media (max-width: 1024px) {
	html,
	body {
		overflow-x: clip;
	}
}