/**
 * Berke Visual & Motion System v1.2 — Engineered Flow pacing + reversible progress.
 * Progressive enhancement: JS adds prepared states only after content exists.
 */

.berke-motion-prepared[data-berke-motion="reveal"] {
	opacity: 0;
	transform: translate3d(0,var(--berke-motion-distance-reveal),0);
	transition:
		opacity var(--berke-motion-duration-reveal) var(--berke-motion-ease-enter),
		transform var(--berke-motion-duration-reveal) var(--berke-motion-ease-enter);
	will-change: transform,opacity;
}
.berke-motion-prepared[data-berke-motion="reveal"].is-berke-motion-visible {
	opacity: 1;
	transform: translate3d(0,0,0);
}

/* Group reveal is intentionally more visible than a single container fade. */
.berke-motion-group-prepared[data-berke-motion="group"] > * {
	opacity: 0;
	transform: translate3d(0,var(--berke-motion-distance-reveal),0);
	transition:
		opacity var(--berke-motion-duration-reveal) var(--berke-motion-ease-enter),
		transform var(--berke-motion-duration-reveal) var(--berke-motion-ease-enter);
	transition-delay: calc(var(--berke-motion-index,0) * var(--berke-motion-stagger));
	will-change: transform,opacity;
}
.berke-motion-group-prepared[data-berke-motion="group"].is-berke-motion-visible > * {
	opacity: 1;
	transform: translate3d(0,0,0);
}

/* Critical hero stays readable. Secondary actions/chips simply settle into place. */
[data-berke-motion="hero-settle"] {
	animation: berke-motion-hero-settle var(--berke-motion-duration-signature) var(--berke-motion-ease-enter) both;
}
@keyframes berke-motion-hero-settle {
	from { transform: scale(1.012) translate3d(0,5px,0); opacity:.88; }
	to { transform: scale(1) translate3d(0,0,0); opacity:1; }
}
html.berke-motion-runtime .berke-tankseal-hero .berke-core-actions > *,
html.berke-motion-runtime .berke-tankseal-hero .berke-tankseal-trust > li {
	animation: berke-motion-hero-support 420ms var(--berke-motion-ease-enter) both;
}
html.berke-motion-runtime .berke-tankseal-hero .berke-core-actions > *:nth-child(2) { animation-delay:60ms; }
html.berke-motion-runtime .berke-tankseal-hero .berke-tankseal-trust > li:nth-child(1) { animation-delay:100ms; }
html.berke-motion-runtime .berke-tankseal-hero .berke-tankseal-trust > li:nth-child(2) { animation-delay:150ms; }
html.berke-motion-runtime .berke-tankseal-hero .berke-tankseal-trust > li:nth-child(3) { animation-delay:200ms; }
@keyframes berke-motion-hero-support {
	from { opacity:.72; transform:translate3d(0,6px,0); }
	to { opacity:1; transform:translate3d(0,0,0); }
}

/* Surface reveal: media is already rendered, a temporary cover retracts. */
.berke-motion-surface { position:relative; border-radius:var(--berke-radius-lg); overflow:hidden; }
.berke-motion-surface::after {
	position:absolute;
	inset:0;
	z-index:2;
	content:"";
	pointer-events:none;
	border-radius:inherit;
	background:#d9edf4;
	transform:scaleX(0);
	transform-origin:var(--berke-motion-surface-origin,left center);
}
.berke-motion-prepared[data-berke-motion="surface"]::after {
	transform:scaleX(1);
	transition:transform var(--berke-motion-duration-signature) var(--berke-motion-ease-enter);
	will-change:transform;
}
.berke-motion-prepared[data-berke-motion="surface"].is-berke-motion-visible::after { transform:scaleX(0); }
.berke-motion-prepared[data-berke-motion="surface"] :where(img,picture) {
	transform:scale(1.018);
	transition:transform calc(var(--berke-motion-duration-signature) + 120ms) var(--berke-motion-ease-enter);
}
.berke-motion-prepared[data-berke-motion="surface"].is-berke-motion-visible :where(img,picture) { transform:scale(1); }
html[dir="rtl"] { --berke-motion-surface-origin:left center; }
html[dir="ltr"] { --berke-motion-surface-origin:right center; }

@media (max-width:47.5rem) {
	.berke-motion-surface { border-radius:1.2rem; }
	.berke-motion-group-prepared[data-berke-motion="group"] > * {
		transition-delay:calc(var(--berke-motion-index,0) * 35ms);
	}
}

@media (prefers-reduced-motion:reduce) {
	[data-berke-motion="hero-settle"],
	html.berke-motion-runtime .berke-tankseal-hero .berke-core-actions > *,
	html.berke-motion-runtime .berke-tankseal-hero .berke-tankseal-trust > li { animation:none !important; }
	.berke-motion-prepared[data-berke-motion="reveal"],
	.berke-motion-group-prepared[data-berke-motion="group"] > * {
		opacity:1 !important;
		transform:none !important;
		transition:none !important;
	}
	.berke-motion-surface::after,
	.berke-motion-prepared[data-berke-motion="surface"]::after { display:none !important; }
	.berke-motion-prepared[data-berke-motion="surface"] :where(img,picture) { transform:none !important; transition:none !important; }
}

/* 0.8.2 pacing: slower enough to be perceived, still below theatrical timing. */
.berke-tankseal {
	--berke-motion-duration-base: 240ms;
	--berke-motion-duration-comfortable: 420ms;
	--berke-motion-duration-reveal: 620ms;
	--berke-motion-duration-signature: 920ms;
	--berke-motion-distance-reveal: 16px;
	--berke-motion-stagger: 90ms;
}

.berke-motion-prepared[data-berke-motion="reveal"],
.berke-motion-group-prepared[data-berke-motion="group"] > * {
	transition-timing-function: var(--berke-motion-ease-enter);
}
.berke-motion-prepared[data-berke-motion="reveal"].is-berke-motion-visible,
.berke-motion-group-prepared[data-berke-motion="group"].is-berke-motion-visible > * {
	will-change: auto;
}

html.berke-motion-runtime .berke-tankseal-hero .berke-core-actions > *,
html.berke-motion-runtime .berke-tankseal-hero .berke-tankseal-trust > li {
	animation-duration: 640ms;
}
html.berke-motion-runtime .berke-tankseal-hero .berke-core-actions > *:nth-child(2) { animation-delay: 110ms; }
html.berke-motion-runtime .berke-tankseal-hero .berke-tankseal-trust > li:nth-child(1) { animation-delay: 190ms; }
html.berke-motion-runtime .berke-tankseal-hero .berke-tankseal-trust > li:nth-child(2) { animation-delay: 280ms; }
html.berke-motion-runtime .berke-tankseal-hero .berke-tankseal-trust > li:nth-child(3) { animation-delay: 370ms; }

.berke-motion-prepared[data-berke-motion="surface"]::after {
	transition-duration: var(--berke-motion-duration-signature);
}
.berke-motion-prepared[data-berke-motion="surface"] :where(img,picture) {
	transition-duration: calc(var(--berke-motion-duration-signature) + 180ms);
}

@media (max-width:47.5rem) {
	.berke-tankseal {
		--berke-motion-duration-reveal: 560ms;
		--berke-motion-duration-signature: 840ms;
		--berke-motion-distance-reveal: 12px;
		--berke-motion-stagger: 72ms;
	}
}