/**
 * PowerFlow Wash — scroll reveal, parallax, shine-sweep, mobile menu motion.
 * All entrance end-states equal the base (visible) style so content is never
 * hidden for reduced-motion or no-JS users; [data-pf-reveal] only animates
 * the *transition into* that state when JS + motion preference allow it.
 */

[data-pf-reveal] {
	opacity: 1;
	transform: none;
}

.pf-motion-ready [data-pf-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--pf-dur-slow) var(--pf-ease-flow), transform var(--pf-dur-slow) var(--pf-ease-flow);
}

.pf-motion-ready [data-pf-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

.pf-motion-ready [data-pf-reveal-stagger] > * {
	transition-delay: calc(var(--pf-reveal-index, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
	.pf-motion-ready [data-pf-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Shine sweep — CSS stand-in for the hero 3D wash-tunnel scene */
.powerflow-shine-sweep {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.powerflow-shine-sweep::before {
	content: "";
	position: absolute;
	top: 0;
	left: -40%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(182, 244, 251, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
	animation: powerflow-shine 5s var(--pf-ease-flow) infinite;
}

@keyframes powerflow-shine {
	from {
		left: -40%;
	}
	to {
		left: 110%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.powerflow-shine-sweep::before {
		animation: none;
		display: none;
	}
}

/* Parallax background layers (driven by powerflow-motion.js setting --pf-parallax-y) */
[data-pf-parallax] {
	transform: translateY(var(--pf-parallax-y, 0px));
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	[data-pf-parallax] {
		transform: none !important;
	}
}

/* Mobile menu slide-in */
.powerflow-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 9500;
	background: var(--wp--preset--color--ink-900, #07182b);
	color: #fff;
	transform: translateX(100%);
	transition: transform var(--pf-dur-slow) var(--pf-ease-flow);
	overflow-y: auto;
	padding: 1.5rem;
}

.powerflow-mobile-menu.is-open {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.powerflow-mobile-menu {
		transition: none;
	}
}

.powerflow-mobile-menu a {
	color: #fff;
}