/* ==========================================================================
   about-route.css — the about page as a trip.

   A road runs down the page behind the content. Each info bubble sits on top
   of it and drives one leg: it holds still in the viewport (sticky) while the
   road scrolls underneath, steering with the curve, and parks at the next
   waypoint where the next bubble is already waiting. The road the bubbles
   have driven over fades, like the covered part of a sat-nav route.

   Geometry (road path, leg heights, sticky offsets, doodle positions) is
   computed in js/about-route.js from the bubbles' measured heights; this file
   only styles. Every class is prefixed ar- because style.css already owns
   .hero, .rates-grid, .rate-card and friends.

   Prototype and its design history: experiments/about-route.html.
   ========================================================================== */

:root {
  --ar-amber: #fea710;
  --ar-ink: #111111;
  --ar-paper: #f7f5f0;
  --ar-bg: #0d0d0d;
  --ar-carbon: #0b0b0b;
  --ar-road-w: 34px; /* overwritten from JS: narrower on phones */
  --ar-dash-w: 4px;
  --ar-dash: 16 14;
}

@media (max-width: 719px) {
  :root {
    --ar-dash-w: 3px;
    --ar-dash: 10 10;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ar-hero {
  position: relative;
  max-width: 1100px;
  /* Just tall enough for the taxi doodle beside the title — the trip below
     is the content, so the hero should not hold it back. */
  min-height: 250px;
  margin: 0 auto;
  padding: 40px 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 719px) {
  .ar-hero {
    min-height: 0;
    padding: 32px 24px 8px;
  }
}

.ar-eyebrow {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.ar-title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.1;
  max-width: 14ch;
}

/* Greek words run longer: at 14ch the Greek title breaks onto four lines.
   A wider measure sets it in two or three, still clear of the taxi. */
.ar-title:lang(el) {
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   Doodles — faint static line drawings beside the road, like landmarks on
   the map. A displacement filter (#ar-doodle-wobble, defined in the page)
   wobbles the lines so they read as hand-drawn rather than as icons.
   -------------------------------------------------------------------------- */
.ar-doodle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#ar-doodle-wobble);
}

.ar-doodle .accent {
  stroke: rgba(254, 167, 16, 0.5);
}

.ar-doodle .accent-fill {
  fill: rgba(254, 167, 16, 0.22);
}

.ar-doodle text {
  fill: rgba(254, 167, 16, 0.6);
  stroke: none;
  font: 800 7px system-ui, sans-serif;
  letter-spacing: 0.6px;
}

.ar-hero-doodle {
  position: absolute;
  right: 40px;
  top: 54%;
  width: min(340px, 34vw);
  transform: translateY(-50%) rotate(-4deg);
  stroke: rgba(255, 255, 255, 0.3);
}

.ar-doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ar-doodles .ar-doodle {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
}

/* --------------------------------------------------------------------------
   The trip — road, waypoints, bubbles
   -------------------------------------------------------------------------- */
.ar-band {
  position: relative;
  /* How far the grid takes to fade in at the top and out at the bottom. */
  --ar-grid-fade: 240px;
}

/* A faint street grid, so the road reads as a map. It sits on its own layer
   so it can be masked: it fades in below the hero and out above the
   checkered line instead of starting and stopping with a hard edge. */
.ar-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 var(--ar-grid-fade),
    #000 calc(100% - var(--ar-grid-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 var(--ar-grid-fade),
    #000 calc(100% - var(--ar-grid-fade)),
    transparent
  );
}

@media (max-width: 719px) {
  .ar-band {
    --ar-grid-fade: 160px;
  }
}

.ar-trip {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.ar-road {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

.ar-road use {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ar-road-shoulder {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: calc(var(--ar-road-w) + 6px);
}

.ar-road-asphalt {
  stroke: #1d1d1d;
  stroke-width: var(--ar-road-w);
}

/* Route highlight tinting the road ahead, like a sat-nav. */
.ar-road-glow {
  stroke: var(--ar-amber);
  stroke-opacity: 0.12;
  stroke-width: var(--ar-road-w);
}

.ar-road-dashes {
  stroke: var(--ar-amber);
  stroke-width: var(--ar-dash-w);
  stroke-dasharray: var(--ar-dash);
}

/* The driven part: colour drains out of it. */
.ar-seg--driven .ar-road-glow {
  stroke-opacity: 0;
}

.ar-seg--driven .ar-road-dashes {
  stroke: rgba(255, 255, 255, 0.2);
}

.ar-seg--driven .ar-road-asphalt {
  stroke: #161616;
}

.ar-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ar-pin {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--ar-bg);
  border: 3px solid rgba(255, 255, 255, 0.35);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.ar-pin.is-reached {
  background: var(--ar-amber);
  border-color: var(--ar-amber);
  box-shadow: 0 0 0 6px rgba(254, 167, 16, 0.18);
}

.ar-pin.is-reached::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--ar-amber);
  animation: ar-pin-pulse 0.9s ease-out 1 forwards;
}

@keyframes ar-pin-pulse {
  from {
    transform: scale(1);
    opacity: 0.7;
  }
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}

.ar-pin--flag,
.ar-pin--flag.is-reached {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: repeating-conic-gradient(#ffffff 0 25%, var(--ar-carbon) 0 50%) 0 0 / 10px 10px;
}

.ar-pin-label {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s;
}

.ar-pin.is-reached .ar-pin-label {
  color: var(--ar-amber);
}

/* Before js/about-route.js runs — or if it never does — there is no road:
   the bubbles stack as plain cards, so the page reads fine without it. */
.ar-trip:not(.is-ready) {
  display: grid;
  gap: 20px;
  padding: 16px 24px 56px;
}

.ar-trip:not(.is-ready) .ar-road,
.ar-trip:not(.is-ready) .ar-pins,
.ar-trip:not(.is-ready) .ar-doodles {
  display: none;
}

.ar-trip:not(.is-ready) .ar-bubble {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/* A leg is the stretch one bubble can travel. Its bubble is sticky inside
   it, so the browser does the clamping: the bubble holds still in the
   viewport until it hits the bottom of its leg, then parks. */
.ar-trip.is-ready .ar-leg {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.ar-trip.is-ready .ar-bubble {
  position: sticky;
  pointer-events: auto;
}

.ar-bubble {
  /* translate (steering) and rotate (lean) are set from JS; scale is left
     free for the parking animation, so none of them fight. */
  will-change: translate, rotate;
  background: var(--ar-paper);
  color: var(--ar-ink);
  border-radius: 18px;
  padding: 22px 24px 18px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.45s ease;
}

.ar-bubble.is-driving {
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--ar-amber);
}

/* Pulling up at a waypoint: a small brake dip, then settle. */
.ar-bubble.is-parking {
  animation: ar-bubble-park 0.55s cubic-bezier(0.3, 0.7, 0.4, 1);
}

@keyframes ar-bubble-park {
  0% {
    scale: 1;
  }
  30% {
    scale: 0.975;
  }
  65% {
    scale: 1.006;
  }
  100% {
    scale: 1;
  }
}

.ar-bubble-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ar-bubble-step {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ar-amber);
  font-size: 0.78rem;
  font-weight: 900;
}

.ar-bubble-title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
}

.ar-bubble p {
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.75);
}

.ar-bubble-stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.ar-bubble-stat-value {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}

.ar-bubble-stat-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(0, 0, 0, 0.55);
}

