/* ============================================================
   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, #F85149, transparent); }
.severity-flash--high     { background: linear-gradient(90deg, transparent, #d29922, transparent); }
.severity-flash--medium   { background: linear-gradient(90deg, transparent, #3fb950, transparent); }
@keyframes sev-sweep {
  0%   { transform: scaleX(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ─────────── 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,
  .severity-flash.show {
    animation: none !important;
  }
  body.critical-hit::before { display: none; }
}