/* EndurAPP V2 — RideLink animated visualizer ("how it works" film loop).
   Conforms to the app onboarding design system: blackDeep ground, blackElevated
   cards with steel300 hairlines, neon accents, DM Mono metrics.
   Stage runs in a fixed 1600×900 coordinate space, scaled to fit by JS. */

/* ---------- Frame ---------- */

.rlv {
  display: grid;
  gap: var(--sp-md);
}

.rlv-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--black-carbon);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.07);
}

.rlv-scaler {
  position: absolute;
  top: 0;
  left: 0;
  width: 1600px;
  height: 900px;
  transform-origin: 0 0;
}

/* Transitions are suppressed for one frame on seek so jumps land instantly. */
.rlv-stage.is-seeking .rlv-scaler * {
  transition-duration: 0ms !important;
}

/* Clock stopped (user pause / off-screen): freeze decorative CSS loops too. */
.rlv-stage.is-anim-paused .rlv-scaler *,
.rlv-stage.is-anim-paused .rlv-scaler {
  animation-play-state: paused !important;
}

/* ---------- Map plate (MapKit-dark-standard mood, no invented cartography) ---------- */

.rlv-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.rlv-map-label {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--steel-200);
  opacity: 0.55;
}

/* Neon trail — mirrors WingmanMapView lineWidth 5 at phone scale. */
#rlv-trail,
#rlv-fork-trail {
  fill: none;
  stroke: var(--neon);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(231, 255, 0, 0.35));
}

#rlv-trail { stroke-width: 9; }

#rlv-fork-trail {
  stroke-width: 7;
  opacity: 0.75;
}

/* Rescue route — generated "navigate to rider" line, Waze-style marching dash. */
.rlv-disclosure {
  margin-top: var(--sp-sm);
  text-transform: uppercase;
}

#rlv-rescue {
  fill: none;
  stroke: var(--neon);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 20 26;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(231, 255, 0, 0.4));
  transition: opacity 500ms var(--ease-out);
}

.rlv-stage.cue-navigate #rlv-rescue {
  opacity: 0.95;
  animation: rlvDashFlow 1.1s linear infinite;
}

@keyframes rlvDashFlow {
  to { stroke-dashoffset: -46; }
}

/* ---------- Session chip + HUD (recording chrome) ---------- */

.rlv-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: rgba(18, 18, 20, 0.88);
  box-shadow: inset 0 0 0 1.5px var(--steel-300);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}

.rlv-session-chip { top: 44px; left: 48px; }

.rlv-session-chip .rlv-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--signal-green);
  box-shadow: 0 0 10px rgba(48, 209, 88, 0.7);
  animation: rlvPulse 1.6s ease-in-out infinite;
}

.rlv-session-chip .rlv-chip-brand { color: var(--neon); }

.rlv-hud {
  top: 44px;
  right: 48px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.rlv-stage.cue-session-live .rlv-session-chip,
.rlv-stage.cue-ride .rlv-hud {
  opacity: 1;
  transform: translateY(0);
}

@keyframes rlvPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- Phone cards (onboarding sheet language) ---------- */

.rlv-phone {
  position: absolute;
  display: grid;
  gap: 18px;
  width: 384px;
  padding: 30px 30px 28px;
  border-radius: 28px;
  background: rgba(26, 26, 30, 0.94);
  box-shadow:
    inset 0 0 0 1.5px var(--steel-300),
    0 22px 60px rgba(10, 10, 11, 0.65);
  opacity: 0;
  transform: translateY(26px) scale(0.97);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out),
    box-shadow 320ms var(--ease-out);
}

.rlv-phone--host { left: 120px; top: 210px; }

.rlv-phone--guest { width: 340px; right: 76px; }
.rlv-phone--nico { top: 128px; }
.rlv-phone--fran { top: 470px; }

.rlv-phone-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neon);
}

.rlv-phone-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 42px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}

.rlv-phone-owner {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  text-transform: uppercase;
  color: var(--white);
}

.rlv-phone-owner .rlv-mini-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--black-carbon);
  box-shadow: inset 0 0 0 1.5px var(--steel-300);
  display: grid;
  place-items: center;
}

.rlv-mini-avatar svg { width: 30px; height: 30px; }

/* Primary button — EndurPrimaryButtonStyle: neon fill, black text. */
.rlv-btn {
  display: grid;
  place-items: center;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--neon);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 26px;
  color: var(--black-deep);
  transition: transform 200ms var(--ease-out), filter 200ms var(--ease-out);
}

