/* loopd logo — single-stroke draw animation
 *
 * Deceleration done by hand-tuning multi-stop keyframes against the
 * path's geometry. A single bezier curve fights the path: the lower-
 * right tail is a long visual sweep, so even with strong ease-out the
 * eye reads it as fast. Instead, we map dashoffset stops to the path's
 * visual segments and give each its own time budget — the bottom tail
 * gets ~28% of the time for 15% of the length, so it visibly slows
 * into rest.
 *
 * Speed profile across the draw (length-per-time, larger = faster):
 *   3.0  — lower-left tail   (short, can be quick)
 *   1.2  — big arc up        (moderate)
 *   1.67 — top curl          (small, quick)
 *   1.0  — descent           (moderate)
 *   0.54 — bottom sweep      (slow)
 *   0.62 — landing           (slow rest)
 *
 * Timing function: linear, so each segment moves at a constant speed
 * and the rhythm comes from the keyframe stops rather than a curve.
 */

.logo {
  height: clamp(96px, 18vmin, 168px);
  width: auto;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  animation:
    logo-fade 500ms ease-out both,
    logo-breath 8000ms ease-in-out infinite;
}

.logo__stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
  will-change: stroke-dashoffset;
  animation: logo-draw 5000ms linear 200ms both;
}

@keyframes logo-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes logo-draw {
  /* Body: linear segments tuned for path geometry — fast through short
     visual segments, moderate through long ones.
     Final half: cubic-bezier(0.3, 0.5, 0.5, 1) — its t=0 slope (y1/x1
     = 1.67) matches the previous segment's velocity exactly, so no
     velocity jump at the boundary. Slope at t=1 is zero, so the line
     decelerates continuously to a stop. No hard click. */
  0% {
    stroke-dashoffset: 1;
    animation-timing-function: linear;
  }
  8% {
    stroke-dashoffset: 0.85;
    animation-timing-function: linear;
  }
  35% {
    stroke-dashoffset: 0.45;
    animation-timing-function: linear;
  }
  50% {
    stroke-dashoffset: 0.3;
    animation-timing-function: cubic-bezier(0.3, 0.5, 0.5, 1);
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes logo-breath {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.005);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo {
    animation: logo-fade 280ms ease-out both;
  }
  .logo__stroke {
    stroke-dashoffset: 0;
    animation: none;
  }
}