/* ============================================================
   local — scroll-driven motion layer
   (loads after sections.css; drives #thecall switcher + friends polish)
   ============================================================ */

/* Ask pick pops out of the panel: the grid is the positioning context */
.bv-grid3 { position: relative; }
#askPopout { will-change: left, top, transform; }

/* ---------- Notification-style floating cards ----------
   Pop in when scrolled into view, retract when scrolled away (like a toast).
   Driven by motion.js toggling .notif-in. Not .bv-pop, so the global
   force-visible safety net never pins them. */
.usc-notif {
  opacity: 0;
  transform: translateY(18px) scale(0.9);
  transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1),
              transform 0.55s cubic-bezier(0.34,1.45,0.5,1);
  pointer-events: none;
  will-change: opacity, transform;
}
.usc-notif.notif-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  animation: uscBob 7s ease-in-out 0.65s infinite;
}
@keyframes uscBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .usc-notif { transition: opacity 0.3s ease; transform: none; }
  .usc-notif.notif-in { transform: none; animation: none; }
}

/* ---------- THE CALL: sticky scroll-scrub ---------- */
.callscroll { position: relative; height: 320vh; padding: 0; }
.callscroll-sticky {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(70px, 9vh, 120px) 24px;
}
.callscroll .bv-wrap { width: 100%; }
.callscroll .bv-stage { min-height: 0; }

/* the deck of pick cards inside the phone */
.call-deck { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 4px; }
.call-card {
  position: absolute; left: 0; right: 0; top: 0; width: 100%;
  will-change: transform, opacity;
  box-shadow: 0 30px 60px -34px rgba(46,33,5,0.5);
}

/* swipe / scroll hint */
.call-stage .la-swipe { transition: opacity 0.4s ease; }

/* floating Local Score chip — tucked close to the phone, under the photo */
.call-score {
  position: absolute; right: -8px; top: 200px; left: auto; z-index: 13;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 16px; padding: 11px 14px 11px 11px;
  box-shadow: 0 30px 58px -26px rgba(46,33,5,0.5), inset 0 0 0 1px rgba(255,255,255,0.6);
}
.call-score .lbl { font: 800 8px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--la-olive); }
.call-score .la-spill.lg small { transition: none; }

/* the ranked rail in the copy column */
.call-rail { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.call-rrow {
  position: relative; display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; border-radius: 16px; background: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--bv-line);
  transition: box-shadow 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1), background 0.45s ease;
}
.call-rrow .rk { font: 700 12px/1 var(--sans); color: var(--bv-gray-2); width: 18px; flex-shrink: 0; transition: color 0.4s ease; }
.call-rrow .mid { flex: 1; min-width: 0; }
.call-rrow .nm { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 17px; line-height: 1; color: var(--bv-ink); }
.call-rrow .meta { font: 500 11px/1 var(--sans); color: var(--bv-gray); margin-top: 5px; }
.call-rrow .la-spill { margin-left: auto; flex-shrink: 0; }
.call-rrow .ufill {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border-radius: 0 999px 999px 0;
}
.call-rrow.on {
  background: var(--la-cream-lift);
  box-shadow: inset 0 0 0 1px #efdf94, 0 18px 34px -20px rgba(46,33,5,0.55);
  transform: translateX(5px) scale(1.015);
}
.call-rrow.on .rk { color: var(--gold-deep); }

/* fallback / mobile: no scrub — swipe horizontally through all three picks */
.callscroll.no-scrub { height: auto; }
.callscroll.no-scrub .callscroll-sticky { position: static; min-height: 0; }
.callscroll.no-scrub .call-deck {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin: 0 -13px; padding: 2px 13px 8px;
}
.callscroll.no-scrub .call-deck::-webkit-scrollbar { display: none; }
.callscroll.no-scrub .call-card {
  position: relative; opacity: 1 !important; transform: none !important;
  flex: 0 0 88%; scroll-snap-align: center;
}
/* per-card Local Score badge: only in the mobile swipe carousel (desktop uses the floating chip) */
.call-card .cardscore { display: none; }
.callscroll.no-scrub .call-card .cardscore { display: inline-flex; position: absolute; top: 8px; left: 8px; z-index: 4; }
.callscroll.no-scrub .call-score { display: none; }