/* Simulated tap */
.rlv-stage.cue-host-tap .rlv-phone--host .rlv-btn,
.rlv-stage.cue-guest-tap .rlv-phone--guest .rlv-btn {
  transform: scale(0.94);
  filter: brightness(0.82);
}

/* Card choreography */
.rlv-stage.cue-host-card .rlv-phone--host { opacity: 1; transform: translateY(0) scale(1); }
.rlv-stage.cue-session-live .rlv-phone--host { opacity: 0; transform: translateY(-20px) scale(0.97); }

.rlv-stage.cue-invites .rlv-phone--guest { opacity: 0.55; transform: translateY(0) scale(1); }
.rlv-stage.cue-invite-received .rlv-phone--guest {
  opacity: 1;
  box-shadow:
    inset 0 0 0 2px rgba(231, 255, 0, 0.65),
    0 22px 60px rgba(10, 10, 11, 0.65);
}
.rlv-stage.cue-guests-join .rlv-phone--guest { opacity: 0; transform: translateY(-18px) scale(0.97); }

/* Guest tile internals: invite state → share state */
.rlv-guest-share { display: none; }
.rlv-stage.cue-guests-share .rlv-guest-share { display: grid; gap: 18px; }
.rlv-stage.cue-guests-share .rlv-guest-wait { display: none; }

.rlv-guest-wait {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-100);
}

.rlv-wa-check {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(48, 209, 88, 0.16);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}

.rlv-wa-check svg { width: 16px; height: 16px; }

.rlv-stage.cue-invite-received .rlv-wa-check { opacity: 1; transform: scale(1); }

/* ---------- Invite pills (WhatsApp send) ---------- */

.rlv-invite {
  position: absolute;
  left: 400px;
  top: 300px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: rgba(26, 26, 30, 0.96);
  box-shadow: inset 0 0 0 1.5px var(--steel-300), 0 10px 30px rgba(10, 10, 11, 0.5);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--white);
  opacity: 0;
  transform: translate(0, 0) scale(0.8);
  transition: transform 1250ms cubic-bezier(0.5, 0, 0.2, 1), opacity 350ms var(--ease-out);
}

.rlv-invite .rlv-wa-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--signal-green);
  display: grid;
  place-items: center;
  flex: none;
}

.rlv-wa-badge svg { width: 18px; height: 18px; }

.rlv-invite--2 { transition-delay: 380ms, 380ms; }

.rlv-stage.cue-invites .rlv-invite { opacity: 1; }
.rlv-stage.cue-invites .rlv-invite--1 { transform: translate(700px, -108px) scale(1); }
.rlv-stage.cue-invites .rlv-invite--2 { transform: translate(700px, 240px) scale(1); }
.rlv-stage.cue-invite-received .rlv-invite { opacity: 0; }

/* ---------- Rider markers (mirror WingmanPeerAnnotationView) ---------- */

.rlv-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  offset-rotate: 0deg;
  offset-distance: 0%;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  will-change: offset-distance;
}

/* Zero-size box rides the path; the pin hangs above it so the tip apex
   is exactly the anchored point (Map .bottom anchor, like the app). */
.rlv-pin {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rlv-marker .rlv-name {
  padding: 6px 16px 5px;
  border-radius: var(--r-pill);
  background: var(--neon);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.02em;
  color: var(--black-deep);
  box-shadow: 0 2px 6px rgba(10, 10, 11, 0.35);
  margin-bottom: 8px;
}

.rlv-marker .rlv-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--black-elevated);
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 5px #ffffff,
    0 4px 10px rgba(10, 10, 11, 0.4);
}

.rlv-marker--you .rlv-avatar { box-shadow: 0 0 0 6px var(--neon), 0 4px 10px rgba(10, 10, 11, 0.4); }

.rlv-avatar svg { width: 46px; height: 46px; }

.rlv-marker .rlv-tip {
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 18px solid #ffffff;
  margin-top: -1px;
  filter: drop-shadow(0 2px 3px rgba(10, 10, 11, 0.4));
}

.rlv-marker--you .rlv-tip { border-top-color: var(--neon); }

.rlv-marker--mati,
.rlv-marker--nico { offset-path: path('M 170 640 C 320 560, 300 420, 470 430 C 640 440, 700 620, 880 600 C 1060 580, 1030 380, 1180 330 C 1290 293, 1340 300, 1430 260'); }

.rlv-marker--fran { offset-path: path('M 170 640 C 320 560, 300 420, 470 430 C 640 440, 700 620, 880 600 C 960 640, 1040 700, 1100 720 C 1150 736, 1190 730, 1230 700'); }

/* Reunion: the three pins converge but must not stack — each parks on its own
   offset so all three name capsules stay readable in the closing frame. */
