/* Initial (hidden) states — only until JS marks them in view */
.shank-anim {
	transition:
		opacity var(--shank-anim-duration, 600ms) var(--shank-anim-easing, ease-out) var(--shank-anim-delay, 0ms),
		transform var(--shank-anim-duration, 600ms) var(--shank-anim-easing, ease-out) var(--shank-anim-delay, 0ms);
	will-change: opacity, transform;
}

/* Fade */
[data-shank-anim="fade-in"]    { opacity: 0; }
[data-shank-anim="fade-up"]    { opacity: 0; transform: translateY(40px); }
[data-shank-anim="fade-down"]  { opacity: 0; transform: translateY(-40px); }
[data-shank-anim="fade-left"]  { opacity: 0; transform: translateX(40px); }
[data-shank-anim="fade-right"] { opacity: 0; transform: translateX(-40px); }

/* Motion & slide */
[data-shank-anim="slide-up"]    { transform: translateY(80px); }
[data-shank-anim="slide-down"]  { transform: translateY(-80px); }
[data-shank-anim="slide-left"]  { transform: translateX(80px); }
[data-shank-anim="slide-right"] { transform: translateX(-80px); }
[data-shank-anim="zoom-in"]     { opacity: 0; transform: scale(0.6); }
[data-shank-anim="zoom-out"]    { opacity: 0; transform: scale(1.3); }

/* Transform */
[data-shank-anim="flip-up"]    { opacity: 0; transform: perspective(1000px) rotateX(-70deg); transform-origin: center bottom; }
[data-shank-anim="flip-down"]  { opacity: 0; transform: perspective(1000px) rotateX(70deg);  transform-origin: center top; }
[data-shank-anim="flip-left"]  { opacity: 0; transform: perspective(1000px) rotateY(-70deg); transform-origin: center right; }
[data-shank-anim="flip-right"] { opacity: 0; transform: perspective(1000px) rotateY(70deg);  transform-origin: center left; }
[data-shank-anim="rotate"]     { opacity: 0; transform: rotate(-12deg) scale(0.95); }
[data-shank-anim="scale"]      { opacity: 0; transform: scale(0.85); }

/* In view: everything resolves to natural state */
.shank-anim.is-inview {
	opacity: 1;
	transform: none;
}

/* Accessibility: no motion for users who opt out */
@media (prefers-reduced-motion: reduce) {
	.shank-anim {
		transition: none;
		opacity: 1 !important;
		transform: none !important;
	}
}