/*!
 * Big Brain Labs — shared design tokens + components + safe visual polish.
 * ─────────────────────────────────────────────────────────────────────
 * NO BUILD STEP. Link on a page: <link rel="stylesheet" href="/polish.css">
 * (anim.js also injects this link automatically on marketing pages.)
 *
 * Layers in this file:
 *  1. Brand tokens (the ONE canonical palette — warm-cream brand from index)
 *  2. Accessibility polish (focus ring, selection, smooth scroll)
 *  3. .btn component system — written with :where() so every rule has ZERO
 *     specificity: any page-local button CSS always wins, whatever the load
 *     order. Safe to adopt incrementally.
 *  4. .bbl-nav / .bbl-footer — the shared shell used by the BBL-NAV v1 /
 *     BBL-FOOTER v1 inline markup blocks on doc-template pages.
 *  5. Motion vocabulary (blobs, gradient text, marquee, fade-up) — all
 *     inside prefers-reduced-motion: no-preference; the reduce block at the
 *     bottom is the global backstop.
 * ─────────────────────────────────────────────────────────────────────
 */

:root {
  /* ── Brand palette (canonical — matches index.html's warm-cream brand) ── */
  --bbl-navy: #0E1B47;          /* the one true navy */
  --bbl-navy-soft: #1a2960;
  --bbl-blue: #1F5BD7;
  --bbl-blue-bright: #2E7BFF;
  --bbl-teal: #2BB3A4;
  --bbl-teal-deep: #1F8A7E;     /* AA-contrast teal for links on cream/white */
  --bbl-gold: #FBC02D;
  --bbl-violet: #7c3aed;        /* sparing accent */
  --bbl-cream: #FAF6EE;
  --bbl-cream-deep: #F2EBDB;
  --bbl-paper: #FFFFFF;
  --bbl-ink: #0E1B47;
  --bbl-ink-soft: #3a4570;
  --bbl-ink-muted: #6c759a;
  --bbl-line: #e2e8f0;
  --bbl-amber: #FBC02D;         /* legacy alias → gold */
  --bbl-grad-brand: linear-gradient(95deg, var(--bbl-blue) 0%, var(--bbl-blue-bright) 50%, var(--bbl-teal) 100%);

  /* ── Fonts (pages load Google Fonts; these are the canonical stacks) ── */
  --bbl-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bbl-font-ui: 'Nunito', 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --bbl-font-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;

  /* ── Design tokens ── */
  --bbl-radius: 14px;
  --bbl-radius-lg: 20px;
  --bbl-shadow-sm: 0 2px 8px rgba(14, 27, 71, .06);
  --bbl-shadow-md: 0 10px 28px rgba(14, 27, 71, .10);
  --bbl-shadow-lg: 0 24px 60px rgba(14, 27, 71, .16);
  --bbl-ease: cubic-bezier(.22, .7, .2, 1);
  --bbl-focus: #2563eb;         /* stays high-contrast blue: a11y > brand */
}

/* ── Accessible focus ring (WCAG 2.2) — visible, high-contrast, keyboard-only.
   Uses :focus-visible so it never shows on mouse clicks. ── */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--bbl-focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Brand text selection ── */
::selection { background: rgba(37, 99, 235, .18); }

/* ── Consistent, smooth interactive transitions (additive) ── */
a, button {
  transition: color .15s var(--bbl-ease),
              background-color .15s var(--bbl-ease),
              box-shadow .18s var(--bbl-ease),
              transform .12s var(--bbl-ease);
}

/* ── Smooth in-page scrolling — but never for reduced-motion users ── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ════════════════════════════════════════════════════════════════════
   .btn component system — ZERO specificity via :where(); page CSS wins.
   Variants: .btn-primary (teal) .btn-gold .btn-navy .btn-ghost
   Sizes:    .btn-sm .btn-lg
   ════════════════════════════════════════════════════════════════════ */
:where(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--bbl-font-ui);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1;
  padding: 13px 24px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
:where(.btn-primary) {
  background: var(--bbl-teal);
  border-color: var(--bbl-teal);
  color: #fff;
}
:where(.btn-primary):hover { background: var(--bbl-teal-deep); border-color: var(--bbl-teal-deep); }
:where(.btn-gold) {
  background: var(--bbl-gold);
  border-color: var(--bbl-gold);
  color: var(--bbl-navy);
}
:where(.btn-gold):hover { background: #f3b41f; }
:where(.btn-navy) {
  background: var(--bbl-navy);
  border-color: var(--bbl-navy);
  color: #fff;
}
:where(.btn-navy):hover { background: var(--bbl-navy-soft); }
:where(.btn-ghost) {
  background: var(--bbl-paper);
  border-color: var(--bbl-line);
  color: var(--bbl-ink);
}
:where(.btn-ghost):hover { border-color: var(--bbl-ink-muted); }
:where(.btn-sm) { padding: 9px 16px; font-size: 13.5px; }
:where(.btn-lg) { padding: 16px 30px; font-size: 17px; }

@media (prefers-reduced-motion: no-preference) {
  :where(.btn):hover { transform: translateY(-1px); box-shadow: var(--bbl-shadow-md); }
  /* sheen sweep on solid primary CTAs */
  :where(.btn-primary, .btn-gold, .btn-navy)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .55s var(--bbl-ease);
    pointer-events: none;
  }
  :where(.btn-primary, .btn-gold, .btn-navy):hover::after { transform: translateX(120%); }
}

