/* ── BauLynq Promo Theme — design tokens ─────────────────────────────────
 *
 * Brand-exact with www.baulynq.com / the BauLynq app:
 *   accent   #8E2222 (light) / #D8574D (dark)  — German oxblood red
 *   gold     #F6C500  — Schwarz-Rot-Gold ONLY (flag hairline motif; never decorate with it)
 *   fonts    Manrope Variable (display/body) + Geist Mono Variable (kickers, numbers, labels)
 *   language flat & tight: 1px hairlines, small radii, no glass, no noise
 */

@import url(./fonts.css);

:root {
  /* dark (default — cinematic) */
  --bg: #0a0a0b;
  --bg2: #111113;
  --bg3: #17171a;
  --ink: #ffffff;
  --ink2: #9a9a9c;
  --ink3: #55555a;
  --line: rgba(255, 255, 255, 0.10);
  --line2: rgba(255, 255, 255, 0.05);

  --accent: #D8574D;
  --accent-deep: #8E2222;
  --accent-soft: rgba(216, 87, 77, 0.12);
  --accent-glow: rgba(216, 87, 77, 0.45);
  /* text/icons sitting ON an accent fill — the accent is a deep oxblood in
     BOTH themes, so this stays white in both (no [data-theme] override) */
  --on-accent: #ffffff;
  --gold: #F6C500;

  --ok: #17c964;
  --warn: #f5a524;
  --err: #f31260;

  --font-sans: "Manrope Variable", "Manrope", "Segoe UI", sans-serif;
  --font-mono: "Geist Mono Variable", "JetBrains Mono", monospace;

  /* fluid type */
  --fs-xs:   clamp(0.68rem, 0.9vw, 0.8rem);
  --fs-sm:   clamp(0.8rem, 1.05vw, 0.95rem);
  --fs-base: clamp(0.95rem, 1.25vw, 1.15rem);
  --fs-lg:   clamp(1.2rem, 1.7vw, 1.55rem);
  --fs-xl:   clamp(1.6rem, 2.6vw, 2.8rem);
  --fs-2xl:  clamp(2.2rem, 4vw, 4.2rem);
  --fs-hero: clamp(2.8rem, 6.2vw, 7rem);

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* floating chrome (player bar) — glassmorphic, not a solid panel */
  --glass-bg: rgba(17, 17, 19, 0.68);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-blur: 18px;
}

[data-theme="light"] {
  --bg: #ffffff;
  --bg2: #fafafa;
  --bg3: #f2f2f3;
  --ink: #0a0a0a;
  --ink2: #5a5a5a;
  --ink3: #a8a8a8;
  --line: rgba(0, 0, 0, 0.10);
  --line2: rgba(0, 0, 0, 0.05);

  --accent: #8E2222;
  --accent-deep: #6d1a1a;
  --accent-soft: rgba(142, 34, 34, 0.08);
  --accent-glow: rgba(142, 34, 34, 0.30);

  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-blur: 20px;
}

/* ── shared micro-components ── */

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink2);
}
.kicker .kicker-no { color: var(--accent); margin-right: 0.6em; }

/* accent rule swept in under scene titles (scene-kit titleIn) */
.title-rule {
  width: 34px;
  height: 2px;
  background: var(--accent);
  margin: -0.35em 0 1.1em;
}

/* balanced headline wrapping — no widowed last words */
.scene-title, .bl-poster-title, .bl-endcard-title { text-wrap: balance; }

.hairline { height: 1px; background: var(--line); }

/* Schwarz-Rot-Gold rule — THE only place gold appears */
.flag-rule {
  display: flex;
  height: 2px;
  width: 72px;
}
.flag-rule span { flex: 1; }
.flag-rule span:nth-child(1) { background: var(--ink); }
.flag-rule span:nth-child(2) { background: var(--accent-deep); }
.flag-rule span:nth-child(3) { background: var(--gold); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  padding: 0.4em 0.85em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink2);
  background: var(--bg2);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.badge--accent { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.badge--ok .dot { background: var(--ok); }

/* the red Freigabe stamp */
.stamp-seal {
  display: inline-grid;
  place-items: center;
  padding: 0.5em 1.1em;
  border: 2.5px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}

/* numbers always tabular */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* masked word-split (scene-kit riseWords) — the padding/negative-margin
   pair keeps descenders (g, j, p …) inside the mask without shifting layout */
.w-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.1em 0.05em 0.16em;
  margin: -0.1em -0.05em -0.16em;
}
.w { display: inline-block; will-change: transform; }

/* typing caret */
.is-typing::after {
  content: "▍";
  color: var(--accent);
  animation: bl-caret 0.9s steps(1) infinite;
}
@keyframes bl-caret { 50% { opacity: 0; } }
.reduced-motion .is-typing::after { animation: none; }