<style>
/* ================================
   MODERN PRODUCT ANIMATION
================================ */

/* Fade + Slide จากซ้าย */
@keyframes fadeSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade + Slide จากขวา */
@keyframes fadeSlideRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade + Slide จากขวา Step2 */
@keyframes fadeSlideRightTwo {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade + Slide จากขวา Step3 */
@keyframes fadeSlideRightTree {
    from {
        opacity: 0;
        transform: translateX(150px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade + Slide จากด้านล่าง */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade อย่างเดียว */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* ================================
   ELEMENTS
================================ */

.product-image-animation {
    opacity: 0;
    animation: fadeSlideLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1)
               0.1s forwards;
}

.product-title-animation {
    opacity: 0;
    animation: fadeSlideRight 1.2s cubic-bezier(0.22, 1, 0.36, 1)
               0.1s forwards;
}

.product-title-animation2 {
    opacity: 0;
    animation: fadeSlideRightTwo 1.2s cubic-bezier(0.22, 1, 0.36, 1)
               0.1s forwards;
}

.product-title-animation3 {
    opacity: 0;
    animation: fadeSlideRightTree 1.2s cubic-bezier(0.22, 1, 0.36, 1)
               0.1s forwards;
}

.product-description-animation {
    opacity: 0;
    animation: fadeSlideUp 1.2s cubic-bezier(0.22, 1, 0.36, 1)
               0.1s forwards;
}

.product-detail-animation {
    opacity: 0;
    animation: fadeSlideUp 1.2s cubic-bezier(0.22, 1, 0.36, 1)
               1s forwards;
}

.product-fade-animation {
    opacity: 0;
    animation: fadeIn 0.8s ease-out
               0.1s forwards;
}
</style>