/*
 * Page openings for every page but the home page (which has its own in style.css).
 * Plays once on load: the headline settles, its highlighted words wipe in, then what
 * sits under it rises in order. Loaded from functions.php on every page but the front page.
 */
@media (prefers-reduced-motion: no-preference) {
	/* 1. The headline settles. */
	.carerm-offer-hero h1,
	.carerm-detail-hero h1,
	.service-masthead h1,
	.notes-home__masthead h1,
	.insights-hero h1,
	.article-reader__header h1,
	.growth-plan__intro h1,
	.work-intro h1,
	.case-detail__story h1,
	.case-confirmation__hero h1,
	.campaign-guides__intro h1,
	.articles-masthead h1,
	.carerm-legal__head h1,
	.thanks__headline { animation: carerm-intro-settle .8s cubic-bezier(.16,1,.3,1) both; }

	/* 2. The highlighted words wipe in. Case studies and guides keep their own arrival. */
	.carerm-offer-hero h1 span,
	.case-detail__story h1 span,
	.case-confirmation__hero h1 span { display: inline-block; }
	.carerm-offer-hero h1 span,
	.growth-plan__intro h1 span,
	.case-detail__story h1 span,
	.case-confirmation__hero h1 span { animation: carerm-intro-wipe .9s .18s cubic-bezier(.16,1,.3,1) both; }
	.carerm-service-detail::after { animation: carerm-intro-fade 1.6s .2s ease-out both; }
	.carerm-detail-hero__statement { animation: carerm-intro-wipe 1s .4s cubic-bezier(.16,1,.3,1) both; }
	.carerm-offer-hero::after { animation: carerm-intro-glow 1.6s .2s ease-out both; }

	/* 3. Small links above the headline arrive with it. */
	.carerm-detail-hero__back,
	.service-breadcrumbs,
	.article-reader__topline,
	.guide-detail__back,
	.case-confirmation__signal { animation: carerm-intro-fade .6s .05s ease-out both; }

	/* 4. What sits under the headline rises, in reading order. */
	.carerm-offer-hero__close,
	.service-masthead > div,
	.notes-home__masthead > p,
	.insights-hero__lower,
	.insight-article__dek,
	.growth-plan__lede,
	.work-intro__lede,
	.case-detail__intro,
	.case-confirmation__lede,
	.campaign-guides__deck,
	.articles-masthead > p,
	.carerm-legal__dates,
	.thanks__body { animation: carerm-intro-rise .7s .45s cubic-bezier(.16,1,.3,1) both; }

	.carerm-legal__lede,
	.thanks__home,
	.case-facts { animation: carerm-intro-rise .7s .58s cubic-bezier(.16,1,.3,1) both; }

	.notes-home__grid,
	.insight-article__layout,
	.work-cases,
	.case-detail__form,
	.case-confirmation__grid,
	.campaign-guides__library,
	.articles-empty,
	.carerm-legal__body { animation: carerm-intro-rise .8s .7s cubic-bezier(.16,1,.3,1) both; }

	/* 5. Lists that open a page (plan terms and tiers, a case study's figures, the services list, the Demand-to-Chair strip) follow one item at a time. */
	.carerm-offer-hero--services::before { animation: carerm-intro-fade 1.6s .2s ease-out both; }
	.carerm-stage-strip__name { animation: carerm-intro-fade .6s .6s ease-out both; }
	.carerm-stage-strip li { animation: carerm-intro-rise .55s cubic-bezier(.16,1,.3,1) both; }
	.carerm-stage-strip li:nth-child(1) { animation-delay: .7s; }
	.carerm-stage-strip li:nth-child(2) { animation-delay: .78s; }
	.carerm-stage-strip li:nth-child(3) { animation-delay: .86s; }
	.carerm-stage-strip li:nth-child(4) { animation-delay: .94s; }
	.carerm-stage-strip li:nth-child(n+5) { animation-delay: 1.02s; }
	.carerm-plans-hero__facts li { animation: carerm-intro-rise .55s cubic-bezier(.16,1,.3,1) both; }
	.carerm-plans-hero__facts li:nth-child(1) { animation-delay: .7s; }
	.carerm-plans-hero__facts li:nth-child(2) { animation-delay: .78s; }
	.carerm-plans-hero__facts li:nth-child(3) { animation-delay: .86s; }
	.carerm-plans-hero__facts li:nth-child(n+4) { animation-delay: .94s; }
	.case-figures > div { animation: carerm-intro-rise .55s cubic-bezier(.16,1,.3,1) both; }
	.case-figures > div:nth-child(1) { animation-delay: .7s; }
	.case-figures > div:nth-child(2) { animation-delay: .78s; }
	.case-figures > div:nth-child(3) { animation-delay: .86s; }
	.case-figures > div:nth-child(n+4) { animation-delay: .94s; }
	.carerm-plan-card,
	.carerm-service-index .carerm-service-row { animation: carerm-intro-rise .7s cubic-bezier(.16,1,.3,1) both; }
	.carerm-plan-card:nth-child(1),
	.carerm-service-index .carerm-service-row:nth-child(1) { animation-delay: .95s; }
	.carerm-plan-card:nth-child(2),
	.carerm-service-index .carerm-service-row:nth-child(2) { animation-delay: 1.03s; }
	.carerm-plan-card:nth-child(3),
	.carerm-service-index .carerm-service-row:nth-child(3) { animation-delay: 1.11s; }
	.carerm-plan-card:nth-child(n+4),
	.carerm-service-index .carerm-service-row:nth-child(n+4) { animation-delay: 1.19s; }
}

@keyframes carerm-intro-settle {
	from { opacity: 0; transform: translateY(.22em); }
	to { opacity: 1; transform: none; }
}
@keyframes carerm-intro-wipe {
	from { clip-path: inset(-.3em 100% -.3em 0); }
	to { clip-path: inset(-.3em -.2em -.3em 0); }
}
@keyframes carerm-intro-glow {
	from { opacity: 0; transform: scale(.85); }
	to { opacity: 1; transform: none; }
}
@keyframes carerm-intro-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes carerm-intro-rise {
	from { opacity: 0; transform: translateY(1rem); }
	to { opacity: 1; transform: none; }
}