/* motion.css — animation states driven by motion.js */
:root { --ease: cubic-bezier(.2, .7, .1, 1); interpolate-size: allow-keywords; }

.js [data-reveal] {
  opacity: 0; translate: 0 40px;
  transition: opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s);
}
.js [data-reveal="fade"] { translate: none; }
.js [data-reveal="scale"] { translate: 0 30px; scale: .94; }
.js [data-reveal].in { opacity: 1; translate: none; scale: none; }

[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
[data-split] .w > span { display: inline-block; }
.js [data-split] .w > span { translate: 0 110%; transition: translate 1s var(--ease) calc(var(--i) * 55ms + var(--d, 0s)); }
.js [data-split].in .w > span { translate: none; }

/* Visually hidden, still read by screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Progressive SVG drawing: every path has pathLength="1" */
.js [data-draw] path, .js [data-draw] line, .js [data-draw] polyline, .js [data-draw] rect, .js [data-draw] circle {
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease) calc(var(--k, 0) * 40ms);
}
.js [data-draw].in path, .js [data-draw].in line, .js [data-draw].in polyline, .js [data-draw].in rect, .js [data-draw].in circle { stroke-dashoffset: 0; }

[data-magnetic] { translate: var(--mx, 0) var(--my, 0); transition: translate .35s var(--ease), scale .2s var(--ease), background-color .3s, color .3s, border-color .3s; }
[data-magnetic]:active { scale: .95; }

details::details-content { height: 0; overflow: hidden; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
details[open]::details-content { height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto !important; }
}