/* ============================================================
   INTENT POP — FOUNDATION · treatment.css (rebuild v2)
   The Wild Burst as a kit of parts. F1 scope: the mark + the
   wordmark lockup as ONE canonical, reusable partial so the
   logo can never drift across instances again.
   (Textures + volume scale arrive in the Treatment chunk, F6.)
   ============================================================ */

/* ===== The Wild Burst mark ===== */
.treat-burst {
  display: inline-block; width: 1em; height: 1em;
  background: var(--treat-mark-fill);
  -webkit-mask: var(--treat-mark-mask) center / contain no-repeat;
          mask: var(--treat-mark-mask) center / contain no-repeat;
}
.treat-burst.ink      { background: var(--text-primary); }
.treat-burst.knockout { background: var(--surface-page); }
.treat-burst.on-poppy { background: var(--p-ink); }

/* ===== THE WORDMARK LOCKUP — Brand Book §10.1 =====
   Canonical construction: "Intent P[burst]p" — the burst IS the
   second 'o' in "Pop". Bricolage ExtraBold, tight tracking.
   Markup:
     <span class="wordmark" aria-label="Intent Pop">Intent&nbsp;P<i
        class="wm-burst" aria-hidden="true"></i><span class="wm-o">o</span>p</span>
   The hidden 'o' keeps it readable as "Intent Pop" for assistive tech.
   ================================================================= */
.wordmark {
  font-family: var(--p-font-display);
  font-weight: var(--p-w-extra);
  letter-spacing: var(--p-track-wordmark);   /* -0.038em */
  color: var(--text-primary);
  display: inline-flex; align-items: center;
  line-height: 1; white-space: nowrap; text-decoration: none;
}
.wordmark .wm-burst {
  display: inline-block; width: 0.7em; height: 0.7em; vertical-align: -0.04em;
  background: var(--accent);
  -webkit-mask: var(--treat-mark-mask) center / contain no-repeat;
          mask: var(--treat-mark-mask) center / contain no-repeat;
}
.wordmark.reversed { color: var(--p-cream); }           /* on ink / pine */
.wordmark.on-poppy { color: var(--p-ink); }             /* mono on poppy */
.wordmark.on-poppy .wm-burst { background: var(--p-ink); }

/* visually-hidden 'o' so the integrated-burst wordmark reads "Pop" to AT */
.wm-o { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== Headline flourish — Brand Book hero =====
   The burst TRAILS the word "pop" (it does NOT replace a letter here).
   Markup:  Make intent pop<i class="wm-flourish" aria-hidden="true"></i> */
.wm-flourish {
  display: inline-block; width: 0.62em; height: 0.62em; vertical-align: -0.02em; margin-left: 0.06em;
  background: var(--accent);
  -webkit-mask: var(--treat-mark-mask) center / contain no-repeat;
          mask: var(--treat-mark-mask) center / contain no-repeat;
}

/* ===== Signature pop animation (the payoff) ===== */
.treat-burst.pop[data-animate], .wm-burst.pop[data-animate], .wm-flourish.pop[data-animate] {
  animation: treat-pop var(--p-dur-pop) var(--p-ease-pop) both;
}
@keyframes treat-pop {
  0%   { transform: scale(0);    opacity: 0; }
  55%  { transform: scale(1.18); opacity: 1; }
  75%  { transform: scale(.94); }
  100% { transform: scale(1);    opacity: 1; }
}

/* idle breath — decorative hero only, never on UI */
.treat-burst.breathe { animation: treat-breathe 3.6s var(--p-ease-standard) infinite; }
@keyframes treat-breathe { 0%,100%{transform:scale(.92) rotate(-5deg)} 50%{transform:scale(1.06) rotate(5deg)} }

/* ============================================================
   F6 · TREATMENT — textures, anchors, and the volume scale
   The signature set as reusable parts (Brand Book §07, Imagery §07).
   ============================================================ */

/* corner burst — whisper-volume brand cue (the pop mark, overlaid in the corner) */
.treat-corner { position: relative; }
.treat-corner::before { content: ""; position: absolute; top: 9px; left: 9px; width: 15px; height: 15px;
  background: var(--accent); -webkit-mask: var(--treat-mark-mask) center / contain no-repeat; mask: var(--treat-mark-mask) center / contain no-repeat; }

/* accent rule — standard-volume divider */
.treat-rule { height: var(--treat-rule-w); width: 56px; background: var(--accent); border: none; }

/* 1 · paper grain (default, on cream) */
.treat-grain { position: relative; }
.treat-grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--treat-grain-opacity); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* 2 · hairline grid (maps & data) */
.treat-grid { background-color: var(--surface-page);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 calc(var(--treat-grid-size) - 1px), var(--border-subtle) calc(var(--treat-grid-size) - 1px) var(--treat-grid-size)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--treat-grid-size) - 1px), var(--border-subtle) calc(var(--treat-grid-size) - 1px) var(--treat-grid-size)); }

/* 3 · dot field (subtle fill) */
.treat-dots { background-color: var(--surface-page);
  background-image: radial-gradient(var(--border-default) 1.4px, transparent 1.4px); background-size: var(--treat-dot-size) var(--treat-dot-size); }

/* 4 · concentric burst (hero art on pine/ink, in poppy) */
.treat-rings { position: relative; background: var(--surface-pine); overflow: hidden; }
.treat-rings::before { content: ""; position: absolute; left: 50%; top: 42%; width: 130%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, transparent 0 22%,
    color-mix(in srgb, var(--accent) 90%, transparent) 22% 23.5%, transparent 23.5% 38%,
    color-mix(in srgb, var(--accent) 55%, transparent) 38% 39.5%, transparent 39.5% 54%,
    color-mix(in srgb, var(--accent) 30%, transparent) 54% 55.5%, transparent 55.5%); }

/* ---- Volume scale labels ---- */
.vol { display: inline-flex; align-items: center; gap: var(--p-space-2); font-family: var(--p-font-mono); font-size: var(--p-size-2xs);
  letter-spacing: var(--p-track-eyebrow); text-transform: uppercase; padding: 4px 10px; border-radius: var(--p-r-pill); border: 1px solid var(--border-default); color: var(--text-muted); }
.vol::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.vol-whisper { color: var(--text-muted); }
.vol-standard { color: var(--text-secondary); }
.vol-signature { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.vol-showpiece { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse); }