/* Onway — premium polish layer. Loaded last on every surface.
   Motion, press states, type rendering, focus, selection, richer fallback maps. */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-variant-numeric: tabular-nums; }

/* ── Micro-interactions: every control answers the hand ── */
button {
  transition: transform .13s cubic-bezier(.2,.7,.3,1), background-color .16s ease,
              color .16s ease, box-shadow .2s ease, border-color .16s ease, opacity .16s ease;
}
button:not(:disabled):active { transform: scale(.965); }
a { transition: color .15s ease, opacity .15s ease; }
input, textarea, select { transition: border-color .16s ease, box-shadow .2s ease, background-color .16s ease; }

::selection { background: rgba(139,255,90,.28); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #55c936; outline-offset: 2px;
}

/* ── Device frame: deeper, softer presence ── */
.phone {
  box-shadow: 0 60px 120px -24px rgba(5,5,5,.5), 0 24px 48px -24px rgba(5,5,5,.4),
              0 0 0 1px rgba(255,255,255,.06);
}

/* ── Fallback map: reads like a street map, not graph paper ── */
.map {
  background-color: #edece7;
  background-image:
    radial-gradient(ellipse 340px 240px at 28% 30%, rgba(148,196,138,.20), transparent 70%),
    radial-gradient(ellipse 300px 220px at 78% 74%, rgba(120,170,215,.16), transparent 70%),
    linear-gradient(90deg, rgba(28,28,34,.075) 2px, transparent 2px),
    linear-gradient(0deg, rgba(28,28,34,.075) 2px, transparent 2px),
    linear-gradient(90deg, rgba(28,28,34,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(28,28,34,.035) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 220px 220px, 220px 220px, 44px 44px, 44px 44px;
}

/* ── Sheets & overlays: one shared entrance curve ── */
@media (prefers-reduced-motion: no-preference) {
  .offer-sheet { animation: onway-sheetup .34s cubic-bezier(.16,1,.3,1); }
  @keyframes onway-sheetup { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══ Onway motion system — movement is the brand ══════════════════════
   Shared by every surface (marketing, rider, driver, ops). Restraint:
   one or two moving things per screen; everything answers the hand. */
@media (prefers-reduced-motion: no-preference) {

  /* Driver "Go online": a live pulse ring + breathing glow — signals "ready". */
  .onway-golive { position: relative; animation: onway-golive-breathe 2.2s ease-in-out infinite; }
  .onway-golive::after {
    content: ""; position: absolute; inset: 0; border-radius: 9999px;
    box-shadow: 0 0 0 0 rgba(139,255,90,.55); pointer-events: none;
    animation: onway-golive-ring 2.2s ease-out infinite;
  }
  @keyframes onway-golive-ring {
    0% { box-shadow: 0 0 0 0 rgba(139,255,90,.5); }
    70% { box-shadow: 0 0 0 16px rgba(139,255,90,0); }
    100% { box-shadow: 0 0 0 0 rgba(139,255,90,0); }
  }
  @keyframes onway-golive-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1px) scale(1.014); }
  }

  /* Rider home tiles: a quick staggered rise as the sheet settles. */
  .onway-tilegrid > button { animation: onway-tile-in .42s cubic-bezier(.16,1,.3,1) both; }
  .onway-tilegrid > button:nth-child(1){ animation-delay:.02s; }
  .onway-tilegrid > button:nth-child(2){ animation-delay:.06s; }
  .onway-tilegrid > button:nth-child(3){ animation-delay:.10s; }
  .onway-tilegrid > button:nth-child(4){ animation-delay:.14s; }
  .onway-tilegrid > button:nth-child(5){ animation-delay:.18s; }
  .onway-tilegrid > button:nth-child(6){ animation-delay:.22s; }
  .onway-tilegrid > button:nth-child(7){ animation-delay:.26s; }
  .onway-tilegrid > button:nth-child(8){ animation-delay:.30s; }
  .onway-tilegrid > button:hover img { transform: translateY(-3px) scale(1.06); transition: transform .18s cubic-bezier(.2,.7,.3,1); }
  @keyframes onway-tile-in { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
  @keyframes onwayBlink { 0%,50%{ opacity:1; } 50.01%,100%{ opacity:.15; } }

  /* Buttons feel alive: lift toward the cursor, keep the press-in. */
  button:not(:disabled):hover { transform: translateY(-1.5px); box-shadow: 0 8px 20px -8px rgba(5,5,5,.30); }
  /* …but nav pills and icon chips stay flat (they have their own hover). */
  .navlink:hover, .navlink:not(:disabled):hover { transform: none; box-shadow: none; }

  /* Primary CTA catches a slow band of light — draws the eye without nagging. */
  .onway-cta { position: relative; overflow: hidden; }
  .onway-cta::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-18deg); pointer-events: none;
    animation: onway-cta-shine 6s ease-in-out 2s infinite;
  }
  @keyframes onway-cta-shine {
    0%, 72% { left: -60%; } 86% { left: 130%; } 100% { left: 130%; }
  }

  /* Animated wordmark: the route-dot slowly loses steam, drifts off the end and
     the mark slumps — "despair" — then springs back to life on hover/focus/click. */
  .onway-logo-dot { animation: onway-dot-leave 6.5s ease-in 1.2s forwards; }
  .onway-logo-track { transform-origin: left center; animation: onway-track-despair 6.5s ease-in 1.2s forwards; }
  .onway-logo > span:first-child { display: inline-block; transform-origin: left center; animation: onway-word-despair 6.5s ease-in 1.2s forwards; }
  @keyframes onway-dot-leave { 0% { left: 0; opacity: 1; } 68% { left: 100%; opacity: 1; } 100% { left: 122%; opacity: 0; } }
  @keyframes onway-track-despair { 0% { opacity: 1; transform: rotate(0) scaleX(1); } 100% { opacity: .45; transform: rotate(3deg) scaleX(.8); } }
  @keyframes onway-word-despair { 0% { opacity: 1; transform: none; } 100% { opacity: .5; transform: translateY(1.5px) skewX(-4deg); } }

  .onway-logo:hover .onway-logo-dot, .onway-logo:focus-visible .onway-logo-dot, .onway-logo:active .onway-logo-dot {
    animation: onway-dot-return 1s cubic-bezier(.2,.9,.3,1) forwards; }
  .onway-logo:hover .onway-logo-track, .onway-logo:focus-visible .onway-logo-track, .onway-logo:active .onway-logo-track {
    animation: onway-revive .5s ease forwards; }
  .onway-logo:hover > span:first-child, .onway-logo:focus-visible > span:first-child, .onway-logo:active > span:first-child {
    animation: onway-revive .5s ease forwards; }
  @keyframes onway-dot-return { 0% { left: 122%; opacity: 0; } 100% { left: 0; opacity: 1; } }
  @keyframes onway-revive { to { opacity: 1; transform: none; } }

  /* Service icons pop up to meet a tap. No drop-shadow — flat per brand rule. */
  .svc { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
  .svc:hover { transform: translateY(-5px); }

  /* Hero packshot breathes — the page is never quite still. */
  .onway-float { animation: onway-float 7s ease-in-out infinite; }
  @keyframes onway-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  /* Sticky footer CTA: a slow, faint lime band drifts across — a quiet "go" signal.
     On hover it sweeps through quickly (catches, then clears) to reward intent. */
  .onway-sticky-cta::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 24%;
    background: linear-gradient(100deg, transparent, rgba(139,255,90,.28), transparent);
    transform: skewX(-16deg); pointer-events: none; z-index: 0;
    animation: onway-sticky-sweep 22s linear infinite;
  }
  .onway-sticky-cta:hover::before { animation-duration: 4s; }
  @keyframes onway-sticky-sweep {
    0% { left: -40%; } 40% { left: 140%; } 100% { left: 140%; }
  }
}

/* Logo track/dot geometry (works even with motion off — dot just rests at start). */
.onway-logo { position: relative; display: inline-flex; flex-direction: column; gap: 4px; text-decoration: none; }
.onway-logo-track { position: relative; height: 2px; width: 100%; border-radius: 2px; background: rgba(255,255,255,.22); }
.onway-logo-dot { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: #8bff5a; box-shadow: 0 0 8px rgba(139,255,90,.9); transform: translate(-50%, -50%); }