/*!
 * ci-animation.css
 * Version - 0.0.1-Beta
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 * Copyright (c) 2024 CI
 */

/* Hide by default */
.ci-animation {
    opacity: 0;
}

/* show after scrolling */
.ci-animation.ci-animate{
    opacity: 1;
}


/* Animation scale
---------------------------------------------- */
.ci-animation-scale-2 {
    -webkit-transform: scale(0.2); 
    transform: scale(0.2); 
}

.ci-animation-scale-3 {
    -webkit-transform: scale(0.3); 
    transform: scale(0.3); 
}

.ci-animation-scale-4 {
    -webkit-transform: scale(0.4); 
    transform: scale(0.4); 
}

.ci-animation-scale-5 {
    -webkit-transform: scale(0.5); 
    transform: scale(0.5); 
}

.ci-animation-scale-6 {
    -webkit-transform: scale(0.6); 
    transform: scale(0.6); 
}

.ci-animation-scale-7 {
    -webkit-transform: scale(0.7); 
    transform: scale(0.7); 
}

.ci-animation-scale-8 {
    -webkit-transform: scale(0.8); 
    transform: scale(0.8); 
}

.ci-animation-scale-9 {
    -webkit-transform: scale(0.9); 
    transform: scale(0.9); 
}

.ci-animation-scale-10 {
    -webkit-transform: scale(1.0); 
    transform: scale(1.0); 
}

.ci-animation-scale-20 {
    -webkit-transform: scale(2.0); 
    transform: scale(2.0); 
}

.ci-animation-scale-30 {
    -webkit-transform: scale(3.0); 
    transform: scale(3.0); 
}

.ci-animation-scale-40 {
    -webkit-transform: scale(4.0); 
    transform: scale(4.0); 
}

.ci-animation-scale-50 {
    -webkit-transform: scale(5.0); 
    transform: scale(5.0); 
}

.ci-animation-scale-60 {
    -webkit-transform: scale(6.0); 
    transform: scale(6.0); 
}

.ci-animation-scale-70 {
    -webkit-transform: scale(7.0); 
    transform: scale(7.0); 
}

.ci-animation-scale-80 {
    -webkit-transform: scale(8.0); 
    transform: scale(8.0); 
}

.ci-animation-scale-90 {
    -webkit-transform: scale(9.0); 
    transform: scale(9.0); 
}

.ci-animation-scale-100 {
    -webkit-transform: scale(10.0); 
    transform: scale(10.0); 
}


/* Animation Fading
---------------------------------------------- */
/* Fade-in */
.ci-animation-fadeIn.ci-animate{
    -webkit-animation-name:fadeIn;
    animation-name: fadeIn;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
	animation-duration: 300ms;
}

@-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
}

/* Fade-out */
.ci-animation-fadeOut.ci-animate {
    -webkit-animation-name:fadeOut;
    animation-name:fadeOut;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
	animation-duration: 300ms;
}

@-webkit-keyframes fadeOut {
    0% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


/* Animation Slide content
---------------------------------------------- */
@keyframes slideInLeft {
    0% {
        transform: translateX(-20%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


.ci-animation-slideInLeft.ci-animate {
    -webkit-animation-name:slideInLeft;
    animation-name: slideInLeft;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}



@keyframes slideInRight {
    0% {
        transform: translateX(20%);
        opacity: 0;
    }

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


.ci-animation-slideInRight.ci-animate {
    -webkit-animation-name:slideInRight;
    animation-name: slideInRight;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}


@keyframes slideInTop {
    0% {
        transform: translateY(-20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.ci-animation-slideInTop.ci-animate {
    -webkit-animation-name:slideInTop;
    animation-name: slideInTop;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}

@keyframes slideInBottom  {
    0% {
        transform: translateY(20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.ci-animation-slideInBottom.ci-animate {
    -webkit-animation-name:slideInBottom;
    animation-name: slideInBottom;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}


@keyframes slideOutTop  {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-20%);
        opacity: 0;
    }
}

.ci-animation-slideOutTop.ci-animate {
    -webkit-animation-name:slideOutTop;
    animation-name: slideOutTop;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}



@keyframes slideOutBottom {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(20%);
        opacity: 0;
    }
}


.ci-animation-slideOutBottom.ci-animate {
    -webkit-animation-name:slideOutBottom;
    animation-name: slideOutBottom;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}


/* Animation Bounch
---------------------------------------------- */
@keyframes bounceIn {
      0%, 20%, 40%, 60%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }

      0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
      }

      20% {
        transform: scale3d(1.1, 1.1, 1.1);
      }

      40% {
        transform: scale3d(0.9, 0.9, 0.9);
      }

      60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
      }

      80% {
        transform: scale3d(0.97, 0.97, 0.97);
      }

      100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
      }
    }

.ci-animation-bounceIn.ci-animate {
    -webkit-animation-name:bounceIn;
    animation-name: bounceIn;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-250px);
    }
    60% {
        opacity: 1;
        transform: translateY(12px);
    }
    80% {
        transform: translateY(-14px);
    }
    100% {
        transform: translateY(0);
    }
}

.ci-animation-bounceInDown.ci-animate {
    -webkit-animation-name:bounceInDown;
    animation-name: bounceInDown;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-duration: 400ms;
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-250px);
    }
    60% {
        opacity: 1;
        transform: translateX(12px);
    }
    80% {
        transform: translateX(-14px);
    }
    100% {
        transform: translateX(0);
    }
}

