/*
 * Public website (safarsaath.app). Look: "Hala tile and paper" (decision 95): warm ivory paper, cobalt and
 * turquoise kashi tiles from Hala's blue pottery, Fraunces for headlines, Atkinson Hyperlegible for reading.
 * Colour jobs follow 04-design/01-design-system.md: orange only for seats and stops.
 * Every animation shows something the app does; all of it stops under prefers-reduced-motion.
 */
:root {
  --action: #1e4fa3;
  --action-pressed: #173f85;
  --action-soft: #e6edf8;
  --seat: #e8892b;
  --seat-soft: #ffe6c7;
  --seat-text: #6b3600;
  --done: #0e7c7b;
  --done-soft: #dcefe9;
  --done-text: #0b5f5e;
  --women: #7b3f8c;
  --women-soft: #f2e7f5;
  --ink: #14213d;
  --muted: #55607a;
  /* Paper: the warm grounds */
  --paper: #fbf6ec;
  --paper-deep: #f3e9d7;
  --surface: #fffdf8;
  --line: #e8dcc5;
  --tile-blue: #e9eff8;

  /* Kashi tile: a four-point star with a turquoise heart, on a diagonal grid */
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 8C33 18 38 23 48 28C38 33 33 38 28 48C23 38 18 33 8 28C18 23 23 18 28 8Z' fill='none' stroke='%231E4FA3' stroke-width='1.4'/%3E%3Ccircle cx='28' cy='28' r='4' fill='%230E7C7B'/%3E%3Cg fill='%231E4FA3'%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3Ccircle cx='56' cy='0' r='2.5'/%3E%3Ccircle cx='0' cy='56' r='2.5'/%3E%3Ccircle cx='56' cy='56' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --tile-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 8C33 18 38 23 48 28C38 33 33 38 28 48C23 38 18 33 8 28C18 23 23 18 28 8Z' fill='none' stroke='%23FFFFFF' stroke-width='1.4'/%3E%3Ccircle cx='28' cy='28' r='4' fill='%23FFFFFF'/%3E%3C/svg%3E");
  /* Border band: lozenges and dots, like the painted rim of a Hala plate */
  --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M14 1L21 7L14 13L7 7Z' fill='%231E4FA3'/%3E%3Ccircle cx='0' cy='7' r='2.4' fill='%230E7C7B'/%3E%3Ccircle cx='28' cy='7' r='2.4' fill='%230E7C7B'/%3E%3C/svg%3E");

  --radius-section: 20px;
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1160px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --display: "Fraunces", Georgia, serif;
  --latin: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --urdu: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
  --shadow: 0 1px 0 rgb(20 33 61 / .04), 0 24px 48px -30px rgb(76 52 18 / .35);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.65 var(--latin);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--action); }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: 6px; }
.panel :focus-visible, footer :focus-visible { outline-color: #fff; }

/* Language: every text has an .en and a .ur twin; html.lang-ur shows the Urdu ones */
.ur { display: none; }
html.lang-ur .en { display: none; }
html.lang-ur .ur { display: revert; }
html.lang-ur body { font-family: var(--urdu); line-height: 2; }
html.lang-ur .mono, html.lang-ur .flap, html.lang-ur .t { font-family: var(--mono); line-height: 1.2; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: 16px; top: 16px; z-index: 50; background: var(--surface); padding: 8px 12px; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* The painted band: the one decorative rim per surface */
.dots { height: 14px; background: var(--band) repeat-x center / 28px 14px; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgb(251 246 236 / 0.86);
  backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.top .logo img { height: 30px; width: auto; }
.top nav { display: flex; gap: 28px; margin-inline-start: auto; }
.top nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; position: relative; padding: 6px 0; }
.top nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--action);
  transform: scaleX(0); transition: transform .25s var(--ease-out);
}
.top nav a:hover { color: var(--action); }
.top nav a:hover::after { transform: scaleX(1); }
.lang {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 6px 14px; min-height: 44px; font: 600 15px var(--latin);
}
.lang [lang="ur"] { font-family: var(--urdu); }
.lang [lang="en"] { font-family: var(--latin); }
@media (max-width: 900px) { .top nav { display: none; } .lang { margin-inline-start: auto; } }

