.reveal-container {
   position: relative;
   overflow: hidden;
   border-radius: 12px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   opacity: 0;
   transform: translateY(50px);
   transition: all 0.8s ease;
}

.reveal-container.active {
   opacity: 1;
   transform: translateY(0);
}

/* Slide Reveal */
.slide-reveal {
   position: relative;
}

.slide-reveal::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--color-black);
   transform: translateX(0);
   transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.slide-reveal.active::after {
   transform: translateX(100%);
}

/* Fade Reveal */
.fade-reveal img {
   opacity: 0;
   transition: opacity 1.5s ease;
}

.fade-reveal.active img {
   opacity: 1;
}

/* Zoom Reveal */
.zoom-reveal img {
   transform: scale(1.3);
   opacity: 0;
   transition: all 1.5s ease;
}

.zoom-reveal.active img {
   transform: scale(1);
   opacity: 1;
}

/* Flip Reveal */
.flip-reveal {
   perspective: 1000px;
}

.flip-reveal img {
   transform: rotateY(90deg);
   transition: transform 1.2s ease;
}

.flip-reveal.active img {
   transform: rotateY(0);
}

/* Curtain Reveal */
.curtain-reveal {
   position: relative;
}

.curtain-reveal::before,
.curtain-reveal::after {
   content: '';
   position: absolute;
   top: 0;
   width: 50%;
   height: 100%;
   background-color: var(--color-black);
   transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
   z-index: 1;
}

.curtain-reveal::before {
   left: 0;
   transform: translateX(0);
}

.curtain-reveal::after {
   right: 0;
   transform: translateX(0);
}

.curtain-reveal.active::before {
   transform: translateX(-100%);
}

.curtain-reveal.active::after {
   transform: translateX(100%);
}

/* Blur Reveal */
.blur-reveal img {
   filter: blur(15px);
   opacity: 0;
   transition: all 1.5s ease;
}

.blur-reveal.active img {
   filter: blur(0);
   opacity: 1;
}

.reveal-container img {
   width: 100%;
   height: auto;
   display: block;
}

.image-effect-01.active {
    /* animation จะทำงานเฉพาะเมื่อมี class active */
    animation: image-effect-one 0.8s ease-out;
}

.image-effect-01::before {
    left: 0;
    transform: translateX(0);
}

.image-effect-01::after {
    right: 0;
    transform: translateX(0);
}

.image-effect-01.active::before {
    transform: translateX(-100%);
}

.image-effect-01.active::after {
    transform: translateX(100%);
}

@keyframes image-effect-one {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) rotate(30deg);
        transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}