/* ============================================================================
   CoachedByLeoamf · SHARED proof components (real before/after + WhatsApp wins)
   Used across every funnel page so the social proof is identical everywhere.
   Depends only on tokens from styles.css (--panel, --emerald-2, --r-lg, --gold,
   --sh-2/3/4, --ink-*, --line-strong, --ease-out) and the .proof-strip /
   .marquee-track marquee engine in styles.css. Pair with /proof.js (lightbox).
   ========================================================================== */

/* ── Real before/after marquee (square collages, undistorted) ──────────────── */
.ba-track {
  align-items: stretch;
  /* noticeably quicker scroll so more results pass the eye (was 64s) */
  animation-duration: 44s;
}
.ba-card {
  position: relative;
  flex: 0 0 auto;
  height: clamp(220px, 46vw, 300px);
  aspect-ratio: var(--ar);
  margin-right: 14px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--sh-3);
}
/* desktop: bigger results cards so the wider carousel reads as more, larger proof */
@media (min-width: 860px) {
  .ba-card { height: clamp(280px, 26vw, 360px); }
}
.ba-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-stars {
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 2px;
  background: rgba(10, 10, 10, 0.6);
  padding: 3px 9px;
  border-radius: 99px;
  backdrop-filter: blur(4px);
}

/* ── Real WhatsApp testimonials ─────────────────────────────────────────────
   Each card is a clean, cropped screenshot of ONLY the client's own message
   (no phone status bar, no header, no coach replies, no stars, no pulled quote).
   The cards live in an auto-scrolling carousel that shows ~3 at a time and runs
   left to right continuously. It PAUSES while the pointer hovers it and RESUMES
   when the pointer leaves; a click only opens the full chat (it never freezes
   the scroll). `--wa-win` is the fixed screenshot-window height that keeps every
   card the same size regardless of how tall the underlying crop is.
   `--wa-card-w` is the fixed card width the marquee loop is measured against. */
.wa-rail {
  --wa-win: 230px;
  --wa-card-w: 74vw;
  position: relative;
  overflow: hidden;
  margin: clamp(28px, 6vw, 44px) calc(-1 * clamp(16px, 5vw, 28px)) 0;
  padding: 6px 0 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
/* the moving track: two identical sets of cards sit side by side and the track
   translates by exactly -50% for a seamless loop. Spacing lives on each card
   (margin-right), NOT flex gap, so one full set is exactly 50% of the track and
   the -50% loop has no visible jump (same technique as the before/after rail). */
.wa-marquee {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee 38s linear infinite;
}
@media (hover: hover) {
  .wa-rail:hover .wa-marquee { animation-play-state: paused; }
}
.wa-card {
  flex: 0 0 var(--wa-card-w);
  max-width: 300px;
  margin: 0 16px 0 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--sh-2);
  transition: transform 0.22s var(--ease-out), border-color 0.2s, box-shadow 0.22s;
}
/* three cards in view on tablet, with a partial fourth peeking */
@media (min-width: 620px) {
  .wa-rail { --wa-win: 240px; --wa-card-w: 300px; }
}
@media (min-width: 920px) {
  .wa-rail { --wa-win: 250px; --wa-card-w: 320px; }
  .wa-card { max-width: 320px; }
}
/* cards are static, non-interactive proof now: no hover lift, no click target. */
/* reduced motion: stop the auto-scroll and let the rail be swiped manually */
@media (prefers-reduced-motion: reduce) {
  .wa-rail {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .wa-rail::-webkit-scrollbar { display: none; }
  .wa-marquee {
    animation: none;
    width: max-content;
  }
  /* the duplicate (aria-hidden) set is redundant when not looping */
  .wa-marquee > [aria-hidden='true'] { display: none; }
}
/* the cropped-screenshot window: WhatsApp dark canvas, crop anchored top, a soft
   fade at the bottom so a tall crop that overflows the window reads as "more". */
.wa-crop {
  position: relative;
  display: block;
  width: 100%;
  height: var(--wa-win);
  margin: 0;
  padding: 0;
  border: 0;
  background: #0b141a;
  cursor: default;
  overflow: hidden;
  pointer-events: none;
}
.wa-crop img {
  width: 100%;
  height: auto;
  display: block;
}
.wa-crop::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 74%, rgba(11, 20, 26, 0.9));
}
/* the enlarge / fullscreen affordance is removed: cards are plain proof now. */
.wa-open { display: none !important; }
.wa-card-name {
  padding: 12px 16px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* ── Lightbox: full WhatsApp conversation ──────────────────────────────────── */
.wa-lb {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 40px;
  background: rgba(5, 8, 10, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: auto;
}
/* lightbox disabled: the enlarge overlay never opens any more. */
.wa-lb.open { display: none !important; }
.wa-lb-scroll {
  width: 100%;
  max-width: 420px;
}
.wa-lb-scroll img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--sh-4);
}
.wa-lb-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 121;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.18s;
}
.wa-lb-close:hover { background: rgba(255, 255, 255, 0.18); }

@media (prefers-reduced-motion: reduce) {
  .ba-track { animation: none !important; }
}

/* ── Keep the social-proof rails AUTO-SCROLLING even under reduced motion ──────
   The before/after + WhatsApp marquees are a deliberate, gentle, conversion-critical
   motion (a slow horizontal drift, not parallax/zoom). The reduced-motion fallback
   above turned them into static, manually-swiped strips, which ALSO triggers under
   iOS Low Power Mode (Safari reports prefers-reduced-motion there). On a phone that
   read as "the carousel is broken, I have to swipe it myself". This block re-asserts
   the loop for ONLY these two rails (loaded last so it wins the cascade), keeps them
   overflow-hidden like the desktop default, and re-shows the duplicated card set so
   the -50% loop stays seamless. */
@media (prefers-reduced-motion: reduce) {
  .proof-strip { overflow: hidden !important; }
  .marquee-track { animation: marquee 34s linear infinite !important; transform: none; }
  .marquee-track.ba-track { animation: marquee 44s linear infinite !important; }
  .wa-rail { overflow: hidden !important; }
  .wa-marquee { animation: marquee 38s linear infinite !important; }
  .wa-marquee > [aria-hidden='true'] { display: flex !important; }
}