/* ========================================================================= */
/* 0. เตรียมสถานะเริ่มต้นและการซ่อน */
/* ========================================================================= */

.animated:not(.is-visible) {
    opacity: 0;
    transition: none; 
}

/* ========================================================================= */
/* 1. Base Class and Utility Modifiers */
/* ========================================================================= */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both; 
    visibility: visible !important;
}

/* ปรับความเร็ว/ดีเลย์ */
.turtle {
    animation-duration: 4s;
}
.slow {
    animation-duration: 2s;
}
.fast {
    animation-duration: 0.5s;
}
.delay-07s {
    animation-delay : 0.7s ;
}
.delay-1s {
    animation-delay: 1s;
}
.infinite {
    animation-iteration-count: infinite; 
}

/* ========================================================================= */
/* 2. Entrance Animations (แอนิเมชันการเข้าสู่หน้า) */
/* ========================================================================= */

/* --- Fade In --- */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fade-in {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

/* --- Slide In Up --- */
@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        opacity: 0;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        opacity: 0;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
.slide-in-up {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

/* --- Zoom In --- */
@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}
@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}
.zoom-in {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

/* --- Bounce In --- */
@-webkit-keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
    20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
    40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); }
    60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
    80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); }
    to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
    20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
    40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); }
    60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
    80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); }
    to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
.bounce-in {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

/* ========================================================================= */
/* 3. Attention Seekers (แอนิเมชันเน้นความสนใจ) */
/* ========================================================================= */

/* --- Flash --- */
@-webkit-keyframes flash {
    from, 50%, to { opacity: 1; }
    25%, 75% { opacity: 0; }
}
@keyframes flash {
    from, 50%, to { opacity: 1; }
    25%, 75% { opacity: 0; }
}
.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

/* --- Pulse --- */
@-webkit-keyframes pulse {
    from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
    50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); }
    to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes pulse {
    from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
    50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); }
    to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

/* --- Shake X (สั่นในแนวนอน) --- */
@-webkit-keyframes shakeX {
    from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); }
    20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); }
}
@keyframes shakeX {
    from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); }
    20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); }
}
.shake-x {
    -webkit-animation-name: shakeX;
    animation-name: shakeX;
}

/* --- Jello --- */
@-webkit-keyframes jello {
    from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
@keyframes jello {
    from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
}

/* ========================================================================= */
/* 4. Exit Animations (แอนิเมชันขาออก/เล่นออก) */
/* ========================================================================= */

/* --- Fade Out Up (ใช้เป็นแอนิเมชันขาออก) --- */
@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}
@keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}
.fade-out-up {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

/* ========================================================================= */
/* 5. คลาสที่ใช้ควบคุมด้วย JavaScript */
/* ========================================================================= */


/* คลาสที่สั่งให้แอนิเมชันขาออกทำงาน (เมื่อเลื่อนผ่าน) */
.is-hidden {
    /* ใช้แอนิเมชันขาออก เช่น fade-out-up */
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
    animation-duration: 0.8s; 
    animation-fill-mode: both;
}