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

/* ========== FADE IN ========== */
.fade-in {
    animation: fadeIn 0.8s ease forwards;
}

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

/* ========== SLIDE UP ========== */
.slide-up {
    animation: slideUp 0.8s ease forwards;
}

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

/* ========== SLIDE LEFT ========== */
.slide-left {
    animation: slideLeft 0.8s ease forwards;
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========== SLIDE RIGHT ========== */
.slide-right {
    animation: slideRight 0.8s ease forwards;
}

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

/* ========== ZOOM IN ========== */
.zoom-in {
    animation: zoomIn 0.8s ease forwards;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========== FLIP IN ========== */
.flip-in {
    animation: flipIn 0.8s ease forwards;
    perspective: 1000px;
}

@keyframes flipIn {
    from {
        opacity: 0;
        transform: rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: rotateY(0);
    }
}

/* ========== ROTATE ========== */
.rotate-in {
    animation: rotateIn 0.8s ease forwards;
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

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

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

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

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

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

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

/* ========== RIPPLE BUTTON ========== */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple .ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ========== HOVER LIFT ========== */
.hover-lift {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* ========== CARD SHADOW ========== */
.card-shadow {
    transition: all 0.3s ease;
}

.card-shadow:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* ========== ANIMATED UNDERLINE ========== */
.animated-underline {
    position: relative;
    display: inline-block;
}

.animated-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secondary);
    transition: width 0.3s ease;
}

.animated-underline:hover::after {
    width: 100%;
}

/* ========== IMAGE ZOOM ========== */
.image-zoom {
    overflow: hidden;
}

.image-zoom img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.image-zoom:hover img {
    transform: scale(1.1);
}

/* ========== PRODUCT HOVER CARD ========== */
.product-hover-card {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-hover-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* ========== LOADING SPINNER ========== */
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner 0.75s linear infinite;
}

/* ========== PAGE TRANSITION ========== */
.page-transition {
    animation: pageTransition 0.6s ease forwards;
}

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

/* ========== COUNTER ANIMATION ========== */
.counter-number {
    display: inline-block;
    font-weight: 700;
}

/* ========== TYPEWRITER CURSOR ========== */
.typewriter-cursor {
    border-right: 3px solid var(--secondary);
    animation: blink 0.8s step-end infinite;
}

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

/* ========== SMOOTH SCROLL ========== */
html {
    scroll-behavior: smooth;
}

/* ========== DELAY CLASSES ========== */
.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; }
.delay-9 { animation-delay: 0.9s; }
.delay-10 { animation-delay: 1s; }

/* ========== DURATION CLASSES ========== */
.duration-300 { animation-duration: 0.3s; }
.duration-500 { animation-duration: 0.5s; }
.duration-800 { animation-duration: 0.8s; }
.duration-1000 { animation-duration: 1s; }
.duration-1500 { animation-duration: 1.5s; }