/* ==========================================================================
   Motion: reveal-on-scroll, SVG line drawing, keyframes, reduced motion
   ========================================================================== */

/* Reveal — only hidden once JS confirms it runs (html.js) so content never disappears without JS */
.js .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
	transition-delay: calc(var(--d, 0) * 80ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal.tilt.is-visible { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.js .reveal.is-visible.case-card:hover, .js .reveal.is-visible.card:hover,
.js .reveal.is-visible.law-card:hover, .js .reveal.is-visible.issue-card:hover { transition-delay: 0s; }

/* SVG line draw (pathLength normalised in JS) */
.js .draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); }
.js .is-drawn .draw { animation: draw 2.2s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
.js .is-drawn .scales__dish { fill-opacity: 0; animation: draw 2.2s var(--ease) forwards, fill-in .8s var(--ease) 1.6s forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill-in { to { fill-opacity: 1; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(11, 122, 90, .45); } 70% { box-shadow: 0 0 0 10px rgba(11, 122, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(11, 122, 90, 0); } }
@keyframes blob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.08); } 100% { transform: translate(30px, -20px) scale(.95); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes spin-dash { to { transform: rotate(360deg); } }
@keyframes underline { 0% { transform: scaleX(0); } 30%, 80% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes scroll-cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-24px) scale(.97); } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes shout { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.1); } 60% { transform: rotate(8deg); } }
@keyframes heartbeat { 0% { transform: scale(1); } 30% { transform: scale(1.5); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes gavel { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-22deg); } 80% { transform: rotate(4deg); } }
@keyframes ripple { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } }

/* Floating heart particles for support clicks */
.burst-heart {
	position: fixed; z-index: 400; pointer-events: none; color: var(--rose);
	animation: float-up 1s var(--ease) forwards;
}
.burst-heart svg { width: 18px; height: 18px; fill: currentColor; }
@keyframes float-up { to { transform: translate(var(--bx), -90px) scale(.4) rotate(var(--br)); opacity: 0; } }

/* Respect reduced motion: everything visible and still */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.js .reveal { opacity: 1; transform: none; }
	.js .draw { stroke-dashoffset: 0; }
	.ticker__track { animation: none; flex-wrap: wrap; width: auto; }
	.blob, .float-card, .arch__ring { animation: none; }
}