/* ============================================================
   battle-drama-v5.css — Sprint 3++ Phase 3
   Orthrus lives during battle mode: watermark breathing harder,
   viewport shake on CRITICAL findings, brand dots raging.

   Loaded only on pages that opt-in (kokpit primarily).
   Pure CSS — all state driven by body classes / attributes
   toggled by JS (kokpit-v5.js + cyrber-broadcast.js).
   ============================================================ */

/* ─────────── Viewport shake on CRITICAL ─────────── */
/* Body gets .critical-hit for ~450ms; cleanup by JS.
   Respect prefers-reduced-motion — skip shake entirely. */
@keyframes orth-shake {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2px, 1px); }
  20%  { transform: translate(3px, -1px); }
  30%  { transform: translate(-3px, 2px); }
  40%  { transform: translate(2px, -2px); }
  50%  { transform: translate(-2px, 1px); }
  60%  { transform: translate(1px, -1px); }
  70%  { transform: translate(-1px, 2px); }
  80%  { transform: translate(2px, 0); }
  90%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}
body.critical-hit {
  animation: orth-shake 0.45s cubic-bezier(.36,.07,.19,.97) both;
}
body.critical-hit::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(248, 81, 73, 0.08) 0%,
    rgba(248, 81, 73, 0.04) 40%,
    transparent 75%);
  pointer-events: none;
  z-index: 9998;
  animation: crit-flash 0.5s ease-out both;
}
@keyframes crit-flash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ─────────── Orthrus watermark: attacking state ─────────── */
/* Set by JS on enterBattle() on .cyrber-watermark (nav.js inject). */
@keyframes wm-attack-breath {
  0%, 100% { opacity: 0.08; transform: scale(1.00); }
  50%      { opacity: 0.14; transform: scale(1.015); }
}
@keyframes wm-attack-glow {
  0%, 100% { filter: drop-shadow(0 0 8px  rgba(248, 81, 73, 0.15)); }
  50%      { filter: drop-shadow(0 0 22px rgba(248, 81, 73, 0.35)); }
}
.cyrber-watermark.attacking img {
  animation:
    wm-attack-breath 2.4s ease-in-out infinite,
    wm-attack-glow   2.4s ease-in-out infinite;
}

/* CRITICAL pulse — shorter, more intense, triggered briefly */
@keyframes wm-crit-flash {
  0%   { opacity: 0.08; filter: drop-shadow(0 0 8px rgba(248, 81, 73, 0.15)); }
  30%  { opacity: 0.28; filter: drop-shadow(0 0 34px rgba(248, 81, 73, 0.75)); }
  100% { opacity: 0.08; filter: drop-shadow(0 0 8px rgba(248, 81, 73, 0.15)); }
}
.cyrber-watermark.crit-flash img {
  animation: wm-crit-flash 0.65s ease-out both;
}

/* ─────────── Brand dots: rage on CRITICAL ─────────── */
/* .brand-dots.rage → 3 dots rapidly cycle + scale up */
@keyframes bd-rage {
  0%   { transform: scale(1.0); filter: drop-shadow(0 0 0 rgba(248,81,73,0)); }
  25%  { transform: scale(1.45); filter: drop-shadow(0 0 6px rgba(248,81,73,0.8)); }
  50%  { transform: scale(1.0); }
  75%  { transform: scale(1.35); filter: drop-shadow(0 0 4px rgba(248,81,73,0.6)); }
  100% { transform: scale(1.0); filter: drop-shadow(0 0 0 rgba(248,81,73,0)); }
}
.brand-dots.rage .bd { animation: bd-rage 0.55s ease-out both; }
.brand-dots.rage .bd:nth-child(1) { animation-delay: 0s; }
.brand-dots.rage .bd:nth-child(2) { animation-delay: 0.05s; }
.brand-dots.rage .bd:nth-child(3) { animation-delay: 0.10s; }

