/* Animation  */
/* เลื่อนแสดงเนื้้อหา  */
.reveal-section {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.reveal-section.show {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: .2s;
}

.delay-2 {
    transition-delay: .4s;
}

.delay-3 {
    transition-delay: .6s;
}

.delay-4 {
    transition-delay: .8s;
}

/* เอฟเฟกต์ขยายใหญ่ขึ้น */
.glow-scale {
    display: inline-block;
    animation: scaleUpDown 10s infinite ease-in-out;
}

@keyframes scaleUpDown {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.09);
    }

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

.glow-scale_02 {
    display: inline-block;
    animation: scaleUpDown02 6s infinite ease-in-out;
}

@keyframes scaleUpDown02 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

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

/* เอฟเฟกต์แสง */
.glow-effect3 {
    display: inline-block;
    animation: glowPulse3 2s infinite alternate ease-in-out;
}

@keyframes glowPulse3 {
    from {
        filter: drop-shadow(0 0 5px #fffffe);
        transform: scale(1);
    }

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

/* แสงวิ่ง (Magic Light Sweep) */

.magic-sweep {
    position: relative;
    overflow: hidden;
}

.magic-sweep::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.377),
            transparent);
    transform: skewX(-25deg);
}

.magic-sweep:hover::after {
    animation: sweepLight 0.8s ease forwards;
}

@keyframes sweepLight {
    100% {
        left: 150%;
    }
}


/* Lightning Flash (สายฟ้าแฟลชจอ) */

.lightning-overlay {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
}

.lightning-active {
    animation: lightningFlash 0.4s ease;
}

@keyframes lightningFlash {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    20% {
        opacity: 0;
    }

    30% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
    }
}


.power-hover {
    transition: all 0.3s ease;
}

.power-hover:hover {
    transform: scale(1.08);
    filter: brightness(1.2);
}