/* ============================================================
   CWN ANIMATIONS
   ============================================================ */

/* ── Compass & Wind ─────────────────────────────────── */
@keyframes compass-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes wind-needle-swing {
  0%,100% { transform: rotate(var(--wind-deg, 315deg)) translateY(-2px); }
  50%      { transform: rotate(calc(var(--wind-deg, 315deg) + 8deg)) translateY(-2px); }
}

@keyframes gust-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.05); }
}

/* ── Data / Numbers ─────────────────────────────────── */
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes value-tick {
  0%  { color: var(--lightning-yellow); }
  100%{ color: inherit; }
}

/* ── Alert Pulse ─────────────────────────────────────── */
@keyframes alert-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(231,76,60,0); }
}

@keyframes alert-slide-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ── Page Load Stagger ──────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.anim-fade-up {
  animation: fade-up 0.5s ease both;
}
.anim-fade-up:nth-child(1) { animation-delay: 0.05s; }
.anim-fade-up:nth-child(2) { animation-delay: 0.12s; }
.anim-fade-up:nth-child(3) { animation-delay: 0.19s; }
.anim-fade-up:nth-child(4) { animation-delay: 0.26s; }
.anim-fade-up:nth-child(5) { animation-delay: 0.33s; }
.anim-fade-up:nth-child(6) { animation-delay: 0.40s; }

/* ── Radar ping ──────────────────────────────────────── */
@keyframes radar-ping {
  0%   { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── Status dot ──────────────────────────────────────── */
@keyframes status-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ── Shimmer skeleton ────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-700) 25%,
    var(--gray-600) 50%,
    var(--gray-700) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--border-radius);
  color: transparent !important;
}

/* ── Trend line draw ─────────────────────────────────── */
@keyframes stroke-draw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ── Lightning flash ─────────────────────────────────── */
@keyframes lightning {
  0%,94%,96%,100% { opacity: 0; }
  95%              { opacity: 1; }
}