/*
 * App pieces: shared by every page that shows the app.
 *
 * October 2026. The homepage features section (#630) introduced four
 * things the rest of the site now uses:
 *  - icon chips in the app's role colours (frontend IconChip.jsx): mint
 *    for you and help, blue for boundaries and structure, coral for spend
 *    and patterns to watch, gold for milestones and the check-in, slate
 *    for neutral. Colour is a role, never decoration;
 *  - .mf-vig, a recessed screen holding a small HTML piece of the app;
 *  - .mf-edge, one band of light across a card's top edge as it arrives;
 *  - play once. landing.js arms each .mf-play-group (never under reduced
 *    motion, never without IntersectionObserver); every .mf-play inside
 *    waits on its first frame until it scrolls into view, plays once and
 *    rests. Unarmed IS the finished state, so a visitor without the
 *    script sees every piece complete.
 * Two lines from the app hold on every page: money sent to gambling
 * operators never counts or grows, and nothing runs a highlight across a
 * set of choices (it reads as a roulette spin). scripts/tests/
 * test_landing_regressions.py pins both.
 */
:root {
  --mf-vig-bg: #0C1A2E;
  --mf-vig-line: rgba(255, 255, 255, .08);
  --mf-vig-ink: #F4FAFA;
  --mf-vig-muted: #B4C2D0;
  --mf-vig-faint: #93A3B8;
  --mf-mint-ink: #5EE7D1;
  --mf-ease: cubic-bezier(.22, 1, .36, 1);
  --mf-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Icon chips: the app's IconChip, one gradient per role. The ink is
   the role's, never the caller's. */
.mf-chip {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 4px rgba(0, 0, 0, .25), 0 6px 14px var(--mf-chip-glow);
}
.mf-chip svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mf-chip--md { width: 40px; height: 40px; border-radius: 12px; }
.mf-chip--md svg { width: 18px; height: 18px; }
.mf-chip--sm { width: 32px; height: 32px; border-radius: 10px; }
.mf-chip--sm svg { width: 16px; height: 16px; }
.mf-chip--mint {
  background: linear-gradient(160deg, #8AF7E3, #00BFA5 60%, #00846F);
  color: #06251F;
  --mf-chip-glow: rgba(0, 191, 165, .40);
}
.mf-chip--blue {
  background: linear-gradient(160deg, #9CC2FF, #3B8BFF 55%, #1F4FCC);
  color: #FFFFFF;
  --mf-chip-glow: rgba(59, 139, 255, .40);
}
.mf-chip--coral {
  background: linear-gradient(160deg, #FF8E6E, #E4572E 60%, #B23A16);
  color: #FFFFFF;
  --mf-chip-glow: rgba(228, 87, 46, .35);
}
.mf-chip--gold {
  background: linear-gradient(160deg, #FFE29A, #FFC94D 55%, #D99A12);
  color: #5A3B00;
  --mf-chip-glow: rgba(255, 201, 77, .35);
}
.mf-chip--slate {
  background: linear-gradient(160deg, #5F6B85, #3A4560 60%, #242C40);
  color: #FFFFFF;
  --mf-chip-glow: rgba(0, 0, 0, .30);
}

/* The piece of the app: a recessed screen inside the card. */
.mf-vig {
  container-type: inline-size;
  position: relative;
  margin-top: 24px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--mf-vig-line);
  background: var(--mf-vig-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 28px rgba(0, 0, 0, .28);
  color: var(--mf-vig-ink);
  font-size: 13px;
  line-height: 1.4;
}
.mf-vig b { font-weight: 700; }
.mf-vig small { display: block; font-size: 11px; }
.mf-vig-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mf-vig-faint);
}
.mf-vig-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8AF7E3, #00BFA5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 16px rgba(0, 191, 165, .3);
  color: #06251F;
  font-size: 13px;
  font-weight: 700;
}
/* The app's Sheen band, parked off the left edge until it plays. */
.mf-vig-btn::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}

/* Role tints for small marks beside words: an eyebrow pill, a tick in a
   list. The same five roles as the chips, at the strength of a label. */
.mf-role-mint  { --mf-role-tint: rgba(0, 191, 165, .12);  --mf-role-rim: rgba(0, 191, 165, .30);   --mf-role-ink: #5EE7D1; }
.mf-role-blue  { --mf-role-tint: rgba(59, 139, 255, .14); --mf-role-rim: rgba(156, 194, 255, .35); --mf-role-ink: #A9CBFF; }
.mf-role-coral { --mf-role-tint: rgba(228, 87, 46, .14);  --mf-role-rim: rgba(255, 142, 110, .35); --mf-role-ink: #FFA285; }
.mf-role-gold  { --mf-role-tint: rgba(255, 201, 77, .12); --mf-role-rim: rgba(255, 226, 154, .35); --mf-role-ink: #FFD27A; }
.mf-role-pill {
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--mf-role-rim);
  background: var(--mf-role-tint);
}
.mf-role-pill span {
  color: var(--mf-role-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mf-role-tick {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mf-role-tint);
  color: var(--mf-role-ink);
}
.mf-role-tick svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The edge light: one band across a card's top edge as it arrives. The
   card clips it, so the band never paints outside the rounded corners. */
.mf-edge {
  position: relative;
  overflow: hidden;
}
.mf-edge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, rgba(138, 247, 227, 0), rgba(138, 247, 227, .95) 50%, rgba(138, 247, 227, 0));
  box-shadow: 0 0 14px 1px rgba(0, 191, 165, .5);
  opacity: 0;
  transform: translateX(-105%);
  pointer-events: none;
}
.mf-play-group.is-armed .mf-edge.mf-play::after {
  animation: mf-edge 1300ms var(--mf-ease) 250ms both;
}

/* ── Play once ──
   Armed: every animation inside an item waits at its first frame until
   the item is marked [data-play]. Fill mode both holds the first frame
   through any delay and the last frame for good, so an item plays once
   and rests on the state it shows unarmed. */
.mf-play-group.is-armed .mf-play:not([data-play]),
.mf-play-group.is-armed .mf-play:not([data-play])::after,
.mf-play-group.is-armed .mf-play:not([data-play]) *,
.mf-play-group.is-armed .mf-play:not([data-play]) *::before,
.mf-play-group.is-armed .mf-play:not([data-play]) *::after {
  animation-play-state: paused !important;
}
@keyframes mf-edge {
  0% { opacity: 0; transform: translateX(-105%); }
  12%, 82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(245%); }
}
@keyframes mf-rise {
  from { opacity: 0; transform: translateY(8px); }
}
@keyframes mf-settle {
  from { opacity: 0; transform: translateY(4px); }
}
@keyframes mf-tick {
  from { opacity: 0; transform: scale(.4) rotate(-45deg); }
}
@keyframes mf-sheen {
  to { transform: translateX(420%) skewX(-18deg); }
}
@keyframes mf-fade-in { from { opacity: 0; } }
@keyframes mf-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mf-select { from { transform: scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  /* landing.js never arms under reduced motion; this is the backstop. */
  .mf-play-group *,
  .mf-play-group *::before,
  .mf-play-group *::after {
    animation: none !important;
  }
}