.ci-animation-bounceInLeft.ci-animate {
    -webkit-animation-name:bounceInLeft;
    animation-name: bounceInLeft;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-duration: 400ms; 
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(300px);
    }
    60% {
        opacity: 1;
        transform: translateX(-14px);
    }
    80% {
        transform: translateX(14px);
    }
    100% {
        transform: translateX(0);
    }
}

.ci-animation-bounceInRight.ci-animate {
    -webkit-animation-name:bounceInRight;
    animation-name: bounceInRight;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-duration: 400ms;
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(250px);
    }
    60% {
        opacity: 1;
        transform: translateY(-12px);
    }
    80% {
        transform: translateY(14px);
    }
    100% {
        transform: translateY(0);
    }
}

.ci-animation-bounceInUp.ci-animate {
    -webkit-animation-name:bounceInUp;
    animation-name: bounceInUp;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-duration: 400ms;
}

@keyframes bounceOut {
    20% {
        transform: scale(0.9);
    }
    50%, 55% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
    }

.ci-animation-bounceOut.ci-animate {
    -webkit-animation-name:bounceOut;
    animation-name: bounceOut;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}


@keyframes bounceOutDown {
    0% {
        transform: translateY(-10px);
    }
    40%, 45% {
        opacity: 1;
        transform: translateY(50px);
    }
    100% {
        opacity: 0;
        transform: translateY(500px);
    }
}

.ci-animation-bounceOutDown.ci-animate {
    -webkit-animation-name:bounceOutDown;
    animation-name: bounceOutDown;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-duration: 400ms;
}

@keyframes bounceOutLeft {
    20% {
        transform: translateX(20px);
    }
    100% {
        opacity: 0;
        transform: translateX(-250px);
    }
}

.ci-animation-bounceOutLeft.ci-animate {
    -webkit-animation-name:bounceOutLeft;
    animation-name: bounceOutLeft;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-duration: 400ms;
}

@keyframes bounceOutRight {
    20% {
        transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        transform: translateX(250px);
    }
}

.ci-animation-bounceOutRight.ci-animate {
    -webkit-animation-name:bounceOutRight;
    animation-name: bounceOutRight;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-duration: 400ms;
}

@keyframes bounceOutUp {
    20% {
        transform: translateY(-10px);
    }
    40%, 45% {
        opacity: 1;
        transform: translateY(20px);
    }
    100% {
        opacity: 0;
        transform: translateY(-300px);
    }
}

.ci-animation-bounceOutUp.ci-animate {
    -webkit-animation-name:bounceOutUp;
    animation-name: bounceOutUp;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-duration: 400ms;
}


/* Animation ZOOM
---------------------------------------------- */
/* Zoom-In Animation */
@keyframes zoomIn {
    0% {
       
        transform: scale3d(0.3, 0.3, 0.3);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }

    100%{
        opacity: 1;
    }
}

.ci-animation-zoomIn.ci-animate {
    -webkit-animation-name:zoomIn;
    animation-name: zoomIn;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}

@keyframes zoomInAndBounce {
    0% {
        transform: scale(0.5); 
        opacity: 0; 
    }
    50% {
        transform: scale(1.25); 
        opacity: 1; 
    }
    100% {
        transform: scale(1); 
        opacity: 1; 
    }
}

