/* ============================================================
   ANIMATIONS — keyframes & utility animation classes
   ============================================================ */

/* ── Glitch ────────────────────────────────────────────────── */

@keyframes glitch-skew {
    0%,87%,100% { transform: skew(0deg); }
    88%          { transform: skew(-2deg) scaleX(1.02); }
    90%          { transform: skew(1.5deg); }
    92%          { transform: skew(-0.5deg); }
}

@keyframes glitch-top {
    0%,83%,100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translateX(0); }
    84%          { clip-path: inset(0 0 52% 0); opacity: 0.9; transform: translateX(-6px); }
    86%          { clip-path: inset(4% 0 48% 0); opacity: 0.9; transform: translateX(5px); }
    88%          { clip-path: inset(0 0 58% 0); opacity: 0.9; transform: translateX(-3px); }
    90%          { opacity: 0; }
}

@keyframes glitch-bottom {
    0%,78%,100% { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateX(0); }
    79%          { clip-path: inset(52% 0 0 0); opacity: 0.9; transform: translateX(6px); }
    81%          { clip-path: inset(48% 0 4% 0); opacity: 0.9; transform: translateX(-5px); }
    83%          { opacity: 0; }
}

.glitch {
    position: relative;
    animation: glitch-skew 9s infinite;
}
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    width: 100%;
}
.glitch::before {
    color: var(--cyan);
    animation: glitch-top 9s infinite;
}
.glitch::after {
    color: var(--green);
    animation: glitch-bottom 9s infinite;
}

/* ── Cursor blink ──────────────────────────────────────────── */

@keyframes cursor-blink {
    0%,100% { opacity: 1; }
    50%      { opacity: 0; }
}
.cursor-blink { animation: cursor-blink 0.75s step-end infinite; }

/* ── Pulse glow ────────────────────────────────────────────── */

@keyframes pulse-cyan {
    0%,100% { box-shadow: 0 0 8px  rgba(0,212,255,0.20); }
    50%      { box-shadow: 0 0 30px rgba(0,212,255,0.70), 0 0 60px rgba(0,212,255,0.25); }
}
@keyframes pulse-green {
    0%,100% { box-shadow: 0 0 8px  rgba(0,255,135,0.20); }
    50%      { box-shadow: 0 0 30px rgba(0,255,135,0.70), 0 0 60px rgba(0,255,135,0.25); }
}
@keyframes pulse-text-cyan {
    0%,100% { text-shadow: 0 0 10px rgba(0,212,255,0.30); }
    50%      { text-shadow: 0 0 22px rgba(0,212,255,0.90), 0 0 50px rgba(0,212,255,0.40); }
}

/* ── Float ─────────────────────────────────────────────────── */

@keyframes float {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
.float { animation: float 4s ease-in-out infinite; }

/* ── Scan line ─────────────────────────────────────────────── */

@keyframes scan-line {
    0%   { top: -3px; opacity: 0; }
    4%   { opacity: 1; }
    96%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ── Spin ──────────────────────────────────────────────────── */

@keyframes spin-slow    { from { transform: rotate(0deg);   } to { transform: rotate(360deg);  } }
@keyframes spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg);    } }

/* ── Fade sequences ────────────────────────────────────────── */

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Grid breathe ──────────────────────────────────────────── */

@keyframes grid-breathe {
    0%,100% { opacity: 0.04; }
    50%      { opacity: 0.10; }
}

/* ── Badge dot pulse ───────────────────────────────────────── */

@keyframes dot-pulse {
    0%,100% { transform: scale(1);   box-shadow: 0 0 0   0   rgba(0,255,135,0.7); }
    50%      { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(0,255,135,0);   }
}

/* ── Number flash ──────────────────────────────────────────── */

@keyframes num-flash {
    0%,100% { color: var(--cyan);  }
    50%      { color: var(--green); }
}

/* ── Terminal cursor ───────────────────────────────────────── */

@keyframes term-cursor {
    0%,100% { background: var(--cyan);     }
    50%      { background: transparent;    }
}

/* ── Scroll line fall ──────────────────────────────────────── */

@keyframes scroll-fall {
    0%   { height: 0;    opacity: 1; }
    80%  { height: 48px; opacity: 1; }
    100% { height: 48px; opacity: 0; }
}