/* ============================================
   DF DEV - Extra Animations & Effects
   ============================================ */

/* ===== GRADIENT ANIMATIONS ===== */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== NEON GLOW ===== */
@keyframes neonGlow {
    0%, 100% {
        text-shadow: 0 0 10px #e63946, 0 0 20px #e63946;
    }
    50% {
        text-shadow: 0 0 20px #e63946, 0 0 40px #e63946, 0 0 60px #2563eb;
    }
}

/* ===== LIQUID SWIRL ===== */
@keyframes liquidSwirl {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ===== MORPHING SHAPES ===== */
@keyframes morph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

/* ===== TYPING ANIMATION ===== */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

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

/* ===== COLOR SHIFT ===== */
@keyframes colorShift {
    0% { color: #e63946; }
    50% { color: #2563eb; }
    100% { color: #e63946; }
}

/* ===== SHADOW DANCE ===== */
@keyframes shadowDance {
    0% { box-shadow: 0px 0px 0px #e63946; }
    25% { box-shadow: 10px 0px 20px #e63946; }
    50% { box-shadow: 0px 10px 20px #2563eb; }
    75% { box-shadow: -10px 0px 20px #e63946; }
    100% { box-shadow: 0px -10px 20px #2563eb; }
}

/* ===== HEARTBEAT ===== */
@keyframes heartbeat {
    0%, 39%, 58%, 100% { transform: scale(1); }
    41%, 43% { transform: scale(1.1); }
    45%, 47% { transform: scale(1.15); }
    49%, 51% { transform: scale(1.1); }
    53%, 55% { transform: scale(1.05); }
    57% { transform: scale(1); }
}

/* ===== JELLO (WOBBLE) ===== */
@keyframes jello {
    0%, 11.1%, 100% { transform: translate3d(0, 0, 0); }
    22.2% { transform: translate3d(-12.5px, 0, 0) skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { transform: translate3d(6.25px, 0, 0) skewX(6.25deg) skewY(6.25deg); }
    44.4% { transform: translate3d(-6.25px, 0, 0) skewX(-6.25deg) skewY(-6.25deg); }
    55.5% { transform: translate3d(3.125px, 0, 0) skewX(3.125deg) skewY(3.125deg); }
    66.6% { transform: translate3d(-3.125px, 0, 0) skewX(-3.125deg) skewY(-3.125deg); }
    77.7% { transform: translate3d(1.5625px, 0, 0) skewX(1.5625deg) skewY(1.5625deg); }
    88.8% { transform: translate3d(-1.5625px, 0, 0) skewX(-1.5625deg) skewY(-1.5625deg); }
}

/* ===== WIGGLE ===== */
@keyframes wiggle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px) rotate(-5deg); }
    75% { transform: translateX(3px) rotate(3deg); }
}

/* ===== ELASTIC ===== */
@keyframes elastic {
    from { transform: scale(0); }
    50% { transform: scale(1.05); }
    to { transform: scale(1); }
}

/* ===== FLASH ===== */
@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

/* ===== SHAKE ===== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* ===== RIPPLE EFFECT (for buttons) ===== */
@keyframes rippleEffect {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ===== GRADIENT TEXT ===== */
.gradient-text {
    background: linear-gradient(135deg, #e63946, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
    background-size: 200% 200%;
}

/* ===== PULSE GLOW ===== */
.pulse-glow {
    animation: glowPulse 2s ease-in-out infinite;
}

/* ===== FLOATING ===== */
.floating {
    animation: floatSlow 6s ease-in-out infinite;
}

/* ===== SPIN SLOW ===== */
.spin-slow {
    animation: spinSlow 20s linear infinite;
}

@keyframes spinSlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== BOUNCE CONTINUOUS ===== */
.bounce-continuous {
    animation: bounce 2s ease-in-out infinite;
}

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

/* ===== SPECIAL EFFECTS ===== */
.glow-on-hover:hover {
    filter: drop-shadow(0 0 15px rgba(230, 57, 70, 0.5));
}

.blur-on-hover:hover {
    filter: blur(2px);
}

.brighten-on-hover:hover {
    filter: brightness(1.2);
}

.saturate-on-hover:hover {
    filter: saturate(1.5);
}

/* ===== ANIMATION DELAYS ===== */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }

/* ===== DURATION MODIFIERS ===== */
.duration-fast { animation-duration: 0.5s; }
.duration-normal { animation-duration: 1s; }
.duration-slow { animation-duration: 2s; }
.duration-slower { animation-duration: 3s; }

/* ===== INTERACTIVE ELEMENTS ===== */
button, a, [role="button"] {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

input, textarea, select {
    transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    animation: pulse 0.6s ease-in-out;
}

/* ===== SCROLLBAR ANIMATION (Webkit) ===== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #e63946, #2563eb);
    border-radius: 10px;
    animation: gradientShift 3s ease infinite;
    background-size: 200% 200%;
}

::-webkit-scrollbar-thumb:hover {
    background: #e63946;
}