/* Animation for elements that should be hidden initially */

/* Force animation restart when class is re-applied */
[data-animate]:not(.in-view) {
    animation: none !important;
}

[data-animate] {
    opacity: 0;
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

    [data-animate].in-view {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }


/* Fade up animation - slides from bottom with fade */
[data-animate="fade-up"]:not(.in-view) {
    opacity: 0;
    transform: translateY(30px);
}

[data-animate="fade-up"].in-view {
    animation: fade-up 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes fade-up {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

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


/* Changed slide-in-left to use animation instead of transition */
[data-animate="slide-in-left"]:not(.in-view) {
    opacity: 0;
}

[data-animate="slide-in-left"].in-view {
    animation: slide-in-left 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


/* Changed slide-in-left to use animation instead of transition */
[data-animate="slide-in-right"]:not(.in-view) {
    opacity: 0;
}

[data-animate="slide-in-right"].in-view {
    animation: slide-in-right 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* Use the keyframes from _animations.scss */
@keyframes slide-in-right {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}



/* Slide in right and left for off screen positions */
[data-animate="slide-in-left-full"]:not(.in-view) {
    opacity: 0;
}

[data-animate="slide-in-left-full"].in-view {
    animation: slide-in-left-full 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left-full {
    0% {
        transform: translateX(-1000px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


[data-animate="slide-in-right-full"]:not(.in-view) {
    opacity: 0;
}

[data-animate="slide-in-right-full"].in-view {
    animation: slide-in-right-full 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-right-full {
    0% {
        transform: translateX(1000px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}




/* slide up from bottom animation */
[data-animate="slide-up"]:not(.in-view) {
    opacity: 0;
    transform: translateY(100%);
}

[data-animate="slide-up"].in-view {
    animation: slide-up 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-up {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

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


/* Rotate in animation for hr elements */
[data-animate="rotate-in"]:not(.in-view) {
    opacity: 0;
    transform: rotate(45deg);
    transform-origin: center center;
}

[data-animate="rotate-in"].in-view {
    animation: rotate-in 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes rotate-in {
    0% {
        transform: rotate(45deg);
        opacity: 0;
    }

    100% {
        transform: rotate(0deg);
        opacity: 1;
    }
}


/* Text rotation animation - 45 degree rotation */
[data-animate="text-rotate-in"]:not(.in-view) {
    opacity: 0;
    transform: rotate(45deg);
    transform-origin: center center;
}

[data-animate="text-rotate-in"].in-view {
    animation: text-rotate-in 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes text-rotate-in {
    0% {
        transform: rotate(45deg);
        opacity: 0;
    }

    100% {
        transform: rotate(0deg);
        opacity: 1;
    }
}


/* Fade in animation */
[data-animate="fade-in"]:not(.in-view) {
    opacity: 0;
    transform: translateY(20px);
}

[data-animate="fade-in"].in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}


/* Reveal animation - content reveals from top to bottom */
[data-animate="reveal-down"]:not(.in-view) {
    position: relative;
}

    [data-animate="reveal-down"]:not(.in-view)::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #FAFAFA;
        z-index: 10;
    }

[data-animate="reveal-down"].in-view::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FAFAFA;
    z-index: 10;
    animation: reveal-down-curtain 1.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

@keyframes reveal-down-curtain {
    0% {
        transform: translateY(0%);
    }

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

/*[data-animate="reveal-down"]:not(.in-view) {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
}

[data-animate="reveal-down"].in-view {
    animation: reveal-down 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes reveal-down {
    0% {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
}*/



/* For debugging purposes */
/*[data-animate="slide-in-right"] {
    border: 2px solid red !important;*/ 
/*}*/