/* Buttons: cobalt pills with an arrow coin */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 10px 0 26px; border-radius: 999px;
  font: 700 17px var(--latin); text-decoration: none; border: 0;
  transition: transform .2s var(--ease-out), background-color .2s, box-shadow .2s, color .2s;
}
html.lang-ur .btn { font-family: var(--urdu); font-weight: 400; padding: 0 26px 0 10px; }
.btn:active { transform: scale(.97); }
.btn .coin { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--action); transition: transform .25s var(--ease-spring); }
.btn .coin svg { width: 18px; height: 18px; }
.btn:hover .coin { transform: translateX(3px) rotate(-8deg); }
html.lang-ur .btn .coin svg { transform: scaleX(-1); }
html.lang-ur .btn:hover .coin { transform: translateX(-3px) rotate(8deg); }
.btn-primary { background: var(--action); color: #fff; box-shadow: 0 10px 24px -10px rgb(30 79 163 / .7); }
.btn-primary:hover { background: var(--action-pressed); transform: translateY(-2px); }
.btn-ghost { padding: 0 24px; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
html.lang-ur .btn-ghost { padding: 0 24px; }
.btn-light { background: #fff; color: var(--action); box-shadow: 0 12px 30px -12px rgb(0 0 0 / .45); }
.btn-light .coin { background: var(--action); color: #fff; }
.btn-light:hover { transform: translateY(-2px); }
.btn-soft { padding: 0 24px; background: var(--action-soft); color: var(--action); }
.btn-soft:hover { transform: translateY(-2px); }
.top .btn { min-height: 44px; padding: 0 20px; font-size: 15px; box-shadow: none; }
@media (max-width: 520px) { .top .btn { display: none; } }

/* Type */
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; font-variation-settings: "opsz" 144, "SOFT" 50; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--action); }
h3 { font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; }
html.lang-ur h1, html.lang-ur h2, html.lang-ur h3 { font-family: var(--urdu); line-height: 1.9; letter-spacing: 0; font-weight: 400; }
html.lang-ur h1 em, html.lang-ur h2 em { font-style: normal; }
section { padding: clamp(80px, 11vw, 136px) 0; }
.kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--done-text); font-weight: 700; font-size: 15px; margin-bottom: 18px; }
.kicker::before { content: ""; width: 12px; height: 12px; background: var(--action); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--done); }
.head { max-width: 700px; margin-bottom: 56px; }
.head h2 { font-size: clamp(38px, 5.4vw, 64px); }
.head p { color: var(--muted); font-size: 20px; margin: 18px 0 0; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(72px, 9vw, 120px); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
@media (max-width: 940px) { .hero .wrap { grid-template-columns: 1fr; } }
.chip-live {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 16px; font-weight: 600; font-size: 14px; color: var(--muted);
}
.chip-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--done); animation: ping 2s infinite; }
.hero h1 { font-size: clamp(52px, 8vw, 104px); margin-top: 26px; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .1em; }
.hero h1 .line > span { display: inline-block; animation: rise 1s var(--ease-out) both; }
.hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
html.lang-ur .hero h1 { font-size: clamp(42px, 6vw, 76px); }
.hero .lead { font-size: clamp(18px, 1.9vw, 21px); color: var(--muted); max-width: 32em; margin: 26px 0 36px; animation: fadeUp .8s .3s var(--ease-out) both; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; animation: fadeUp .8s .42s var(--ease-out) both; }
.trust { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; font-weight: 600; color: var(--ink); animation: fadeUp .8s .55s var(--ease-out) both; }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust svg { width: 18px; height: 18px; color: var(--done); }
/* The name as calligraphy: Nastaliq is the one place the brand gets ornamental */
.signature { display: flex; align-items: baseline; gap: 16px; margin-top: 40px; animation: fadeUp .8s .7s var(--ease-out) both; }
.signature b { font: 400 clamp(40px, 5vw, 60px)/1.6 var(--urdu); color: var(--action); }
.signature small { font-size: 14px; color: var(--muted); max-width: 14em; line-height: 1.4; }

