/* ═══════════════════════════════════════════════════════════
   CYBERPUNK ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

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

.glitch-text {
    position: relative;
    display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.glitch-text::before {
    color: var(--neon-cyan);
    animation: glitch-shift-1 3s infinite linear alternate-reverse;
    clip-path: inset(0 0 65% 0);
}

.glitch-text::after {
    color: var(--neon-pink);
    animation: glitch-shift-2 2.5s infinite linear alternate-reverse;
    clip-path: inset(60% 0 0 0);
}

.glitch-text:hover::before {
    animation-duration: 0.3s;
}

.glitch-text:hover::after {
    animation-duration: 0.25s;
}

@keyframes glitch-shift-1 {
    0%, 80%, 100%  { transform: translate(0); }
    82%            { transform: translate(-3px, 1px); }
    84%            { transform: translate(2px, -1px); }
    86%            { transform: translate(-1px, 2px); }
}

@keyframes glitch-shift-2 {
    0%, 75%, 100%  { transform: translate(0); }
    77%            { transform: translate(2px, -2px); }
    79%            { transform: translate(-3px, 1px); }
    81%            { transform: translate(1px, 1px); }
}

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

.glitch-loader {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    letter-spacing: 0.3em;
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
    animation: glitch-flicker 2s infinite;
}

@keyframes glitch-flicker {
    0%, 100% { opacity: 1; }
    32%      { opacity: 1; }
    33%      { opacity: 0.3; }
    34%      { opacity: 1; }
    78%      { opacity: 1; }
    79%      { opacity: 0.5; transform: translateX(2px); }
    80%      { opacity: 1; transform: translateX(0); }
}

/* ── Blink ────────────────────────────────────────────────── */

@keyframes blink {
    50% { opacity: 0; }
}

/* ── Boot Progress ────────────────────────────────────────── */

@keyframes boot-load {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(250%); }
    100% { transform: translateX(-100%); }
}

/* ── Fade-In Stagger ──────────────────────────────────────── */

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-up 0.6s ease forwards;
}

.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }
.fade-in:nth-child(4) { animation-delay: 0.4s; }
.fade-in:nth-child(5) { animation-delay: 0.5s; }
.fade-in:nth-child(6) { animation-delay: 0.6s; }

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

/* ── Pulse Glow ───────────────────────────────────────────── */

.pulse-glow {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 65, 0.2); }
    50%      { box-shadow: 0 0 20px rgba(0, 255, 65, 0.4); }
}

/* ── Slide-In from Left ───────────────────────────────────── */

.slide-in-left {
    opacity: 0;
    transform: translateX(-30px);
    animation: slide-left 0.5s ease forwards;
}

@keyframes slide-left {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Scale Pop ────────────────────────────────────────────── */

.scale-pop {
    animation: scale-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scale-pop {
    0%   { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

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

.float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ── Neon Border Sweep ────────────────────────────────────── */

.border-sweep {
    position: relative;
    overflow: hidden;
}

.border-sweep::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -100%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
    animation: sweep 3s linear infinite;
}

@keyframes sweep {
    0%   { left: -50%; }
    100% { left: 150%; }
}

/* ── Typing ───────────────────────────────────────────────── */

.typing-line {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--neon-green);
    animation: typing 1.5s steps(40, end) forwards, blink-caret 0.75s step-end infinite;
    width: 0;
}

.typing-line.done {
    border-right: none;
    width: auto;
}

@keyframes typing {
    from { width: 0; }
    to   { width: 100%; }
}

@keyframes blink-caret {
    50% { border-color: transparent; }
}

/* ── Success Checkmark ────────────────────────────────────── */

.success-check {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--neon-green);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: check-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.3);
}

.success-check::after {
    content: '✓';
    font-size: 2.5rem;
    color: var(--neon-green);
    animation: check-draw 0.3s 0.3s ease forwards;
    opacity: 0;
}

@keyframes check-pop {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes check-draw {
    to { opacity: 1; }
}

/* ── Progress Bar Glow ────────────────────────────────────── */

.progress-bar {
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px currentColor;
}

.progress-bar__fill--green  { background: var(--neon-green);  color: var(--neon-green); }
.progress-bar__fill--cyan   { background: var(--neon-cyan);   color: var(--neon-cyan); }
.progress-bar__fill--amber  { background: var(--neon-amber);  color: var(--neon-amber); }
.progress-bar__fill--pink   { background: var(--neon-pink);   color: var(--neon-pink); }