/* ==========================================================================
   animations.css — keyframes and the classes applied to SVG illustrations
   --------------------------------------------------------------------------
   The hero and both app sections use hand-built inline SVG scenes (see
   index.html). The classes below are applied to elements *inside* those
   SVGs to bring them to life.

   Note on `transform-box: fill-box` — inside an SVG, transform-origin
   defaults to the whole canvas, so scaling a small circle would fly it
   across the scene. fill-box scopes the origin to the element itself.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

/* Slow blink — the "live" status dot in the hero pill. */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Gentle vertical drift — floating notification cards. */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Marching-ants dashes — the dotted delivery route arc. */
@keyframes dashmove {
  to { stroke-dashoffset: -20; }
}

/* Radar ping — expanding ring on map pins. */
@keyframes ping {
  0%        { transform: scale(0.4); opacity: 0.75; }
  80%, 100% { transform: scale(2.8); opacity: 0; }
}

/* Rotating scooter wheels. */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Small bounce — the whole scooter body while riding. */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* --------------------------------------------------------------------------
   SVG element classes
   -------------------------------------------------------------------------- */

/* Road / map line. */
.rd {
  fill: none;
  stroke: rgba(207, 226, 214, 0.10);
  stroke-linecap: round;
}

/* Animated dashed delivery route between store and customer. */
.route {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 11;
  animation: dashmove 1s linear infinite;
  filter: drop-shadow(0 0 5px rgba(79, 168, 124, 0.5));
}

.ping {
  transform-box: fill-box;
  transform-origin: center;
  animation: ping 2.6s ease-out infinite;
}

.spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 1.1s linear infinite;
}

.bob {
  animation: bob 1.4s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Scroll reveal
   Elements start faded/offset; assets/js/reveal.js adds .in via
   IntersectionObserver when they scroll into view.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}