/* ── Nicer default active feel on primary buttons (additive, opt-out safe) ── */
.btn:active, .cta-primary:active, .price-cta:active, .tier-cta:active { transform: translateY(1px); }

/* ════════════════════════════════════════════════════════════════════
   .bbl-nav / .bbl-footer — shared shell for the BBL-NAV v1 / BBL-FOOTER v1
   inline blocks (doc-template pages). Unique class names: no collisions.
   ════════════════════════════════════════════════════════════════════ */
.bbl-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 246, 238, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(14, 27, 71, .08);
}
.bbl-nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.bbl-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.bbl-nav-brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
}
.bbl-nav-name {
  display: flex;
  flex-direction: column;
  font-family: var(--bbl-font-ui);
  font-weight: 900;
  font-size: 16.5px;
  color: var(--bbl-navy);
  line-height: 1.1;
}
.bbl-nav-name em {
  font-style: normal;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--bbl-ink-muted);
}
.bbl-nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.bbl-nav-links a {
  font-family: var(--bbl-font-ui);
  font-weight: 800;
  font-size: 14px;
  color: var(--bbl-ink-soft);
  text-decoration: none;
}
.bbl-nav-links a:hover { color: var(--bbl-blue); }
@media (max-width: 820px) {
  .bbl-nav-links { display: none; }   /* brand + CTA only on small screens */
}

.bbl-footer {
  background: var(--bbl-navy);
  color: rgba(255, 255, 255, .8);
  text-align: center;
  padding: 44px 20px 34px;
  margin-top: 64px;
  font-family: var(--bbl-font-ui);
}
.bbl-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.bbl-footer-brand img { width: 38px; height: 38px; border-radius: 10px; }
.bbl-footer-brand strong {
  font-weight: 900;
  font-size: 19px;
  color: #fff;
}
.bbl-footer-tag {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 16px;
}
.bbl-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  max-width: 760px;
  margin: 0 auto 16px;
  font-size: 12.5px;
}
.bbl-footer-links a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  font-weight: 700;
}
.bbl-footer-links a:hover { color: #fff; }
.bbl-footer-contact {
  display: inline-block;
  color: var(--bbl-gold);
  font-weight: 800;
  font-size: 13.5px;
  text-decoration: none;
  margin-bottom: 14px;
}
.bbl-footer-note {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .55);
}
.bbl-footer-copy {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
}

/* ════════════════════════════════════════════════════════════════════
   Motion vocabulary — decorative, all gated behind no-preference.
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  @keyframes bbl-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  /* Soft drifting color blobs — decorative background accents.
     Usage: <div class="bbl-blob bbl-blob-teal" aria-hidden="true"></div>
     inside a position:relative container with overflow:hidden. */
  @keyframes bbl-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(36px, -28px) scale(1.12); }
  }
  .bbl-blob {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .32;
    pointer-events: none;
    animation: bbl-drift 18s var(--bbl-ease) infinite alternate;
    z-index: 0;
  }
  .bbl-blob-teal { background: var(--bbl-teal); }
  .bbl-blob-gold { background: var(--bbl-gold); animation-duration: 23s; }
  .bbl-blob-blue { background: var(--bbl-blue-bright); animation-duration: 27s; }

  /* Animated gradient headline accent.
     Usage: <span class="bbl-gradient-text">…</span> */
  @keyframes bbl-gradient-shift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
  }
  .bbl-gradient-text {
    background: linear-gradient(95deg, var(--bbl-blue), var(--bbl-teal), var(--bbl-blue-bright), var(--bbl-blue));
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: bbl-gradient-shift 7s linear infinite alternate;
  }

  /* Marquee — duplicated-track pattern: put the SAME content twice inside
     .bbl-marquee-track; the track scrolls -50% and loops seamlessly. */
  @keyframes bbl-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .bbl-marquee { overflow: hidden; }
  .bbl-marquee-track {
    display: inline-flex;
    gap: 40px;
    white-space: nowrap;
    width: max-content;
    animation: bbl-marquee 34s linear infinite;
  }
  .bbl-marquee:hover .bbl-marquee-track { animation-play-state: paused; }

  /* Gentle hover-lift on common cards. Hover-only, so it can never shift
     the resting layout — safe site-wide. */
  a.app-card, .price-card, .tier, .card, .cred, .acard, .subject {
    transition: transform .18s var(--bbl-ease), box-shadow .18s var(--bbl-ease);
  }
  a.app-card:hover, .price-card:hover, .card:hover, .acard:hover {
    transform: translateY(-3px);
    box-shadow: var(--bbl-shadow-md);
  }
}

/* Static fallbacks when motion is reduced: content stays fully visible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .bbl-blob { display: none; }
  .bbl-marquee { overflow-x: auto; }
  .bbl-gradient-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--bbl-blue);
  }
}