/* ================================================================ motion
   One file for both homepages (index.html, index-he.html), after their
   inline styles. One authored moment, everything else quiet:
   - the hero phone is BUILT in HTML (crisp at any size, one cast: Maya and
     her couch) and plays the product once a loop: her request is swiped
     right, "Offer accepted" lands, the chat opens and she answers;
   - "How it works" shows a small, sharp piece of the real UI per step;
   - sections rise once as they enter. The map pin melts into an area.
   Copy is the app's own (ctaLabels.ts, browse.swipeHelp, offer_accepted).
   Without container units the screenshot stays; with reduced motion nothing
   moves (the page's own rule) and the phone rests on its first frame. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* the app's own palette, for the built UI */
  --app-purple: #5450e4; --app-purple-deep: #4338ca; --app-ink: #111827; --app-sub: #6b7280;
  --app-bg: #f8f8fb; --app-line: #eceef3; --app-card: #efeafc; --app-green: #15803d;
}
::selection { background: rgba(79, 70, 229, 0.18); }

/* ── the key words of the tagline: a drawn underline, from the start edge ── */
.hero .tagline .mark { position: relative; white-space: nowrap; }
.hero .tagline .mark::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0.02em; height: 0.1em;
  border-radius: 0.1em; background: var(--brand); opacity: 0.85; transform-origin: left center;
}
[dir="rtl"] .hero .tagline .mark::after { transform-origin: right center; }