/* ─────────── Battle-head sonar ring on incoming event ─────────── */
/* .battle-head.sonar-ping — single 600ms ring around the head label */
@keyframes sonar-ring {
  0%   { box-shadow: 0 0 0 0 rgba(56, 139, 253, 0.45); }
  70%  { box-shadow: 0 0 0 22px rgba(56, 139, 253, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 139, 253, 0); }
}
.battle-head[data-head="ratio"].sonar-ping,
.battle-head[data-head="animus"].sonar-ping,
.battle-head[data-head="fatum"].sonar-ping {
  animation: sonar-ring 0.6s ease-out both;
}
.battle-head[data-head="animus"].sonar-ping { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.45); }
.battle-head[data-head="fatum"].sonar-ping  { box-shadow: 0 0 0 0 rgba(188, 140, 255, 0.45); }

/* ─────────── Global severity banner (optional top-of-viewport flash) ─────────── */
/* .severity-flash-critical / high / medium — quick 260ms line that sweeps */
.severity-flash {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}
.severity-flash.show { animation: sev-sweep 0.42s ease-out both; }
.severity-flash--critical { background: linear-gradient(90deg, transparent, var(--sev-critical), transparent); }
.severity-flash--high     { background: linear-gradient(90deg, transparent, var(--sev-high), transparent); }
.severity-flash--medium   { background: linear-gradient(90deg, transparent, var(--sev-ok), transparent); }
@keyframes sev-sweep {
  0%   { transform: scaleX(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ============================================================
   Battle mode v2 — "żywy organizm, który poluje"
   Heartbeat-ECG spine + head aliveness + kill-shot beat.
   Continuous state = teal + mono; red ONLY on kill-shot.
   Heat via motion/light/tempo, not colour count.
   ============================================================ */

/* ── heartbeat spine (hero) ── */
.battle-spine {
  position: relative;
  height: 112px;
  border: 1px solid var(--border-default, rgba(var(--ink-rgb, 255, 255, 255), .08));
  border-radius: 12px;
  background: linear-gradient(180deg, var(--bg-panel, #0f0f0f), var(--bg-canvas, #0c0c0c));
  overflow: hidden;
}
.battle-spine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--bg-panel,#0f0f0f) 0%, transparent 6%, transparent 94%, var(--bg-panel,#0f0f0f) 100%);
}
.bs-canvas { display: block; width: 100%; height: 100%; }
.bs-cap {
  position: absolute; top: 8px; left: 10px; z-index: 2;
  padding: 3px 9px; border-radius: 6px; background: color-mix(in oklab, var(--bg-panel, #0f0f0f) 86%, transparent);
  font-family: 'Inter', system-ui, sans-serif; font-size: 11px; letter-spacing: 0.1em;
  color: var(--fg-tertiary, #8593A0); text-transform: uppercase;
}
.bs-cap b { color: var(--accent-signal, #e4e8e9); }
.bs-tempo {
  position: absolute; top: 7px; right: 10px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 3px 10px; border-radius: 6px; background: color-mix(in oklab, var(--bg-panel, #0f0f0f) 86%, transparent);
}
.bs-tempo-num {
  font-family: 'Inter', system-ui, sans-serif; font-size: 18px; font-weight: 600;
  color: var(--accent-signal, #e4e8e9); font-variant-numeric: tabular-nums;
  min-width: 2ch; text-align: right;
}
.bs-tempo-unit {
  font-family: 'Inter', system-ui, sans-serif; font-size: 11px; letter-spacing: 0.1em;
  color: var(--fg-tertiary, #8593A0); text-transform: uppercase; line-height: 1.1; white-space: nowrap;
}
.bs-tempo-track { width: 96px; height: 4px; border-radius: 999px; background: var(--bg-interactive,#1a1a1a); overflow: hidden; }
.bs-tempo-track i {
  display: block; height: 100%; width: 8%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--signal-rgb, 228, 232, 233), .25), var(--accent-signal,#e4e8e9));
  transition: width .5s ease;
}
.battle-spine.killing { animation: bs-hit .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes bs-hit {
  0%   { border-color: var(--border-default, rgba(var(--ink-rgb, 255, 255, 255), .08)); }
  18%  { border-color: var(--sev-critical, #d16565); }
  100% { border-color: var(--border-default, rgba(var(--ink-rgb, 255, 255, 255), .08)); }
}

/* ── head aliveness: dormant → active → speaking ── */
.battle-head { transition: border-color .5s, box-shadow .5s, opacity .5s; }
.battle-head:not(.bh-live) { animation: bh-breath-slow 5.2s ease-in-out infinite; }
@keyframes bh-breath-slow { 0%,100% { opacity: .74; } 50% { opacity: .84; } }
.battle-head.bh-live {
  opacity: 1;
  animation: bh-breath-active 2.6s ease-in-out infinite;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--head-color) 18%, transparent),
    0 0 26px -14px color-mix(in oklab, var(--head-color) 60%, transparent);
}
@keyframes bh-breath-active {
  0%,100% { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--head-color) 16%, transparent), 0 0 22px -16px color-mix(in oklab, var(--head-color) 55%, transparent); }
  50%     { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--head-color) 34%, transparent), 0 0 34px -10px color-mix(in oklab, var(--head-color) 75%, transparent); }
}
.battle-head.bh-speaking { border-top-color: var(--head-color); }
.battle-head.bh-speaking .bh-label { color: color-mix(in oklab, var(--head-color) 55%, var(--fg-primary, #fafafa)); }
.battle-head.bh-ripple { animation: bh-ripple .6s ease-out both; }
@keyframes bh-ripple {
  0%   { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sev-critical,#d16565) 50%, transparent), 0 0 0 0 color-mix(in oklab, var(--sev-critical,#d16565) 40%, transparent); }
  100% { box-shadow: inset 0 0 0 1px transparent, 0 0 40px -6px color-mix(in oklab, var(--sev-critical,#d16565) 55%, transparent); }
}

/* ── kill-shot stamp: one heavy beat ── */
.battle-killstamp {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  display: flex; align-items: center; justify-content: center; opacity: 0;
}
.battle-killstamp.fire { animation: bks-veil .95s ease-out both; }
.battle-killstamp::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, color-mix(in oklab, var(--sev-critical,#d16565) 14%, transparent) 0%, transparent 62%);
}
@keyframes bks-veil { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0; } }
.bks-mark {
  position: relative;
  font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sev-critical, #d16565); border: 2px solid var(--sev-critical, #d16565);
  padding: 12px 26px; border-radius: 6px; font-size: 26px; font-weight: 600;
  background: color-mix(in srgb, var(--bg-canvas) 55%, transparent);
  box-shadow: 0 0 40px -8px color-mix(in oklab, var(--sev-critical,#d16565) 60%, transparent);
}
.bks-sub {
  display: block; font-size: 11px; letter-spacing: 0.1em; text-align: center; margin-top: 6px;
  color: var(--fg-secondary, #A7B2BD);
}
.battle-killstamp.fire .bks-mark { animation: bks-stamp .95s cubic-bezier(.2,.9,.25,1) both; }
@keyframes bks-stamp {
  0%   { opacity: 0; transform: scale(1.3); }
  22%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.98); }
}

/* ─────────── Reduced-motion fallback ─────────── */
@media (prefers-reduced-motion: reduce) {
  body.critical-hit,
  .cyrber-watermark.attacking img,
  .cyrber-watermark.crit-flash img,
  .brand-dots.rage .bd,
  .battle-head.sonar-ping,
  .battle-head:not(.bh-live),
  .battle-head.bh-live,
  .battle-head.bh-ripple,
  .battle-spine.killing,
  .battle-killstamp.fire,
  .battle-killstamp.fire .bks-mark,
  .severity-flash.show {
    animation: none !important;
  }
  body.critical-hit::before { display: none; }
}