/*
 * TCTTA motion primitives.
 * Reveals only activate when JS is present (html.tctta-js) AND the user has
 * not requested reduced motion. Without JS, everything is visible by default.
 */

/* Scroll reveal: hidden until JS adds .is-in (only when JS is available) */
.tctta-js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity .7s var(--tctta-ease-io, cubic-bezier(.16, 1, .3, 1)),
		transform .7s var(--tctta-ease-io, cubic-bezier(.16, 1, .3, 1));
	will-change: opacity, transform;
}
.tctta-js .reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Stagger children of a revealed group. Opt in with [data-stagger] OR the
   block-safe `tctta-stagger` className (so patterns can enable it without
   invalidating a core block). The container itself stays put — only the
   children cascade — for a clean sequence. */
.tctta-js .reveal:is([data-stagger], .tctta-stagger) {
	opacity: 1;
	transform: none;
}
.tctta-js .reveal:is([data-stagger], .tctta-stagger) > * {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity .6s var(--tctta-ease-io, cubic-bezier(.16, 1, .3, 1)),
		transform .6s var(--tctta-ease-io, cubic-bezier(.16, 1, .3, 1));
}
.tctta-js .reveal:is([data-stagger], .tctta-stagger).is-in > * {
	opacity: 1;
	transform: none;
}
.tctta-js .reveal:is([data-stagger], .tctta-stagger).is-in > *:nth-child(1) { transition-delay: .04s; }
.tctta-js .reveal:is([data-stagger], .tctta-stagger).is-in > *:nth-child(2) { transition-delay: .12s; }
.tctta-js .reveal:is([data-stagger], .tctta-stagger).is-in > *:nth-child(3) { transition-delay: .20s; }
.tctta-js .reveal:is([data-stagger], .tctta-stagger).is-in > *:nth-child(4) { transition-delay: .28s; }
.tctta-js .reveal:is([data-stagger], .tctta-stagger).is-in > *:nth-child(5) { transition-delay: .36s; }
.tctta-js .reveal:is([data-stagger], .tctta-stagger).is-in > *:nth-child(6) { transition-delay: .44s; }

/* Masked line-rise for headings */
.tctta-js .tctta-rise {
	overflow: hidden;
}
.tctta-js .tctta-rise > :is(h1, h2, h3, .wp-block-heading) {
	transform: translateY(108%);
	transition: transform .8s var(--tctta-ease-io, cubic-bezier(.16, 1, .3, 1));
}
.tctta-js .tctta-rise.is-in > :is(h1, h2, h3, .wp-block-heading) {
	transform: none;
}

/* Hero entrance — plays once on load (JS present + motion allowed). The LCP
   elements (headline + photo) use a transform-only rise with NO opacity gate,
   so largest-contentful-paint timing is unaffected; supporting elements fade in.
   Transform/opacity only → zero layout shift. */
@keyframes tctta-rise-only {
	from { transform: translateY(16px); }
	to   { transform: none; }
}
@keyframes tctta-fade-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}
.tctta-js .tctta-hero h1,
.tctta-js .tctta-hero .tctta-hero__media {
	animation: tctta-rise-only .7s var(--tctta-ease-io, cubic-bezier(.16, 1, .3, 1)) both;
}
.tctta-js .tctta-hero .tctta-badge--map,
.tctta-js .tctta-hero .has-large-font-size,
.tctta-js .tctta-hero .wp-block-buttons,
.tctta-js .tctta-hero .tctta-badges,
.tctta-js .tctta-hero .tctta-hero__note {
	animation: tctta-fade-rise .6s var(--tctta-ease-io, cubic-bezier(.16, 1, .3, 1)) both;
}
.tctta-js .tctta-hero .tctta-badge--map   { animation-delay: .05s; }
.tctta-js .tctta-hero h1                   { animation-delay: .12s; }
.tctta-js .tctta-hero .tctta-hero__media  { animation-delay: .12s; }
.tctta-js .tctta-hero .has-large-font-size { animation-delay: .20s; }
.tctta-js .tctta-hero .wp-block-buttons    { animation-delay: .28s; }
.tctta-js .tctta-hero .tctta-badges        { animation-delay: .36s; }
.tctta-js .tctta-hero .tctta-hero__note    { animation-delay: .42s; }

/* FAQ answer eases in when its <details> opens */
@keyframes tctta-faq-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}
.tctta-js .tctta-faq .wp-block-details[open] > :not(summary) {
	animation: tctta-faq-in .3s var(--tctta-ease, cubic-bezier(.22, 1, .36, 1)) both;
}

/* Editor: never hide content behind reveal state in the Site/Post editor. */
.editor-styles-wrapper .reveal,
.editor-styles-wrapper .reveal[data-stagger] > *,
.editor-styles-wrapper .tctta-rise > :is(h1, h2, h3, .wp-block-heading) {
	opacity: 1 !important;
	transform: none !important;
}

/* Hard reduced-motion gate */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.tctta-js .reveal,
	.tctta-js .reveal:is([data-stagger], .tctta-stagger) > *,
	.tctta-js .tctta-rise > :is(h1, h2, h3, .wp-block-heading) {
		opacity: 1 !important;
		transform: none !important;
	}
}