/* เอฟเฟกต์ขยับ */
.glow-move {
    display: inline-block;
    animation:
        floatMove 4s infinite ease-in-out !important;
}

@keyframes floatMove {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.glow-effect2 {
    display: inline-block;
    animation: glowPulse2 3s infinite alternate ease-in-out;
}

/* เอฟเฟกต์แสง */
@keyframes glowPulse2 {
    from {
        filter: drop-shadow(0 0 5px #0027d681);
        transform: scale(1);
    }

    to {
        filter: drop-shadow(0 0 20px #40a9fff1);
        transform: scale(1.06);
    }
}


.glow-effect3 {
    display: inline-block;
    animation: glowPulse3 2s infinite alternate ease-in-out;
}

/* เอฟเฟกต์แสง */
@keyframes glowPulse3 {
    from {
        filter: drop-shadow(0 0 5px #ffffffef);
        transform: scale(1);
    }

    to {
        filter: drop-shadow(0 0 20px #ffa640be);
        /* transform: scale(1.05); */
    }
}

.glow-scale {
    display: inline-block;
    animation: scaleUpDown 9s infinite ease-in-out;
}

/* เอฟเฟกต์ขยายใหญ่ขึ้น */
@keyframes scaleUpDown {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* ================== 
    Animation 
    ==================  */
.reveal-logo,
.reveal-fade-blur,
.reveal-light,
.reveal-cinematic {
    opacity: 0;
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/* ============================
   Logo
============================ */
.reveal-logo {
    animation: logoIn 1s cubic-bezier(.22, 1, .36, 1) .35s both !important;
}

@keyframes logoIn {

    0% {
        opacity: 0;
        transform: translateZ(0) scale(.94);
        filter: blur(6px) brightness(1.15);
    }

    70% {
        opacity: 1;
        transform: translateZ(0) scale(1.015);
        filter: blur(.8px) brightness(1.05);
    }

    100% {
        opacity: 1;
        transform: translateZ(0) scale(1);
        filter: none;
    }

}

/* ============================
   Fade Blur
============================ */
.reveal-fade-blur {
    animation: fadeBlur 1s ease .15s both !important;
}

@keyframes fadeBlur {

    from {
        opacity: 0;
        filter: blur(4px);
    }

    to {
        opacity: 1;
        filter: none;
    }

}

/* ============================
   Light
============================ */

.reveal-light {
    animation: lightReveal 1.5s ease .25s both !important;
}

@keyframes lightReveal {

    from {
        opacity: 0;
        filter: brightness(1.12) blur(3px);
    }

    to {
        opacity: 1;
        filter: none;
    }

}

/* ============================
   Cinematic
============================ */
.reveal-cinematic {
    animation: cinematic 2.5s cubic-bezier(.22, 1, .36, 1) both !important;

}

@keyframes cinematic {

    from {
        opacity: 0;
        transform:
            translateZ(0) scale(.992);
        filter:
            blur(5px) brightness(1.08);

    }

    to {
        opacity: 1;
        transform:
            translateZ(0) scale(1);
        filter: none;

    }

}

@keyframes floatA {
    0% {
        transform: translate3d(0, 0, 0) rotate(-0.5deg);
    }

    20% {
        transform: translate3d(2px, -3px, 0) rotate(0.2deg);
    }

    40% {
        transform: translate3d(-1px, -7px, 0) rotate(0.8deg);
    }

    60% {
        transform: translate3d(2px, -5px, 0) rotate(0deg);
    }

    80% {
        transform: translate3d(-2px, -2px, 0) rotate(-0.4deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(-0.5deg);
    }
}

@keyframes floatB {
    0% {
        transform: translate3d(0, 0, 0) rotate(0.5deg);
    }

    25% {
        transform: translate3d(-2px, -4px, 0) rotate(-0.8deg);
    }

    50% {
        transform: translate3d(1px, -8px, 0) rotate(0.6deg);
    }

    75% {
        transform: translate3d(2px, -3px, 0) rotate(-0.2deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0.5deg);
    }
}

@keyframes floatC {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    30% {
        transform: translate3d(2px, -5px, 0) rotate(0.6deg);
    }

    60% {
        transform: translate3d(-2px, -9px, 0) rotate(-0.6deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

.float-1 {
    animation: floatA 7s ease-in-out infinite !important;
}

.float-2 {
    animation: floatB 8.5s ease-in-out infinite !important;
}

.float-3 {
    animation: floatC 6.8s ease-in-out infinite !important;
}

.float-4 {
    animation: floatB 9.2s ease-in-out infinite reverse !important;
}

.float-5 {
    animation: floatA 7.8s ease-in-out infinite reverse !important;
}

.float-6 {
    animation: floatC 8.8s ease-in-out infinite !important;
}