/* Motion choreography: one place for every entrance and the small details that follow it.
   Curves and durations come from the motion tokens in brand.css. Only transform and opacity move
   (the FAQ height is the one exception, in faq.js). Without a motion preference nothing here runs. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes fa-rise { from { opacity: 0; transform: translateY(18px); } }
	@keyframes fa-fade { from { opacity: 0; } }
	@keyframes fa-arch-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
	@keyframes fa-strike { from { transform: scaleX(0); } }
	@keyframes fa-item-in { from { opacity: 0; transform: translateY(-4px); } }

	/* Hero on page load: the text rises line by line, the arch photo settles in, its outline follows and the card comes last. */
	.hero-block__content > * { animation: fa-rise 520ms var(--fa-ease-out) backwards; }
	.hero-block__content > :nth-child(2) { animation-delay: 70ms; }
	.hero-block__content > :nth-child(3) { animation-delay: 140ms; }
	.hero-block__content > :nth-child(4) { animation-delay: 210ms; }
	.hero-block__content > :nth-child(5) { animation-delay: 280ms; }
	.hero-block__image-frame { animation: fa-arch-in 680ms var(--fa-ease-out) 120ms backwards; }
	.hero-block__visual::before { animation: fa-fade 680ms var(--fa-ease-out) 380ms backwards; }
	.hero-block__card { animation: fa-rise 560ms var(--fa-ease-out) 420ms backwards; }

	/* Contact, legal, search and 404 pages: the same calm rise for their intro. */
	.contact-page__intro > *, .legal-page__header > *, .search-page__hero .site-container > *, .error-page__copy > * { animation: fa-rise 520ms var(--fa-ease-out) backwards; }
	.contact-page__intro > :nth-child(2), .legal-page__header > :nth-child(2), .search-page__hero .site-container > :nth-child(2), .error-page__copy > :nth-child(2) { animation-delay: 70ms; }
	.contact-page__intro > :nth-child(3), .legal-page__header > :nth-child(3), .search-page__hero .site-container > :nth-child(3), .error-page__copy > :nth-child(3) { animation-delay: 140ms; }
	.contact-page__intro > :nth-child(n+4), .legal-page__header > :nth-child(n+4), .search-page__hero .site-container > :nth-child(n+4), .error-page__copy > :nth-child(n+4) { animation-delay: 210ms; }
	.contact-page__image { animation: fa-arch-in 680ms var(--fa-ease-out) 120ms backwards; }
	.search-page__item { animation: fa-rise 480ms var(--fa-ease-out) backwards; }
	.search-page__item:nth-child(2) { animation-delay: 60ms; }
	.search-page__item:nth-child(3) { animation-delay: 120ms; }
	.search-page__item:nth-child(4) { animation-delay: 180ms; }
	.search-page__item:nth-child(n+5) { animation-delay: 240ms; }

	/* Dropdown and mobile menu: the items follow the panel, a few milliseconds apart. */
	.main-navigation > ul > li.is-submenu-open > .sub-menu > li { animation: fa-item-in var(--fa-duration-enter) var(--fa-ease-out) backwards; }
	.main-navigation > ul > li.is-submenu-open > .sub-menu > li:nth-child(2) { animation-delay: 35ms; }
	.main-navigation > ul > li.is-submenu-open > .sub-menu > li:nth-child(3) { animation-delay: 70ms; }
	.main-navigation > ul > li.is-submenu-open > .sub-menu > li:nth-child(n+4) { animation-delay: 105ms; }

	/* Cookie notice: rises from the bottom edge it sits on. */
	.cookie-notice { transform-origin: bottom left; }
}

/* The struck-out words in the hero: the line is drawn through them after the title appears.
   Only where they stay on one line (desktop); elsewhere the normal line-through remains. */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
	.hero-block__title em { position: relative; text-decoration-color: transparent; }
	.hero-block__title em::after { position: absolute; top: 56%; right: 0; left: 0; height: .075em; content: ""; background: currentColor; border-radius: 1em; transform-origin: left center; animation: fa-strike 640ms var(--fa-ease-out) 520ms backwards; }
}

