/* SnapAct Riders — landing-specific styles.
   Pulls type + palette from site.css; adds cinematic hero scene,
   animated bike+road, motion streaks, live chips, marquee, FAQ.
   Respects prefers-reduced-motion. */

/* ─── Hero scene ─────────────────────────────────────────── */
.rider-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(24, 211, 177, 0.32), transparent 56%),
    radial-gradient(900px 700px at 88% 18%, rgba(94, 234, 212, 0.18), transparent 58%),
    radial-gradient(900px 600px at 50% 110%, rgba(8, 184, 157, 0.22), transparent 60%),
    linear-gradient(180deg, #04101a 0%, #050b14 55%, #03080f 100%);
  color: #f8fafc;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: clamp(48px, 7vw, 96px) 0 clamp(160px, 22vw, 240px);
}
.rider-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 35%, rgba(0, 0, 0, 0.85), transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 35%, rgba(0, 0, 0, 0.85), transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.rider-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1px 1px at 78% 14%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(1px 1px at 35% 8%, rgba(255, 255, 255, 0.3), transparent 60%),
    radial-gradient(1px 1px at 92% 32%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(1px 1px at 22% 38%, rgba(255, 255, 255, 0.3), transparent 60%),
    radial-gradient(1px 1px at 64% 28%, rgba(255, 255, 255, 0.35), transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.rider-hero > .wrap { position: relative; z-index: 2; }

.rider-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 980px) {
  .rider-hero-grid { grid-template-columns: 1fr; gap: 36px; }
}

.rider-hero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6.2vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
}
.rider-hero h1 .accent {
  background: linear-gradient(110deg, #5eead4 0%, #18d3b1 50%, #08b89d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rider-hero .lead {
  color: rgba(255, 255, 255, 0.78);
  max-width: 58ch;
}
.rider-hero .eyebrow {
  background: rgba(8, 184, 157, 0.14);
  border-color: rgba(94, 234, 212, 0.28);
  color: #5eead4;
}
.rider-hero .eyebrow::before {
  background: #5eead4;
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.22);
}
.rider-hero .btn-soft {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rider-hero .btn-soft:hover { border-color: #5eead4; background: rgba(255, 255, 255, 0.1); }

.rider-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.rider-hero-badges .badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}
.rider-hero-badges .badge::before {
  background: #5eead4;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.22);
}

.rider-hero-live {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
  padding: 12px 16px 12px 14px;
  background: rgba(8, 17, 28, 0.55);
  border: 1px solid rgba(94, 234, 212, 0.22);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}
.rider-hero-live .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.22);
  animation: rider-pulse 2.4s ease-in-out infinite;
}
.rider-hero-live strong { display: block; font-size: 0.9375rem; color: #fff; font-weight: 700; letter-spacing: -0.01em; }
.rider-hero-live span { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }
.rider-hero-live em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5eead4;
  background: rgba(94, 234, 212, 0.12);
  padding: 5px 10px;
  border-radius: 999px;
}

/* ─── Cinematic bike scene ───────────────────────────────── */
.scene {
  position: relative;
  aspect-ratio: 5 / 4;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(94, 234, 212, 0.22), transparent 60%),
    radial-gradient(800px 500px at 80% 80%, rgba(8, 184, 157, 0.18), transparent 60%),
    linear-gradient(180deg, #07203a 0%, #061a30 38%, #0b2a4a 100%);
  border: 1px solid rgba(94, 234, 212, 0.16);
  box-shadow:
    0 30px 70px -20px rgba(0, 0, 0, 0.55),
    0 60px 120px -40px rgba(8, 184, 157, 0.32);
}
@media (max-width: 980px) {
  .scene { margin-left: 0; max-width: 100%; }
}

