/* Base "not yet revealed" and "revealed" states for each automated
   effect. --vcs-anim-speed is set inline by PHP based on the Speed
   setting (0.65 = fast, 1 = normal, 1.4 = slow) and multiplies every
   duration below, so one setting controls the whole system's pace. */

:root{ --vcs-anim-speed: 1; }

/* ---- headings: mask/wipe reveal ---- */
.vcs-anim-mask{
	clip-path: inset(0 100% 0 0);
	transition: clip-path calc(0.9s * var(--vcs-anim-speed)) cubic-bezier(.2,.9,.25,1);
}
.vcs-anim-mask.vcs-in-view{
	clip-path: inset(0 0% 0 0);
}

/* ---- images: scale + fade reveal ---- */
.vcs-anim-scale-wrap{
	overflow: hidden;
}
.vcs-anim-scale{
	transform: scale(1.15);
	opacity: 0;
	transition:
		transform calc(1.1s * var(--vcs-anim-speed)) cubic-bezier(.16,.8,.3,1),
		opacity calc(0.8s * var(--vcs-anim-speed)) ease;
}
.vcs-anim-scale.vcs-in-view{
	transform: scale(1);
	opacity: 1;
}

/* ---- staggered groups: fade + rise ---- */
.vcs-anim-stagger{
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity calc(0.6s * var(--vcs-anim-speed)) ease,
		transform calc(0.6s * var(--vcs-anim-speed)) cubic-bezier(.2,.9,.25,1);
}
.vcs-anim-stagger.vcs-in-view{
	opacity: 1;
	transform: translateY(0);
}

/* ---- underline draw (pure CSS hover, not scroll-triggered) ---- */
.vcs-underline-draw{
	position: relative;
	text-decoration: none;
}
.vcs-underline-draw::after{
	content: '';
	position: absolute;
	left: 0; bottom: -3px;
	width: 100%; height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform calc(0.3s * var(--vcs-anim-speed)) cubic-bezier(.2,.9,.25,1);
}
.vcs-underline-draw:hover::after{
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce){
	.vcs-anim-mask, .vcs-anim-scale, .vcs-anim-stagger{
		transition: none;
		clip-path: none;
		transform: none;
		opacity: 1;
	}
	.vcs-underline-draw::after{ transition: none; }
}