/*
 * AI Page Builder Theme - Advanced Animations
 * Smooth, modern animations for engaging user experiences
 */

/* ============================================================================
   FADE ANIMATIONS
   ============================================================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@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 fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* ============================================================================
   SCALE ANIMATIONS
   ============================================================================ */

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

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

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

/* ============================================================================
   ROTATE ANIMATIONS
   ============================================================================ */

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

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

/* ============================================================================
   BOUNCE ANIMATIONS
   ============================================================================ */

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes bounce-out {
    20% {
        transform: scale(0.9);
    }
    50%, 55% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* ============================================================================
   SLIDE ANIMATIONS
   ============================================================================ */

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

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

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* ============================================================================
   SHAKE & WIGGLE ANIMATIONS
   ============================================================================ */

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

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

/* ============================================================================
   GLOW & SHIMMER EFFECTS
   ============================================================================ */

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(102, 126, 234, 0.6);
    }
}

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

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

/* ============================================================================
   BACKGROUND ANIMATIONS
   ============================================================================ */

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

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

@keyframes gradient-xy {
    0%, 100% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
}

/* ============================================================================
   TYPING ANIMATION
   ============================================================================ */

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: currentColor;
    }
}

.aipb-typing {
    overflow: hidden;
    border-right: 0.15em solid;
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

/* ============================================================================
   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%;
    }
}

.aipb-morph {
    animation: morph 8s ease-in-out infinite;
}

/* ============================================================================
   PARTICLE EFFECTS
   ============================================================================ */

@keyframes float-particle {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
    }
}

.aipb-particle {
    animation: float-particle 15s infinite;
}

/* ============================================================================
   WAVE ANIMATIONS
   ============================================================================ */

@keyframes wave {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.aipb-wave {
    animation: wave 10s linear infinite;
}

/* ============================================================================
   LOADING ANIMATIONS
   ============================================================================ */

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

.aipb-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes dots {
    0%, 20% {
        color: rgba(0, 0, 0, 0);
        text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0),
                     0.5em 0 0 rgba(0, 0, 0, 0);
    }
    40% {
        color: currentColor;
        text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0),
                     0.5em 0 0 rgba(0, 0, 0, 0);
    }
    60% {
        text-shadow: 0.25em 0 0 currentColor,
                     0.5em 0 0 rgba(0, 0, 0, 0);
    }
    80%, 100% {
        text-shadow: 0.25em 0 0 currentColor,
                     0.5em 0 0 currentColor;
    }
}

.aipb-loading-dots:after {
    content: '.';
    animation: dots 1.5s steps(5, end) infinite;
}

/* ============================================================================
   PROGRESS BAR ANIMATIONS
   ============================================================================ */

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

.aipb-progress-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.aipb-progress-fill {
    height: 100%;
    background: var(--gradient-aurora);
    animation: progress 2s ease-out;
}

/* ============================================================================
   UTILITY ANIMATION CLASSES
   ============================================================================ */

.aipb-animate-fadeIn {
    animation: fadeIn 0.6s var(--ease-smooth);
}

.aipb-animate-fadeInUp {
    animation: fadeInUp 0.6s var(--ease-smooth);
}

.aipb-animate-fadeInDown {
    animation: fadeInDown 0.6s var(--ease-smooth);
}

.aipb-animate-fadeInLeft {
    animation: fadeInLeft 0.6s var(--ease-smooth);
}

.aipb-animate-fadeInRight {
    animation: fadeInRight 0.6s var(--ease-smooth);
}

.aipb-animate-scaleIn {
    animation: scaleIn 0.6s var(--ease-smooth);
}

.aipb-animate-bounce {
    animation: bounce-in 0.8s var(--ease-bounce);
}

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

.aipb-animate-rotate {
    animation: rotate 20s linear infinite;
}

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

/* Animation delays */
.aipb-delay-100 { animation-delay: 0.1s; }
.aipb-delay-200 { animation-delay: 0.2s; }
.aipb-delay-300 { animation-delay: 0.3s; }
.aipb-delay-400 { animation-delay: 0.4s; }
.aipb-delay-500 { animation-delay: 0.5s; }
.aipb-delay-600 { animation-delay: 0.6s; }
.aipb-delay-700 { animation-delay: 0.7s; }
.aipb-delay-800 { animation-delay: 0.8s; }

/* Animation durations */
.aipb-duration-fast { animation-duration: 0.3s; }
.aipb-duration-normal { animation-duration: 0.6s; }
.aipb-duration-slow { animation-duration: 1s; }
.aipb-duration-slower { animation-duration: 2s; }

/* ============================================================================
   HOVER EFFECTS
   ============================================================================ */

.aipb-hover-lift {
    transition: transform 0.3s var(--ease-smooth);
}

.aipb-hover-lift:hover {
    transform: translateY(-4px);
}

.aipb-hover-grow {
    transition: transform 0.3s var(--ease-smooth);
}

.aipb-hover-grow:hover {
    transform: scale(1.05);
}

.aipb-hover-glow:hover {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.4);
    transition: box-shadow 0.3s var(--ease-smooth);
}

.aipb-hover-gradient {
    background-size: 200% auto;
    transition: background-position 0.5s var(--ease-smooth);
}

.aipb-hover-gradient:hover {
    background-position: right center;
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

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