/* ── PULSE ANIMATIONS ── */
@keyframes pulse-r {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.5);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 59, 92, 0);
  }
}

@keyframes pulse-g {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 229, 160, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 229, 160, 0);
  }
}

@keyframes pulse-c {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 200, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 200, 255, 0);
  }
}

/* ── BLINK ANIMATION ── */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

/* ── FADE IN ── */
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── SLIDE DOWN ── */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── EXPAND DOWN ── */
@keyframes expandDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 2000px;
  }
}

/* ── SHAKE ── */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-2px);
  }
  20% {
    transform: translateX(2px);
  }
}

/* ── PAGE TRANSITION ── */
.page-enter {
  animation: fadein 200ms ease-out;
}

.page-exit {
  animation: fadein 200ms ease-out reverse;
}

/* ── LOADING SPINNER ── */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 200, 255, 0.2);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── ANIMATED DOTS ── */
@keyframes dot-blink {
  0%, 20%  { content: ".";   }
  40%      { content: "..";  }
  60%,100% { content: "..."; }
}
.dot-anim::after {
  content: "...";
  animation: none;
}
@keyframes dots {
  0%   { opacity: 0.3; }
  50%  { opacity: 1;   }
  100% { opacity: 0.3; }
}
.dot-anim {
  animation: dots 1.4s ease-in-out infinite;
}

/* ── STATUS DOT ANIMATIONS ── */
.sdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.sdot-r {
  background: var(--red);
  animation: pulse-r 1.8s infinite;
}

.sdot-g {
  background: var(--green);
  animation: pulse-g 2.4s infinite;
}

.sdot-c {
  background: var(--cyan);
}

.sdot-m {
  background: rgba(100, 130, 190, 0.5);
}

/* ── WORLD LAYER ANIMATIONS ── */
@keyframes grid-flash {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.07; }
}

@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.06); opacity: 0.15; }
}

/* ── SCANLINE SWEEP ── */
@keyframes scanline {
  0% { top: -3px; }
  100% { top: 102%; }
}

/* ── MARQUEE TICKER ── */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── ALERT BANNER ANIMATIONS ── */
.alert-banner {
  animation: slideDown 200ms ease-out;
}