/* ═══════════════════════════════════════════════════
   CYBERPUNK PROFESSIONAL ANIMATION SYSTEM
   ASH_X8 Portfolio
═══════════════════════════════════════════════════ */

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

@keyframes gradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

/* ── NEON & GLOW ─────────────────────────────── */

@keyframes neon-glow {
    0%, 100% {
        text-shadow: 0 0 10px #00f3ff, 0 0 20px #00f3ff, 0 0 40px #0099ff;
        color: #00f3ff;
    }
    50% {
        text-shadow: 0 0 20px #00f3ff, 0 0 40px #00f3ff, 0 0 70px #0066ff;
        color: #ffffff;
    }
}

@keyframes neonBorderPulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(168,85,247,0.2), inset 0 0 8px rgba(168,85,247,0.05);
        border-color: rgba(168,85,247,0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(168,85,247,0.5), 0 0 60px rgba(236,72,153,0.2), inset 0 0 20px rgba(168,85,247,0.1);
        border-color: rgba(168,85,247,0.7);
    }
}

@keyframes cyberNeonPurple {
    0%, 100% { box-shadow: 0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 20px rgba(168,85,247,0.3); }
    50% { box-shadow: 0 0 10px #a855f7, 0 0 25px #a855f7, 0 0 50px rgba(168,85,247,0.5); }
}

/* ── GLITCH EFFECTS ──────────────────────────── */

@keyframes textGlitch {
    0%, 90%, 100% {
        text-shadow: 0 0 10px rgba(168,85,247,0.6), 0 0 20px rgba(236,72,153,0.3);
    }
    92% {
        text-shadow: -3px 0 #ec4899, 3px 0 #06b6d4;
        transform: translate(-1px, 0) skewX(-1deg);
    }
    94% {
        text-shadow: 3px 0 #a855f7, -3px 0 #ec4899;
        transform: translate(1px, 0) skewX(1deg);
    }
    96% {
        text-shadow: -3px 0 #06b6d4, 3px 0 #a855f7;
        transform: translate(0, 1px);
    }
}

@keyframes cyber-glitch {
    0% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; transform: translate(0); }
    20% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; transform: translate(-2px, 2px); }
    40% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; transform: translate(-2px, -2px); }
    60% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; transform: translate(2px, 2px); }
    80% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; transform: translate(2px, -2px); }
    100% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; transform: translate(0); }
}