/* Distant city silhouette */
.scene-city {
  position: absolute;
  inset: auto 0 38% 0;
  height: 22%;
  background:
    linear-gradient(to top, rgba(4, 12, 22, 0.7), transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100' preserveAspectRatio='none'><path d='M0 100 V70 L20 70 V52 L36 52 V60 L48 60 V40 L62 40 V58 L80 58 V46 L92 46 V62 L108 62 V36 L122 36 V58 L138 58 V48 L156 48 V64 L174 64 V44 L188 44 V60 L208 60 V40 L224 40 V58 L242 58 V52 L262 52 V66 L284 66 V44 L302 44 V60 L322 60 V50 L342 50 V64 L362 64 V48 L378 48 V62 L398 62 V44 L416 44 V60 L436 60 V52 L456 52 V64 L476 64 V46 L496 46 V62 L516 62 V54 L536 54 V64 L556 64 V50 L578 50 V64 L600 64 V100 Z' fill='%2306111d' opacity='0.78'/></svg>") center bottom / 100% 100% no-repeat;
  pointer-events: none;
  opacity: 0.85;
}

/* Animated road */
.scene-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 30%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(180deg, #0a1726 0%, #050b14 100%);
  overflow: hidden;
  pointer-events: none;
}
.scene-road::before {
  content: "";
  position: absolute;
  left: -40%;
  right: -40%;
  top: 56%;
  height: 6px;
  border-radius: 4px;
  background-image: linear-gradient(90deg, #5eead4 0 56%, transparent 56% 100%);
  background-size: 90px 6px;
  background-repeat: repeat-x;
  opacity: 0.75;
  filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.55));
  animation: scene-road-scroll 0.55s linear infinite;
  transform: perspective(420px) rotateX(58deg);
  transform-origin: 50% 0;
}
.scene-road::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.35), transparent);
}

/* Lateral motion streaks */
.scene-streaks { position: absolute; inset: 12% 0 36% 0; pointer-events: none; }
.scene-streaks span {
  position: absolute;
  left: -20%;
  height: 1px;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.5), transparent);
  filter: blur(0.5px);
  animation: scene-streak 1.6s linear infinite;
}
.scene-streaks span:nth-child(1) { top: 18%; width: 30%; animation-duration: 1.8s; animation-delay: -0.2s; opacity: 0.55; }
.scene-streaks span:nth-child(2) { top: 36%; width: 44%; animation-duration: 1.3s; animation-delay: -0.7s; opacity: 0.8; }
.scene-streaks span:nth-child(3) { top: 54%; width: 28%; animation-duration: 2.1s; animation-delay: -0.4s; opacity: 0.45; }
.scene-streaks span:nth-child(4) { top: 70%; width: 50%; animation-duration: 1s;   animation-delay: -1.1s; opacity: 0.9; height: 2px; }
.scene-streaks span:nth-child(5) { top: 82%; width: 38%; animation-duration: 1.5s; animation-delay: -0.3s; opacity: 0.65; }

/* The bike itself — gentle bob; wheels rotate via CSS */
.scene-bike {
  position: absolute;
  left: 50%;
  bottom: 14%;
  width: 78%;
  max-width: 460px;
  transform: translateX(-50%);
  animation: scene-bob 1.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.55));
}
.scene-bike svg { width: 100%; height: auto; display: block; }
.scene-wheel { transform-origin: 50% 50%; transform-box: fill-box; animation: scene-wheel-spin 0.45s linear infinite; }
.scene-headlight-beam { animation: scene-beam 2.4s ease-in-out infinite; transform-origin: 0% 50%; transform-box: fill-box; }

/* Floating live chips on the scene */
.scene-chip {
  position: absolute;
  padding: 9px 14px 9px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
  background: rgba(7, 19, 33, 0.78);
  border: 1px solid rgba(94, 234, 212, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.scene-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.22);
}
.scene-chip strong { color: #5eead4; font-weight: 800; }
.scene-chip.chip-1 { top: 10%;  left: 6%;  animation: scene-float-a 5.2s ease-in-out infinite; }
.scene-chip.chip-2 { top: 32%;  right: 6%; animation: scene-float-b 6.4s ease-in-out infinite; }
.scene-chip.chip-3 { bottom: 30%; left: 8%; animation: scene-float-a 6.8s ease-in-out infinite -1.2s; }

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .scene-bike, .scene-chip, .scene-streaks span, .scene-road::before, .rider-hero-live .dot,
  .scene-wheel, .scene-headlight-beam, .marquee-track, .pulse-dot, .route-dot { animation: none !important; }
}

