/* Fade Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

@keyframes floatWithRotate {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Hover Effects */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Background Effects */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes glow {
    0% { box-shadow: 0 0 5px var(--color-secondary), 0 0 10px var(--color-secondary), 0 0 15px var(--color-secondary); }
    50% { box-shadow: 0 0 10px var(--color-secondary), 0 0 20px var(--color-secondary), 0 0 30px var(--color-secondary); }
    100% { box-shadow: 0 0 5px var(--color-secondary), 0 0 10px var(--color-secondary), 0 0 15px var(--color-secondary); }
}

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

/* Loading Animations */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes dash {
    to { stroke-dashoffset: 0; }
}

/* Text Reveal */
@keyframes textReveal {
    from {
        clip-path: inset(0 100% 0 0);
        transform: translateX(20px);
    }
    to {
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
}

/* Animation Utilities */
.animate-fade-in {
    animation: fadeIn var(--transition-smooth) forwards;
}

.animate-fade-up {
    animation: fadeInUp var(--transition-smooth) forwards;
}

.animate-fade-down {
    animation: fadeInDown var(--transition-smooth) forwards;
}

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

.animate-float-alt {
    animation: floatWithRotate 6s ease-in-out infinite;
}

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

.animate-wiggle {
    animation: wiggle 1s ease-in-out infinite;
}

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

.animate-shimmer {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

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

.animate-background-shift {
    background-size: 200% 200%;
    animation: backgroundShift 15s ease infinite;
}

/* Animation Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-900 { animation-delay: 900ms; }
.delay-1000 { animation-delay: 1000ms; }

/* Animation Durations */
.duration-100 { animation-duration: 100ms; }
.duration-200 { animation-duration: 200ms; }
.duration-300 { animation-duration: 300ms; }
.duration-400 { animation-duration: 400ms; }
.duration-500 { animation-duration: 500ms; }
.duration-600 { animation-duration: 600ms; }
.duration-700 { animation-duration: 700ms; }
.duration-800 { animation-duration: 800ms; }
.duration-900 { animation-duration: 900ms; }
.duration-1000 { animation-duration: 1000ms; }

/* Mint Section Animations */
@keyframes progressPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
    }
}

@keyframes mintSuccess {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    70% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes mintButtonHover {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.6);
    }
    70% {
        box-shadow: 0 0 10px 5px rgba(var(--primary-rgb), 0.2);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

.progress-fill {
    animation: progressPulse 2s infinite;
}

.mint-success {
    animation: mintSuccess 0.5s ease-out forwards;
}

#mint-button:hover {
    animation: mintButtonHover 1.5s infinite;
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
    .progress-fill,
    #mint-button:hover {
        animation: none;
    }
    
    .mint-success {
        animation-duration: 0.1s;
    }
}

.reduced-motion .progress-fill,
.reduced-motion #mint-button:hover {
    animation: none;
}

.reduced-motion .mint-success {
    animation-duration: 0.1s;
}

/* Enhanced Mint Section Animations */
@keyframes mintGlow {
    0% {
        box-shadow: 0 0 15px 0px rgba(var(--primary-rgb), 0.3);
    }
    50% {
        box-shadow: 0 0 25px 5px rgba(var(--primary-rgb), 0.5);
    }
    100% {
        box-shadow: 0 0 15px 0px rgba(var(--primary-rgb), 0.3);
    }
}

@keyframes floatingElement {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

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

@keyframes mintButtonGlow {
    0% {
        box-shadow: 0 5px 15px rgba(255, 153, 51, 0.3);
    }
    50% {
        box-shadow: 0 5px 25px rgba(255, 153, 51, 0.6);
    }
    100% {
        box-shadow: 0 5px 15px rgba(255, 153, 51, 0.3);
    }
}

@keyframes mintSuccessReveal {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    70% {
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.mint-container {
    animation: pulsingBorder 3s infinite ease-in-out;
}

#connect-wallet, #mint-button {
    animation: mintButtonGlow 3s infinite ease-in-out;
}

.mint-detail {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mint-detail:hover {
    animation: floatingElement 3s infinite ease-in-out;
}

.mint-result.visible .mint-success {
    animation: mintSuccessReveal 0.5s ease-out forwards;
}

#minted-image {
    animation: mintGlow 3s infinite ease-in-out;
    transition: transform 0.3s ease;
}

#minted-image:hover {
    transform: scale(1.05);
}

.progress-fill {
    background-size: 200% 100%;
    background-image: linear-gradient(90deg, 
        var(--accent-color) 0%, 
        var(--primary-color) 50%,
        var(--accent-color) 100%
    );
    animation: 
        progressPulse 2s infinite,
        progressMove 3s linear infinite;
}

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

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
    .mint-container,
    #connect-wallet,
    #mint-button,
    .mint-detail:hover,
    .progress-fill,
    #minted-image {
        animation: none;
    }
    
    .mint-result.visible .mint-success {
        animation-duration: 0.1s;
    }
}

@keyframes floatBackgroundPepe {
    0%, 100% {
        transform: translate(-5%, -5%) scale(1.3);
    }
    25% {
        transform: translate(-3%, -7%) scale(1.3);
    }
    50% {
        transform: translate(-7%, -3%) scale(1.3);
    }
    75% {
        transform: translate(-5%, -8%) scale(1.3);
    }
}