/* Miracle v3 — the founding-places card. OWNER: MCL-SITE-REFERRAL-001-T16.
   Shared by /, /founding/ and /join/; driven by /js/counter.js. Do not edit css/base.css.

   Palette: brand tokens only — deep teal card, --gold for the number and the
   bar (gold is the rare colour, reserved for founding things), --mint at the
   bar's leading edge. No neon. Mobile-first; tuned at 360-390px.

   States ([data-counter-state] on .fcount):
     pending | none  -> "Founding places are open." + CTA, no number, no bar
     live | stale    -> Hurry! / N registered | N places left / bar + CTA (stale = muted)
   There is no "full" state: a reached goal extends by 500 (js/counter.js goalFor). */

.fcount {
  position:relative;
  align-self:stretch;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  gap:var(--s5);
  min-width:0;
  padding:clamp(22px,4vw,40px);
  border-radius:var(--r-lg);
  color:var(--cream);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(245,206,112,.22) 0%, rgba(245,206,112,0) 55%),
    linear-gradient(140deg, var(--ink) 0%, var(--deep) 55%, var(--deep2) 100%);
  box-shadow:0 18px 40px -18px rgba(7,60,72,.55), inset 0 0 0 1px rgba(245,206,112,.28);
}

.fcount p { margin:0; }
.fcount__emoji, .fcount__clock { font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }

/* The two readouts share one grid cell: the card is already as tall as the
   number will make it, so nothing below it moves when the number lands.
   visibility (not display) keeps the hidden state's height. */
.fcount__readout { display:grid; min-width:0; }
.fcount__readout > * { grid-area:1/1; align-self:start; min-width:0; }

.fcount__open {
  font-family:var(--heading); font-weight:800;
  font-size:clamp(1.25rem,4.6vw,1.6rem); line-height:1.3; color:#FFFFFF;
}

.fcount__number { display:flex; flex-direction:column; gap:var(--s2); min-width:0; }

.fcount__hurry {
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:6px 14px 6px 10px;
  border-radius:var(--r-pill);
  background:rgba(245,206,112,.16);
  box-shadow:inset 0 0 0 1px rgba(245,206,112,.45);
  font-family:var(--heading); font-weight:800;
  font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold);
}
.fcount__clock { display:inline-block; font-size:1.05rem; letter-spacing:0; animation:fcount-tick 2.4s var(--ease) infinite; transform-origin:50% 55%; }

/* Round 3 fix: two equal figures — registered | places left. Same size, same
   weight; only the colour tells them apart (white = people, gold = places). */
.fcount__stats {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4);
  margin-top:var(--s2);
}
.fcount .fcount__stat { display:flex; flex-direction:column; gap:var(--s2); min-width:0; }
.fcount__figure {
  font-family:var(--heading); font-weight:800; line-height:1;
  font-size:clamp(2.5rem,10.5vw,4.25rem);
  letter-spacing:-.03em;
  color:var(--gold);
  text-shadow:0 0 28px rgba(245,206,112,.45);
  font-variant-numeric:tabular-nums;
  /* reserve one line of the figure's own size before it exists */
  min-height:1em;
  overflow-wrap:anywhere;
}
.fcount__stat--taken .fcount__figure { color:#FFFFFF; text-shadow:0 0 28px rgba(255,255,255,.35); }
.fcount__stat-label {
  font-family:var(--heading); font-weight:700;
  font-size:clamp(.95rem,3.6vw,1.1rem); line-height:1.35; color:var(--cream);
}

/* ---------- the bar --------------------------------------------------------- */
.fcount__bar {
  position:relative;
  height:14px;
  margin-top:var(--s3);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
  overflow:hidden;
}
.fcount__fill {
  position:relative;
  display:block;
  height:100%;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--gold) 0%, #FBDD92 60%, var(--mint) 100%);
  box-shadow:0 0 14px rgba(245,206,112,.75);
  transition:width 1.4s cubic-bezier(.2,.7,.3,1);
  overflow:hidden;
}
/* a soft light sweeping along the filled part */
.fcount__fill::after {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 80%);
  transform:translateX(-100%);
  animation:fcount-sheen 2.8s ease-in-out 1.4s infinite;
}

.fcount__meta {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2) var(--s4);
  font-family:var(--heading); font-weight:700; font-size:.875rem; color:#D2EFDF;
}

/* ---------- the call to action ---------------------------------------------- */
.fcount__cta {
  align-self:stretch;
  justify-content:center;
  text-align:center;
  white-space:normal;
  padding-inline:var(--s4);
  font-size:1rem;
  box-shadow:0 10px 24px -10px rgba(245,206,112,.8);
}

/* ---------- states ---------------------------------------------------------- */
.fcount[data-counter-state="pending"] [data-counter-number] { visibility:hidden; }
/* no number (fetch failed / unconfigured): collapse the reserved space rather
   than leave an empty dark box. The only layout shift is on this rare path. */
.fcount[data-counter-state="none"] [data-counter-number] { display:none; }
.fcount[data-counter-state="live"]  [data-counter-open],
.fcount[data-counter-state="stale"] [data-counter-open] { visibility:hidden; }


/* a stale number is still a measurement — shown, but visibly muted */
.fcount[data-counter-state="stale"] .fcount__figure { opacity:.72; text-shadow:none; }

/* ---------- benefit bullets with an emoji (text unchanged) ------------------ */
.list-emoji { gap:var(--s3); }
.list-emoji > li { padding-left:34px; }
.list-emoji > li::before {
  content:attr(data-icon);
  top:.05em; width:auto; height:auto;
  background:none; box-shadow:none; border-radius:0;
  font-size:1.15rem; line-height:1.4;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

@media (min-width:851px) {
  .fcount__cta { align-self:flex-start; }
}

@keyframes fcount-sheen { 0% { transform:translateX(-100%); } 60%,100% { transform:translateX(100%); } }
@keyframes fcount-tick { 0%,70%,100% { transform:rotate(0); } 78% { transform:rotate(-12deg); } 86% { transform:rotate(10deg); } 94% { transform:rotate(-4deg); } }

@media (prefers-reduced-motion:reduce) {
  .fcount__fill { transition:none; }
  .fcount__fill::after, .fcount__clock { animation:none; }
}