/* Design "route": the papaya bag rides a delivery route along the bottom of the screen. */

.route {
  /* One delivery loop. The rider, ripple and pin share it so they stay in step. */
  --trip: 7s;
  --trip-delay: 1.5s; /* first ride starts once the logo has landed */
  --pin-x: 74%;
  --pin-y: 40%;
  position: relative;
  height: clamp(120px, 18svh, 168px);
  margin-top: 1rem;
}
.route__map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.route__road,
.route__dots { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route__road { stroke: rgb(27 27 27 / 0.07); stroke-width: 30; }
.route__dots { stroke: var(--cream); stroke-width: 6; stroke-dasharray: 0 15; }
.route__dots--ahead { opacity: 0.4; }

/* Pin, ripple and rider are placed by route.js; without it the road shows on its own. */
.route__pin,
.route__ripple,
.route__rider { position: absolute; display: none; }
.route.is-ready .route__pin,
.route.is-ready .route__ripple,
.route.is-ready .route__rider { display: block; }

.route__pin {
  left: var(--pin-x);
  top: var(--pin-y);
  width: 26px;
  height: 35px;
  margin: -35px 0 0 -13px; /* tip of the pin on the road */
  transform-origin: 50% 100%;
}
.route__pin svg { width: 100%; height: 100%; }

.route__ripple {
  left: var(--pin-x);
  top: var(--pin-y);
  width: 72px;
  height: 26px;
  margin: -13px 0 0 -36px;
  border: 3px solid var(--cream);
  border-radius: 50%;
  opacity: 0;
}

.route__rider {
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgb(255 244 232 / 0.35), 0 6px 14px rgb(27 27 27 / 0.18);
  offset-path: var(--route);
  offset-anchor: center;
  offset-rotate: 0deg;
  --stop: calc(100% - 46px); /* stops at the door, just short of the pin */
  offset-distance: var(--stop); /* parked: the reduced-motion state */
}
.route__rider svg { width: 100%; height: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .route.is-ready .route__rider { animation: ride var(--trip) var(--trip-delay) infinite both; }
  .route.is-ready .route__ripple { animation: ripple var(--trip) var(--trip-delay) infinite both; }
  .route.is-ready .route__pin { animation: hop var(--trip) var(--trip-delay) infinite both; }
}

/* 0–66 %: ride to the pin. 66–86 %: wait at the door. 86–100 %: fade, go again. */
@keyframes ride {
  0%   { offset-distance: 0%; opacity: 0; animation-timing-function: var(--ease-in-out); }
  6%   { opacity: 1; }
  66%  { offset-distance: var(--stop); }
  86%  { offset-distance: var(--stop); opacity: 1; }
  100% { offset-distance: var(--stop); opacity: 0; }
}
@keyframes ripple {
  0%, 65% { opacity: 0; transform: scale(0.3); }
  67%     { opacity: 0.9; transform: scale(0.4); animation-timing-function: var(--ease-enter); }
  84%     { opacity: 0; transform: scale(1.5); }
  100%    { opacity: 0; transform: scale(1.5); }
}
@keyframes hop {
  0%, 65% { transform: none; }
  69%     { transform: translateY(-10px) scaleY(1.04); animation-timing-function: var(--ease-in-out); }
  74%     { transform: none; }
  100%    { transform: none; }
}