@media (max-width: 1000px) {
  /* keep the scroll-scrub on mobile: pinned phone, picks switch as you scroll */
  .callscroll { height: 300vh; }
  /* anchor content just below the fixed nav (not vertically centered, so the
     title never hides behind the nav) and let motion.js scale the phone to fit */
  .callscroll-sticky { min-height: 100vh; padding: 16px 18px; align-items: flex-start; padding-top: var(--call-pt, 76px); }
  .callscroll .call-rail { display: none; }   /* compact so the phone is visible while pinned */
  .callscroll .bv-sub { display: none; }
  .callscroll .copy { margin-bottom: 6px; }
  .callscroll .bv-h { font-size: 26px; }
  /* scale the whole stage (phone + score chip) so heading + phone fit one view */
  .callscroll .bv-stage { margin-top: 12px; transform: scale(var(--call-scale, 1)); transform-origin: top center; }
  .call-rrow.on { transform: none; }
  /* Local Score: a small chip popping out of the phone's right edge, beside the photo */
  .call-score {
    top: 196px; right: -22px; left: auto; gap: 6px;
    padding: 7px 10px 7px 7px; border-radius: 13px;
  }
  .call-score .la-spill.lg { width: 38px; height: 38px; font-size: 14px; }
  .call-score .lbl { font-size: 7.5px; }
}

/* ---------- +FRIENDS: result-row glow + spill shimmer ---------- */
@media (prefers-reduced-motion: no-preference) {
  #friends .la-plan .card .la-srow.fr-glow {
    animation: frGlow 3.2s ease-in-out infinite;
  }
}
@keyframes frGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(202,164,46,0.0), inset 0 0 0 1px #efdf94; }
  50% { box-shadow: 0 14px 30px -16px rgba(202,164,46,0.55), 0 0 0 3px rgba(234,194,74,0.18), inset 0 0 0 1px #e7cf6a; }
}

/* safety net: if the page falls back to force-visible, still fill the score bars */
body.force-visible .bv-score-rows .r .fill { width: var(--w) !important; }

/* ============================================================
   +FRIENDS — animated 6-step flow inside the phone
   ============================================================ */
.ff-pill { display: inline-block; margin-bottom: 2px; line-height: 0; }
#friends .copy .bv-h { margin-top: 6px; }
.ff-pill svg { display: block; filter: drop-shadow(0 10px 22px rgba(10,61,92,0.18)); }

.ff-flow {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background: #FBFDFF;
  --ffb:#CCE9F7; --ffbd:#A8D4F0; --ffnv:#0A3D5C; --ffcr:#FFF3BC;
  --ffci:#5C4800; --ffmut:#8a8f95; --ffln:#ececec; --ffink:#1a1a1a;
}
.ff-screen {
  position: absolute; inset: 0; padding: 17px 15px 16px;
  display: flex; flex-direction: column; gap: 11px;
  opacity: 0; transform: translateY(16px) scale(0.985);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none; overflow: hidden;
}
.ff-screen.on { opacity: 1; transform: none; }
.ff-screen.out { opacity: 0; transform: translateY(-14px) scale(0.985); }