.ci-animation-zoomInAndBounce.ci-animate {
    -webkit-animation-name:zoomInAndBounce;
    animation-name: zoomInAndBounce;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}


/* @keyframes zoomInAndUp {
    0% {
        transform: scale(0.5) translateY(0); 
        opacity: 0;
    }
    50% {
        transform: scale(1.2) translateY(20px); 
        opacity: 1; 
    }
    100% {
        transform: scale(1) translateY(-20px); 
        opacity: 1; 
    }
}

.ci-animation-zoomInAndUp.ci-animate {
    -webkit-animation-name:zoomInAndUp;
    animation-name: zoomInAndUp;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}

@keyframes zoomOut {
    0% {
       
        opacity: 1;
    }
    50% {
        transform: scale3d(0.3, 0.3, 0.3);
        opacity: 0;
    }

    100%{
        opacity: 0;
    }
}

.ci-animation-zoomOut.ci-animate {
    -webkit-animation-name:zoomOut;
    animation-name: zoomOut;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
} */


@keyframes flipIn {
    0% {
        transform: perspective(400px) rotateX(90deg); 
        opacity: 0;
    }
    50% {
        transform: perspective(400px) rotateX(-10deg); 
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateX(0deg); 
        opacity: 1;
    }
}

.ci-animation-flipIn.ci-animate {
    transform-style: preserve-3d;
    -webkit-animation-name:flipIn;
    animation-name: flipIn;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}


@keyframes flipOut {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    50% {
        transform: perspective(400px) rotateX(-10deg); 
        opacity: 0.7;
    }
    100% {
        transform: perspective(400px) rotateX(90deg); 
        opacity: 0;
    }
}

.ci-animation-flipOut.ci-animate {
    transform-style: preserve-3d;
    -webkit-animation-name:flipOut;
    animation-name: flipOut;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}


/* Text reveal animation
---------------------------------------------- */
.wrapper-text-reveal span {
    display: inline-block;
}
.wrapper-text-reveal > span {
    overflow: hidden;
    padding-bottom: 0.1em;
    margin-bottom: -0.6em;
    transform-origin: bottom;
}
    .ci-animation-textReveal-slideRight .wrapper-text-reveal > span {
        overflow: unset;
    }
