/* =========================================================
   BRIDGLY WEBSITE — BRAND CSS CONTRACT
   ---------------------------------------------------------
   This file is the single source of truth for the marketing
   site's visual language. JSX components MUST consume these
   tokens via var(--w-*) — never inline hex, rgb, or px font
   sizes. CI lint enforces this (see scripts/brand-lint.mjs).

   Naming
     --w-*         Website-scoped tokens. Prefix prevents
                   collisions with the portal's --b-* tokens
                   when both ship in the same page.
     --w-c-*       Colour
     --w-fs-*      Font size
     --w-fw-*      Font weight
     --w-ls-*      Letter spacing
     --w-lh-*      Line height
     --w-s-*       Spacing
     --w-r-*       Radius
     --w-z-*       Elevation / z-index

   Owner: Terence (CODEOWNERS pin)
   Changes require an ADR + brand sign-off.
   ========================================================= */

/* ── Fonts: Geist + Geist Mono, weights pinned ─────────── */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ── Colour: ink scale ──────────────────────────────── */
  --w-c-ink:        oklch(18% 0.012 255);
  --w-c-ink-dim:    oklch(42% 0.008 255);
  --w-c-ink-mute:   oklch(60% 0.006 255);
  --w-c-line:       oklch(90% 0.004 255);
  --w-c-line-soft:  oklch(94% 0.003 255);
  --w-c-bg:         oklch(98% 0.003 255);
  --w-c-paper:      #ffffff;

  /* ── Colour: brand (Bridgly green) ──────────────────── */
  --w-c-brand:      oklch(54% 0.16  146);
  --w-c-brand-soft: oklch(72% 0.18  146);
  --w-c-brand-tint: oklch(94% 0.03  146);
  --w-c-brand-deep: oklch(42% 0.14  146);

  /* ── Colour: signal ─────────────────────────────────── */
  --w-c-amber:      oklch(70% 0.14  75);
  --w-c-red:        oklch(58% 0.18  25);

  /* ── Colour: dark hero (only legal use of dark surfaces) */
  --w-c-hero-bg-1:  #14181F;
  --w-c-hero-bg-2:  #0A0A0A;
  --w-c-hero-bg-3:  #050505;
  --w-c-hero-fg:    #F2F2F2;
  --w-c-hero-fg-d:  rgba(242, 242, 242, 0.62);
  --w-c-hero-fg-m:  rgba(242, 242, 242, 0.40);
  --w-c-hero-line:  rgba(242, 242, 242, 0.22);
  --w-c-hero-pulse: #A78BFA;   /* learning return — purple */
  --w-c-hero-learn: #5AA8FF;   /* learning arc    — cyan   */
  --w-c-hero-mist:  #F87171;   /* mistake mark    — red    */

  /* ── Type: families ─────────────────────────────────── */
  --w-ff-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-ff-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Type: scale (modular, 1.200 minor third) ───────── */
  --w-fs-meta:    11px;   /* eyebrow, mono caps */
  --w-fs-caption: 12px;
  --w-fs-body-s:  13.5px;
  --w-fs-body:    15px;
  --w-fs-body-l:  17px;
  --w-fs-lead:    19px;   /* hero subhead */
  --w-fs-h6:      22px;
  --w-fs-h5:      26px;
  --w-fs-h4:      32px;
  --w-fs-h3:      38px;   /* section heads */
  --w-fs-h2:      48px;   /* page heads */
  --w-fs-h1:      64px;   /* hero (default) */
  --w-fs-display: 76px;   /* hero (large variant) */

  /* ── Type: weight ───────────────────────────────────── */
  --w-fw-regular:  400;
  --w-fw-medium:   500;
  --w-fw-semi:     600;
  --w-fw-bold:     700;

  /* ── Type: tracking ─────────────────────────────────── */
  --w-ls-display: -0.028em;
  --w-ls-h:       -0.025em;
  --w-ls-h-tight: -0.030em;
  --w-ls-body:    -0.005em;
  --w-ls-meta:     0.14em;   /* eyebrow caps */
  --w-ls-mono:     0.10em;

  /* ── Type: leading ──────────────────────────────────── */
  --w-lh-display: 1.02;
  --w-lh-h:       1.10;
  --w-lh-body:    1.55;
  --w-lh-tight:   1.30;

  /* ── Spacing scale (4px base) ───────────────────────── */
  --w-s-1:   4px;
  --w-s-2:   8px;
  --w-s-3:   12px;
  --w-s-4:   16px;
  --w-s-5:   20px;
  --w-s-6:   24px;
  --w-s-8:   32px;
  --w-s-10:  40px;
  --w-s-12:  48px;
  --w-s-14:  56px;
  --w-s-16:  64px;
  --w-s-20:  80px;
  --w-s-24:  96px;
  --w-s-28:  112px;

  /* ── Radius ─────────────────────────────────────────── */
  --w-r-1:   6px;
  --w-r-2:   8px;
  --w-r-3:   10px;
  --w-r-4:   12px;
  --w-r-5:   14px;
  --w-r-6:   20px;
  --w-r-pill: 999px;

  /* ── Layout containers ──────────────────────────────── */
  --w-w-prose:  640px;
  --w-w-narrow: 880px;
  --w-w-page:   1100px;
  --w-w-wide:   1280px;

  /* ── Elevation ──────────────────────────────────────── */
  --w-z-nav:    50;
  --w-z-modal:  100;
}