@keyframes chromatic-shift {
    0% { text-shadow: -3px 0 #ff00ff, 3px 0 #00ffff, 0 0 15px rgba(0,255,255,0.5); }
    50% { text-shadow: -3px 0 #00ffff, 3px 0 #ff00ff, 0 0 15px rgba(255,0,255,0.5); }
    100% { text-shadow: -3px 0 #ff00ff, 3px 0 #00ffff, 0 0 15px rgba(0,255,255,0.5); }
}

/* ── PULSE & BREATHE ─────────────────────────── */

@keyframes textPulse {
    0%, 100% {
        opacity: 1;
        letter-spacing: 0;
        text-shadow: 0 0 10px rgba(168,85,247,0.4);
    }
    50% {
        opacity: 0.75;
        letter-spacing: 3px;
        text-shadow: 0 0 30px rgba(168,85,247,0.8), 0 0 50px rgba(236,72,153,0.5);
    }
}

@keyframes pulse-expand {
    0%, 100% {
        text-shadow: 0 0 10px #00f3ff, 0 0 20px #00f3ff;
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 20px #00f3ff, 0 0 40px #00f3ff, 0 0 60px #00f3ff;
        transform: scale(1.02);
    }
}

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

/* ── SHIMMER & FLOW ──────────────────────────── */

@keyframes textShimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes hologram-shimmer {
    0%, 100% { background-position: 200% 0; opacity: 0.6; }
    50% { background-position: -200% 0; opacity: 1; }
}

@keyframes shimmer-wave {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* ── DIGITAL / TECH ──────────────────────────── */

@keyframes digital-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 0 0 10px #00f3ff, 0 0 20px #00f3ff;
        opacity: 1;
    }
    20%, 24%, 55% {
        text-shadow: 0 0 5px #00f3ff;
        opacity: 0.5;
    }
}

@keyframes matrix-scan {
    0% { text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; color: #00ff00; }
    50% { text-shadow: 0 0 5px #00ff00; color: rgba(0,255,0,0.8); }
    100% { text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; color: #00ff00; }
}

@keyframes rainbowText {
    0% { color: #a855f7; }
    25% { color: #ec4899; }
    50% { color: #06b6d4; }
    75% { color: #a855f7; }
    100% { color: #a855f7; }
}

/* ── ENTRANCE ANIMATIONS ─────────────────────── */

@keyframes slideInText {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideLeft {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes blur-reveal {
    0% { filter: blur(12px); opacity: 0; transform: scale(0.96); }
    100% { filter: blur(0); opacity: 1; transform: scale(1); }
}

@keyframes charReveal {
    to { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

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

@keyframes font-rotate-entrance {
    0% { transform: rotateY(90deg); opacity: 0; }
    100% { transform: rotateY(0deg); opacity: 1; }
}

@keyframes font-slide-entrance {
    0% { transform: translateX(-30px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* ── TYPEWRITER ──────────────────────────────── */

@keyframes typewriter-cursor {
    0%, 49% { border-right-color: #a855f7; }
    50%, 100% { border-right-color: transparent; }
}

/* ── GLOW BOX ────────────────────────────────── */

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(0,243,255,0.5), inset 0 0 10px rgba(0,243,255,0.1); }
    50% { box-shadow: 0 0 30px rgba(0,243,255,0.8), inset 0 0 20px rgba(0,243,255,0.3); }
}

@keyframes liquid-wave {
    0%, 100% { transform: translateY(0px); opacity: 1; }
    25% { transform: translateY(-10px); }
    50% { transform: translateY(0px); }
    75% { transform: translateY(-5px); }
}

/* ═══════════════════════════════════════════════════
   ANIMATION UTILITY CLASSES
═══════════════════════════════════════════════════ */

.anim-glitch         { animation: textGlitch 4s ease-in-out infinite; }
.anim-pulse-text     { animation: textPulse 2.5s ease-in-out infinite; }
.anim-slide-in       { animation: slideInText 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.anim-fade-scale     { animation: fadeInScale 0.8s ease-out forwards; }
.anim-floating       { animation: floatingText 3s ease-in-out infinite; }
.anim-rainbow        { animation: rainbowText 4s ease-in-out infinite; }
.anim-fade-up        { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.anim-zoom-in        { animation: zoomIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.anim-slide-left     { animation: slideLeft 0.6s ease forwards; }
.anim-slide-right    { animation: slideRight 0.6s ease forwards; }
.anim-neon-border    { animation: neonBorderPulse 3s ease-in-out infinite; }
.anim-gradient-flow  { animation: gradientFlow 4s ease infinite; background-size: 200% 200%; }
.anim-blur-reveal    { animation: blur-reveal 0.8s ease-out forwards; }
.anim-neon-glow      { animation: neon-glow 2s ease-in-out infinite; font-weight: 700; }
.anim-cyber-glitch   { animation: cyber-glitch 0.4s infinite; font-weight: 600; letter-spacing: 2px; }
.anim-liquid-wave    { animation: liquid-wave 1.5s ease-in-out infinite; display: inline-block; }
.anim-chromatic      { animation: chromatic-shift 2s ease-in-out infinite; font-weight: 700; }
.anim-digital-flicker{ animation: digital-flicker 0.15s infinite; font-weight: 600; }
.anim-pulse-expand   { animation: pulse-expand 1.5s ease-in-out infinite; font-weight: 700; }
.anim-matrix-scan    { animation: matrix-scan 1s ease-in-out infinite; font-family: 'JetBrains Mono', monospace; }
.anim-glow-box       { animation: glow-pulse 2s ease-in-out infinite; }
.anim-typewriter-cursor {
    border-right: 3px solid transparent;
    animation: typewriter-cursor 0.6s step-end infinite;
}

.font-entrance-scale  { animation: font-scale-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.font-entrance-rotate { animation: font-rotate-entrance 0.8s ease-out; perspective: 1000px; }
.font-entrance-slide  { animation: font-slide-entrance 0.5s ease-out; }

/* ── STAGGERED CHILDREN ──────────────────────── */

.stagger-item { animation: blur-reveal 0.8s ease-out forwards; opacity: 0; }
.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(n+6) { animation-delay: 0.6s; }

/* ── ACCESSIBILITY ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}