/* ========================================
   ANIMATIONS.CSS — Keyframes & Transitions
   GaDev.it
   ======================================== */

/* Glitch Effect */
.glitch { position: relative; }
.glitch::before, .glitch::after {
    content: attr(data-text); position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; overflow: hidden;
}
.glitch::before { color: var(--accent-cyan); z-index: -1; animation: glitch-1 5s infinite linear alternate-reverse; }
.glitch::after { color: var(--accent-violet); z-index: -2; animation: glitch-2 5s infinite linear alternate-reverse; }

@keyframes glitch-1 {
    0%,95%{clip-path:inset(0 0 0 0);transform:translate(0)}
    96%{clip-path:inset(20% 0 60% 0);transform:translate(-3px,1px)}
    97%{clip-path:inset(50% 0 30% 0);transform:translate(3px,-1px)}
    98%{clip-path:inset(10% 0 70% 0);transform:translate(-2px,2px)}
    99%{clip-path:inset(60% 0 20% 0);transform:translate(2px,-2px)}
    100%{clip-path:inset(0 0 0 0);transform:translate(0)}
}
@keyframes glitch-2 {
    0%,95%{clip-path:inset(0 0 0 0);transform:translate(0)}
    96%{clip-path:inset(60% 0 20% 0);transform:translate(3px,-1px)}
    97%{clip-path:inset(30% 0 50% 0);transform:translate(-3px,1px)}
    98%{clip-path:inset(70% 0 10% 0);transform:translate(2px,-2px)}
    99%{clip-path:inset(20% 0 60% 0);transform:translate(-2px,2px)}
    100%{clip-path:inset(0 0 0 0);transform:translate(0)}
}

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,0.4)} 50%{box-shadow:0 0 0 8px rgba(0,255,136,0)} }
@keyframes glow-pulse { 0%,100%{box-shadow:0 0 20px rgba(0,240,255,0.2)} 50%{box-shadow:0 0 35px rgba(0,240,255,0.4)} }
@keyframes rotate-ring { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0deg)} 25%{transform:translateY(-12px) rotate(3deg)} 50%{transform:translateY(-6px) rotate(-2deg)} 75%{transform:translateY(-15px) rotate(2deg)} }
@keyframes bounce-down { 0%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(8px)} 60%{transform:translateY(4px)} }
@keyframes fade-in-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes shimmer { 0%{left:-100%} 100%{left:200%} }
@keyframes counter-pop { 0%{transform:scale(1)} 50%{transform:scale(1.1)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
@keyframes pop-in { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes certificate-glow { 0%,100%{box-shadow:0 0 30px rgba(0,240,255,0.15)} 50%{box-shadow:0 0 60px rgba(0,240,255,0.3),0 0 80px rgba(123,47,255,0.15)} }

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

/* Gradient Mesh Background */
body::before {
    content:''; position:fixed; top:0; left:0; width:100%; height:100%;
    z-index:0; pointer-events:none;
    background: radial-gradient(ellipse at 20% 50%,rgba(0,240,255,0.04) 0%,transparent 50%),
                radial-gradient(ellipse at 80% 20%,rgba(123,47,255,0.04) 0%,transparent 50%),
                radial-gradient(ellipse at 50% 80%,rgba(0,255,136,0.02) 0%,transparent 50%);
    background-size:200% 200%; animation:gradient-shift 20s ease infinite;
}

/* Reveal Delays */
.reveal[data-delay="100"]{transition-delay:.1s}
.reveal[data-delay="200"]{transition-delay:.2s}
.reveal[data-delay="300"]{transition-delay:.3s}
.reveal[data-delay="400"]{transition-delay:.4s}
.reveal[data-delay="500"]{transition-delay:.5s}

/* Card Shimmer */
.service-card::after,.portfolio-card::after {
    content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.03),transparent);
    transition:left 0.6s; pointer-events:none;
}
.service-card:hover::after,.portfolio-card:hover::after { left:200%; }

.stat-number.counted { animation:counter-pop 0.6s ease; }