/*
 * Shared front-end motion system.
 * Classes are applied at runtime so block markup remains editor-safe.
 */
:root {
	--tbk-motion-fast: 180ms;
	--tbk-motion-medium: 420ms;
	--tbk-motion-slow: 720ms;
	--tbk-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

:where(a, button, summary, input, textarea, select) {
	-webkit-tap-highlight-color: transparent;
}

:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 3px solid var(--wp--preset--color--red, #d94225);
	outline-offset: 4px;
}

:where(.wp-element-button, .global-footer__button, .home-pill, .products-all) {
	transition:
		color var(--tbk-motion-fast) ease,
		background-color var(--tbk-motion-fast) ease,
		border-color var(--tbk-motion-fast) ease,
		box-shadow var(--tbk-motion-fast) ease,
		transform var(--tbk-motion-fast) var(--tbk-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
	:where(.wp-element-button, .global-footer__button, .home-pill, .products-all):hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 24px rgba(4, 22, 35, .16);
	}

	:where(.tbk-product-card, .tbk-product-entry, .tbk-news-card, .company-location) {
		transition: box-shadow var(--tbk-motion-medium) var(--tbk-motion-ease), transform var(--tbk-motion-medium) var(--tbk-motion-ease);
	}

	:where(.tbk-product-card, .tbk-product-entry, .tbk-news-card, .company-location):hover {
		transform: translateY(-6px);
		box-shadow: 0 18px 40px rgba(4, 22, 35, .14);
	}

	:where(.company-location, .strengths-step, .tbk-interview-grid > *, .wp-block-post-template > li) img {
		transition: transform var(--tbk-motion-slow) var(--tbk-motion-ease);
	}

	:where(.company-location, .strengths-step, .tbk-interview-grid > *, .wp-block-post-template > li):hover img {
		transform: scale(1.035);
	}
}

.faq-item summary::after {
	transition: transform var(--tbk-motion-fast) var(--tbk-motion-ease), color var(--tbk-motion-fast) ease;
}

.faq-item[open] summary::after {
	transform: rotate(180deg);
}

.faq-item.tbk-faq-animating {
	overflow: hidden;
}

.faq-item > :not(summary) {
	transform-origin: top center;
}

html.tbk-motion-ready .tbk-motion-reveal {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity var(--tbk-motion-slow) ease,
		transform var(--tbk-motion-slow) var(--tbk-motion-ease);
	transition-delay: var(--tbk-motion-delay, 0ms);
	will-change: opacity, transform;
}

html.tbk-motion-ready .tbk-motion-reveal.tbk-motion-from-left {
	transform: translate3d(-34px, 0, 0);
}

html.tbk-motion-ready .tbk-motion-reveal.tbk-motion-from-right {
	transform: translate3d(34px, 0, 0);
}

html.tbk-motion-ready .tbk-motion-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

html.tbk-motion-ready .tbk-motion-hero {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	animation: tbk-hero-enter 900ms var(--tbk-motion-ease) forwards;
	animation-delay: var(--tbk-motion-delay, 100ms);
}

@keyframes tbk-hero-enter {
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0ms !important;
	}

	html.tbk-motion-ready :where(.tbk-motion-reveal, .tbk-motion-hero) {
		opacity: 1;
		transform: none;
	}
}