/* mark-motion.css — the EventLake mark in motion (session 2026-10-31y).
 *
 * Spec: docs/reference/logo-motion.md. Doctrine: docs/reference/motion-graphics-scope.md §5 (the seven
 * principles, the ten verbs) and §7 (where motion must NOT go). This file states the mark's states as
 * selectors on [data-mm-state]; mark-motion.js only sets that attribute and the per-ribbon indices.
 *
 *  ⛔ The geometry is NOT here and NOT in the JS. The mark is the generator's own SVG
 *     (conduit/cmd/eventlake-mark → assets/logo/), inlined, and MarkMotion.enhance() classifies its
 *     ribbons / nodes / core. A redraw of the mark therefore moves every animated surface with it.
 *  ⛔ NEVER-BLANK: every rule animates FROM a hidden/offset frame TO the base style (fill-mode
 *     `backwards`, never `both`), so a paused, printed, PDF'd or reduced-motion frame is the static mark.
 *  ⛔ Every time value is a hearth-tokens.css duration token, so the global reduced-motion net (which
 *     re-points every --duration-* to 0ms) stops these too. The explicit @media blocks below are the
 *     belt to that braces: a page that forgot to load hearth-tokens.css still holds still.
 *
 * States (docs/reference/logo-motion.md §2):
 *   intro   once per session, skippable — ribbons weave in, nodes travel in, the core seals
 *   breathe the ONE live indicator's verb, bounded: three breaths, then rest
 *   weave   indeterminate work — an ink highlight laps the C; only while work is genuinely pending
 *   event   one event enters the aperture and the arms absorb it; driven by MarkMotion.pulse()
 *   seal    a record was sealed / verified: the ribbons draw in ink once, then settle. No overshoot.
 *   fail    verification failed: ONE clay cycle (the `attend` verb's one pulse), always with words
 *   rest    the base style (also what reduced motion, print, PDF and email get)
 */

/* Colour is the GENERATOR'S, not this file's: mark-motion.js copies the inlined SVG's own ribbon stroke and
   node fill into --mm-ribbon / --mm-ink (so eventlake-mid.svg animates in #27506B and eventlake-mid-dark.svg
   in its own #9CC0DC), and at rest nothing here repaints a single stroke. The fallbacks only matter for an
   SVG that carries no colour attributes. */
.mm { --mm-ribbon: #27506B; --mm-ink: #191713; --mm-fail: var(--clay-600, #A94E2E);
      --mm-d-step: var(--motion-stagger, 30ms); }
.mm .mm-node { transform-box: fill-box; transform-origin: center; }
.mm .mm-core { transform-box: fill-box; transform-origin: center; }
.mm .mm-weave { transform-box: view-box; transform-origin: 200px 200px; }
/* The two overlays MarkMotion adds. Base style: invisible, so they cost nothing at rest. */
.mm .mm-ripple { fill: none; stroke: var(--mm-ribbon); stroke-width: 1.4; opacity: 0;
                 transform-box: fill-box; transform-origin: center; pointer-events: none; }
.mm .mm-packet { fill: var(--mm-ink); opacity: 0; transform-box: fill-box; transform-origin: center;
                 pointer-events: none; }
/* Paused by the controller (off-screen, hidden tab, idle). The frame it rests on is a base frame. */
.mm.mm-paused, .mm.mm-paused * { animation-play-state: paused !important; }