/* Scroll reveals (desktop; scroll-reveal.js adds .scroll-reveal, then .is-visible). The details behind an element arrive just after it. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
	.text-image-block__visual.scroll-reveal, .team-block__member.scroll-reveal, .cta-panel__inner.scroll-reveal { transform: translateY(24px) scale(.98); }
	.text-image-block__visual.scroll-reveal.is-visible, .team-block__member.scroll-reveal.is-visible, .cta-panel__inner.scroll-reveal.is-visible { transform: none; }

	/* Text and image: the blue block slides out from behind the photo, the open "f" draws in beside it. */
	.text-image-block__visual.scroll-reveal::after { opacity: 0; transform: translate(18px, -18px); transition: opacity 500ms var(--fa-ease-out) 260ms, transform 600ms var(--fa-ease-out) 260ms; }
	.text-image-block--image-right .text-image-block__visual.scroll-reveal::after { transform: translate(-18px, -18px); }
	.text-image-block__visual.scroll-reveal::before { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--fa-ease-out) 360ms, transform 600ms var(--fa-ease-out) 360ms; }
	.text-image-block__visual.scroll-reveal.is-visible::after, .text-image-block__visual.scroll-reveal.is-visible::before { opacity: 1; transform: none; }
	.text-image-block__visual.scroll-reveal .text-image-block__card { opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--fa-ease-out) 420ms, transform 520ms var(--fa-ease-out) 420ms; }
	.text-image-block__visual.scroll-reveal.is-visible .text-image-block__card { opacity: 1; transform: none; }

	/* Value cards: the blue badge with its icon pops onto the top edge once the card is in. */
	.values-block__card.scroll-reveal::before, .values-block__card.scroll-reveal .values-block__card-icon { opacity: 0; transform: translateX(-50%) scale(.5); transition: opacity 260ms var(--fa-ease-out) 220ms, transform 480ms var(--fa-ease-spring) 220ms; }
	.values-block__card.scroll-reveal.is-visible::before, .values-block__card.scroll-reveal.is-visible .values-block__card-icon { opacity: 1; transform: translateX(-50%); }

	/* Expertise cards: the open "f" rises out of the top edge. */
	.expertise-block__card.scroll-reveal::before, .expertise-block__card.scroll-reveal::after { opacity: 0; transform: translateY(10px); transition: opacity 300ms var(--fa-ease-out) 220ms, transform 520ms var(--fa-ease-spring) 220ms; }
	.expertise-block__card.scroll-reveal.is-visible::before, .expertise-block__card.scroll-reveal.is-visible::after { opacity: 1; transform: none; }

	/* Steps: the connecting line draws towards the next step. */
	.steps-block__item.scroll-reveal:not(:last-child)::after { transform: scaleX(0); transform-origin: left center; transition: transform 700ms var(--fa-ease-out) 280ms; }
	.steps-block__item.scroll-reveal.is-visible:not(:last-child)::after { transform: none; }

	/* Checklist: the ticks follow one after another once the card is in. */
	.checklist-block__card.scroll-reveal .checklist-block__check { opacity: 0; transform: scale(.4); transition: opacity 220ms var(--fa-ease-out), transform 460ms var(--fa-ease-spring); }
	.checklist-block__card.scroll-reveal.is-visible .checklist-block__check { opacity: 1; transform: none; }
	.checklist-block__card.scroll-reveal .checklist-block__item:nth-child(1) .checklist-block__check { transition-delay: 200ms; }
	.checklist-block__card.scroll-reveal .checklist-block__item:nth-child(2) .checklist-block__check { transition-delay: 270ms; }
	.checklist-block__card.scroll-reveal .checklist-block__item:nth-child(3) .checklist-block__check { transition-delay: 340ms; }
	.checklist-block__card.scroll-reveal .checklist-block__item:nth-child(4) .checklist-block__check { transition-delay: 410ms; }
	.checklist-block__card.scroll-reveal .checklist-block__item:nth-child(5) .checklist-block__check { transition-delay: 480ms; }
	.checklist-block__card.scroll-reveal .checklist-block__item:nth-child(n+6) .checklist-block__check { transition-delay: 550ms; }

	/* Call to action: the white open "f" rises from the bottom edge of the blue panel. */
	.cta-panel__inner.scroll-reveal::after { opacity: 0; transform: translateY(48px); transition: opacity 500ms var(--fa-ease-out) 300ms, transform 760ms var(--fa-ease-out) 300ms; }
	.cta-panel__inner.scroll-reveal.is-visible::after { opacity: 1; transform: none; }

	/* Team: the name card settles onto the portrait just after it. */
	.team-block__member.scroll-reveal .team-block__namecard { opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--fa-ease-out) 300ms, transform 520ms var(--fa-ease-out) 300ms; }
	.team-block__member.scroll-reveal.is-visible .team-block__namecard { opacity: 1; transform: none; }
}