/* The AnalyticRoots logo grows once on load: seed, roots by depth, trunk, leaves, then the ring.
   loader.js reuses it, sped up and looping, as the sign for any wait. */
.ar-ground { fill: var(--color-logo-ground); animation: ar-fade 0.5s var(--ease-out) both; }
.ar-seed { fill: var(--color-copper); transform-box: fill-box; transform-origin: 50% 50%;
  animation: ar-pop 0.6s var(--ease-out) 0.15s both, ar-fade-out 0.3s var(--ease-in) 1.1s forwards; }
.ar-stub { fill: var(--color-copper); transform-box: fill-box; transform-origin: 50% 0%;
  animation: ar-sprout 0.35s var(--ease-out) 0.75s both; }
.ar-roots path { fill: none; stroke: var(--color-copper); stroke-width: 4; stroke-dasharray: 1;
  animation: ar-draw 0.4s var(--ease-in-out) calc(0.95s + var(--d) * var(--grow-step)) both; }
.ar-roots circle { fill: var(--color-copper); transform-box: fill-box; transform-origin: 50% 50%;
  animation: ar-pop 0.3s var(--ease-out) calc(1.3s + var(--d) * var(--grow-step)) both; }
.ar-trunk { fill: var(--color-logo-ink); }
.ar-spine { fill: none; stroke: var(--color-mask-on); stroke-width: 40; stroke-dasharray: 1;
  animation: ar-draw 1.3s var(--ease-in-out) 1.6s both; }
.ar-leaf { fill: var(--color-leaf); transform-box: fill-box; transform-origin: 0% 50%;
  animation: ar-pop 0.5s var(--ease-out) calc(2.4s + var(--i) * 0.13s) both; }
.ar-ring { fill: none; stroke: var(--color-logo-ink); stroke-width: 15; stroke-dasharray: 1;
  animation: ar-draw 1s var(--ease-in-out) 3.1s both; }
.ar-ring--thin { stroke-width: 4; opacity: 0.7; stroke-dasharray: 0.4 1; animation-name: ar-draw-arc; animation-delay: 3.4s; }
@keyframes ar-draw-arc { from { stroke-dashoffset: 0.4; } to { stroke-dashoffset: 0; } }
@keyframes ar-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ar-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ar-sprout { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ar-fade { from { opacity: 0; } }
@keyframes ar-fade-out { to { opacity: 0; } }

.ar-loader { display: grid; justify-items: center; gap: var(--space-xs); color: var(--color-ink-soft); font-size: var(--text-sm); }
.ar-loader svg { width: 104px; height: 104px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .ar-logo * { animation: none !important; }
  .ar-seed { opacity: 0; }
}