/* Animated product illustrations (blocks/illustration.ejs). CSS-only loops on
   transform/opacity/stroke; switched off for reduced motion. Live Ember palette. */
.ill { display: block; width: 100%; height: auto; border-radius: 8px; }
.ill-t { font-family: var(--font-sans); }
.ill-m { font-family: var(--font-mono); }

/* build — a page assembling, section by section */
.ill-bl { transform-box: fill-box; animation: ill-build 7s cubic-bezier(.2, .8, .2, 1) infinite; }
.ill-bl1 { animation-delay: .2s; }
.ill-bl2 { animation-delay: .7s; }
.ill-bl3 { animation-delay: 1.2s; }
.ill-bl4 { animation-delay: 1.7s; }
.ill-bl5 { animation-delay: 2.2s; }
@keyframes ill-build {
  0%, 6% { opacity: 0; transform: translateY(8px); }
  16%, 82% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}
.ill-dot { animation: ill-dot 1.2s infinite; }
.ill-dot2 { animation-delay: .2s; }
.ill-dot3 { animation-delay: .4s; }
@keyframes ill-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* mcp — AI clients streaming into the site */
.ill-flow { stroke-dasharray: 5 5; animation: ill-flow .9s linear infinite; }
.ill-flow2 { animation-duration: 1.3s; }
.ill-flow3 { animation-duration: 1.1s; }
@keyframes ill-flow { to { stroke-dashoffset: -20; } }
.ill-ping { transform-box: fill-box; transform-origin: center; animation: ill-ping 1.8s ease-out infinite; }
@keyframes ill-ping { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } }

/* content — items lighting up the page sections they feed */
.ill-glow { animation: ill-glow 4.5s ease-in-out infinite; }
.ill-glow2 { animation-delay: 1.5s; }
.ill-glow3 { animation-delay: 3s; }
@keyframes ill-glow { 0%, 24%, 100% { opacity: .15; } 8%, 16% { opacity: 1; } }

/* speed — score ring + orbiting globe */
.ill-ring { stroke-dasharray: 176; animation: ill-ring 4.5s cubic-bezier(.3, .7, .2, 1) infinite; }
@keyframes ill-ring { 0% { stroke-dashoffset: 176; } 55%, 100% { stroke-dashoffset: 0; } }
.ill-orbit { transform-box: view-box; transform-origin: 206px 75px; animation: ill-spin 6s linear infinite; }
.ill-orbit-slow { animation-duration: 9s; animation-direction: reverse; }
@keyframes ill-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ill * { animation: none !important; }
}