/* FILE: css/animations.css — @keyframes, LED blink, alarm flash, flow arrows */

/* ── Alarm annunciator flash (new unacknowledged alarm) ─────────────────── */
@keyframes ann-flash-new {
  0%, 49%  { background: #3d1800; border-color: var(--c-amber); color: var(--c-amber); }
  50%, 100%{ background: #7a3000; border-color: #ffc040;        color: #ffc040; box-shadow: 0 0 8px rgba(255,171,0,0.6); }
}
.ann-tile.new { animation: ann-flash-new 0.6s steps(1) infinite; }

/* Clearing flash (alarm returning to normal) */
@keyframes ann-flash-clearing {
  0%, 49%  { background: #003a10; border-color: var(--c-green);     color: var(--c-green); }
  50%, 100%{ background: #005015; border-color: #40ff80;            color: #40ff80; }
}
.ann-tile.clearing { animation: ann-flash-clearing 1.0s steps(1) infinite; }

/* ── LED blink states ────────────────────────────────────────────────────── */
@keyframes led-blink-fast {
  0%, 49%  { opacity: 1; }
  50%, 100%{ opacity: 0.15; }
}
@keyframes led-blink-slow {
  0%, 59%  { opacity: 1; }
  60%, 100%{ opacity: 0.15; }
}
.led.blink-fast { animation: led-blink-fast 0.4s steps(1) infinite; }
.led.blink-slow { animation: led-blink-slow 1.2s steps(1) infinite; }

/* ── BYPASS badge pulse ───────────────────────────────────────────────────── */
@keyframes bypass-pulse {
  0%, 100%{ box-shadow: 0 0 4px rgba(255,23,68,0.4); }
  50%     { box-shadow: 0 0 14px rgba(255,23,68,0.8); border-color: var(--c-red); }
}
.bypass-badge {
  background: rgba(255,23,68,0.15);
  border: 1px solid var(--c-red-dim);
  color: var(--c-red);
  font-size: var(--fs-tiny);
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  animation: bypass-pulse 2s ease-in-out infinite;
}

/* ── Flow arrows on P&ID ─────────────────────────────────────────────────── */
@keyframes flow-right {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0; }
}
@keyframes flow-left {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 20; }
}
@keyframes flow-down {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0; }
}
.flow-arrow-h { stroke-dasharray: 8, 4; animation: flow-right 0.6s linear infinite; }
.flow-arrow-l { stroke-dasharray: 8, 4; animation: flow-left  0.6s linear infinite; }
.flow-arrow-v { stroke-dasharray: 8, 4; animation: flow-down  0.6s linear infinite; }
.flow-arrow-h.slow { animation-duration: 1.5s; }
.flow-arrow-h.fast { animation-duration: 0.3s; }
.flow-stopped { stroke-dasharray: none; animation: none; }

/* ── Gauge needle sweep (CSS transition, animation for value updates) ─────── */
.gauge-needle {
  transform-origin: center bottom;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gauge-needle.alarm { stroke: var(--c-red); }
.gauge-needle.caution { stroke: var(--c-amber); }

/* ── Synchroscope rotation ────────────────────────────────────────────────── */
@keyframes sync-fast-cw   { from { transform: rotate(0deg);   } to { transform: rotate(360deg);  } }
@keyframes sync-slow-cw   { from { transform: rotate(0deg);   } to { transform: rotate(360deg);  } }
@keyframes sync-slow-ccw  { from { transform: rotate(0deg);   } to { transform: rotate(-360deg); } }

.synchroscope-pointer {
  transform-origin: 50% 100%;
  transition: none;
}
.synchroscope-pointer.fast-cw   { animation: sync-fast-cw  0.5s linear infinite; }
.synchroscope-pointer.slow-cw   { animation: sync-slow-cw  3.0s linear infinite; }
.synchroscope-pointer.slow-ccw  { animation: sync-slow-ccw 3.0s linear infinite; }
.synchroscope-pointer.at-sync   { animation: none; }

/* ── Turbine spinup visual ────────────────────────────────────────────────── */
@keyframes turbine-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.turbine-rotor {
  transform-origin: center;
  animation: turbine-spin linear infinite;
  animation-duration: var(--turbine-period, 2s);
}

/* ── Core map power color pulse (when approaching limits) ────────────────── */
@keyframes power-warning-pulse {
  0%, 100%{ filter: brightness(1.0); }
  50%     { filter: brightness(1.4); }
}
.core-cell.high-power { animation: power-warning-pulse 1.5s ease-in-out infinite; }
.core-cell.trip-power { animation: power-warning-pulse 0.5s ease-in-out infinite; }

/* ── EDG start sequence indicator ────────────────────────────────────────── */
@keyframes edg-starting {
  0%  { opacity: 0.3; }
  50% { opacity: 1.0; }
  100%{ opacity: 0.3; }
}
.edg-starting { animation: edg-starting 0.8s ease-in-out infinite; }

/* ── Breaker operation flash ─────────────────────────────────────────────── */
@keyframes breaker-op {
  0%  { opacity: 1; }
  20% { opacity: 0.3; }
  40% { opacity: 1; }
  60% { opacity: 0.3; }
  80% { opacity: 1; }
}
.breaker-operating { animation: breaker-op 0.4s ease-in-out; }

/* ── Status panel emergency flash ────────────────────────────────────────── */
@keyframes emergency-border {
  0%, 100%{ border-color: var(--c-red-dim); }
  50%     { border-color: var(--c-red); box-shadow: 0 0 16px var(--c-red-glow); }
}
.emergency-active { animation: emergency-border 1s ease-in-out infinite; }

/* ── Sankey flow animation ────────────────────────────────────────────────── */
@keyframes sankey-flow {
  from { background-position: 0 0; }
  to   { background-position: 30px 0; }
}
.sankey-band {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 10px,
    rgba(255,255,255,0.06) 10px, rgba(255,255,255,0.06) 15px
  );
  background-size: 30px 100%;
  animation: sankey-flow 1.2s linear infinite;
}

/* ── Consequence monitor alert blink ─────────────────────────────────────── */
@keyframes consequence-urgent {
  0%, 100%{ background: rgba(255,23,68,0.08); }
  50%     { background: rgba(255,23,68,0.18); }
}
.consequence-urgent { animation: consequence-urgent 1.5s ease-in-out infinite; }

/* ── Tab transition ──────────────────────────────────────────────────────── */
@keyframes panel-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel.active { animation: panel-fadein 0.18s ease-out; }

/* ── Number update flash ─────────────────────────────────────────────────── */
@keyframes value-update {
  from { color: var(--c-cyan); }
  to   { color: inherit; }
}
.value-flash { animation: value-update 0.4s ease-out; }

/* ── Startup progress pulse ──────────────────────────────────────────────── */
@keyframes progress-pulse {
  0%, 100%{ opacity: 1; }
  50%     { opacity: 0.6; }
}
.progress-active { animation: progress-pulse 1.5s ease-in-out infinite; }

/* ── Coolant flow color gradient animation ────────────────────────────────── */
@keyframes coolant-warm {
  0%  { stop-color: var(--c-cold); }
  100%{ stop-color: var(--c-hot);  }
}

/* ── Button press effect ─────────────────────────────────────────────────── */
.btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}
.btn-red:active:not(:disabled) {
  box-shadow: 0 0 16px rgba(255,23,68,0.5), inset 0 1px 3px rgba(0,0,0,0.4);
}
.btn-green:active:not(:disabled) {
  box-shadow: 0 0 16px rgba(0,230,118,0.5), inset 0 1px 3px rgba(0,0,0,0.4);
}

/* ── Holding state banner ────────────────────────────────────────────────── */
@keyframes hold-banner {
  0%, 100%{ background: rgba(0,176,255,0.1); }
  50%     { background: rgba(0,176,255,0.2); border-color: var(--c-blue); }
}
.holding-banner { animation: hold-banner 2s ease-in-out infinite; }