/* ============================================
   ANIMATIONS — Dev Davda Portfolio
   GPU-accelerated keyframe animations
   ============================================ */

/* ─── Preloader Animations ─── */
@keyframes preloader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes preloader-pulse {
    0%, 100% { 
        opacity: 0.5;
        transform: scale(0.95);
    }
    50% { 
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes preloader-progress {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes preloader-glow {
    0%, 100% { 
        box-shadow: 0 0 5px var(--color-neon-blue), 0 0 10px var(--color-neon-blue);
    }
    50% { 
        box-shadow: 0 0 15px var(--color-neon-blue), 0 0 30px var(--color-neon-blue), 0 0 60px var(--color-neon-purple);
    }
}

@keyframes preloader-morph {
    0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
    50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
    75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
}

@keyframes wireframe-rotate {
    0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg); }
}

/* ─── Floating Animations ─── */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(-20px) rotate(-1deg); }
}

@keyframes float-gentle {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(-8px) translateX(4px); }
    50% { transform: translateY(-15px) translateX(0px); }
    75% { transform: translateY(-8px) translateX(-4px); }
}

/* ─── Glow Animations ─── */
@keyframes glow-pulse {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(0, 212, 255, 0.2),
                    0 0 10px rgba(0, 212, 255, 0.1);
    }
    50% { 
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.4),
                    0 0 30px rgba(0, 212, 255, 0.2),
                    0 0 60px rgba(0, 212, 255, 0.1);
    }
}

@keyframes glow-pulse-purple {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(123, 47, 247, 0.2),
                    0 0 10px rgba(123, 47, 247, 0.1);
    }
    50% { 
        box-shadow: 0 0 15px rgba(123, 47, 247, 0.4),
                    0 0 30px rgba(123, 47, 247, 0.2),
                    0 0 60px rgba(123, 47, 247, 0.1);
    }
}

@keyframes text-glow {
    0%, 100% { text-shadow: 0 0 10px rgba(0, 212, 255, 0.3); }
    50% { text-shadow: 0 0 20px rgba(0, 212, 255, 0.6), 0 0 40px rgba(0, 212, 255, 0.3); }
}

@keyframes border-glow {
    0%, 100% { border-color: rgba(0, 212, 255, 0.2); }
    50% { border-color: rgba(0, 212, 255, 0.5); }
}

/* ─── Gradient Animations ─── */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes gradient-rotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ─── Blob / Morph ─── */
@keyframes blob-morph {
    0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: translate(0, 0) rotate(0deg); }
    25% { border-radius: 70% 30% 46% 54% / 30% 58% 42% 70%; transform: translate(5px, -10px) rotate(5deg); }
    50% { border-radius: 30% 70% 35% 65% / 60% 40% 60% 40%; transform: translate(-5px, 5px) rotate(-3deg); }
    75% { border-radius: 55% 45% 60% 40% / 35% 65% 35% 65%; transform: translate(3px, 8px) rotate(2deg); }
}

@keyframes blob-morph-2 {
    0%, 100% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
    25% { border-radius: 45% 55% 70% 30% / 50% 36% 64% 50%; }
    50% { border-radius: 60% 40% 42% 58% / 38% 62% 38% 62%; }
    75% { border-radius: 38% 62% 55% 45% / 55% 45% 55% 45%; }
}

/* ─── Aurora / Background ─── */
@keyframes aurora {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 0.3;
    }
    33% { 
        transform: translate(-30%, -60%) rotate(120deg) scale(1.1);
        opacity: 0.5;
    }
    66% { 
        transform: translate(-70%, -40%) rotate(240deg) scale(0.9);
        opacity: 0.4;
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
        opacity: 0.3;
    }
}

@keyframes aurora-2 {
    0% { 
        transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
        opacity: 0.2;
    }
    50% { 
        transform: translate(-40%, -55%) rotate(0deg) scale(0.8);
        opacity: 0.4;
    }
    100% { 
        transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
        opacity: 0.2;
    }
}