/* ── Reset + base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--w-c-bg);
  color: var(--w-c-ink);
  font-family: var(--w-ff-sans);
  font-size: var(--w-fs-body);
  line-height: var(--w-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* ── Animation primitives ──────────────────────────────── */
@keyframes w-bloom-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@keyframes w-flow-dash {
  to { stroke-dashoffset: -56; }
}

@keyframes w-loop-flow-dash {
  to { stroke-dashoffset: -42; }
}

@keyframes w-soft-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}

@keyframes w-scan {
  0%   { transform: translateX(-120%); opacity: 0; }
  20%  { opacity: 0.75; }
  80%  { opacity: 0.75; }
  100% { transform: translateX(220%); opacity: 0; }
}

@keyframes w-orbit-cw {
  to { transform: rotate(360deg); }
}

@keyframes w-bloom-loop-spin {
  to { transform: rotate(360deg); }
}

@keyframes w-loop-ping {
  0%   { transform: scale(0.15); opacity: 0; }
  28%  { opacity: 0.85; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes w-loop-pulse {
  0%, 100% { opacity: 0.58; stroke-width: 2px; }
  50%      { opacity: 1; stroke-width: 3px; }
}

@keyframes w-loop-ripple {
  0%   { transform: scale(0.12); opacity: 0; }
  12%  { opacity: 0.38; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes w-loop-node-phase {
  0%, 12%  { transform: scale(1.1); opacity: 1; }
  16%, 100% { transform: scale(0.88); opacity: 0.96; }
}

@keyframes w-loop-node-shell {
  0%, 12% {
    fill: var(--w-loop-node-active-fill, var(--w-c-brand-tint));
    stroke: var(--w-loop-node-active-stroke, var(--w-c-brand));
    stroke-width: 2.3px;
  }
  16%, 100% {
    fill: var(--w-loop-node-rest-fill, var(--w-c-paper));
    stroke: var(--w-loop-node-rest-stroke, var(--w-c-line));
    stroke-width: 1.4px;
  }
}

@keyframes w-loop-node-index {
  0%, 12%  { fill: var(--w-loop-node-active-stroke, var(--w-c-brand)); opacity: 1; }
  16%, 100% { fill: var(--w-loop-node-index-rest, var(--w-c-ink-mute)); opacity: 0.88; }
}

@keyframes w-loop-node-label {
  0%, 12%  { fill: var(--w-loop-node-label-active, var(--w-c-ink)); opacity: 1; }
  16%, 100% { fill: var(--w-loop-node-label-rest, var(--w-c-ink)); opacity: 0.94; }
}

@keyframes w-loop-node-ping {
  0%   { transform: scale(0.62); opacity: 0; }
  4%   { opacity: 0.44; }
  14%  { transform: scale(1.34); opacity: 0; }
  15%, 100% { transform: scale(1.34); opacity: 0; }
}

@keyframes w-loop-tracer-dot {
  0%, 2%      { opacity: 0; }
  4%, 15.6%   { opacity: 1; }
  16.7%, 100% { opacity: 0; }
}

.w-bloom-mark .w-bloom-part {
  transform-box: fill-box;
  transform-origin: center;
}

.w-bloom-mark--animated .w-bloom-part {
  animation: w-bloom-pulse 2.4s ease-in-out infinite;
}

.w-bloom-mark--animated .w-bloom-part:nth-child(2) { animation-delay: 120ms; }
.w-bloom-mark--animated .w-bloom-part:nth-child(3) { animation-delay: 240ms; }
.w-bloom-mark--animated .w-bloom-part:nth-child(4) { animation-delay: 360ms; }
.w-bloom-mark--animated .w-bloom-part:nth-child(5) { animation-delay: 480ms; }

.w-bloom-mark--loop-spin {
  animation: w-bloom-loop-spin 16s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.w-flow-line {
  stroke-dasharray: 9 11;
  animation: w-flow-dash 4.8s linear infinite;
}

.w-loop-svg .w-loop-flow-arc {
  stroke-dasharray: 2.6 8;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: w-loop-flow-dash 7.2s linear infinite;
}

.w-soft-float {
  animation: w-soft-float 6s ease-in-out infinite;
}

.w-scan-line {
  animation: w-scan 5s ease-in-out infinite;
}

.w-loop-svg .w-loop-orbit {
  animation: w-orbit-cw 24s linear infinite;
  transform-box: view-box;
  transform-origin: 280px 280px;
}

.w-loop-svg .w-loop-node-phase {
  animation: w-loop-node-phase 24s ease-in-out infinite;
  animation-delay: var(--w-loop-node-delay, 0s);
  opacity: 0.96;
  transform: scale(0.88);
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.w-loop-svg .w-loop-node-shell {
  animation: w-loop-node-shell 24s ease-in-out infinite;
  animation-delay: var(--w-loop-node-delay, 0s);
  fill: var(--w-loop-node-rest-fill, var(--w-c-paper));
  stroke: var(--w-loop-node-rest-stroke, var(--w-c-line));
  stroke-width: 1.4px;
}

.w-loop-svg .w-loop-node-index {
  animation: w-loop-node-index 24s ease-in-out infinite;
  animation-delay: var(--w-loop-node-delay, 0s);
  fill: var(--w-loop-node-index-rest, var(--w-c-ink-mute));
}

.w-loop-svg .w-loop-node-label {
  animation: w-loop-node-label 24s ease-in-out infinite;
  animation-delay: var(--w-loop-node-delay, 0s);
  fill: var(--w-loop-node-label-rest, var(--w-c-ink));
}

.w-loop-svg .w-loop-node-ping {
  animation: w-loop-node-ping 24s ease-out infinite;
  animation-delay: var(--w-loop-node-delay, 0s);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.w-loop-svg .w-loop-node-ping--2 {
  animation-delay: calc(var(--w-loop-node-delay, 0s) + 0.78s);
}

.w-loop-svg .w-loop-tracer-dot {
  animation: w-loop-tracer-dot 24s linear infinite;
  animation-delay: var(--w-loop-tracer-delay, 0s);
  filter: drop-shadow(0 0 8px rgba(102, 217, 147, 0.7));
  opacity: 0;
}

.w-loop-svg .w-loop-ping {
  animation: w-loop-ping 2.4s ease-out infinite;
  transform-box: view-box;
  transform-origin: 280px 80px;
}

.w-loop-svg .w-loop-recur {
  animation: w-loop-pulse 2.4s ease-in-out infinite;
}

.w-loop-svg .w-loop-flow-arc.w-loop-recur {
  animation: w-loop-pulse 2.4s ease-in-out infinite, w-loop-flow-dash 7.2s linear infinite;
}

.w-loop-svg .w-loop-ripple {
  animation: w-loop-ripple 8s ease-out infinite;
  transform-box: view-box;
  transform-origin: 280px 280px;
}

.w-loop-svg .w-loop-ripple--hero {
  stroke-dasharray: 2.6 10;
  stroke-linecap: round;
}

.w-loop-svg .w-loop-ripple--2 { animation-delay: 2.66s; }
.w-loop-svg .w-loop-ripple--3 { animation-delay: 5.33s; }

@media (prefers-reduced-motion: reduce) {
  .w-bloom-mark--animated .w-bloom-part,
  .w-bloom-mark--loop-spin,
  .w-flow-line,
  .w-loop-svg .w-loop-flow-arc,
  .w-soft-float,
  .w-scan-line,
  .w-loop-svg .w-loop-orbit,
  .w-loop-svg .w-loop-ping,
  .w-loop-svg .w-loop-node-phase,
  .w-loop-svg .w-loop-node-shell,
  .w-loop-svg .w-loop-node-index,
  .w-loop-svg .w-loop-node-label,
  .w-loop-svg .w-loop-node-ping,
  .w-loop-svg .w-loop-tracer-dot,
  .w-loop-svg .w-loop-recur,
  .w-loop-svg .w-loop-ripple {
    animation: none;
  }

  .w-loop-svg .w-loop-tracer-dot {
    opacity: 0;
  }

  .w-loop-svg .w-loop-node-phase--initial {
    opacity: 1;
    transform: scale(1.1);
  }

  .w-loop-svg .w-loop-node-phase--initial .w-loop-node-shell {
    fill: var(--w-loop-node-active-fill, var(--w-c-brand-tint));
    stroke: var(--w-loop-node-active-stroke, var(--w-c-brand));
    stroke-width: 2.3px;
  }

  .w-loop-svg .w-loop-node-phase--initial .w-loop-node-index {
    fill: var(--w-loop-node-active-stroke, var(--w-c-brand));
  }

  .w-loop-svg .w-loop-node-phase--initial .w-loop-node-label {
    fill: var(--w-loop-node-label-active, var(--w-c-ink));
  }
}

/* ── Utility classes (sparingly used; prefer tokens) ─── */
.w-eyebrow {
  font-family: var(--w-ff-mono);
  font-size: var(--w-fs-meta);
  color: var(--w-c-brand);
  letter-spacing: var(--w-ls-meta);
  text-transform: uppercase;
}

.w-mono {
  font-family: var(--w-ff-mono);
  letter-spacing: var(--w-ls-mono);
}