/* ═══════════════════════════════════════════════════════════
   THE UNOFFICIAL NARAMO WIKI — animations.css
   ═══════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ───────────────────────────────────────────── */

/* Nuclear glow pulse — logo + hero symbol */
@keyframes nuke-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(0,255,65,.5)) drop-shadow(0 0 24px rgba(0,255,65,.2));
    opacity: .8;
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(0,255,65,.9)) drop-shadow(0 0 48px rgba(0,255,65,.4));
    opacity: 1;
  }
}

/* Slow rotation — hero radiation symbol */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* CRT scanline drift */
@keyframes scanlines {
  from { background-position: 0 0; }
  to   { background-position: 0 80px; }
}

/* Cursor blink */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Classified stamp amber glow */
@keyframes stamp-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(245,166,35,.2); opacity: .9; }
  50%       { box-shadow: 0 0 12px rgba(245,166,35,.5); opacity: 1; }
}

/* Page load — wipe in */
@keyframes page-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* Fade up (scroll reveal) */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Glitch flicker — hero title occasional effect */
@keyframes glitch {
  0%   { text-shadow: var(--glow-green); }
  2%   { text-shadow: -2px 0 var(--red), 2px 0 var(--green-600); clip-path: inset(20% 0 50% 0); }
  4%   { text-shadow: var(--glow-green); clip-path: none; }
  6%   { text-shadow: 3px 0 var(--amber), -3px 0 var(--green); }
  8%   { text-shadow: var(--glow-green); }
  100% { text-shadow: var(--glow-green); }
}

/* Radiation ring expand */
@keyframes ring-expand {
  from { transform: scale(1); opacity: .6; }
  to   { transform: scale(2.5); opacity: 0; }
}

/* Stats bar fill */
@keyframes bar-fill {
  from { width: 0; }
}

/* Nav underline sweep */
@keyframes sweep-in {
  from { left: 50%; right: 50%; }
  to   { left: 0; right: 0; }
}

/* Card border trace */
@keyframes border-trace {
  0%   { clip-path: inset(0 100% 100% 0); }
  25%  { clip-path: inset(0 0 100% 0); }
  50%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* Amber flicker — warning/classified elements */
@keyframes amber-flicker {
  0%, 95%, 100% { opacity: 1; }
  96%            { opacity: .7; }
  97%            { opacity: 1; }
  98%            { opacity: .5; }
  99%            { opacity: .9; }
}

/* Data scroll — sidebar/stats ticker */
@keyframes data-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Sidebar slide in from left */
@keyframes slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Mega menu drop */
@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Green loading bar */
@keyframes loading-bar {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Infobox image noise shimmer */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Ping — live indicator dot */
@keyframes ping {
  0%   { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* ── ANIMATION UTILITY CLASSES ───────────────────────────── */

/* Hero title glitch */
.anim-glitch {
  animation: glitch 8s ease-in-out infinite;
}

/* Nuclear pulse */
.anim-nuke-pulse {
  animation: nuke-pulse 3s ease-in-out infinite;
}

/* Slow spin */
.anim-spin-slow {
  animation: spin-slow 25s linear infinite;
}

/* Fade up on load */
.anim-fade-up {
  animation: fade-up .6s var(--ease) both;
}
.anim-fade-up-2 { animation: fade-up .6s .15s var(--ease) both; }
.anim-fade-up-3 { animation: fade-up .6s .3s var(--ease) both; }
.anim-fade-up-4 { animation: fade-up .6s .45s var(--ease) both; }

/* Amber classified flicker */
.anim-flicker {
  animation: amber-flicker 5s ease-in-out infinite;
}

/* Stats bar animate in */
.stat-bar-fill {
  animation: bar-fill 1.2s var(--ease) both;
}

/* ── RADIATION RING EFFECT ───────────────────────────────── */
.radiation-ring {
  position: relative; display: inline-block;
}
.radiation-ring::before,
.radiation-ring::after {
  content: ''; position: absolute; inset: -8px;
  border: 1px solid rgba(0,255,65,.4); border-radius: 50%;
  pointer-events: none;
}
.radiation-ring::before { animation: ring-expand 2.5s ease-out infinite; }
.radiation-ring::after  { animation: ring-expand 2.5s 1.25s ease-out infinite; }

/* ── LOADING BAR ─────────────────────────────────────────── */
.loading-bar {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 9999;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: loading-bar .6s var(--ease) forwards;
}

/* ── LIVE DOT ─────────────────────────────────────────────── */
.live-dot {
  display: inline-flex; align-items: center; gap: .4rem;
}
.live-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
  animation: ping 1.5s ease-in-out infinite;
  display: inline-block;
}

/* ── SHIMMER PLACEHOLDER ─────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-raised) 50%, var(--panel) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ── HERO LOAD SEQUENCE ──────────────────────────────────── */
.hero-eyebrow  { animation: fade-up .5s .1s var(--ease) both; }
.hero-title    { animation: fade-up .5s .25s var(--ease) both; }
.hero-subtitle { animation: fade-up .5s .4s var(--ease) both; }
.hero-tags     { animation: fade-up .5s .55s var(--ease) both; }
.hero-actions  { animation: fade-up .5s .65s var(--ease) both; }
.hero-symbol   { animation: fade-up .5s .2s var(--ease) both, nuke-pulse 3s .8s ease-in-out infinite, spin-slow 30s linear infinite; }

/* ── HOVER GLOW ──────────────────────────────────────────── */
.hover-glow { transition: box-shadow var(--t), border-color var(--t); }
.hover-glow:hover { box-shadow: 0 0 0 1px var(--green), 0 0 16px var(--green-glow); border-color: var(--green) !important; }

/* ── PAGE TRANSITION ─────────────────────────────────────── */
.page-enter { animation: page-wipe .4s var(--ease) both; }