@keyframes noise-shift {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(-10%, 5%); }
    30% { transform: translate(5%, -10%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-10%, 5%); }
    60% { transform: translate(15%, 0); }
    70% { transform: translate(0, 10%); }
    80% { transform: translate(-15%, 0); }
    90% { transform: translate(10%, 5%); }
    100% { transform: translate(5%, 0); }
}

/* ─── Particle Drift ─── */
@keyframes particle-drift {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) translateX(50px) scale(0.5); opacity: 0; }
}

@keyframes particle-drift-reverse {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { transform: translateY(100vh) translateX(-30px); opacity: 0; }
}

/* ─── Rotation ─── */
@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

@keyframes orbit {
    from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}

/* ─── Scale / Reveal ─── */
@keyframes scale-in {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes scale-in-bounce {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@keyframes fade-in-left {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-right {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slide-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes reveal-text {
    from { 
        clip-path: inset(0 100% 0 0);
    }
    to { 
        clip-path: inset(0 0% 0 0);
    }
}

@keyframes reveal-up {
    from {
        clip-path: inset(100% 0 0 0);
        transform: translateY(20px);
    }
    to {
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }
}

/* ─── Typewriter ─── */
@keyframes blink-caret {
    0%, 100% { border-color: var(--color-neon-blue); }
    50% { border-color: transparent; }
}

/* ─── Ripple ─── */
@keyframes ripple {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(4); opacity: 0; }
}

/* ─── Progress Ring ─── */
@keyframes progress-ring {
    from { stroke-dashoffset: var(--circumference, 283); }
    to { stroke-dashoffset: var(--target-offset, 0); }
}

/* ─── Line Draw ─── */
@keyframes draw-line {
    from { height: 0; }
    to { height: 100%; }
}

@keyframes draw-line-horizontal {
    from { width: 0; }
    to { width: 100%; }
}

/* ─── Magnetic / Elastic ─── */
@keyframes elastic {
    0% { transform: scale(1); }
    30% { transform: scale(1.25); }
    40% { transform: scale(0.95); }
    50% { transform: scale(1.1); }
    65% { transform: scale(0.98); }
    75% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* ─── Scroll Indicator ─── */
@keyframes scroll-indicator {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(8px); opacity: 0.5; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ─── Gradient Border Animation ─── */
@keyframes border-gradient-rotate {
    0% { --angle: 0deg; }
    100% { --angle: 360deg; }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ─── Counter Increment ─── */
@keyframes count-up {
    from { --num: 0; }
    to { --num: var(--target); }
}

/* ─── Marquee ─── */
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ─── Utility Animation Classes ─── */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-float-gentle { animation: float-gentle 10s ease-in-out infinite; }
.animate-glow { animation: glow-pulse 3s ease-in-out infinite; }
.animate-glow-purple { animation: glow-pulse-purple 3s ease-in-out infinite; }
.animate-gradient { 
    background-size: 200% 200%;
    animation: gradient-shift 4s ease infinite; 
}
.animate-shimmer {
    background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
}
.animate-rotate { animation: rotate-slow 20s linear infinite; }
.animate-rotate-reverse { animation: rotate-reverse 25s linear infinite; }
.animate-blob { animation: blob-morph 15s ease-in-out infinite; }
.animate-blob-2 { animation: blob-morph-2 18s ease-in-out infinite; }
.animate-aurora { animation: aurora 20s ease-in-out infinite; }
.animate-text-glow { animation: text-glow 3s ease-in-out infinite; }
.animate-border-glow { animation: border-glow 3s ease-in-out infinite; }

/* ─── Hover Transitions ─── */
.hover-lift {
    transition: transform var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal) var(--ease-smooth);
}
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--glow-card-hover);
}

.hover-glow {
    transition: box-shadow var(--duration-normal) var(--ease-smooth);
}
.hover-glow:hover {
    box-shadow: var(--glow-neon);
}

.hover-scale {
    transition: transform var(--duration-normal) var(--ease-spring);
}
.hover-scale:hover {
    transform: scale(1.05);
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}