/* Group Tactical Security (GTAC) hero motion and the hero under the transparent header (content.json layout.header.over_hero and
   layout.hero.entrance, tools/build-site.py). Loaded only on pages with a hero. Motion: transform and opacity only,
   once on load, `backwards` fill (the finished state is the page's own state, so nothing hides if animations do not
   run), nothing under prefers-reduced-motion, never in the editor. Tokens only. */

/* --gt-header-h is set in chrome.css (every page) */

/* ---------- a hero under the transparent header ---------- */
/* doubled class: outranks core's alignfull margins */
.gt-hero--under-header.gt-hero--under-header { margin-top: calc(-1 * var(--gt-header-h)) !important; }
.wp-block-cover.gt-hero--under-header,
.gt-hero--split.gt-hero--under-header,
.gt-hero--text.gt-hero--under-header { padding-top: calc(var(--gt-header-h) + var(--wp--preset--spacing--60)) !important; }
/* a text hero taller than its copy (min-height): the copy sits in the middle of the space under the header, with the
   same padding above and below it, instead of leaving the spare height at the bottom */
.gt-hero--text.gt-hero--under-header { display: flex; flex-direction: column; justify-content: center; padding-bottom: var(--wp--preset--spacing--60) !important; }
.gt-hero--text.gt-hero--under-header > .gt-hero__copy { width: 100%; }
/* the dot-wave canvas is the hero's first child but floats (absolute), so the block gap the layout gives the copy as
   the "second" child would push it 24px off centre */
.gt-hero--text.gt-hero--under-header > .dot-wave__canvas + .gt-hero__copy { margin-block-start: 0; }
@media (max-width: 781px) {
	.wp-block-cover.is-style-hero.gt-hero--tone-light.gt-hero--under-header { padding-top: 0 !important; }
	.wp-block-cover.is-style-hero.gt-hero--tone-light.gt-hero--under-header .wp-block-cover__inner-container { padding-top: calc(var(--gt-header-h) + var(--wp--preset--spacing--50)); }
}

/* ---------- entrance (gt-anim--<name> on the hero) ---------- */
@keyframes gt-fade { from { opacity: 0; } }
@keyframes gt-rise { from { opacity: 0; translate: 0 var(--wp--custom--motion--rise); } }
/* the headline only slides: it stays opaque, so it paints (and counts as the page's largest content) at once */
@keyframes gt-rise-solid { from { translate: 0 var(--wp--custom--motion--rise); } }

@media (prefers-reduced-motion: no-preference) {
	:where(body:not(.editor-styles-wrapper)) .gt-anim--fade { animation: gt-fade var(--wp--custom--transition--reveal) backwards; }
	/* rise: the copy's blocks one after another, then the picture */
	:where(body:not(.editor-styles-wrapper)) .gt-anim--rise .gt-hero__copy > * { animation: gt-rise var(--wp--custom--transition--reveal) backwards; }
	:where(body:not(.editor-styles-wrapper)) .gt-anim--rise .gt-hero__copy > :nth-child(2) { animation-delay: var(--wp--custom--transition--reveal-step); }
	:where(body:not(.editor-styles-wrapper)) .gt-anim--rise .gt-hero__copy > :nth-child(3) { animation-delay: calc(var(--wp--custom--transition--reveal-step) * 2); }
	:where(body:not(.editor-styles-wrapper)) .gt-anim--rise .gt-hero__copy > :nth-child(n + 4) { animation-delay: calc(var(--wp--custom--transition--reveal-step) * 3); }
	:where(body:not(.editor-styles-wrapper)) .gt-anim--rise .gt-hero__copy > h1 { animation-name: gt-rise-solid; }
	:where(body:not(.editor-styles-wrapper)) .gt-anim--rise .gt-hero__media { animation: gt-fade var(--wp--custom--transition--reveal) calc(var(--wp--custom--transition--reveal-step) * 2) backwards; }
}