/* ================================================================ hero phone */
.hero { overflow-x: hidden; overflow-x: clip; } /* the push may lean past the phone; never a sideways scroll */
.hero-shot { position: relative; container-type: inline-size; }
.hp { display: none; }
@supports (width: 1cqi) {
  .hero-shot > .device-image { display: none; }
  .hp { display: block; }
}
.hp {
  position: relative; aspect-ratio: 750 / 1628;
  border: 3.2cqi solid #111216; border-radius: 15cqi; background: #111216;
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 30px 70px -10px rgba(16, 24, 40, 0.28);
  font-family: "Heebo", "Inter", system-ui, sans-serif; color: var(--app-ink);
  -webkit-user-select: none; user-select: none;
}
.hp-screen { position: absolute; inset: 0; border-radius: 12cqi; overflow: hidden; background: var(--app-bg); }
.hp-status {
  height: 11.5cqi; padding: 0 7cqi; display: flex; align-items: center; justify-content: space-between;
  font: 600 3.9cqi/1 "Inter", system-ui, sans-serif; direction: ltr; position: relative;
}
.hp-island { position: absolute; left: 50%; top: 2.6cqi; width: 26cqi; height: 7.2cqi; margin-left: -13cqi; border-radius: 99px; background: #0b0b0e; }
.hp-icons { display: flex; gap: 1.4cqi; align-items: center; }
.hp-icons svg { height: 3.2cqi; width: auto; }
.hp-title { text-align: center; font: 800 5.2cqi/1 "Inter", sans-serif; color: var(--app-purple-deep); padding: 1.6cqi 0 3cqi; }
.hp-seg {
  margin: 0 4cqi; display: grid; grid-template-columns: 1fr 1fr; padding: 0.9cqi; border-radius: 3cqi;
  background: #e8eaf0; font-size: 3.4cqi; font-weight: 600; text-align: center; color: var(--app-sub);
}
.hp-seg span { padding: 1.8cqi 0; border-radius: 2.4cqi; }
.hp-seg .on { background: #fff; color: var(--app-purple-deep); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
.hp-chips { display: flex; gap: 1.8cqi; padding: 3cqi 4cqi; overflow: hidden; white-space: nowrap; }
.hp-chips span { font-size: 3.2cqi; font-weight: 600; padding: 1.5cqi 3.2cqi; border-radius: 99px; background: #eef0f5; color: #4b5563; }
.hp-chips .on { background: var(--app-purple); color: #fff; }

.hp-deck { position: absolute; left: 4cqi; right: 4cqi; top: 49cqi; height: 107cqi; }
.hp-card {
  position: absolute; inset: 0; border-radius: 5cqi; overflow: hidden; background: #fff;
  display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 18px rgba(16, 24, 40, 0.06);
}
.hp-face {
  flex: 1; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 5cqi; background: var(--app-card) url("card-tile.png") 0 0 / 69cqi repeat;
}
.hp-pills { position: absolute; top: 3.4cqi; inset-inline-start: 3.4cqi; display: flex; gap: 1.6cqi; }
.hp-pill { font-size: 3cqi; font-weight: 600; padding: 1.1cqi 2.8cqi; border-radius: 99px; line-height: 1.2; }
.hp-pill.kind { background: #5b55e6; color: #fff; }
.hp-pill.cat { background: rgba(255, 255, 255, 0.75); color: var(--app-purple-deep); }
.hp-ctitle { font-size: 6.6cqi; font-weight: 800; line-height: 1.15; color: #1e1b4b; text-wrap: balance; margin-top: 3cqi; }
.hp-cdesc { font-size: 3.5cqi; color: #4a4a68; margin-top: 2.6cqi; line-height: 1.4; text-wrap: balance; }
.hp-person { display: flex; align-items: center; gap: 2.6cqi; padding: 3.2cqi 4.2cqi; }
.hp-av {
  width: 9cqi; height: 9cqi; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-size: 3.8cqi; font-weight: 700; background: #e0e7ff; color: var(--app-purple-deep);
}
.hp-name { font-size: 4cqi; font-weight: 700; line-height: 1.2; }
.hp-meta { font-size: 3.1cqi; color: var(--app-purple-deep); line-height: 1.3; }
.hp-card.next { scale: 0.94; translate: 0 3%; }
.hp-stamp {
  position: absolute; top: 20%; left: 7%; font-size: 6.4cqi; font-weight: 800; color: var(--app-green);
  border: 0.9cqi solid var(--app-green); border-radius: 2.4cqi; padding: 0.4cqi 3cqi;
  rotate: -14deg; opacity: 0; background: rgba(255, 255, 255, 0.7);
}
.hp-actions { position: absolute; left: 5cqi; right: 5cqi; top: 161cqi; height: 13cqi; display: flex; gap: 4cqi; }
.hp-btn { border-radius: 99px; display: grid; place-items: center; font-size: 4.3cqi; font-weight: 700; }
.hp-btn.skip { flex: 0 0 28%; background: #eef0f5; color: #4b5563; }
.hp-btn.help { flex: 1; background: var(--app-purple); color: #fff; box-shadow: 0 4px 10px rgba(16, 24, 40, 0.18); }
[dir="rtl"] .hp-actions { flex-direction: row-reverse; } /* "skip" stays on the left, as in the app */
.hp-count { position: absolute; left: 0; right: 0; top: 179cqi; display: flex; flex-direction: column; align-items: center; gap: 1.6cqi; font-size: 2.9cqi; color: #6b7280; }
.hp-count i { width: 44cqi; height: 0.9cqi; border-radius: 99px; background: linear-gradient(var(--app-purple), var(--app-purple)) 0 0 / 30% 100% no-repeat, #e5e7eb; }
[dir="rtl"] .hp-count i { background-position: 100% 0; }
.hp-tabs {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20cqi; padding: 2.6cqi 3cqi 0;
  display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--app-line);
}
.hp-tabs span { display: flex; flex-direction: column; align-items: center; gap: 1cqi; font-size: 2.6cqi; color: #6b7280; font-weight: 500; }
.hp-tabs svg { width: 5.6cqi; height: 5.6cqi; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-tabs .on { color: var(--app-purple-deep); }

/* the chat that opens once Maya accepts */
.hp-chat {
  position: absolute; inset: 11.5cqi 0 0; background: #fff; display: flex; flex-direction: column;
  translate: 0 115%; box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.12); /* 115%: its shadow stays out of sight too */
}
.hp-chat-head { display: flex; align-items: center; gap: 2.6cqi; padding: 3.4cqi 4.4cqi; border-bottom: 1px solid var(--app-line); }
.hp-chat-head .hp-meta { color: var(--app-green); }
.hp-chat-post { margin: 3cqi 4.4cqi 0; padding: 2cqi 3cqi; border-radius: 3cqi; background: #f4f3fe; font-size: 3.1cqi; color: var(--app-purple-deep); }
.hp-msgs { flex: 1; display: flex; flex-direction: column; gap: 2.4cqi; padding: 4cqi 4.4cqi; }
.hp-msg { max-width: 76%; font-size: 3.9cqi; line-height: 1.35; padding: 2.4cqi 3.6cqi; border-radius: 4.4cqi; opacity: 0; }
.hp-msg.mine { align-self: flex-end; background: var(--app-purple); color: #fff; border-bottom-right-radius: 1.2cqi; }
.hp-msg.theirs { align-self: flex-start; background: #f1f2f6; color: var(--app-ink); border-bottom-left-radius: 1.2cqi; }
/* my lines on the right, theirs on the left - in Hebrew too, as in the app */
[dir="rtl"] .hp-msg.mine { align-self: flex-start; }
[dir="rtl"] .hp-msg.theirs { align-self: flex-end; }
[dir="rtl"] .hp-reply { justify-items: end; }
/* the typing dots and the answer share one place, so nothing jumps */
.hp-reply { display: grid; justify-items: start; align-self: flex-start; max-width: 76%; }
[dir="rtl"] .hp-reply { align-self: flex-end; }
.hp-reply .hp-msg { max-width: 100%; }
.hp-reply > * { grid-area: 1 / 1; }
.hp-typing { display: inline-flex; gap: 1.2cqi; padding: 3cqi 3.6cqi; }
.hp-typing i { width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: #9ca3af; }
.hp-compose { display: flex; align-items: center; gap: 2.4cqi; padding: 3cqi 4cqi 6cqi; border-top: 1px solid var(--app-line); }
.hp-compose span { flex: 1; height: 9cqi; border-radius: 99px; background: #f1f2f6; }
.hp-compose i { width: 9cqi; height: 9cqi; border-radius: 50%; background: var(--app-purple); }

/* the push: lands just below the status bar and leans a little past the frame - the one "wow" */
.hp-push {
  position: absolute; top: 14cqi; inset-inline: -9cqi 3cqi; z-index: 2;
  display: flex; align-items: center; gap: 3cqi; padding: 3.6cqi 4.2cqi; border-radius: 6cqi;
  background: #fff; color: var(--app-ink);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08), 0 24px 50px -8px rgba(16, 24, 40, 0.35);
  opacity: 0; font-family: "Heebo", "Inter", system-ui, sans-serif;
}
.hp-push img { width: 11cqi; height: 11cqi; border-radius: 2.6cqi; flex-shrink: 0; }
.hp-push b { display: block; font-size: 4.4cqi; font-weight: 700; }
.hp-push span { display: block; font-size: 3.9cqi; color: #4b5563; line-height: 1.3; }
.hp-push small { font-size: 3.4cqi; color: #6b7280; align-self: flex-start; margin-inline-start: auto; }

/* one quiet control for the loop (WCAG 2.2.2); the page script shows it */
.demo-toggle {
  position: absolute; bottom: -4px; inset-inline-end: -52px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
}
.demo-toggle[hidden] { display: none; }
.demo-toggle:hover { color: var(--ink); border-color: #cfd3da; }
.demo-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.demo-toggle .i-play { display: none; }
.demo-toggle[aria-pressed="true"] .i-play { display: block; }
.demo-toggle[aria-pressed="true"] .i-pause { display: none; }
@media (max-width: 600px) { .demo-toggle { inset-inline-end: -44px; width: 32px; height: 32px; } }
@supports not (width: 1cqi) { .demo-toggle { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .demo-toggle { display: none; } }

/* ================================================================ proof line */
/* lives inside .hero (a new body child would shift every .section:nth-child band below it) */
.hero > .proof { grid-column: 1 / -1; margin-top: 8px; padding: 32px 0 0; border-top: 1px solid var(--line); }
.proof p {
  max-width: 1072px; margin: 0 auto; text-align: center; font-size: 22px; line-height: 1.5; color: var(--ink2); text-wrap: balance;
}
.proof b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .hero > .proof { padding-top: 24px; } .proof p { font-size: 18px; } }

/* ================================================================ how it works: a sharp piece of UI per step */
.flow-ui {
  height: 104px; margin: 18px 0 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 20px -6px rgba(16, 24, 40, 0.08);
  padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 8px; overflow: hidden;
  font-family: "Heebo", "Inter", system-ui, sans-serif; font-size: 12px; color: var(--app-ink);
}
.fu-row { display: flex; align-items: center; gap: 8px; }
.fu-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fu-tiles span { padding: 6px 0; border-radius: 8px; background: #f3f4f8; text-align: center; font-size: 11px; color: #4b5563; font-weight: 600; }
.fu-tiles .on { background: #eef0fd; color: var(--app-purple-deep); box-shadow: inset 0 0 0 1.5px var(--app-purple); }
.fu-input { flex: 1; padding: 7px 10px; border-radius: 8px; background: #f3f4f8; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-go { padding: 7px 12px; border-radius: 99px; background: var(--app-purple); color: #fff; font-weight: 700; }
.flow-ui:has(> .fu-card) { padding: 0; }
.flow-ui > .fu-card { border-radius: 0; padding: 12px 14px; }
.fu-card { flex: 1; border-radius: 10px; padding: 9px 10px; background: var(--app-card) url("card-tile.png") 0 0 / 160px repeat; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.fu-card b { font-size: 13px; color: #1e1b4b; }
.fu-card small { color: var(--app-purple-deep); font-size: 11px; }
.fu-av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: #e0e7ff; color: var(--app-purple-deep); }
.fu-av.y { background: #dcfce7; color: #166534; }
.fu-who { flex: 1; min-width: 0; line-height: 1.3; }
.fu-who b { display: block; font-size: 13px; }
.fu-who small { color: var(--app-sub); font-size: 11px; }
.fu-yes, .fu-no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.fu-yes { background: var(--app-purple); color: #fff; }
.fu-no { background: #f1f2f6; color: #6b7280; }
.fu-yes svg, .fu-no svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fu-bub { max-width: 82%; padding: 6px 10px; border-radius: 12px; font-size: 12px; line-height: 1.3; }
.fu-bub.theirs { align-self: flex-start; background: #f1f2f6; border-bottom-left-radius: 4px; }
.fu-bub.mine { align-self: flex-end; background: var(--app-purple); color: #fff; border-bottom-right-radius: 4px; }
[dir="rtl"] .fu-bub.theirs { align-self: flex-end; }
[dir="rtl"] .fu-bub.mine { align-self: flex-start; }
.fu-stars { display: flex; gap: 3px; direction: ltr; justify-content: center; }
.fu-stars svg { width: 20px; height: 20px; fill: #f59e0b; stroke: #f59e0b; stroke-width: 1.5; stroke-linejoin: round; }
.fu-caption { text-align: center; color: var(--app-sub); font-size: 11.5px; }
@media (max-width: 960px) { .flow-ui { max-width: 300px; } }
@media (max-width: 600px) { .flow-ui { margin: 12px 0; } }

/* ================================================================ the end: a finished exchange */
.done-card {
  width: min(360px, 100%); margin: 0 auto 36px; padding: 16px 18px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05), 0 18px 40px -10px rgba(16, 24, 40, 0.18);
  display: flex; align-items: center; gap: 12px; text-align: start; font-family: "Heebo", "Inter", system-ui, sans-serif;
}
.done-card .fu-who b { font-size: 15px; }
.done-card .fu-who small { font-size: 13px; color: var(--app-green); font-weight: 600; }
.done-card .fu-stars svg { width: 18px; height: 18px; }

/* ================================================================ the map: an exact point becomes an area */
#s-map .device-shot { container-type: inline-size; }
.map-fx { position: absolute; inset: 10px; pointer-events: none; }
@media (max-width: 600px) { .map-fx { inset: 8px; } }
/* centre of the app's own approximate circle on screen-*-map.png (750x1628) - re-measure if it is re-shot */
.map-fx .spot { position: absolute; left: 50.6%; top: 36.1%; width: 0; height: 0; }
.map-fx .pin { position: absolute; width: 9cqi; height: 11cqi; left: -4.5cqi; top: -11cqi; color: var(--brand); opacity: 0; filter: drop-shadow(0 3px 4px rgba(16, 24, 40, 0.3)); transform-origin: 50% 100%; }
.map-fx .melt { position: absolute; width: 26.4cqi; aspect-ratio: 1; left: -13.2cqi; top: -13.2cqi; border-radius: 50%; border: 0.8cqi solid var(--brand); background: rgba(79, 70, 229, 0.22); opacity: 0; }
@supports not (width: 1cqi) { .map-fx { display: none; } }

/* ================================================================ keyframes */
@keyframes m-rise { from { opacity: 0; translate: 0 18px; } }
@keyframes m-rise-solid { from { translate: 0 18px; } }       /* LCP: moves, never starts invisible */
@keyframes m-phone-in { from { translate: 0 36px; scale: 0.97; } }
@keyframes m-draw { from { scale: 0 1; } }

/* the loop: 10s. 0-12 rest · 12-24 drag + stamp + press · 24-34 fly off, next rises ·
   38-44 push lands · 56-64 chat opens, push leaves · 66-74 typing · 75 answer ·
   75-91 rest · 91-100 reset */
@keyframes m-swipe {
  0%, 12% { translate: 0 0; rotate: 0deg; opacity: 1; scale: 1; }
  24% { translate: 15% -1%; rotate: 6deg; }
  34% { translate: 165% -5%; rotate: 22deg; opacity: 1; }
  35%, 93% { translate: 165% -5%; rotate: 22deg; opacity: 0; }
  94% { translate: 0 3%; rotate: 0deg; scale: 0.95; opacity: 0; }
  100% { translate: 0 0; scale: 1; opacity: 1; }
}
@keyframes m-stamp { 0%, 13% { opacity: 0; scale: 1.35; } 20%, 34% { opacity: 1; scale: 1; } 35%, 100% { opacity: 0; } }
@keyframes m-next {
  0%, 24% { scale: 0.94; translate: 0 3%; opacity: 1; }
  34%, 90% { scale: 1; translate: 0 0; opacity: 1; }
  93%, 99.9% { scale: 0.94; translate: 0 3%; opacity: 0; }
  100% { scale: 0.94; translate: 0 3%; opacity: 1; }
}
@keyframes m-press { 0%, 14% { scale: 1; } 18% { scale: 0.93; } 23%, 100% { scale: 1; } }
@keyframes m-push {
  0%, 38% { opacity: 0; translate: 0 -40%; scale: 0.92; }
  43% { opacity: 1; translate: 0 3%; scale: 1.01; }
  46%, 58% { opacity: 1; translate: 0 0; scale: 1; }
  62%, 100% { opacity: 0; translate: 0 -30%; scale: 0.96; }
}
@keyframes m-chat { 0%, 56% { translate: 0 115%; } 64%, 91% { translate: 0 0; } 98%, 100% { translate: 0 115%; } }
@keyframes m-mine { 0%, 62% { opacity: 0; translate: 0 2cqi; } 65%, 93% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
@keyframes m-typing { 0%, 66% { opacity: 0; } 68%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes m-answer { 0%, 74% { opacity: 0; translate: 0 2cqi; scale: 0.94; } 78%, 93% { opacity: 1; translate: 0 0; scale: 1; } 97%, 100% { opacity: 0; } }
@keyframes m-dot { 0%, 60%, 100% { translate: 0 0; opacity: 0.45; } 30% { translate: 0 -1.2cqi; opacity: 1; } }

/* ================================================================ 1. on load */
@media (prefers-reduced-motion: no-preference) {
  .store-badge:active { scale: 0.97; }
  .hero-copy > * { animation: m-rise 800ms var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-name: m-rise-solid; animation-delay: 70ms; }
  .hero-copy > :nth-child(3) { animation-delay: 140ms; }
  .hero-copy > :nth-child(4) { animation-delay: 210ms; }
  .hero-copy > :nth-child(5) { animation-delay: 280ms; }
  .hero .tagline .mark::after { animation: m-draw 700ms var(--ease-in-out) 650ms both; }
  .hp { animation: m-phone-in 1000ms var(--ease-out) 150ms both; }

  .hp-card.top, .hp-card.next, .hp-stamp, .hp-btn.help, .hp-push, .hp-chat, .hp-msg.mine, .hp-msg.typing, .hp-msg.answer {
    animation-duration: 10s; animation-delay: 1.4s; animation-iteration-count: infinite;
    animation-timing-function: var(--ease-out); animation-fill-mode: both;
  }
  .hp-card.top { animation-name: m-swipe; }
  .hp-card.next { animation-name: m-next; }
  .hp-stamp { animation-name: m-stamp; }
  .hp-btn.help { animation-name: m-press; animation-timing-function: ease; }
  .hp-push { animation-name: m-push; }
  .hp-chat { animation-name: m-chat; animation-timing-function: var(--ease-in-out); }
  .hp-msg.mine { animation-name: m-mine; }
  .hp-msg.typing { animation-name: m-typing; animation-timing-function: linear; }
  .hp-msg.answer { animation-name: m-answer; }
  .hp-typing i { animation: m-dot 900ms ease-in-out infinite; }
  .hp-typing i:nth-child(2) { animation-delay: 150ms; }
  .hp-typing i:nth-child(3) { animation-delay: 300ms; }
  .demo-paused .hp * { animation-play-state: paused !important; }
}

/* ================================================================ 2. on scroll: rise once */
@keyframes m-s-rise { from { opacity: 0; translate: 0 28px; } }
@keyframes m-s-pop { from { opacity: 0; scale: 0.5; } }
@keyframes m-s-draw-h { from { clip-path: inset(0 100% 0 0); } }
@keyframes m-s-draw-h-rtl { from { clip-path: inset(0 0 0 100%); } }
@keyframes m-s-draw-v { from { clip-path: inset(0 0 100% 0); } }
@keyframes m-s-pin { 0% { opacity: 0; translate: 0 -14cqi; } 70% { opacity: 1; translate: 0 1cqi; } 100% { opacity: 1; translate: 0 0; } }
@keyframes m-s-pin-out { to { opacity: 0; scale: 0.2; } }
@keyframes m-s-melt { 0% { opacity: 0.95; scale: 0.08; } 100% { opacity: 0; scale: 1; } }
@keyframes m-s-star { from { opacity: 0.15; scale: 0.6; } }

/* the route line between the steps exists only where it can draw itself in */
.flow-number { z-index: 1; }
.flow-step::after {
  display: none; content: ""; position: absolute; top: -1px; height: 2px;
  inset-inline-start: 0; inset-inline-end: -28px; background: var(--brand);
}
.flow-step:last-child::after { inset-inline-end: 0; }
@media (max-width: 960px) {
  .flow-step::after { top: 0; bottom: 0; height: auto; width: 2px; inset-inline-start: -1px; inset-inline-end: auto; }
  .flow-step:last-child::after { visibility: hidden; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .proof p, .flow-section > h2, .flow-section > .section-sub,
    .section-text > *, .section .device-shot, .bilingual-section > h2, .bilingual-section > .section-sub,
    .bilingual-phones .device-shot, .safety-section > h2, .safety-section > .section-sub, .safety-card {
      animation: m-s-rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 30%;
    }
    .section-text > p.lede, .flow-section > .section-sub, .bilingual-section > .section-sub,
    .safety-section > .section-sub { animation-range: entry 10% cover 32%; }
    .section-text > .feature-list { animation-range: entry 20% cover 34%; }
    .section .device-shot, .bilingual-phones .device-shot { animation-range: entry 5% cover 35%; }
    .bilingual-phones .device-shot + .device-shot { animation-range: entry 15% cover 42%; }
    .safety-card:nth-child(2) { animation-range: entry 8% cover 32%; }
    .safety-card:nth-child(3) { animation-range: entry 16% cover 34%; }
    .safety-card:nth-child(4) { animation-range: entry 24% cover 36%; }
    /* the end of the page may never reach cover 30%: finish on entry */
    .footer > .done-card, .footer > h2, .footer > .footer-sub, .footer > .badge-row {
      animation: m-s-rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 70%;
    }
    .footer > h2 { animation-range: entry 5% entry 75%; }
    .footer > .footer-sub { animation-range: entry 10% entry 80%; }
    .footer > .badge-row { animation-range: entry 20% entry 90%; }
    .done-card .fu-stars svg { animation: m-s-star var(--ease-out) both; animation-timeline: view(); }
    .done-card .fu-stars svg:nth-child(1) { animation-range: entry 40% entry 70%; }
    .done-card .fu-stars svg:nth-child(2) { animation-range: entry 46% entry 76%; }
    .done-card .fu-stars svg:nth-child(3) { animation-range: entry 52% entry 82%; }
    .done-card .fu-stars svg:nth-child(4) { animation-range: entry 58% entry 88%; }
    .done-card .fu-stars svg:nth-child(5) { animation-range: entry 64% entry 94%; }

    /* how it works: steps arrive in order, each number pops, the line draws on */
    .flow-step { animation: m-s-rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .flow-number { animation: m-s-pop var(--ease-out) both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    .flow-step::after { display: block; animation: m-s-draw-v linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
    @media (min-width: 961px) {
      .flow-steps { view-timeline: --flow block; }
      .flow-step, .flow-number, .flow-step::after { animation-timeline: --flow; }
      .flow-step:nth-child(1) { animation-range: entry 10% cover 25%; }
      .flow-step:nth-child(3) { animation-range: entry 15% cover 28%; }
      .flow-step:nth-child(5) { animation-range: entry 20% cover 31%; }
      .flow-step:nth-child(7) { animation-range: entry 25% cover 34%; }
      .flow-step:nth-child(9) { animation-range: entry 30% cover 37%; }
      .flow-step:nth-child(1) .flow-number { animation-range: entry 15% cover 27%; }
      .flow-step:nth-child(3) .flow-number { animation-range: entry 20% cover 30%; }
      .flow-step:nth-child(5) .flow-number { animation-range: entry 25% cover 33%; }
      .flow-step:nth-child(7) .flow-number { animation-range: entry 30% cover 36%; }
      .flow-step:nth-child(9) .flow-number { animation-range: entry 35% cover 39%; }
      .flow-step::after { animation-name: m-s-draw-h; }
      [dir="rtl"] .flow-step::after { animation-name: m-s-draw-h-rtl; }
      .flow-step:nth-child(1)::after { animation-range: cover 25% cover 29%; }
      .flow-step:nth-child(3)::after { animation-range: cover 29% cover 33%; }
      .flow-step:nth-child(5)::after { animation-range: cover 33% cover 37%; }
      .flow-step:nth-child(7)::after { animation-range: cover 37% cover 41%; }
      .flow-step:nth-child(9)::after { animation-range: cover 41% cover 45%; }
    }

    /* the map: a pin drops on the exact point, then melts into the approximate area */
    #s-map .device-shot { view-timeline: --map block; }
    .map-fx .pin {
      animation: m-s-pin var(--ease-out) both, m-s-pin-out var(--ease-out) forwards;
      animation-timeline: --map, --map; animation-range: entry 70% cover 40%, cover 46% cover 54%;
    }
    .map-fx .melt { animation: m-s-melt var(--ease-out) forwards; animation-timeline: --map; animation-range: cover 46% cover 62%; }
  }
}