.ff-t { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--ffink); font-size: 21px; line-height: 1.16; }
.ff-sub { font: 400 13px/1.45 var(--sans); color: var(--ffmut); }
.ff-sub.ff-tight { font-size: 12.5px; }
.ff-center { text-align: center; }
.ff-lbl { font: 600 12px/1.2 var(--sans); color: var(--ffmut); }
.ff-mini { font: 500 12px/1 var(--sans); color: var(--ffmut); }
.ff-note { font: 600 13px/1.4 var(--sans); color: #3a3f47; }

.ff-dots { display: flex; gap: 6px; justify-content: center; }
.ff-d { width: 7px; height: 7px; border-radius: 4px; background: #e7e9ec; transition: width 0.3s, background 0.3s; }
.ff-d.ff-don { width: 22px; background: var(--ffbd); }

.ff-card { background: #fff; border: 1px solid var(--ffln); border-radius: 18px; padding: 13px; display: flex; gap: 12px; align-items: center; }
.ff-ic { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; }
.ff-ic svg { width: 18px; height: 18px; }
.ff-ic.cream { background: var(--ffcr); color: var(--ffci); }
.ff-ic.blue { background: #EAF6FC; }
.ff-ic.mut { background: #F4F5F6; }
.ff-st { font: 600 15px/1.2 var(--sans); color: var(--ffink); }
.ff-ss { font: 400 12px/1.4 var(--sans); color: var(--ffmut); margin-top: 3px; }

.ff-stepper { display: flex; align-items: center; justify-content: center; gap: 22px; }
.ff-step { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ffln); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 21px; color: var(--ffink); }
.ff-num { width: 74px; height: 74px; border-radius: 50%; background: var(--ffb); border: 1px solid var(--ffbd); display: flex; align-items: center; justify-content: center; color: var(--ffnv); font-size: 30px; font-weight: 600; }

.ff-btn { background: var(--ffb); border: 1px solid var(--ffbd); border-radius: 999px; padding: 13px; text-align: center; color: var(--ffnv); font: 600 15px/1 var(--sans); }
.ff-btn2 { background: #fff; border: 1px solid var(--ffln); border-radius: 999px; padding: 12px; text-align: center; color: var(--ffink); font: 600 14px/1 var(--sans); }
.ff-bottom { margin-top: auto; }

.ff-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ff-ch { font: 500 13px/1 var(--sans); border: 1px solid #ebebeb; border-radius: 999px; padding: 7px 12px; color: #666; background: #fff; }
.ff-ch.ff-chOn { background: var(--ffb); border-color: var(--ffbd); color: var(--ffnv); font-weight: 600; }
.ff-ch.ff-bd { border-color: var(--ffbd); }

.ff-seg { display: flex; border: 1px solid var(--ffln); border-radius: 12px; overflow: hidden; }
.ff-sgi { flex: 1; text-align: center; padding: 10px 0; font: 500 13px/1 var(--sans); color: var(--ffmut); }
.ff-sgi.ff-sgOn { background: var(--ffb); color: var(--ffnv); font-weight: 600; }

.ff-cream { background: var(--ffcr); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.ff-ci { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--ffci); font-size: 18px; }
.ff-kk { font: 600 10.5px/1 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ffci); opacity: 0.74; }
.ff-kk.ff-gold { color: #9a7e2e; opacity: 1; }
.ff-code { background: var(--ffcr); border-radius: 18px; padding: 14px; display: flex; align-items: center; justify-content: space-between; }
.ff-codeval { font-family: var(--serif); font-weight: 700; color: var(--ffci); letter-spacing: 2px; font-size: 20px; margin-top: 3px; }
.ff-share { background: var(--ffci); color: var(--ffcr); font: 600 13px/1 var(--sans); padding: 9px 16px; border-radius: 999px; }
.ff-invite { background: var(--ffcr); border-radius: 18px; padding: 15px 15px 14px; display: flex; flex-direction: column; gap: 11px; }
.ff-linkval { font: 700 16px/1.25 var(--sans); color: var(--ffci); word-break: break-all; }
.ff-linkbtns { display: flex; gap: 10px; }
.ff-lbtn { flex: 1; text-align: center; background: rgba(255,255,255,0.6); border: 1px solid rgba(92,72,0,0.28); border-radius: 13px; padding: 11px 8px; font: 600 13.5px/1 var(--sans); color: var(--ffci); }

.ff-avs { display: flex; }
.ff-avs span + span { margin-left: -8px; }
.ff-iav { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 13px/1 var(--sans); border: 2px solid #fff; }
.ff-avs.sm .ff-iav { width: 28px; height: 28px; }

.ff-toprow { display: flex; justify-content: space-between; align-items: center; }
.ff-tg { border: 1px solid var(--ffln); border-radius: 999px; overflow: hidden; font: 500 12px/1 var(--sans); display: flex; }
.ff-tg span { padding: 6px 13px; color: #9aa0a6; }
.ff-tg span.on { background: var(--ffb); color: var(--ffnv); font-weight: 600; }

.ff-pk { background: #fff; border: 1px solid var(--ffln); border-radius: 14px; padding: 9px; display: flex; gap: 11px; align-items: center; }
.ff-pkb { flex: 1; min-width: 0; }
.ff-th { width: 48px; height: 48px; border-radius: 11px; flex: none; overflow: hidden; background: #eadfae; }
.ff-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-pn { font-family: var(--serif); font-weight: 700; font-size: 15.5px; color: var(--ffink); }
.ff-pm { font: 400 12px/1.3 var(--sans); color: var(--ffmut); margin-top: 2px; }
.ff-bdg { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font: 600 14px/1 var(--sans); }
.ff-bdg.gold { background: #f4cd4f; color: #3b320f; }
.ff-bdg.blue { background: #c8eafa; color: #0e4262; }

.ff-pgr { font: 600 10px/1 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ffmut); }
.ff-lrow { background: #fff; border: 1px solid var(--ffln); border-radius: 16px; padding: 11px; display: flex; align-items: center; gap: 11px; }
.ff-pll { font: 600 12px/1 var(--sans); padding: 5px 11px; border-radius: 999px; border: 1px solid; }
.ff-pll.mut { border-color: var(--ffln); color: var(--ffmut); }
.ff-pll.done { background: var(--ffb); border-color: var(--ffbd); color: var(--ffnv); }

@media (prefers-reduced-motion: reduce) {
  .ff-screen { transition: opacity 0.3s ease; transform: none; }
  .ff-screen.out { transform: none; }
}

/* ---------- Sources orbit tiles: motion handled by motion.js (revolution) ---------- */