/* -------------------------------------Image Animation Keyframes------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------- */
@keyframes fadeInUpImage {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScaleImage {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

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

@keyframes slideInFromBottomImage {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes fadeInLeftImage {
    from {
        opacity: 0;
        translate: -100% 0 0;
    }

    to {
        opacity: 1;
        translate: 0 0 0;
    }
}

@keyframes fadeInRightImage {
    from {
        opacity: 0;
        translate: 100% 0 0;
    }

    to {
        opacity: 1;
        translate: 0 0 0;
    }
}

@keyframes scaleUpImage {
    from {
        transform-origin: 50% 50%;
        scale: 0;
    }

    to {
        transform-origin: 50% 50%;
        scale: 1;
    }
}

@keyframes revealImage {
    from {
        opacity: 0;
        clip-path: inset(45% 20% 45% 20%);
    }

    to {
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);
    }
}

@keyframes rotateInImage {
    from {
        transform: rotate(-360deg);
    }

    to {
        transform: rotate(0);
    }
}

@keyframes clipRevealImage {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes blurInImage {
    from {
        filter: blur(20px);
    }

    to {
        filter: blur(0);
    }
}

@keyframes flipInImage {
    from {
        transform: perspective(400px) rotateY(90deg);
    }

    to {
        transform: perspective(400px) rotateY(0deg);
    }
}

@keyframes zoomOutImage {
    from {
        transform: scale(1.5) rotate(20deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes dropDownImage {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes rotateYImage {
    from {
        transform: rotateY(0);
    }

    to {
        transform: rotateY(6000deg);
    }
}

/* ------------------------------------------Image Animation Apply------------------------------------------------ */
/* --------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------- */

.img-rotate-y {
    animation: rotateYImage auto linear;
    animation-timeline: scroll();
}

.img-fade-in-up {
    animation: fadeInUpImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

.img-fade-in-scale {
    animation: fadeInScaleImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

.img-slide-in-from-bottom {
    animation: slideInFromBottomImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

.img-fade-in-left {
    animation: fadeInLeftImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

.img-fade-in-right {
    animation: fadeInRightImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

.img-scale-up {
    animation: scaleUpImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

.img-reveal {
    animation: revealImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

.img-rotate-in {
    animation: rotateInImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

.img-clip-reveal {
    animation: clipRevealImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

.img-blur-in {
    animation: blurInImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

.img-flip-in {
    animation: flipInImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

.img-zoom-out {
    animation: zoomOutImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

.img-drop-down {
    animation: dropDownImage linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
}

/* ------------------------------------------Lightbox Styles------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 2rem;
}

.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox.is-open {
    display: flex;
}