/* ตั้งค่าพื้นฐานให้ทำงานร่วมกับคลาส .animated ของ Elementor */
.animated.ShortFadeInUp, .animated.ShortFadeInDown, .animated.ShortFadeInLeft, .animated.ShortFadeInRight,
.animated.customZoomIn, .animated.customZoomOut, .animated.customMoveUp, .animated.customMoveDown, 
.animated.customFallPerspective, .animated.customFlipInX, .animated.customFlipInY {
    animation-duration: 1.25s !important;
    animation-fill-mode: both !important;
}

/* --------------------------------------
   Keyframes และ Classes
-------------------------------------- */

@keyframes ShortFadeInUp {
    from { opacity: 0; transform: translate3d(0,50px,0); }
    to { opacity: 1; transform: none; }
}
.animated.ShortFadeInUp { animation-name: ShortFadeInUp !important; }

@keyframes ShortFadeInDown {
    from { opacity: 0; transform: translate3d(0,-50px,0); }
    to { opacity: 1; transform: none; }
}
.animated.ShortFadeInDown { animation-name: ShortFadeInDown !important; }

@keyframes ShortFadeInLeft {
    from { opacity: 0; transform: translate3d(-50px,0,0); }
    to { opacity: 1; transform: none; }
}
.animated.ShortFadeInLeft { animation-name: ShortFadeInLeft !important; }

@keyframes ShortFadeInRight {
    from { opacity: 0; transform: translate3d(50px,0,0); }
    to { opacity: 1; transform: none; }
}
.animated.ShortFadeInRight { animation-name: ShortFadeInRight !important; }

@keyframes customZoomIn {
    0% { opacity: 0; transform: scale(.75); }
    to { opacity: 1; transform: scale(1); }
}
.animated.customZoomIn { animation-name: customZoomIn !important; }

@keyframes customZoomOut {
    0% { opacity: 0; transform: scale(1.1); }
    to { opacity: 1; transform: scale(1); }
}
.animated.customZoomOut { animation-name: customZoomOut !important; }

@keyframes customMoveUp {
    0% { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}
.animated.customMoveUp { animation-name: customMoveUp !important; }

@keyframes customMoveDown {
    0% { opacity: 0; transform: translateY(-25px); }
    to { opacity: 1; transform: translateY(0); }
}
.animated.customMoveDown { animation-name: customMoveDown !important; }

@keyframes customFallPerspective {
    0% { opacity: 0; transform: perspective(1000px) translateY(50px) translateZ(-300px) rotateX(-35deg); }
    to { opacity: 1; transform: perspective(1000px) translateY(0) translateZ(0) rotateX(0); }
}
.animated.customFallPerspective { animation-name: customFallPerspective !important; }

@keyframes customFlipInX {
    0% { transform: perspective(400px) rotate3d(1,0,0,90deg); animation-timing-function: ease-in; opacity: 0; }
    40% { transform: perspective(400px) rotate3d(1,0,0,-20deg); animation-timing-function: ease-in; }
    60% { transform: perspective(400px) rotate3d(1,0,0,10deg); opacity: 1; }
    80% { transform: perspective(400px) rotate3d(1,0,0,-5deg); }
    to { transform: perspective(400px); }
}
.animated.customFlipInX { animation-name: customFlipInX !important; }

@keyframes customFlipInY {
    0% { transform: perspective(400px) rotate3d(0,1,0,90deg); animation-timing-function: ease-in; opacity: 0; }
    40% { transform: perspective(400px) rotate3d(0,1,0,-20deg); animation-timing-function: ease-in; }
    60% { transform: perspective(400px) rotate3d(0,1,0,10deg); opacity: 1; }
    80% { transform: perspective(400px) rotate3d(0,1,0,-5deg); }
    to { transform: perspective(400px); }
}
.animated.customFlipInY { animation-name: customFlipInY !important; }