.rlv-marker--nico .rlv-pin { transform: translateX(-50%) translate(-58px, 4px); }

.rlv-stage.cue-session-live .rlv-marker--mati { opacity: 1; }
.rlv-stage.cue-guests-join .rlv-marker--nico,
.rlv-stage.cue-guests-join .rlv-marker--fran { opacity: 1; }

/* Reunited beat: soft neon pulse behind the pack */
.rlv-reunite-pulse {
  position: absolute;
  width: 220px;
  height: 220px;
  margin: -110px;
  left: 1430px;
  top: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 255, 0, 0.28) 0%, rgba(231, 255, 0, 0) 68%);
  opacity: 0;
  transform: scale(0.4);
}

.rlv-stage.cue-reunited .rlv-reunite-pulse {
  animation: rlvReunite 1.5s var(--ease-out) forwards;
}

@keyframes rlvReunite {
  0% { opacity: 0; transform: scale(0.4); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ---------- Lost-rider chips ---------- */

.rlv-dist {
  position: absolute;
  left: 1150px;
  top: 760px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: rgba(18, 18, 20, 0.92);
  box-shadow: inset 0 0 0 1.5px var(--signal-amber);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--signal-amber);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out),
    box-shadow 380ms var(--ease-out), color 380ms var(--ease-out);
}

.rlv-stage.cue-lost .rlv-dist { opacity: 1; transform: translateY(0); }

.rlv-stage.cue-rescue .rlv-dist {
  box-shadow: inset 0 0 0 1.5px var(--steel-300);
  color: var(--white);
}

.rlv-stage.cue-reunited .rlv-dist { opacity: 0; }

.rlv-nav-chip {
  position: absolute;
  left: 1020px;
  top: 830px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  background: var(--neon);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 21px;
  color: var(--black-deep);
  box-shadow: 0 10px 30px rgba(231, 255, 0, 0.25);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}

.rlv-nav-chip svg { width: 22px; height: 22px; flex: none; }

.rlv-stage.cue-navigate .rlv-nav-chip { opacity: 1; transform: translateY(0); }
.rlv-stage.cue-reunited .rlv-nav-chip { opacity: 0; }

/* ---------- Progress + play/pause ---------- */

.rlv-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(245, 245, 247, 0.08);
  z-index: 3;
}

.rlv-progress i {
  display: block;
  height: 100%;
  background: var(--neon);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.rlv-playpause {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(18, 18, 20, 0.85);
  box-shadow: inset 0 0 0 1px var(--steel-300);
  color: var(--white);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.rlv-playpause:hover { box-shadow: inset 0 0 0 1px var(--neon); color: var(--neon); }

.rlv-playpause svg { width: 15px; height: 15px; }
.rlv-playpause .rlv-ic-play { display: none; }
.rlv.is-paused .rlv-playpause .rlv-ic-play { display: block; }
.rlv.is-paused .rlv-playpause .rlv-ic-pause { display: none; }

.rlv.is-static .rlv-playpause,
.rlv.is-static .rlv-progress { display: none; }

/* ---------- Chapter list (onboarding step-row language) ---------- */

.rlv-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rlv-step {
  appearance: none;
  border: 0;
  width: 100%;
  display: grid;
  gap: 6px;
  padding: var(--sp-sm) var(--sp-sm) var(--sp-md);
  background: none;
  border-top: 1px solid var(--steel-300);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.rlv-step-n {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--steel-200);
  transition: color var(--dur-fast) var(--ease-out);
}

.rlv-step-t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--steel-100);
  transition: color var(--dur-fast) var(--ease-out);
}

.rlv-step:hover .rlv-step-t { color: var(--white); }

.rlv-step[aria-current="step"] { border-top-color: var(--neon); }
.rlv-step[aria-current="step"] .rlv-step-n { color: var(--neon); }
.rlv-step[aria-current="step"] .rlv-step-t { color: var(--white); }

@media (max-width: 899px) {
  .rlv-steps { grid-template-columns: repeat(2, 1fr); }
  .rlv-steps .rlv-step:last-child { grid-column: 1 / -1; }
}

/* ---------- Static fallback (prefers-reduced-motion) ---------- */
/* JS parks the timeline on the final composite frame; nothing loops. */

@media (prefers-reduced-motion: reduce) {
  .rlv-invite,
  .rlv-phone,
  .rlv-chip,
  .rlv-marker,
  .rlv-dist,
  .rlv-nav-chip {
    transition: none !important;
  }

  #rlv-rescue,
  .rlv-session-chip .rlv-dot {
    animation: none !important;
  }
}