/* ════════════════════════════════════════════════════════════════════════
   MASSIVEFORGE · brand.css — tokens + film layer
   Locked 2026-06-11. Pairs with brand.js (window.MF).
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://api.fontshare.com/v2/css?f[]=sentient@400,500,700&f[]=general-sans@400,500,600&display=swap');

:root {
  /* palette — one accent, rationed */
  --mf-black: #0a0a0b;
  --mf-black-lift: #0f0f12;
  --mf-black-deep: #060607;
  --mf-cream: #f3f2ef;
  --mf-cream-dim: rgba(243, 242, 239, 0.60);
  --mf-cream-faint: rgba(243, 242, 239, 0.40);
  --mf-ember: #ff5a2c;
  --mf-ember-deep: #c1121f;
  /* type */
  --mf-serif: 'Sentient', 'Canela', 'Spectral', Georgia, 'Times New Roman', serif;
  --mf-sans: 'General Sans', 'Söhne', 'Neue Haas Grotesk Display', system-ui, -apple-system, sans-serif;
}

/* the field every scene sits on */
.mf-field {
  background: radial-gradient(120% 78% at 50% 45%, var(--mf-black-lift) 0%, var(--mf-black) 56%, var(--mf-black-deep) 100%);
  color: var(--mf-cream);
  font-family: var(--mf-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* spoken line — MF.splitLine() fills this with masked words */
.mf-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.24em;
  row-gap: 0.04em;
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 1.22;
  text-wrap: balance;
  margin: 0;
}

/* impact word — italic in markup (<em class="focus">), glow driven by MF.focusGlow */
.mf-focus { font-style: italic; }

/* uppercase sans label (setup lines, captions) */
.mf-label {
  font-family: var(--mf-sans);
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--mf-cream-dim);
}

/* the orange verdict stamp */
.mf-verdict {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mf-ember);
  text-shadow: 0 0 0.18em rgba(255, 90, 44, 0.42), 0 0 0.47em rgba(255, 90, 44, 0.16);
}

/* wordmark */
.mf-wordmark {
  font-family: var(--mf-sans);
  font-weight: 500;
  letter-spacing: 0.34em;
  color: var(--mf-cream-faint);
}

/* ── film layer ─────────────────────────────────────────────────────────── */
@keyframes mf-drift {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.018) translateY(-7px); }
}
.mf-drift {
  animation: mf-drift 30s ease-in-out infinite alternate;
  will-change: transform;
}

.mf-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(116% 90% at 50% 47%, transparent 48%, rgba(0, 0, 0, 0.46) 82%, rgba(0, 0, 0, 0.74) 100%);
}

.mf-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.032;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.82%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
}

@media (prefers-reduced-motion: reduce) {
  .mf-drift { animation: none; }
}