/* ==================================================================
   Motion — progressive enhancement only. Content is visible by default;
   reveal states apply only once JS has added .js + .anim-ready.
   ================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes growBar { from { transform: scaleY(0); } }
@keyframes drawLine { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(213, 9, 36, 0.4); } 100% { box-shadow: 0 0 0 14px rgba(213, 9, 36, 0); } }
@keyframes spinner { to { transform: rotate(360deg); } }

.floaty { animation: floaty 6s ease-in-out infinite; }
.floaty--slow { animation-duration: 8s; animation-delay: -2s; }

.anim-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: var(--d, 0ms); }
.anim-ready [data-reveal='right'] { transform: translateX(28px); }
.anim-ready [data-reveal='left'] { transform: translateX(-28px); }
.anim-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* Chart micro-animations once visible */
.anim-ready .is-in .bars span, .anim-ready .is-in.bars span { animation: growBar 1s var(--ease-out) both; }
.anim-ready .is-in .chart__line { stroke-dasharray: 600; animation: drawLine 1.8s var(--ease-out) both; }
.anim-ready .is-in .funnel span { animation: fadeUp 0.6s var(--ease-out) both; }
.anim-ready .is-in .funnel span:nth-child(2) { animation-delay: 0.1s; }
.anim-ready .is-in .funnel span:nth-child(3) { animation-delay: 0.2s; }
.anim-ready .is-in .funnel span:nth-child(4) { animation-delay: 0.3s; }
.pulse { animation: pulseRing 2s infinite; }

.hero__visual, .page-hero__visual { animation: heroIn 0.6s var(--ease-out) both; }
@keyframes heroIn { from { opacity: 0.001; transform: translateY(14px); } }

/* Skip rendering work for off-screen sections until needed */
main > .section:not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 900px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .anim-ready [data-reveal] { opacity: 1; transform: none; }
  .floaty, .hub__ring::after { animation: none !important; }
}