/* Mehrab arch holding the phone, with a turning tile medallion */
.arch {
  justify-self: center; position: relative; width: min(100%, 440px); padding: 150px 36px 36px;
  border-radius: 999px 999px 32px 32px; background: var(--tile-blue);
  box-shadow: inset 0 0 0 1px #d6e0f0, var(--shadow);
  animation: phoneIn 1.1s .2s var(--ease-out) both;
  isolation: isolate;
}
.arch::before { /* the tile pattern, faded toward the bottom */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: var(--tile) 0 0 / 56px 56px; opacity: .22;
  mask-image: linear-gradient(#000, transparent 85%);
}
.arch::after { /* inner rim of the arch */
  content: ""; position: absolute; inset: 12px; border-radius: 999px 999px 24px 24px; border: 1.5px dashed rgb(30 79 163 / .35); z-index: -1;
}
.medallion { position: absolute; width: 64%; left: 18%; top: 26px; z-index: -1; opacity: .9; animation: turn 90s linear infinite; }
.phone {
  width: 100%; max-width: 330px; margin-inline: auto; position: relative;
  border-radius: 42px; padding: 10px; background: var(--action-pressed);
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / .5) inset, 0 40px 70px -30px rgb(23 63 133 / .7);
}
.screen { background: var(--paper); border-radius: 33px; overflow: hidden; color: var(--ink); position: relative; }
.app-bar { background: var(--surface); padding: 20px 16px 12px; border-bottom: 1px solid var(--line); }
.app-bar .row1 { display: flex; justify-content: space-between; align-items: center; }
.app-bar img { height: 20px; width: auto; }
.app-bar small { font-size: 12px; color: var(--muted); font-weight: 600; }
.days { display: flex; gap: 6px; margin-top: 12px; }
.days > span { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--paper-deep); color: var(--muted); }
.days > span.on { background: var(--action); color: #fff; }
.rows { padding: 8px 10px 76px; display: grid; gap: 8px; }
.ride {
  background: var(--surface); border-radius: 14px; padding: 12px; box-shadow: 0 0 0 1px var(--line);
  display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center;
  animation: rowIn .6s var(--ease-spring) both;
}
.ride:nth-child(1) { animation-delay: .9s; }
.ride:nth-child(2) { animation-delay: 1.02s; }
.ride:nth-child(3) { animation-delay: 1.14s; }
.ride .t { font: 700 23px/1 var(--mono); grid-row: span 2; display: flex; flex-direction: column; }
.ride .t small { font-size: 11px; color: var(--muted); margin-top: 4px; }
.ride .r { font-weight: 700; font-size: 14px; line-height: 1.3; }
.ride .m { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ride .ok { color: var(--done-text); font-weight: 700; }
.ride .s { grid-row: span 2; background: var(--seat-soft); color: var(--seat-text); border-radius: 10px; padding: 6px 9px; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.2; }
.ride .s b { display: block; font: 700 18px var(--mono); }
.ride.picked { box-shadow: 0 0 0 2px var(--action); }
.tag-w { background: var(--women-soft); color: var(--women); border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 700; }
html.lang-ur .ride .r, html.lang-ur .ride .m { line-height: 1.9; }
.toast {
  position: absolute; inset-inline: 10px; bottom: 12px;
  display: flex; align-items: center; gap: 10px;
  background: var(--done); color: #fff; border-radius: 14px; padding: 12px 14px; font-weight: 700; font-size: 14px;
  box-shadow: 0 14px 30px -10px rgb(14 124 123 / .7);
}
.js .toast { opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .35s var(--ease-out), transform .5s var(--ease-spring); }
.js .toast.show { opacity: 1; transform: none; }
.toast svg { width: 20px; height: 20px; flex: none; }

/* Split-flap digits */
.flap { display: inline-flex; font-family: var(--mono); direction: ltr; }
.flap .d { display: inline-block; min-width: .6em; text-align: center; }
.flap .d.flip { animation: flip .09s linear; }

/* ---------- Stop ticker ---------- */
.ticker { background: var(--surface); border-block: 1px solid var(--line); padding: 0; }
.ticker .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.ticker-label { flex: none; font: italic 600 17px var(--display); color: var(--action); }
html.lang-ur .ticker-label { font: 400 16px var(--urdu); }
.ticker-view { overflow: hidden; flex: 1; direction: ltr; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.ticker:hover .ticker-track, .ticker.paused .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-track span { display: inline-flex; align-items: center; gap: 16px; padding-inline-end: 16px; font: 700 15px var(--mono); white-space: nowrap; }
.ticker-track span::after { content: ""; width: 8px; height: 8px; background: var(--seat); transform: rotate(45deg); border-radius: 1px; }
.ticker-pause { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; }
.ticker-pause svg { width: 16px; height: 16px; }
.ticker-pause .play, .ticker.paused .ticker-pause .pause { display: none; }
.ticker.paused .ticker-pause .play { display: block; }

/* ---------- Journey timeline ---------- */
.journey { position: relative; max-width: 840px; }
.journey ol { list-style: none; margin: 0; padding: 0; position: relative; }
.journey-line { position: absolute; inset-inline-start: 113px; top: 20px; bottom: 20px; width: 3px; background: var(--line); border-radius: 3px; }
.journey-line i { position: absolute; inset: 0; background: linear-gradient(var(--action), var(--done)); border-radius: 3px; transform-origin: top; transform: scaleY(var(--p, 0)); }
.journey li { display: grid; grid-template-columns: 76px 40px 1fr; gap: 0 18px; align-items: start; padding: 0 0 40px; }
.journey li:last-child { padding-bottom: 0; }
.journey .when { font: 700 22px/1.2 var(--mono); color: var(--muted); text-align: end; padding-top: 8px; transition: color .4s; direction: ltr; }
.journey .dot {
  width: 40px; height: 40px; border-radius: 12px; transform: rotate(45deg); background: var(--paper); border: 2px solid var(--line);
  display: grid; place-items: center; position: relative; z-index: 1;
  transition: border-color .4s, background-color .4s, transform .5s var(--ease-spring);
}
.journey .dot svg { width: 18px; height: 18px; color: var(--muted); transition: color .4s; transform: rotate(-45deg); }
.journey .card { background: var(--surface); border-radius: var(--radius-section); padding: 22px 26px; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .4s, transform .6s var(--ease-out), opacity .6s; }
.journey .card h3 { font-size: 21px; margin-bottom: 6px; }
.journey .card p { margin: 0; color: var(--muted); }
.journey .say { display: inline-block; margin-top: 12px; font: italic 600 18px var(--display); color: var(--done-text); background: var(--done-soft); border-radius: 10px; padding: 2px 12px; }
html.lang-ur .journey .say { font: 400 16px var(--urdu); }
.journey li.lit .when { color: var(--action); }
.journey li.lit .dot { border-color: var(--action); background: var(--action); transform: rotate(45deg) scale(1.06); }
.journey li.lit .dot svg { color: #fff; }
.journey li.lit .card { box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.journey li.lit.end .dot { border-color: var(--done); background: var(--done); }
.js .journey li:not(.lit) .card { transform: translateX(16px); opacity: .55; }
html.lang-ur.js .journey li:not(.lit) .card { transform: translateX(-16px); }
.example { font-size: 14px; color: var(--muted); margin-top: 28px; }
@media (max-width: 560px) {
  .journey li { grid-template-columns: 40px 1fr; gap: 0 14px; }
  .journey .when { grid-column: 2; grid-row: 1; text-align: start; font-size: 17px; padding: 0 0 6px; }
  .journey .dot { grid-column: 1; grid-row: 1 / span 2; }
  .journey .card { grid-column: 2; grid-row: 2; }
  .journey-line { inset-inline-start: 18px; }
  html.lang-ur .journey .when { text-align: end; }
}

/* ---------- Who's in the car ---------- */
.safety { background: var(--surface); border-block: 1px solid var(--line); }
.car-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .car-wrap { grid-template-columns: 1fr; } }
.car-stage {
  display: grid; justify-items: center; gap: 22px; position: relative; isolation: isolate;
  padding: 72px 24px 32px; border-radius: 999px 999px 28px 28px; background: var(--tile-blue);
  box-shadow: inset 0 0 0 1px #d6e0f0;
}
.car-stage::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--tile) 0 0 / 56px 56px; opacity: .18; }
.car {
  width: min(100%, 260px); aspect-ratio: 280 / 440; position: relative; isolation: isolate; direction: ltr;
  background: linear-gradient(180deg, #fff, #f6f1e6); border-radius: 46% 46% 30% 30% / 26% 26% 14% 14%;
  box-shadow: 0 0 0 1px var(--line), 0 40px 70px -40px rgb(20 33 61 / .5);
  padding: 40% 13% 13%;
}
.car::before { content: ""; position: absolute; inset-inline: 17%; top: 14%; height: 15%; background: linear-gradient(180deg, #c9d8f3, #e6edfa); border-radius: 50% 50% 14px 14px / 80% 80% 14px 14px; }
.car-stage .road { width: 4px; height: 40px; background: repeating-linear-gradient(180deg, #b9c7de 0 12px, transparent 12px 22px); animation: road .9s linear infinite; margin: -18px 0; }
.seats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 22px; height: 100%; align-content: space-between; }
.seats .back { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.seat { aspect-ratio: 1; border-radius: 20px 20px 12px 12px; background: var(--action-soft); position: relative; display: grid; place-items: center; color: var(--action); transition: background-color .5s, color .5s; }
.seat > svg { width: 46%; height: 46%; }
.seat .v { position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--done); color: #fff; display: grid; place-items: center; border: 2px solid #fff; transform: scale(0); transition: transform .45s var(--ease-spring); }
.seat .v svg { width: 12px; height: 12px; }
.seat.driver::after { content: ""; position: absolute; top: -14px; width: 50%; height: 6px; border-radius: 6px; background: var(--muted); opacity: .45; }
.in .seat .v { transform: scale(1); }
.in .seats > .seat:nth-child(2) .v { transition-delay: .15s; }
.in .back .seat:nth-child(1) .v { transition-delay: .3s; }
.in .back .seat:nth-child(2) .v { transition-delay: .42s; }
.in .back .seat:nth-child(3) .v { transition-delay: .54s; }
.women-on .seat { background: var(--women-soft); color: var(--women); }
.car-caption { font-weight: 700; text-align: center; min-height: 2em; max-width: 30ch; margin: 0; }
.car-caption .w { color: var(--women); }
.switch { display: inline-flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 18px 6px 6px; min-height: 48px; font: 700 15px var(--latin); color: var(--ink); }
html.lang-ur .switch { font-family: var(--urdu); font-weight: 400; padding: 6px 6px 6px 18px; }
.switch .knob { width: 52px; height: 32px; border-radius: 999px; background: #c9c1b0; position: relative; transition: background-color .3s; flex: none; }
.switch .knob::after { content: ""; position: absolute; top: 4px; inset-inline-start: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .2); transition: transform .3s var(--ease-spring); }
.switch[aria-checked="true"] .knob { background: var(--women); }
.switch[aria-checked="true"] .knob::after { transform: translateX(20px); }
html.lang-ur .switch[aria-checked="true"] .knob::after { transform: translateX(-20px); }
.safety-list { list-style: none; padding: 0; margin: 0; }
.safety-list li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.safety-list li:last-child { border-bottom: 0; }
.safety-list h3 { font-size: 20px; margin: 2px 0 4px; }
.safety-list p { margin: 0; color: var(--muted); }
.ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--action-soft); color: var(--action); }
.ico svg { width: 24px; height: 24px; }
.ico.done { background: var(--done-soft); color: var(--done-text); }
.ico.women { background: var(--women-soft); color: var(--women); }
.fine { font-size: 14px; color: var(--muted); margin-top: 18px; }

/* ---------- Route ---------- */
.route-sec { background: var(--tile-blue); position: relative; isolation: isolate; overflow: hidden; }
.route-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tile) 0 0 / 56px 56px; opacity: .12; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); }
.route-svg { width: 100%; height: auto; overflow: visible; }
.route-svg .road { stroke: #ccd8ec; }
.route-svg .drawn { stroke: var(--action); stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.in .route-svg .drawn { animation: draw 2.4s cubic-bezier(.6,0,.2,1) forwards; }
.route-svg .car-dot { offset-path: path("M60 110 C 260 110, 300 50, 500 50 S 760 110, 940 110"); offset-distance: 0%; opacity: 0; }
.in .route-svg .car-dot { animation: drive 7s ease-in-out 2.4s infinite; }
.route-svg text { font: 700 15px var(--latin); fill: var(--ink); }
.route-svg .city { font: italic 600 26px var(--display); }
.route-svg .sub { font-weight: 400; fill: var(--muted); font-size: 14px; }
.stop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; }
@media (max-width: 680px) { .stop-cols { grid-template-columns: 1fr; } }
.stop-cols h3 { font-size: 16px; color: var(--muted); margin-bottom: 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills span { background: var(--surface); border: 1px solid #d6e0f0; border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; transition: background-color .2s, border-color .2s, transform .2s; }
.pills span, .field b { font-family: var(--latin); line-height: 1.4; }
.pills span:hover { background: var(--seat-soft); border-color: var(--seat); transform: translateY(-2px); }

/* ---------- Cost split ---------- */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split h2 { font-size: clamp(38px, 5.4vw, 64px); }
.split > div > p { color: var(--muted); font-size: 19px; }
.meter { background: var(--surface); border-radius: 28px; padding: clamp(22px, 4vw, 38px); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.meter-label { font-weight: 700; margin-bottom: 14px; display: block; }
.seg { display: inline-flex; background: var(--paper-deep); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 26px; }
.seg button { border: 0; background: none; min-width: 52px; min-height: 44px; border-radius: 999px; font: 700 18px var(--mono); color: var(--muted); transition: background-color .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--action); color: #fff; }
.bar { display: flex; height: 68px; border-radius: 18px; overflow: hidden; background: var(--paper-deep); gap: 3px; direction: ltr; }
.bar > div { display: grid; place-items: center; font-size: 13px; font-weight: 700; min-width: 0; flex: 1 1 0; transition: flex-grow .7s var(--ease-spring), opacity .4s; overflow: hidden; white-space: nowrap; }
.bar .drv { background: var(--action); color: #fff; }
.bar .pax { background: var(--seat-soft); color: var(--seat-text); }
.bar .pax.off { flex-grow: 0 !important; opacity: 0; }
.legend { display: flex; gap: 20px; flex-wrap: wrap; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.legend > span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--action); }
.legend i.p { background: var(--seat); }
.readout { margin: 22px 0 0; font-size: 20px; font-weight: 700; }
.readout b { font: italic 700 34px var(--display); color: var(--action); }
.formula { font-size: 14px; color: var(--muted); margin: 10px 0 0; }

/* ---------- Drivers: paste demo, on cobalt glaze ---------- */
.drivers { padding-top: 0; }
.panel {
  background: var(--action); color: #fff; border-radius: 36px; isolation: isolate;
  padding: clamp(28px, 5vw, 68px); position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center;
  box-shadow: 0 40px 80px -40px rgb(23 63 133 / .8);
}
@media (max-width: 900px) { .panel { grid-template-columns: 1fr; } }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tile-white) 0 0 / 56px 56px; opacity: .08; }
.panel h2 { font-size: clamp(34px, 4.6vw, 54px); }
.panel h2 em { color: #9fe6e3; }
.panel > div > p { color: #dbe5fb; font-size: 19px; }
.checks { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks svg { flex: none; width: 20px; height: 20px; color: #8fe0de; margin-top: 5px; }
html.lang-ur .checks svg { margin-top: 12px; }
.demo { position: relative; display: grid; gap: 14px; }
.bubble { background: #fff; color: var(--ink); border-radius: 20px 20px 20px 4px; padding: 16px 18px; min-height: 172px; font: 400 15px/1.6 var(--mono); white-space: pre-wrap; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .5); direction: ltr; text-align: left; }
.bubble .who { display: block; font: 700 12px var(--latin); color: var(--muted); margin-bottom: 6px; }
.caret { display: inline-block; width: 2px; height: 1.1em; background: var(--action); vertical-align: -3px; animation: blink 1s step-end infinite; }
.arrow { justify-self: center; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #dbe5fb; opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s var(--ease-out); }
.arrow svg { width: 18px; height: 18px; animation: nudge 1.4s ease-in-out infinite; }
.parsed { background: var(--surface); color: var(--ink); border-radius: 20px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .5); }
.field { background: var(--paper); border-radius: 12px; padding: 10px 12px; opacity: .25; transform: scale(.96); transition: opacity .4s, transform .5s var(--ease-spring); }
.field small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.field b { font-size: 15px; }
.field .mono { font: 700 20px var(--mono); }
.field.seatf { background: var(--seat-soft); }
.field.seatf small { color: var(--seat-text); }
.demo.parsing .arrow { opacity: 1; transform: none; }
.demo.parsing .field { opacity: 1; transform: none; }
.demo.parsing .field:nth-child(2) { transition-delay: .15s; }
.demo.parsing .field:nth-child(3) { transition-delay: .3s; }
.demo.parsing .field:nth-child(4) { transition-delay: .45s; }
.replay { justify-self: start; background: none; border: 0; color: #dbe5fb; font: 600 14px var(--latin); text-decoration: underline; min-height: 44px; padding: 0; }
html.lang-ur .replay { font-family: var(--urdu); }

/* ---------- FAQ ---------- */
.faq-sec { background: var(--surface); border-top: 1px solid var(--line); }
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 26px 0; font: 600 clamp(20px, 2.2vw, 24px)/1.3 var(--display); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
html.lang-ur .faq summary { font: 400 19px/2 var(--urdu); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--action-soft); color: var(--action); display: grid; place-items: center; transition: transform .3s var(--ease-spring), background-color .2s, color .2s; }
.faq summary .pm svg { width: 16px; height: 16px; }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--action); color: #fff; }
.faq summary:hover .pm { background: var(--action); color: #fff; }
.faq details p { margin: 0; padding: 0 0 26px; color: var(--muted); max-width: 64ch; }
.faq details[open] p { animation: fadeUp .35s var(--ease-out); }

/* ---------- Poster finale ---------- */
.poster { text-align: center; position: relative; overflow: hidden; isolation: isolate; }
.poster .medallion { position: absolute; width: min(760px, 120vw); left: 50%; top: 50%; margin: 0; translate: -50% -50%; opacity: .14; z-index: -1; }
.poster .big { font: 700 clamp(96px, 19vw, 232px)/1 var(--mono); letter-spacing: -0.02em; color: var(--ink); }
.poster .route-line { display: inline-flex; align-items: center; gap: 14px; font: italic 600 clamp(20px, 2.6vw, 28px) var(--display); margin-top: 10px; }
html.lang-ur .poster .route-line { font: 400 22px var(--urdu); }
.poster .route-line i { width: 70px; height: 3px; background: var(--action); border-radius: 3px; position: relative; }
.poster .route-line i::after { content: ""; position: absolute; inset-inline-end: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--seat); }
.poster h2 { font-size: clamp(36px, 5vw, 60px); margin-top: 40px; }
.poster p { color: var(--muted); font-size: 19px; margin: 16px auto 34px; max-width: 34em; }
.poster .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Footer: cobalt glaze ---------- */
footer { background: var(--action-pressed); color: rgb(255 255 255 / .8); padding: 52px 0 32px; font-size: 15px; position: relative; isolation: isolate; }
footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tile-white) 0 0 / 56px 56px; opacity: .06; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-start; }
footer img { height: 30px; width: auto; }
footer p { margin: 10px 0 0; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
footer .legal { width: 100%; border-top: 1px solid rgb(255 255 255 / .16); padding-top: 20px; font-size: 13px; }

/* ---------- Legal pages ---------- */
.doc { padding: 56px 0 88px; }
.doc article { max-width: 760px; background: var(--surface); border-radius: 24px; padding: clamp(24px, 5vw, 56px); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.doc h1 { font-size: clamp(36px, 5vw, 52px); margin: 0 0 8px; }
.doc h2 { font-size: 26px; margin: 36px 0 10px; }
.doc p, .doc li { color: #2e3a55; }
.draft { background: #fff2d1; color: #6e4500; border-radius: 12px; padding: 12px 16px; font-size: 15px; margin: 20px 0 8px; }

/* ---------- Waitlist page (decision 97): a 20 s cartoon of the idea, then two ways to join ---------- */
.wl { padding: 40px 0 88px; }
.wl > .wrap { display: grid; gap: 28px; grid-template-areas: "head" "stage" "pick"; }
.wl-head { grid-area: head; }
.wl-head h1 { font-size: clamp(40px, 6vw, 68px); margin-bottom: 16px; }
html.lang-ur .wl-head h1 { font-size: clamp(32px, 4.6vw, 52px); }
.wl-head .lead { color: var(--muted); font-size: clamp(17px, 1.8vw, 20px); margin: 0; max-width: 32em; }
.pick { grid-area: pick; }
.pick form { display: grid; gap: 14px; }
.pick .roles { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
.pick .role, .pick .fields, .joined { background: var(--surface); border-radius: 22px; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.pick .role { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; cursor: pointer; transition: transform .25s var(--ease-spring), box-shadow .2s; }
.pick .role:hover { transform: translateY(-3px); }
.pick .role:has(:checked) { box-shadow: 0 0 0 2px var(--action), var(--shadow); }
.pick .role:has(:focus-visible) { outline: 3px solid var(--action); outline-offset: 3px; }
.pick .role input { width: 24px; height: 24px; margin: 0; accent-color: var(--action); }
.pick .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--action-soft); color: var(--action); }
.pick .ic svg { width: 26px; height: 26px; }
.pick b, .joined b { display: block; font: 600 22px/1.2 var(--display); }
.pick small { display: block; color: var(--muted); font-size: 15px; line-height: 1.45; margin-top: 4px; }
html.lang-ur .pick b, html.lang-ur .joined b { font: 400 20px/1.9 var(--urdu); }
.pick .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; padding: 18px 20px; }
.pick .fields label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
html.lang-ur .pick .fields label { font: 400 15px/1.9 var(--urdu); }
.pick .fields input, .pick .fields select { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 400 17px var(--latin); }
.pick .fields input:focus-visible, .pick .fields select:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; border-color: var(--action); }
.pick .trap { display: none; }
.pick button.btn { justify-self: start; cursor: pointer; }
.pick .error { margin: 0 4px; color: #b3261e; font-weight: 700; }
.pick .note { color: var(--muted); font-size: 15px; margin: 0 4px; }
.pick .note a { color: var(--action); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* After sign-up the page comes back as #joined (also without JavaScript): thanks replaces the form */
.joined { display: none; padding: 24px; border-top: 6px solid var(--done); }
.joined p { color: var(--muted); margin: 8px 0 18px; }
.joined:target { display: block; }
.pick:has(.joined:target) form { display: none; }

.stage { grid-area: stage; position: relative; margin: 0; background: #f6efe0; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--shadow); --T: 20s; }
.stage > svg { width: 100%; height: auto; direction: ltr; font-family: var(--latin); }
.stage text.ur { font-family: var(--urdu); direction: rtl; }
.stage-pause { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; }
.stage-pause svg { width: 16px; height: 16px; }
.stage-pause .play, .stage.paused .stage-pause .pause { display: none; }
.stage.paused .stage-pause .play { display: block; }
.stage.paused, .stage.paused * { animation-play-state: paused !important; }
.captions { display: grid; list-style: none; margin: 0; padding: 14px 22px 18px; border-top: 1px solid var(--line); background: var(--surface); }
.captions li { grid-area: 1 / 1; font: 600 clamp(18px, 2.1vw, 22px)/1.3 var(--display); }
html.lang-ur .captions li { font: 400 clamp(16px, 1.9vw, 19px)/2 var(--urdu); }
.progress { height: 4px; background: var(--line); }
.progress i { display: block; height: 100%; background: var(--action); transform-origin: left; animation: prog var(--T) linear infinite; }
html[dir="rtl"] .progress i { transform-origin: right; }
@media (min-width: 1000px) {
  .wl > .wrap { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); grid-template-areas: "head stage" "pick stage"; column-gap: 48px; align-items: start; }
  .stage { position: sticky; top: 96px; }
}

/* The story: one 20 s clock; each act (sA–sD) shows in its slice and the caption with it */
.stage .sc, .captions li { opacity: 0; }
.stage .sD, .captions li.sD { opacity: 1; }
.stage .sA { animation: sA var(--T) linear infinite; }
.stage .sB { animation: sB var(--T) linear infinite; }
.stage .sC { animation: sC var(--T) linear infinite; }
.stage .sD { animation: sD var(--T) linear infinite; }
.stage [class^="a-"], .stage [class^="b-"], .stage [class^="c-"], .stage [class^="d-"], .stage .spin, .stage .zz { transform-box: fill-box; transform-origin: center; }
.a-drive { animation: aDrive var(--T) linear infinite; }
.a-bounce { animation: bounce .32s ease-in-out infinite alternate; }
.a-swing { transform-origin: 50% 0 !important; animation: swing .45s ease-in-out infinite alternate; }
.a-tap { transform-origin: 50% 0 !important; animation: tap .5s ease-in-out infinite alternate; }
.a-mehh { transform-origin: 0 100% !important; animation: aMehh var(--T) var(--ease-spring) infinite; }
.a-dust { animation: aDust var(--T) ease-out infinite; }
.a-cough { transform-origin: 0 100% !important; animation: aCough var(--T) var(--ease-spring) infinite; }
.b-rings { animation: spin 30s linear infinite; }
.b-phone { animation: bPhone var(--T) infinite; }
.b-finger { animation: bFinger var(--T) ease-in-out infinite; }
.b-ripple { animation: bRipple var(--T) ease-out infinite; }
.b-pick, .b-one { animation: bOn var(--T) linear infinite; }
.b-two { animation: bOff var(--T) linear infinite; }
.b-pill { animation: bPill var(--T) infinite; }
.b-toast { animation: bToast var(--T) var(--ease-spring) infinite; }
.b-jump { transform-origin: 50% 100% !important; animation: bJump var(--T) infinite; }
.b-flip { animation: bFlip var(--T) ease-in-out infinite; }
.b-wah { transform-origin: 70% 100% !important; animation: bWah var(--T) var(--ease-spring) infinite; }
.b-conf { animation: bConf var(--T) infinite; }
.c-dash { animation: dash .45s linear infinite; }
.spin { animation: spin .5s linear infinite; }
.c-bob { animation: bounce .3s ease-in-out infinite alternate; }
.c-sign1 { animation: cSign1 var(--T) linear infinite; }
.c-sign2 { animation: cSign2 var(--T) linear infinite; }
.c-pass { animation: cPass var(--T) linear infinite; }
.c-chew { animation: bounce .4s ease-in-out infinite alternate; }
.c-mehh { transform-origin: 10% 100% !important; animation: cMehh var(--T) var(--ease-spring) infinite; }
.c-aunty { transform-origin: 55% 100% !important; animation: cAunty var(--T) var(--ease-spring) infinite; }
.c-thanks { transform-origin: 5% 100% !important; animation: cThanks var(--T) var(--ease-spring) infinite; }
.c-can { animation: cCan var(--T) infinite; }
.c-coin { animation: cCoin var(--T) infinite; }
.zz { animation: zz 2.4s ease-out infinite; }
.d-arch { animation: dArch var(--T) var(--ease-out) infinite; }
.d-car { animation: dCar var(--T) infinite; }
.d-roll { animation: dRoll var(--T) infinite; }
.d-wave { transform-origin: 50% 100% !important; animation: wave .35s ease-in-out infinite alternate; }
.d-goat { animation: dGoat var(--T) infinite; }
.d-mehh { transform-origin: 50% 100% !important; animation: dMehh var(--T) var(--ease-spring) infinite; }
.d-up { animation: dUp var(--T) ease-out infinite; }

/* Acts: 1 = 0–25%, 2 = 25–45%, 3 = 45–75%, 4 = 75–100% of the clock */
@keyframes sA { 0% { opacity: 0; } 1.5%, 23.5% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes sB { 0%, 24% { opacity: 0; } 25.5%, 43.5% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes sC { 0%, 44% { opacity: 0; } 45.5%, 73.5% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes sD { 0%, 74% { opacity: 0; } 75.5%, 98.5% { opacity: 1; } 100% { opacity: 0; } }
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bounce { to { transform: translateY(-3px); } }
@keyframes swing { from { transform: rotate(-14deg); } to { transform: rotate(20deg); } }
@keyframes tap { to { transform: rotate(-12deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dash { to { stroke-dashoffset: 60; } }
@keyframes wave { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -30px); } }
@keyframes aDrive { 0%, 5% { transform: translateX(880px); } 20%, 100% { transform: translateX(-560px); } }
@keyframes aMehh { 0%, 7.5% { opacity: 0; transform: scale(.4); } 9%, 16% { opacity: 1; transform: scale(1); } 17.5%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes aDust { 0%, 12.5% { opacity: 0; transform: scale(.3); } 14% { opacity: 1; transform: scale(1); } 21% { opacity: .85; transform: scale(1.15); } 24%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes aCough { 0%, 15% { opacity: 0; transform: scale(.4); } 16.5%, 23% { opacity: 1; transform: scale(1); } 24%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes bPhone { 0%, 25% { opacity: 0; transform: translateY(70px) scale(.7); animation-timing-function: var(--ease-spring); } 28.5%, 100% { opacity: 1; transform: none; } }
@keyframes bFinger { 0%, 27% { opacity: 0; transform: translate(90px, 170px); } 28.5% { opacity: 1; } 31% { transform: translate(0, 0) scale(1); } 32% { transform: translate(0, 0) scale(.8); } 33% { transform: translate(0, 0) scale(1); } 35.5% { opacity: 1; transform: translate(80px, 160px); } 36.5%, 100% { opacity: 0; transform: translate(80px, 160px); } }
@keyframes bRipple { 0%, 31.8% { opacity: 0; transform: scale(.3); } 32.2% { opacity: .9; } 35%, 100% { opacity: 0; transform: scale(3.4); } }
@keyframes bOn { 0%, 32.5% { opacity: 0; } 33%, 100% { opacity: 1; } }
@keyframes bOff { 0%, 32.5% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes bPill { 0%, 32.5% { transform: scale(1); } 33.5% { transform: scale(1.3); } 35%, 100% { transform: scale(1); } }
@keyframes bToast { 0%, 33.5% { opacity: 0; transform: translateY(26px); } 35.5%, 100% { opacity: 1; transform: none; } }
@keyframes bJump { 0%, 35% { transform: none; animation-timing-function: ease-out; } 37% { transform: translateY(-48px); animation-timing-function: ease-in; } 39% { transform: none; animation-timing-function: ease-out; } 40.5% { transform: translateY(-28px); animation-timing-function: ease-in; } 42%, 100% { transform: none; } }
@keyframes bFlip { 0%, 35% { transform: none; } 38.5% { transform: translateY(-110px) rotate(200deg); } 42%, 100% { transform: rotate(360deg); } }
@keyframes bWah { 0%, 36% { opacity: 0; transform: scale(.4); } 37.5%, 43% { opacity: 1; transform: scale(1); } 44%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes bConf { 0%, 34.5% { opacity: 0; transform: none; } 35.5% { opacity: 1; } 38% { transform: translate(calc(var(--dx) * .7), -70px) rotate(calc(var(--r) / 2)); animation-timing-function: ease-in; } 44%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@keyframes cSign1 { 0%, 45% { transform: translateX(900px); } 58%, 100% { transform: translateX(-200px); } }
@keyframes cSign2 { 0%, 61% { transform: translateX(900px); } 74%, 100% { transform: translateX(-200px); } }
@keyframes cPass { 0%, 49% { transform: translateX(860px); } 66%, 100% { transform: translateX(-580px); } }
@keyframes cMehh { 0%, 55% { opacity: 0; transform: scale(.4); } 56.5%, 62% { opacity: 1; transform: scale(1); } 63%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes cAunty { 0%, 46.5% { opacity: 0; transform: scale(.4); } 48%, 54% { opacity: 1; transform: scale(1); } 55%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes cThanks { 0%, 53.5% { opacity: 0; transform: scale(.4); } 55%, 60% { opacity: 1; transform: scale(1); } 61%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes cCan { 0%, 61% { opacity: 0; transform: scale(.5); } 62.5% { opacity: 1; transform: scale(1); } 69.5% { transform: scale(1); } 70.5% { transform: scale(1.25); } 72%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cCoin { 0%, 62% { opacity: 0; transform: none; } 63% { opacity: 1; transform: translateY(-14px); } 66% { transform: translate(calc(var(--dx) * .5), calc(var(--dy) - 40px)); animation-timing-function: ease-in; } 69% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(.8); } 70%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
@keyframes dArch { 0%, 75% { opacity: 0; transform: translateY(24px); } 78.5%, 100% { opacity: 1; transform: none; } }
@keyframes dCar { 0%, 75% { transform: translateX(-720px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 83% { transform: translateX(10px); } 85%, 100% { transform: none; } }
@keyframes dRoll { 0%, 75% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 83%, 100% { transform: rotate(900deg); } }
@keyframes dGoat { 0%, 86% { transform: translateX(240px); animation-timing-function: var(--ease-out); } 90%, 100% { transform: none; } }
@keyframes dMehh { 0%, 90% { opacity: 0; transform: scale(.4); } 91.5%, 98.5% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes dUp { 0%, 84% { opacity: 0; transform: none; } 86% { opacity: 1; } 97%, 100% { opacity: 0; transform: translateY(-90px); } }

/* ---------- Motion that tells the story (decision 96) ---------- */
/* Hero: a tap on the 06:30, its seat count flips, then "Seat pakki" */
.ride { position: relative; overflow: hidden; }
.ride.tap::after { content: ""; position: absolute; left: 58%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: rgb(30 79 163 / .28); animation: ripple .75s ease-out forwards; pointer-events: none; }
.ride .s b.flip { animation: flip .2s linear; }
/* Medallion: petals open one by one, like a plate being painted */
.bloom .p { transform-box: view-box; transform-origin: 50% 50%; scale: 0; opacity: 0; animation: petal .7s var(--ease-spring) forwards; animation-delay: calc(.5s + var(--i) * 70ms); }
.bloom .ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s .2s var(--ease-out) forwards; }
/* Calligraphy: the name is written right to left, a turquoise pen leading */
.calli { position: relative; display: inline-block; }
.js .calli .ink { display: inline-block; clip-path: inset(0 0 0 100%); animation: write 2.2s 1.2s cubic-bezier(.45,.05,.3,1) forwards; }
.nib { position: absolute; top: 52%; right: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--done); box-shadow: 0 0 0 5px rgb(14 124 123 / .18); opacity: 0; pointer-events: none; }
.js .nib { animation: nib 2.2s 1.2s cubic-bezier(.45,.05,.3,1) forwards; }
/* Glazed tile: the arch tilts toward the pointer and catches the light */
.arch { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out); }
.glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgb(255 255 255 / .55), transparent 42%); mix-blend-mode: soft-light; }
.arch.tilting .glare { opacity: 1; }
/* Headlines rise word by word */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .06em .14em; margin: 0 -.06em -.14em; }
.w > span { display: inline-block; transform: translateY(108%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i) * 55ms); }
.words.in .w > span { transform: none; }
html.lang-ur .w { overflow: visible; }
html.lang-ur .w > span { transform: translateY(18px); opacity: 0; transition: transform .8s var(--ease-out), opacity .8s; transition-delay: calc(var(--i) * 60ms); }
html.lang-ur .words.in .w > span { transform: none; opacity: 1; }
/* Scroll drives the car from Karachi to Hyderabad */
.route-sec.scrolly .car-dot { animation: none; opacity: 1; offset-distance: calc(var(--car, 0) * 100%); }
.route-svg .pulse { fill: none; stroke: var(--action); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.route-sec.arrived .route-svg .pulse { animation: pulseRing 1.8s ease-out infinite; }
.route-sec::before { animation: drift 90s linear infinite; }
/* Painted bands unroll; tile diamonds spin in */
.js .dots { transform: scaleX(0); transition: transform 1.4s var(--ease-out); }
.js .dots.in { transform: none; }
.reveal.in .kicker::before { animation: spinIn .9s var(--ease-spring) both; }

/* ---------- Scroll reveal (without JS everything stays visible) ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .stagger.in > * { opacity: 1; transform: none; }
.stagger.in > :nth-child(2) { transition-delay: .06s; }
.stagger.in > :nth-child(3) { transition-delay: .12s; }
.stagger.in > :nth-child(4) { transition-delay: .18s; }
.stagger.in > :nth-child(5) { transition-delay: .24s; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(14 124 123 / .5); } 80%, 100% { box-shadow: 0 0 0 10px rgb(14 124 123 / 0); } }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes phoneIn { from { opacity: 0; translate: 0 40px; scale: .97; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes turn { to { rotate: 360deg; } }
@keyframes toast {
  0%, 6% { opacity: 0; transform: translateY(20px) scale(.95); }
  12%, 72% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: translateY(10px); }
}
@keyframes flip { 50% { transform: scaleY(.2); opacity: .5; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes road { to { background-position: 0 22px; } }
@keyframes drive {
  0% { offset-distance: 0%; opacity: 0; }
  6%, 94% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes ripple { to { transform: scale(18); opacity: 0; } }
@keyframes petal { to { scale: 1; opacity: 1; } }
@keyframes write { to { clip-path: inset(0 0 0 0); } }
@keyframes nib { 0% { opacity: 1; right: 0; } 92% { opacity: 1; right: 100%; } 100% { opacity: 0; right: 100%; } }
@keyframes pulseRing { 0% { opacity: .8; scale: 1; } 100% { opacity: 0; scale: 2.6; } }
@keyframes drift { to { background-position: 56px 112px; } }
@keyframes spinIn { from { transform: rotate(-180deg) scale(0); } }
@keyframes nudge { 50% { transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal, .js .stagger > *, .js .journey li:not(.lit) .card { opacity: 1; transform: none; }
  .route-svg .drawn { stroke-dashoffset: 0; }
  .js .toast { opacity: 1; transform: none; }
  .ticker-pause { display: none; }
  .bloom .p { scale: 1; opacity: 1; }
  .bloom .ring { stroke-dashoffset: 0; }
  .js .calli .ink { clip-path: none; }
  .nib { display: none; }
  .w > span, html.lang-ur .w > span { transform: none; opacity: 1; }
  .js .dots { transform: none; }
  .arch { transform: none; }
  /* Waitlist: the last act stands still, all four captions read as a list */
  .stage-pause, .progress { display: none; }
  .captions { display: block; }
  .captions li { opacity: 1; }
  .captions li + li { margin-top: 6px; }
}