/* ─── Earnings ticker / marquee ──────────────────────────── */
.marquee {
  position: relative;
  margin-top: -88px;
  padding: 18px 0;
  background: linear-gradient(180deg, #ffffff, #f3f7f8);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  z-index: 3;
  box-shadow: 0 -10px 28px rgba(8, 17, 28, 0.06);
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 88px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, #fbfdfd, transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, #fbfdfd, transparent); }
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  animation: marquee-scroll 38s linear infinite;
  padding-left: 36px;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.marquee-item strong { color: var(--brand-dark); font-weight: 800; }
.marquee-item::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
  margin-left: 26px;
  opacity: 0.5;
}
.marquee-item:last-child::after { display: none; }

/* ─── Route preview (section piece) ──────────────────────── */
.route-card {
  position: relative;
  background: linear-gradient(180deg, #06111c 0%, #050b14 100%);
  border: 1px solid rgba(94, 234, 212, 0.18);
  border-radius: 24px;
  padding: 28px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
}
.route-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0, 0, 0, 0.75), transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0, 0, 0, 0.75), transparent 80%);
  pointer-events: none;
}
.route-card > * { position: relative; }
.route-card h3 { color: #fff; margin: 0 0 4px; }
.route-card .muted { color: rgba(255, 255, 255, 0.55); font-size: 0.8125rem; }
.route-svg { display: block; width: 100%; height: auto; margin-top: 18px; }
.route-svg .route-line {
  stroke-dasharray: 6 8;
  animation: route-dash 1.6s linear infinite;
}
.route-svg .route-dot {
  fill: #5eead4;
  filter: drop-shadow(0 0 10px rgba(94, 234, 212, 0.85));
  animation: pulse-dot 1.8s ease-in-out infinite;
}
.route-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.route-meta div {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.route-meta strong { display: block; font-size: 0.875rem; color: #fff; font-weight: 800; margin-bottom: 2px; }
.route-meta span { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(94, 234, 212, 0.85); font-weight: 700; }

/* ─── FAQ accordion ──────────────────────────────────────── */
.faq-list { display: grid; gap: 10px; }
.faq-item {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px 22px;
  transition: border-color 0.18s ease, box-shadow 0.22s ease;
}
.faq-item:hover { border-color: rgba(8, 184, 157, 0.32); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--brand-wash);
  color: var(--brand-dark);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.22s ease, background-color 0.18s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--brand); color: #fff; }
.faq-item .faq-body {
  padding: 0 0 18px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 72ch;
}

/* ─── Earnings split card override ───────────────────────── */
.earn-card .signal strong { font-size: 1rem; color: var(--ink); padding: 0; background: transparent; border-radius: 0; letter-spacing: -0.01em; }
.earn-card .signal:last-child { background: rgba(8, 184, 157, 0.08); border-color: rgba(8, 184, 157, 0.32); }
.earn-card .signal:last-child strong { color: var(--brand-dark); font-size: 1.25rem; }

/* ─── Keyframes ──────────────────────────────────────────── */
@keyframes rider-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.22); }
  50%      { box-shadow: 0 0 0 9px rgba(94, 234, 212, 0.05); }
}
@keyframes scene-road-scroll {
  from { background-position: 0 0; }
  to   { background-position: -90px 0; }
}
@keyframes scene-streak {
  from { transform: translateX(-30%); }
  to   { transform: translateX(360%); }
}
@keyframes scene-bob {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-3px); }
}
@keyframes scene-wheel-spin {
  to { transform: rotate(360deg); }
}
@keyframes scene-beam {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}
@keyframes scene-float-a {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes scene-float-b {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes route-dash {
  to { stroke-dashoffset: -28; }
}
@keyframes pulse-dot {
  0%, 100% { r: 6; opacity: 1; }
  50%      { r: 9; opacity: 0.6; }
}