/* ===========================================================================
   parallax.css — the moving road
   ---------------------------------------------------------------------------
   Every class is px*-prefixed and lives only inside `.s2`, so this cannot
   reach a screen it does not own. Transforms only — no layout property is
   animated, because this runs on a phone.
   =========================================================================== */

.pxWrap{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;          /* the road is scenery, never a control */
  z-index:1;                    /* above the plate, below the truck */
}

.pxLane{
  position:absolute; inset:0;
  will-change:transform;
}

/* The pair of strips is 200% wide and slides by exactly half its own width,
   which puts strip 2 precisely where strip 1 began. Anything other than -50%
   of a 200% box shows a seam. */
.pxLane{
  display:flex;
  width:200%;
  animation:pxRoll var(--px-secs, 12s) linear infinite;
}
.pxStrip{
  position:relative;
  width:50%;
  flex:0 0 50%;
  height:100%;
}
.pxProp{
  position:absolute;
  transform:translateX(-50%);
  width:auto;                   /* height is set inline; see parallax.js */
  max-height:34%;               /* belt and braces: nothing reaches the HUD */
  display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.28));
}

@keyframes pxRoll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* Depth cues that are not motion: the far lane is cooler and flatter, because
   distance is haze as much as it is speed. */
.px-far .pxProp{ filter:saturate(.72) brightness(1.06) drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.px-mid .pxProp{ filter:saturate(.9) drop-shadow(0 2px 3px rgba(0,0,0,.24)); }

.pxTraveller{
  position:absolute;left:7%;bottom:23%;width:62px;height:124px;z-index:3;
  background:url('assets/fx/walk-v2.webp') 0 0/600% 100% no-repeat;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.45));
  animation:pxWalk 1.2s steps(5) infinite,pxPass 48s linear infinite;
}
@keyframes pxWalk{to{background-position:100% 0}}
@keyframes pxPass{from{transform:translate3d(-130px,0,0)}to{transform:translate3d(1040px,0,0)}}

/* The travel commitment occupies the existing pace row rather than opening a
   modal or hiding the road. Distance falls while the same landscape remains
   visible, making the next event feel encountered on the way to a place. */
.pxDeparting .s2-act1 .s2-verb,.drive.pxTransitHost .pace{opacity:.14;pointer-events:none}
.pxTransitHost{position:relative}
.drive.pxTransitHost .pxTransit{min-height:100%;font-family:var(--cond,Arial,sans-serif)}
.pxTransit{position:absolute;inset:0;z-index:9;display:grid;
  grid-template-columns:94px 1fr auto;grid-template-rows:1fr 6px;
  align-items:center;column-gap:12px;padding:8px 16px 7px;
  border:1px solid rgba(242,238,228,.58);border-radius:4px;
  background:rgba(9,14,20,.94);box-shadow:0 8px 18px rgba(0,0,0,.58);
  opacity:0;transform:translate3d(0,5px,0);
  transition:opacity .18s ease-out,transform .28s cubic-bezier(.16,1,.3,1)}
.pxTransit.go{opacity:1;transform:translate3d(0,0,0)}
.pxTransitVerb{font-size:10px;font-weight:700;letter-spacing:.12em;color:#aeb9c3}
.pxTransit strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--s2-hwy,Arial,sans-serif);font-size:19px;letter-spacing:.035em;color:var(--s2-ivory,#f3f6f9)}
.pxTransitKm{font-size:11px;font-weight:700;letter-spacing:.07em;color:#cbd4da;white-space:nowrap}
.pxTransitKm b{font-size:18px;color:#fff;font-variant-numeric:tabular-nums}
.pxTransit>i{grid-column:1/-1;display:block;height:3px;align-self:end;overflow:hidden;
  border-radius:2px;background:rgba(255,255,255,.13)}
.pxTransit>i>u{display:block;width:100%;height:100%;transform-origin:left center;
  transform:scaleX(var(--trip,0));background:#21c96b}

/* prefers-reduced-motion: the scenery stays, the movement stops. Removing the
   props entirely would take away depth the player has been reading. */
.pxStill .pxLane{ animation:none; }
.pxStill .pxTraveller{animation:none;display:none}

@media (prefers-reduced-motion: reduce){
  .pxLane{ animation:none; }
  .pxTraveller{animation:none;display:none}
  .pxTransit{transition:none}
}

/* On a short landscape phone the near lane eats the road, so it sits lower and
   smaller. Landscape is the primary orientation and this is where it is judged. */
@media (max-height:430px){
  .px-near .pxProp{ transform:translateX(-50%) scale(.82); transform-origin:bottom center; }
}