/* ── intro ─────────────────────────────────────────────────────────────── */
@keyframes mm-draw   { from { stroke-dashoffset: 1; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes mm-travel { from { opacity: 0; transform: translate(var(--mm-dx, 0), var(--mm-dy, 0)) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes mm-close  { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes mm-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes mm-ripple { 0% { opacity: .6; transform: scale(.3); } 100% { opacity: 0; transform: scale(5.5); } }
.mm[data-mm-state="intro"] .mm-rib {
  stroke-dasharray: 1 1;
  animation: mm-draw var(--duration-slower, 480ms) var(--ease-standard, ease) backwards;
  animation-delay: calc(var(--mm-i, 0) * var(--mm-d-step)); }
.mm[data-mm-state="intro"] .mm-node {
  animation: mm-travel var(--duration-deliberate, 720ms) var(--ease-emphasized, ease) backwards;
  animation-delay: calc(var(--duration-slower, 480ms) + var(--mm-i, 0) * 80ms); }
.mm[data-mm-state="intro"] .mm-core {
  animation: mm-close var(--duration-slow, 320ms) var(--ease-spring, ease) backwards;
  animation-delay: calc(var(--duration-deliberate, 720ms) + var(--duration-slower, 480ms)); }
.mm[data-mm-state="intro"] .mm-dot {
  animation: mm-fade var(--duration-base, 200ms) var(--ease-standard, ease) backwards;
  animation-delay: calc(var(--duration-deliberate, 720ms) + var(--duration-slower, 480ms)); }
.mm[data-mm-state="intro"] .mm-ripple {
  animation: mm-ripple calc(var(--duration-deliberate, 720ms) * 2) var(--ease-standard, ease);
  animation-delay: calc(var(--duration-deliberate, 720ms) + var(--duration-slower, 480ms) + var(--duration-base, 200ms)); }

/* ── breathe (bounded: three cycles, then the base style) ──────────────── */
@keyframes mm-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.mm[data-mm-state="breathe"] .mm-rib {
  animation: mm-breathe calc(var(--duration-slower, 480ms) * 5) ease-in-out 3;
  animation-delay: calc(var(--mm-i, 0) * -120ms); }

/* ── weave (indeterminate; the controller removes it the moment work ends) ─ */
@keyframes mm-lap { 0% { stroke: var(--mm-ink); stroke-width: 3; opacity: 1; }
                    30%, 100% { stroke: var(--mm-ribbon); opacity: .35; } }
.mm[data-mm-state="weave"] .mm-rib {
  animation: mm-lap calc(var(--mm-n, 20) * 60ms) linear infinite;
  animation-delay: calc(var(--mm-i, 0) * 60ms); }
.mm[data-mm-state="weave"] .mm-node { opacity: .35; }

/* ── event (one pulse per MarkMotion.pulse(); the controller restarts it, rate-capped) ─ */
@keyframes mm-enter  { 0% { opacity: 0; transform: translateX(190px); } 15% { opacity: 1; }
                       85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.2); } }
@keyframes mm-absorb { 0% { stroke: var(--mm-ink); stroke-width: 3; } 100% { stroke: var(--mm-ribbon); } }
@keyframes mm-tick   { 0% { transform: none; } 40% { transform: scale(1.4); } 100% { transform: none; } }
.mm[data-mm-state="event"] .mm-packet {
  animation: mm-enter var(--duration-deliberate, 720ms) var(--ease-emphasized, ease); }
.mm[data-mm-state="event"] .mm-rib {
  animation: mm-absorb var(--duration-deliberate, 720ms) var(--ease-standard, ease) backwards;
  animation-delay: calc(var(--duration-deliberate, 720ms) + var(--mm-j, 0) * 45ms); }
.mm[data-mm-state="event"] .mm-core {
  animation: mm-tick var(--duration-slow, 320ms) var(--ease-standard, ease) var(--duration-deliberate, 720ms); }
.mm[data-mm-state="event"] .mm-ripple {
  animation: mm-ripple calc(var(--duration-deliberate, 720ms) * 1.5) var(--ease-standard, ease) var(--duration-deliberate, 720ms); }

/* ── seal (settles; never celebrates — no cinch overshoot, no burst) ──── */
@keyframes mm-seal { from { stroke: var(--mm-ink); stroke-dashoffset: 1; } to { stroke: var(--mm-ribbon); stroke-dashoffset: 0; } }
.mm[data-mm-state="seal"] .mm-rib {
  stroke-dasharray: 1 1;
  animation: mm-seal var(--duration-slow, 320ms) var(--ease-standard, ease) backwards;
  animation-delay: calc(var(--mm-j, 0) * var(--mm-d-step)); }
.mm[data-mm-state="seal"] .mm-core {
  animation: mm-close var(--duration-slow, 320ms) var(--ease-standard, ease) backwards;
  animation-delay: calc(10 * var(--mm-d-step) + var(--duration-slow, 320ms)); }

/* ── fail (ONE cycle; the words carry the meaning, never colour alone) ── */
@keyframes mm-fail { 0%, 100% { stroke: var(--mm-ribbon); } 30% { stroke: var(--mm-fail); stroke-width: 2.6; } }
@keyframes mm-faildot { 0%, 100% { fill: var(--mm-ribbon); } 30% { fill: var(--mm-fail); } }
.mm[data-mm-state="fail"] .mm-rib {
  animation: mm-fail calc(var(--duration-deliberate, 720ms) * 2) var(--ease-standard, ease);
  animation-delay: calc(var(--mm-j, 0) * var(--mm-d-step)); }
.mm[data-mm-state="fail"] .mm-dot { animation: mm-faildot calc(var(--duration-deliberate, 720ms) * 2) var(--ease-standard, ease); }
.mm[data-mm-state="fail"] .mm-ripple { stroke: var(--mm-fail);
  animation: mm-ripple calc(var(--duration-deliberate, 720ms) * 2) var(--ease-standard, ease); }

@media (prefers-reduced-motion: reduce) { .mm, .mm * { animation: none !important; transition: none !important; } }
@media print { .mm, .mm * { animation: none !important; } }