/* Insight Metrics Tests: the home page's effects (see assets/js/imt-fx.js for where each number comes from).
   Keyframes match the live theme: PXLZoom2 (scale 1.2 -> 1), fadeInUp / fadeInLeft / fadeInRight (40 px),
   split-up title words (60 px), divider wipe (clip-path). Durations 0.65 s / 0.8 s, ease, like the home.
   Uses the individual translate / scale properties, so an element's own transform is kept.
   Hidden only while the script runs (html.imt-fx / html.imt-fx-wait); no JS = all visible. */
@keyframes imtZoom2 { 0% { opacity: 0; scale: 1.2; } 100% { opacity: 1; scale: 1; } }
@keyframes imtUp { 0% { opacity: 0; translate: 0 40px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes imtLeft { 0% { opacity: 0; translate: -40px 0; } 100% { opacity: 1; translate: 0 0; } }
@keyframes imtRight { 0% { opacity: 0; translate: 40px 0; } 100% { opacity: 1; translate: 0 0; } }
@keyframes imtWord { 0% { opacity: 0; translate: 0 60px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes imtWipe { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }

/* Side slides never make the page scroll sideways. */
.imt-app.imt-co, .imt-app.imt-dp { overflow-x: clip; }

/* Above-the-fold parts stay hidden for the split second before the script starts (no flash). */
html.imt-fx-wait .imtl-hero .imtl-label, html.imt-fx-wait .imtl-h1, html.imt-fx-wait .imtl-hero-sub, html.imt-fx-wait .imtl-hero-cta, html.imt-fx-wait .imtl-chips, html.imt-fx-wait .imtl-hcard,
html.imt-fx-wait .co-eyebrow, html.imt-fx-wait .co-title, html.imt-fx-wait .co-subhead, html.imt-fx-wait .co-stat-row > div, html.imt-fx-wait .co-kicker-left, html.imt-fx-wait .co-report-card,
html.imt-fx-wait .dp-hero-eyebrow, html.imt-fx-wait .dp-hero h1, html.imt-fx-wait .dp-hero-sub { opacity: 0; }

/* entrance animations (WOW / Elementor on the home) */
html.imt-fx [data-fx] { opacity: 0; }
html.imt-fx [data-fx].fx-in {
	opacity: 1;
	animation-duration: .8s;
	animation-timing-function: ease;
	animation-fill-mode: both;
	animation-delay: var(--fx-delay, 0ms);
}
html.imt-fx [data-fx="zoom"].fx-in { animation-name: imtZoom2; animation-duration: .65s; }
html.imt-fx [data-fx="up"].fx-in { animation-name: imtUp; }
html.imt-fx [data-fx="left"].fx-in { animation-name: imtLeft; }
html.imt-fx [data-fx="right"].fx-in { animation-name: imtRight; }

/* split-up titles: words rise one after another */
html.imt-fx [data-fx="words"], html.imt-fx [data-fx="wipe"] { opacity: 1; }
html.imt-fx [data-fx="words"] .fx-word { display: inline-block; opacity: 0; }
html.imt-fx [data-fx="words"].fx-in .fx-word { animation: imtWord .65s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(250ms + var(--wi, 0) * 65ms); }

/* divider lines wipe in from the left (home: divider skewIn) */
html.imt-fx [data-fx="wipe"]::after { clip-path: inset(0 100% 0 0); }
html.imt-fx [data-fx="wipe"].fx-in::after { animation: imtWipe .8s cubic-bezier(.4, 0, .2, 1) both; }

/* sample result bars fill up as their card slides in */
html.imt-fx .imtl-hcard-sample[data-fx] .imtl-mbar-track span,
html.imt-fx .imtl-split-lav[data-fx] .imtl-prow-track span { transform: scaleX(0); transform-origin: 0 50%; }
html.imt-fx .imtl-hcard-sample.fx-in .imtl-mbar-track span,
html.imt-fx .imtl-split-lav.fx-in .imtl-prow-track span { transition: transform 1s cubic-bezier(.22, .61, .36, 1); }
html.imt-fx .imtl-hcard-sample.fx-in .imtl-mbar-track span { transform: none; transition-delay: calc(var(--fx-delay, 0ms) + 450ms); }
html.imt-fx .imtl-split-lav.fx-in .imtl-prow-track span { transform: none; transition-delay: 450ms; }
html.imt-fx .imtl-hcard-sample.fx-in .imtl-mbar:nth-child(2) .imtl-mbar-track span, html.imt-fx .imtl-split-lav.fx-in .imtl-prow:nth-child(2) .imtl-prow-track span { transition-delay: calc(var(--fx-delay, 0ms) + 540ms); }
html.imt-fx .imtl-hcard-sample.fx-in .imtl-mbar:nth-child(3) .imtl-mbar-track span, html.imt-fx .imtl-split-lav.fx-in .imtl-prow:nth-child(3) .imtl-prow-track span { transition-delay: calc(var(--fx-delay, 0ms) + 630ms); }
html.imt-fx .imtl-hcard-sample.fx-in .imtl-mbar:nth-child(4) .imtl-mbar-track span, html.imt-fx .imtl-split-lav.fx-in .imtl-prow:nth-child(4) .imtl-prow-track span { transition-delay: calc(var(--fx-delay, 0ms) + 720ms); }
html.imt-fx .imtl-hcard-sample.fx-in .imtl-mbar:nth-child(5) .imtl-mbar-track span, html.imt-fx .imtl-split-lav.fx-in .imtl-prow:nth-child(5) .imtl-prow-track span { transition-delay: calc(var(--fx-delay, 0ms) + 810ms); }
html.imt-fx [data-fx].fx-now .imtl-mbar-track span, html.imt-fx [data-fx].fx-now .imtl-prow-track span { transition: none !important; transform: none !important; }

/* scrolled past: shown at once */
html.imt-fx [data-fx].fx-now, html.imt-fx [data-fx].fx-now .fx-word { animation: none !important; opacity: 1 !important; }
html.imt-fx [data-fx].fx-now::after { animation: none !important; clip-path: none !important; }

/* intro text fills from grey to black, line by line, as you scroll (home: heading style-linear) */
.fx-fill .fx-lw { white-space: nowrap; } /* measure whole words (no break inside "public-domain") */
html.imt-fx .fx-fill .fx-line {
	display: block;
	background-image: linear-gradient(84deg, #121212 -12%, #121212 20%, #121212 50%, rgba(18, 18, 18, .49) 50%, rgba(18, 18, 18, .49) 100%);
	background-size: 200% 100%;
	background-position: 100% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	html.imt-fx [data-fx], html.imt-fx [data-fx] .fx-word, html.imt-fx-wait * { opacity: 1 !important; animation: none !important; }
}
