/*
 * Birgit Blasche – subtle motion (front end only, not loaded in the editor).
 *
 * 1. brush buttons are painted with a few semi-transparent strokes once they
 *    come into view (triggered by assets/js/motion.js)
 * 2. the illustrations in the dark image bands breathe and drift, their caption
 *    text and the hero claims drift the other way
 * 3. section titles and text rise and fade in
 * 4. on load the logo card drops in, then the menu items follow
 *
 * The scroll effects use scroll-driven animations (Chrome, Edge, Safari); other
 * browsers get a time-based version via assets/js/motion.js. Nothing moves with
 * prefers-reduced-motion.
 */

@media (prefers-reduced-motion: no-preference) {
	/* ---------- 4. header on load ---------- */

	/* the card slides down opaque (it overlaps the hero); only its contents fade in */
	.bb-logo,
	.bb-brand {
		animation: bb-slide-down 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	}
	.bb-logo img,
	.bb-brand a {
		animation: bb-fade-in 0.9s ease-out backwards;
	}

	@media (min-width: 1020px) {
		.bb-nav .wp-block-navigation-item {
			animation: bb-drop-in-small 0.6s ease-out backwards;
			animation-delay: 0.55s;
		}
		.bb-nav .wp-block-navigation-item:nth-child(2) {
			animation-delay: 0.63s;
		}
		.bb-nav .wp-block-navigation-item:nth-child(3) {
			animation-delay: 0.71s;
		}
		.bb-nav .wp-block-navigation-item:nth-child(4) {
			animation-delay: 0.79s;
		}
	}

	/* ---------- 1a. brush buttons: motion.js inserts .bb-paint with three strokes
	   and the final brush; .is-painted (set once in view) starts the painting.
	   Without the script the button keeps its normal background. ---------- */

	.wp-block-button.is-style-brush .wp-block-button__link:has(> .bb-paint) {
		position: relative;
		isolation: isolate;
		background: none;
	}
	.bb-paint {
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
	}
	.bb-paint > * {
		position: absolute;
		inset: 0;
		background: url(../img/button.webp) no-repeat center / 100% 100%;
	}
	/* a soft-edged mask (opaque left part, feathered edge) slides over each stroke */
	.bb-paint__stroke {
		opacity: 0.55;
		-webkit-mask: linear-gradient(90deg, #000 50%, transparent 60%) no-repeat 110% 0 / 220% 100%;
		mask: linear-gradient(90deg, #000 50%, transparent 60%) no-repeat 110% 0 / 220% 100%;
	}
	/* each stroke slightly offset; the second is mirrored, so it paints back from the right */
	.bb-paint__stroke:nth-child(1) {
		transform: translateY(-8%) scale(0.97, 0.78) rotate(-0.4deg);
	}
	.bb-paint__stroke:nth-child(2) {
		transform: translateY(9%) scale(-0.98, 0.8) rotate(0.8deg);
	}
	.bb-paint__stroke:nth-child(3) {
		transform: scale(0.99, 0.9) rotate(-0.3deg);
	}
	.bb-paint__final {
		opacity: 0;
	}
	.is-painted .bb-paint__stroke {
		animation:
			bb-stroke 0.5s cubic-bezier(0.45, 0.05, 0.35, 1) forwards,
			bb-stroke-out 0.45s ease 1.2s forwards;
	}
	.is-painted .bb-paint__stroke:nth-child(2) {
		animation-delay: 0.32s, 1.2s;
	}
	.is-painted .bb-paint__stroke:nth-child(3) {
		animation-delay: 0.62s, 1.2s;
	}
	.is-painted .bb-paint__final {
		animation: bb-final 0.5s ease 1.05s forwards;
	}

	.is-style-caption-dark .wp-block-media-text__media {
		overflow: hidden;
	}

	/* ---------- scroll-driven (Chrome, Edge, Safari) ---------- */

	@supports (animation-timeline: view()) {
		/* 2. breathing illustrations, with the caption text drifting the other way */
		.is-style-caption-dark .wp-block-media-text__media {
			view-timeline-name: --bb-illustration;
		}
		.is-style-caption-dark .wp-block-media-text__media img {
			animation: bb-breathe linear both;
			animation-timeline: --bb-illustration;
			animation-range: cover 0% cover 100%;
		}
		/* smaller drift on phones: the stacked caption has little padding below the text */
		.is-style-caption-dark .wp-block-media-text__content {
			--bb-drift: 12px;
			animation: bb-counter-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
		@media (min-width: 800px) {
			.is-style-caption-dark .wp-block-media-text__content {
				--bb-drift: 25px;
			}
		}

		/* 2b. hero claims drift upward over the photo (from 800px, where they overlay it) */
		@media (min-width: 800px) {
			/* start screen: tied to the page scroll, so it starts in its designed place */
			.wp-block-bb-hero.is-style-fullscreen .bb-hero__claim {
				animation: bb-claim-up linear both;
				animation-timeline: scroll(root);
				animation-range: 0 100vh;
			}
			.wp-block-bb-hero:not(.is-style-fullscreen) .bb-hero__claim {
				animation: bb-claim-up linear both;
				animation-timeline: view();
				animation-range: cover 0% cover 100%;
			}
		}

		/* 3. rise and fade in */
		.bb-section-title,
		.wp-block-group.bb-text > *,
		.bb-teaser > * {
			animation: bb-rise linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 90%;
		}
	}

	/* ---------- fallback (e.g. Firefox): assets/js/motion.js adds
	   .bb-motion-fallback to <html> and .is-in-view once an element is seen;
	   the effects then play once, over a fixed time ---------- */

	.bb-motion-fallback .is-style-caption-dark .wp-block-media-text__media img {
		transform: scale(1.05);
		transition: transform 1.8s cubic-bezier(0.2, 0.6, 0.2, 1);
	}
	.bb-motion-fallback .is-style-caption-dark .wp-block-media-text__media.is-in-view img {
		transform: none;
	}
	.bb-motion-fallback .is-style-caption-dark .wp-block-media-text__content {
		transform: translateY(25px);
		transition: transform 1.8s cubic-bezier(0.2, 0.6, 0.2, 1);
	}
	.bb-motion-fallback .is-style-caption-dark .wp-block-media-text__media.is-in-view + .wp-block-media-text__content {
		transform: none;
	}

	.bb-motion-fallback .bb-section-title,
	.bb-motion-fallback .wp-block-group.bb-text > *,
	.bb-motion-fallback .bb-teaser > * {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	}
	.bb-motion-fallback .bb-section-title.is-in-view,
	.bb-motion-fallback .wp-block-group.bb-text > .is-in-view,
	.bb-motion-fallback .bb-teaser > .is-in-view {
		opacity: 1;
		transform: none;
	}
}

@keyframes bb-slide-down {
	from {
		transform: translateY(-40px);
	}
}
@keyframes bb-fade-in {
	from {
		opacity: 0;
	}
}
@keyframes bb-drop-in-small {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
}
@keyframes bb-stroke {
	to {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
}
@keyframes bb-stroke-out {
	to {
		opacity: 0;
	}
}
@keyframes bb-final {
	to {
		opacity: 1;
	}
}
@keyframes bb-breathe {
	from {
		transform: translateY(-40px) scale(1.06);
	}
	to {
		transform: translateY(40px) scale(1.1);
	}
}
@keyframes bb-counter-drift {
	from {
		transform: translateY(var(--bb-drift));
	}
	to {
		transform: translateY(calc(var(--bb-drift) * -1));
	}
}
@keyframes bb-claim-up {
	to {
		transform: translateY(-60px);
	}
}
@keyframes bb-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}