.ar-bubble-list {
  padding-left: 18px;
  display: grid;
  gap: 8px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
}

/* Sat-nav style "next instruction" line at the foot of each bubble. */
.ar-bubble-next {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ar-bubble p.ar-bubble-next {
  color: rgba(0, 0, 0, 0.55);
}

.ar-bubble-next-arrow {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ar-ink);
}

/* Reduced motion: nothing travels. Bubbles sit at the start of their legs
   and the whole route shows as road ahead. */
.ar-trip.is-static .ar-bubble {
  position: relative;
  top: 0 !important;
  animation: none;
}

/* --------------------------------------------------------------------------
   Arrival — book first, rates after as plain reference
   -------------------------------------------------------------------------- */
.ar-arrival {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 24px 72px;
  text-align: center;
}

.ar-arrival-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 900;
  margin-bottom: 12px;
}

.ar-arrival-text {
  max-width: 560px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
}

.ar-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.ar-btn {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
}

.ar-btn--primary {
  background: var(--ar-amber);
  color: var(--ar-ink);
  box-shadow: 0 12px 30px rgba(254, 167, 16, 0.25);
}

.ar-btn--ghost {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.ar-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.ar-rates-title {
  margin-top: 64px;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

.ar-rates {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 16px;
  text-align: left;
}

.ar-rate-card {
  background: var(--ar-paper);
  color: var(--ar-ink);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.ar-rate-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.ar-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.18);
}

.ar-rate-row:last-child {
  border-bottom: 0;
}

.ar-rate-label {
  color: rgba(0, 0, 0, 0.65);
  font-weight: 600;
}

.ar-rate-value {
  font-size: 1.5rem;
  font-weight: 900;
}

.ar-rate-note {
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Phones: the road runs straight down the left edge and the bubbles fill the
   width, so there is no free space for map doodles. The hero taxi stays,
   smaller and in the flow.
   -------------------------------------------------------------------------- */
@media (max-width: 719px) {
  .ar-doodles {
    display: none;
  }

  .ar-hero-doodle {
    position: static;
    width: 170px;
    margin-top: 36px;
    transform: rotate(-4deg);
  }

  .ar-rates {
    grid-template-columns: 1fr;
  }
}