/* --- การเคลื่อนไหวพื้นฐาน (Keyframes) --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px); /* ระยะเลื่อนขึ้น */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* --- Class สำหรับเรียกใช้งาน --- */
.reveal-text {
    opacity: 0; /* ซ่อนไว้ก่อนเริ่ม */
    animation-name: fadeInUp;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* สมูทแบบระดับพรีเมียม */
    animation-fill-mode: forwards; /* เล่นจบแล้วค้างไว้ */
}

/* --- การหน่วงเวลา (Delays) --- */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.5s; }
.delay-3 { animation-delay: 0.8s; }
.delay-4 { animation-delay: 1.1s; }

/* --- แถม: แอนิเมชั่นรูปภาพให้ลอยแบบนุ่มนวล (Floating Effect) --- */
.floating {
    animation: float 4s ease-in-out infinite;
}

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