/* aggrologix — wordmark <-> monogram motion. Requires tokens.css (for --ax-logo-* colours).
 * Usage: <div class="ax-motion"> + the SVG from wordmark-to-monogram.html </div>
 * Modes (add to .ax-motion):
 *   (none)        loop: wordmark -> monogram -> wordmark, forever (4.8s each way)
 *   .ax-collapse  play once, wordmark -> monogram, stay on the monogram
 *   .ax-expand    play once, monogram -> wordmark, stay on the wordmark
 *   .ax-paused    freeze (e.g. toggle off-screen with IntersectionObserver)
 * prefers-reduced-motion: shows the static wordmark, no movement. */

@keyframes ax-wrap { 0%,44% { transform: translateX(0); animation-timing-function: cubic-bezier(0.8, 0, 0.15, 1); } 60% { transform: translateX(392px); animation-timing-function: ease-out; } 66%,100% { transform: translateX(374px); } }
@keyframes ax-chevL { 0%,22% { transform: translateX(0); animation-timing-function: cubic-bezier(0.6, 0, 0.1, 1); } 36% { transform: translateX(-488.5px); animation-timing-function: cubic-bezier(0.8, 0, 0.15, 1); } 58% { transform: translateX(-213px); animation-timing-function: ease-in-out; } 62% { transform: translateX(-231px); animation-timing-function: ease-out; } 66%,100% { transform: translateX(-227.5px); } }
@keyframes ax-chevR { 0%,24% { transform: translateX(0); animation-timing-function: cubic-bezier(0.6, 0, 0.1, 1); } 36% { transform: translateX(509.5px); animation-timing-function: cubic-bezier(0.8, 0, 0.15, 1); } 58% { transform: translateX(-408px); animation-timing-function: ease-in-out; } 62% { transform: translateX(-386px); animation-timing-function: ease-out; } 66%,100% { transform: translateX(-390.5px); } }
@keyframes ax-w_g1 { 0%,46.2% { transform: translateX(0); opacity: 1; } 48.8%,100% { transform: translateX(70px); opacity: 0; } }
@keyframes ax-w_g2 { 0%,47.2% { transform: translateX(0); opacity: 1; } 49.8%,100% { transform: translateX(-70px); opacity: 0; } }
@keyframes ax-w_r { 0%,45.8% { transform: translateX(0); opacity: 1; } 48.4%,100% { transform: translateX(-70px); opacity: 0; } }
@keyframes ax-w_l { 0%,44.4% { transform: translateX(0); opacity: 1; } 47.0%,100% { transform: translateX(-70px); opacity: 0; } }
@keyframes ax-w_o { 0%,44.1% { transform: translateX(0); opacity: 1; } 46.7%,100% { transform: translateX(-70px); opacity: 0; } }
@keyframes ax-w_g3 { 0%,43.4% { transform: translateX(0); opacity: 1; } 46.0%,100% { transform: translateX(-70px); opacity: 0; } }
@keyframes ax-w_i { 0%,42.6% { transform: translateX(0); opacity: 1; } 45.2%,100% { transform: translateX(-70px); opacity: 0; } }
@keyframes ax-w_x { 0%,41.2% { transform: translateX(0); opacity: 1; } 43.8%,100% { transform: translateX(-70px); opacity: 0; } }

.ax-motion svg { display: block; width: 100%; height: auto; overflow: visible; }
.ax-motion .ax-letters { fill: var(--ax-logo-letters, #12131A); }
.ax-motion .ax-accent { fill: var(--ax-logo-accent, #2B3BFF); }
.ax-motion .ax-m { animation-duration: var(--ax-motion-duration, 4.8s); animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); animation-fill-mode: both; }
.ax-motion .ax-m-wrap { animation-name: ax-wrap; }
.ax-motion .ax-m-chevL { animation-name: ax-chevL; }
.ax-motion .ax-m-chevR { animation-name: ax-chevR; }
.ax-motion .ax-m-w_g1 { animation-name: ax-w_g1; }
.ax-motion .ax-m-w_g2 { animation-name: ax-w_g2; }
.ax-motion .ax-m-w_r { animation-name: ax-w_r; }
.ax-motion .ax-m-w_l { animation-name: ax-w_l; }
.ax-motion .ax-m-w_o { animation-name: ax-w_o; }
.ax-motion .ax-m-w_g3 { animation-name: ax-w_g3; }
.ax-motion .ax-m-w_i { animation-name: ax-w_i; }
.ax-motion .ax-m-w_x { animation-name: ax-w_x; }
.ax-motion.ax-collapse .ax-m { animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; }
.ax-motion.ax-expand .ax-m { animation-iteration-count: 1; animation-direction: reverse; animation-fill-mode: forwards; }
.ax-motion.ax-paused .ax-m { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ax-motion .ax-m { animation: none !important; } }