/* DrukDuivels heroes (design-system/content/layout.json hero, tools/build-home-specs.py): the hero types blocks alone
   cannot draw (a hero under a transparent header, the two parallax heroes) and the entrance animations. Overlay, split
   and text heroes are blocks and named styles; their CSS is in home.css or none. Motion: transform and opacity only,
   individual `translate` / `scale` so the entrance composes with the parallax transform of assets/js/hero-motion.js;
   nothing moves under prefers-reduced-motion, and the editor shows the finished state. Tokens only. */

:root { --dd-header-h: var(--wp--custom--layout--header-height-mobile); }
@media (min-width: 1024px) {
	:root { --dd-header-h: var(--wp--custom--layout--header-height); }
}

/* ---------- a hero under the transparent header ---------- */
/* doubled class: outranks the hero types' own margin resets (core's alignfull margins, the stage's margin-block) */
.dd-hero--under-header { --dd-header-offset: var(--dd-header-h); }
.dd-hero--under-header.dd-hero--under-header { margin-top: calc(-1 * var(--dd-header-h)) !important; }
.wp-block-cover.dd-hero--under-header,
.dd-hero--split.dd-hero--under-header,
.dd-hero--text.dd-hero--under-header { padding-top: calc(var(--dd-header-h) + var(--wp--preset--spacing--60)) !important; }
@media (max-width: 781px) {
	.wp-block-cover.is-style-hero.dd-hero--under-header { padding-top: 0 !important; }
	.wp-block-cover.is-style-hero.dd-hero--under-header .wp-block-cover__inner-container { padding-top: calc(var(--dd-header-h) + var(--wp--preset--spacing--50)); }
}

/* ---------- parallax photo: a Hero cover whose photo scrolls slower than the page ---------- */
.dd-hero--parallax-photo .wp-block-cover__image-background { will-change: transform; }

/* ---------- parallax stage: background, headline, floor and product layers in one scene ---------- */
/* The stage is a size container, so the headline and the products scale with the scene, not the viewport. The three
   layer images share one size and crop; the products image is a cut-out (transparent PNG) whose base sits on the
   floor's horizon. Layer order in the markup is the stacking order: background, headline, floor, products. */
.dd-hero-px { position: relative; isolation: isolate; overflow: hidden; margin-block: 0 !important; padding: 0 !important; }
.dd-hero-px > * { margin-block: 0 !important; }
.dd-hero-px__stage { position: relative; width: 100%; max-width: none !important; height: calc(min(100vw * 9 / 16, 86svh) + var(--dd-header-offset, 0px)); min-height: var(--wp--custom--layout--hero-min); container-type: size; overflow: hidden; }
.dd-hero-px__stage > * { margin: 0 !important; }
.dd-hero-px__layer { position: absolute; inset: 0; will-change: transform; }
.dd-hero-px__layer img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; border-radius: 0; }
.dd-hero-px__stage > .dd-hero-px__products { inset: auto 0 10cqh 0; height: 46cqh; }
.dd-hero-px__products img { object-fit: contain; }
.dd-hero-px__title { position: absolute; inset-inline: 0; top: calc(var(--dd-header-offset, 0px) + 4cqh); padding-inline: var(--wp--custom--layout--gutter); text-align: center; font-size: min(15cqw, 26cqh); line-height: var(--wp--custom--line-height--display); letter-spacing: var(--wp--custom--letter-spacing--display); text-wrap: balance; will-change: transform, opacity; }
.dd-hero-px__body { position: relative; z-index: 1; }
@media (max-width: 599px) {
	.dd-hero-px__stage { height: calc(125vw + var(--dd-header-offset, 0px)); }
	.dd-hero-px__stage > .dd-hero-px__products { height: 40cqh; bottom: 12cqh; }
	.dd-hero-px__title { font-size: min(17cqw, 22cqh); }
}

/* ---------- entrance animations (layout.json hero.entrance: dd-anim--<name> on the hero) ---------- */
@keyframes dd-fade { from { opacity: 0; } }
@keyframes dd-rise { from { opacity: 0; translate: 0 var(--wp--custom--motion--rise); } }
@keyframes dd-lights { from { opacity: 0; scale: var(--wp--custom--motion--zoom); } }

@media (prefers-reduced-motion: no-preference) {
	/* `backwards`: the animation only fills before it starts, so the finished state is the page's own state */
	:where(body:not(.editor-styles-wrapper)) .dd-anim--fade { animation: dd-fade var(--wp--custom--transition--reveal) backwards; }
	:where(body:not(.editor-styles-wrapper)) .dd-anim--rise .dd-hero__copy { animation: dd-rise var(--wp--custom--transition--reveal) backwards; }

	/* stagger: the copy's blocks one after another, then the picture */
	:where(body:not(.editor-styles-wrapper)) .dd-anim--stagger .dd-hero__copy > * { animation: dd-rise var(--wp--custom--transition--reveal) backwards; }
	:where(body:not(.editor-styles-wrapper)) .dd-anim--stagger .dd-hero__copy > :nth-child(2) { animation-delay: calc(var(--wp--custom--transition--reveal-step) * 1); }
	:where(body:not(.editor-styles-wrapper)) .dd-anim--stagger .dd-hero__copy > :nth-child(3) { animation-delay: calc(var(--wp--custom--transition--reveal-step) * 2); }
	:where(body:not(.editor-styles-wrapper)) .dd-anim--stagger .dd-hero__copy > :nth-child(4) { animation-delay: calc(var(--wp--custom--transition--reveal-step) * 3); }
	:where(body:not(.editor-styles-wrapper)) .dd-anim--stagger .dd-hero__copy > :nth-child(n + 5) { animation-delay: calc(var(--wp--custom--transition--reveal-step) * 4); }
	:where(body:not(.editor-styles-wrapper)) .dd-anim--stagger .dd-hero__media { animation: dd-fade var(--wp--custom--transition--reveal) calc(var(--wp--custom--transition--reveal-step) * 2) backwards; }
	:where(body:not(.editor-styles-wrapper)) .dd-anim--stagger .dd-hero-px__title { animation: dd-rise var(--wp--custom--transition--reveal) backwards; }

	/* scene (parallax stage): the lights come up, the headline rises, the products land, then the copy follows */
	:where(body:not(.editor-styles-wrapper)) .dd-anim--scene :is(.dd-hero-px__bg, .dd-hero-px__floor) { animation: dd-lights var(--wp--custom--transition--reveal) backwards; }
	:where(body:not(.editor-styles-wrapper)) .dd-anim--scene .dd-hero-px__title { animation: dd-rise var(--wp--custom--transition--reveal) calc(var(--wp--custom--transition--reveal-step) * 2) backwards; }
	:where(body:not(.editor-styles-wrapper)) .dd-anim--scene .dd-hero-px__products img { animation: dd-rise var(--wp--custom--transition--reveal) calc(var(--wp--custom--transition--reveal-step) * 4) backwards; }
	:where(body:not(.editor-styles-wrapper)) .dd-anim--scene .dd-hero__copy > * { animation: dd-rise var(--wp--custom--transition--reveal) calc(var(--wp--custom--transition--reveal-step) * 6) backwards; }
	:where(body:not(.editor-styles-wrapper)) .dd-anim--scene .dd-hero__copy > :nth-child(n + 2) { animation-delay: calc(var(--wp--custom--transition--reveal-step) * 7); }
}