.wrapper-text-reveal > span > span {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    white-space: nowrap;
    margin: 0;
}
.ci-animate.ci-animation-textReveal-slideUp .wrapper-text-reveal > span > span {
    animation: text-reveal-slide-up 0.85s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.ci-animate.ci-animation-textReveal-slideDown .wrapper-text-reveal > span > span {
    animation: text-reveal-slide-down 0.85s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.ci-animate.ci-animation-textReveal-slideRight .wrapper-text-reveal > span > span {
    animation: text-reveal-slide-right 0.85s cubic-bezier(0, 0, 0.2, 1) both;
}

.ci-animate.ci-animation-textReveal-rotateIn .wrapper-text-reveal > span > span {
    animation: text-reveal-rotate-in 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.ci-animate.ci-animation-textReveal-fadeIn .wrapper-text-reveal > span > span {
    animation: text-reveal-fade-in 0.85s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%) both
}

/* Buat general, biar bisa digunakan untuk text-reveal lainnya */
.ci-animate .wrapper-text-reveal > span:nth-child(1) > span { animation-delay: 80ms; }
.ci-animate .wrapper-text-reveal > span:nth-child(2) > span { animation-delay: 160ms; }
.ci-animate .wrapper-text-reveal > span:nth-child(3) > span { animation-delay: 240ms; }
.ci-animate .wrapper-text-reveal > span:nth-child(4) > span { animation-delay: 320ms; }
.ci-animate .wrapper-text-reveal > span:nth-child(5) > span { animation-delay: 400ms; }
.ci-animate .wrapper-text-reveal > span:nth-child(6) > span { animation-delay: 480ms; }
.ci-animate .wrapper-text-reveal > span:nth-child(7) > span { animation-delay: 560ms; }
.ci-animate .wrapper-text-reveal > span:nth-child(8) > span { animation-delay: 640ms; }
.ci-animate .wrapper-text-reveal > span:nth-child(9) > span { animation-delay: 720ms; }
.ci-animate .wrapper-text-reveal > span:nth-child(10) > span { animation-delay: 800ms; }
.ci-animate .wrapper-text-reveal > span:nth-child(11) > span { animation-delay: 880ms; }
.ci-animate .wrapper-text-reveal > span:nth-child(12) > span { animation-delay: 960ms; }


/* slide up */
@keyframes text-reveal-slide-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

/* slide down */
@keyframes text-reveal-slide-down {
    0% {
        transform: translateY(-120%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Slide from right */
@keyframes text-reveal-slide-right {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* rotate in */
@-webkit-keyframes text-reveal-rotate-in {
    0% {
        transform-style: preserve-3d;
        transform: rotateX(-90deg);
    }
    100% {
        transform: perspective(1000px);
    }
}

@keyframes text-reveal-rotate-in {
    0% {
        transform-style: preserve-3d;
        transform: rotateX(-90deg);
    }
    100% {
        transform: perspective(1000px);
    }
}

/* Slide from right */
@keyframes text-reveal-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* Image clip
---------------------------------------------- */
/* Clip to Right */
.ci-animation-cliptoright {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .7s cubic-bezier(0.59, 0.73, 0.17, 1);
}
 .ci-animation-cliptoright.ci-animate {
    clip-path: inset(0 0 0 0);
}

/* Clip to Left */
.ci-animation-cliptoleft {
    clip-path: inset(0 0 0 100%);
    transition: clip-path .7s cubic-bezier(0.59, 0.73, 0.17, 1);
}
 .ci-animation-cliptoleft.ci-animate {
    clip-path: inset(0 0 0 0);
}

/* Clip to Top */
.ci-animation-cliptotop {
    clip-path: inset(100% 0 0 0);
    transition: clip-path .7s cubic-bezier(0.59, 0.73, 0.17, 1);
}
 .ci-animation-cliptotop.ci-animate {
    clip-path: inset(0 0 0 0);
}

/* Clip to Bottom */
.ci-animation-cliptobottom  {
    clip-path: inset(0 0 100% 0);
    transition: clip-path .7s cubic-bezier(0.59, 0.73, 0.17, 1);
}
 .ci-animation-cliptobottom.ci-animate {
    clip-path: inset(0 0 0 0);
}


/* Set delay and duration
---------------------------------------------- */
.ci-animation-delay-50ms {
    animation-delay: 50ms;
    transition-delay: 50ms;
}

.ci-animation-delay-75ms {
    animation-delay: 75ms;
    transition-delay: 75ms;
}

.ci-animation-delay-100ms {
    animation-delay: 100ms;
    transition-delay: 100ms;
}

.ci-animation-delay-200ms {
    animation-delay: 200ms;
    transition-delay: 200ms;
}

.ci-animation-delay-400ms {
    animation-delay: 400ms;
    transition-delay: 400ms;
}

.ci-animation-delay-600ms {
    animation-delay: 600ms;
    transition-delay: 600ms;
}

.ci-animation-delay-800ms {
    animation-delay: 800ms;
    transition-delay: 800ms;
}

.ci-animation-delay-1000ms {
    animation-delay: 1000ms;
    transition-delay: 1000ms;
}

.ci-animation-delay-1200ms {
    animation-delay: 1200ms;
    transition-delay: 1200ms;
}

.ci-animation-delay-1400ms {
    animation-delay: 1400ms;
    transition-delay: 1400ms;
}

.ci-animation-delay-1600ms {
    animation-delay: 1600ms;
    transition-delay: 1600ms;
}

.ci-animation-delay-1800ms {
    animation-delay: 1800ms;
    transition-delay: 1800ms;
}

.ci-animation-delay-2s {
    animation-delay: 2s;
    transition-delay: 2s;
}

.ci-animation-delay-3s {
    animation-delay: 3s;
    transition-delay: 3s;
}

.ci-animation-delay-4s {
    animation-delay: 4s;
    transition-delay: 4s;
}

.ci-animation-delay-5s {
    animation-delay: 5s;
    transition-delay: 5s;
}

.ci-animation-delay-6s {
    animation-delay: 6s;
    transition-delay: 6s;
}

.ci-animation-delay-7s {
    animation-delay: 7s;
    transition-delay: 7s;
}

.ci-animation-delay-8s {
    animation-delay: 8s;
    transition-delay: 8s;
}

.ci-animation-delay-9s {
    animation-delay: 9s;
    transition-delay: 9s;
}

.ci-animation-delay-10s {
    animation-delay: 10s;
    transition-delay: 10s;
}