/*==================================================
  TRANSITION
==================================================*/

.transition{
    transition:var(--transition);
}
/*==================================================
  FADE IN
==================================================*/

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.fade-in{
    animation:fadeIn .8s ease both;
}
/*==================================================
  FADE UP
==================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{
    animation:fadeUp .8s ease both;
}

/*==================================================
  FADE DOWN
==================================================*/

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-down{
    animation:fadeDown .8s ease both;
}

/*==================================================
  ZOOM IN
==================================================*/

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom-in{
    animation:zoomIn .7s ease both;
}

/*==================================================
  FLOATING
==================================================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.floating{

    animation:floating 3s ease-in-out infinite;

}

/*==================================================
  PULSE
==================================================*/

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

.pulse{

    animation:pulse 2s infinite;

}

/*==================================================
  ROTATE
==================================================*/

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.rotate{

    animation:rotate 12s linear infinite;

}

/*==================================================
  SHINE
==================================================*/

.shine{

    position:relative;

    overflow:hidden;

}

.shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:70%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

}

.shine:hover::before{

    animation:shine 1s;

}

@keyframes shine{

    100%{

        left:180%;

    }

}

/*==================================================
  SCROLL INDICATOR
==================================================*/

.scroll-indicator{

    display:inline-flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

}

.scroll-indicator i{

    animation:scrollDown 1.6s infinite;

}

@keyframes scrollDown{

    0%{

        opacity:0;

        transform:translateY(-5px);

    }

    50%{

        opacity:1;

        transform:translateY(8px);

    }

    100%{

        opacity:0;

        transform:translateY(20px);

    }

}

/*==================================================
  RIPPLE
==================================================*/

.ripple{

    position:relative;

    overflow:hidden;

}

.ripple::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:0;

    height:0;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    transform:translate(-50%,-50%);

}

.ripple:active::after{

    animation:ripple .6s ease;

}

@keyframes ripple{

    from{

        width:0;

        height:0;

        opacity:1;

    }

    to{

        width:320px;

        height:320px;

        opacity:0;

    }

}

/*==================================================
  SPIN
==================================================*/

@keyframes spin{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

.spin{

    animation:spin 2s linear infinite;

}

/*==================================================
  KEN BURNS
==================================================*/

@keyframes kenburns{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.12);

    }

}

.kenburns{

    animation:kenburns 15s ease-in-out infinite alternate;

}


/*==================================================
  BOUNCE
==================================================*/

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

.bounce{

    animation:bounce 2s infinite;

}


/*==================================================
  HOVER LIFT
==================================================*/

.hover-lift{

    transition:var(--transition);

}

.hover-lift:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}
/*==================================================
  HOVER ZOOM
==================================================*/

.hover-zoom{

    overflow:hidden;

}

.hover-zoom img{

    transition:.6s;

}

.hover-zoom:hover img{

    transform:scale(1.08);

}

/*==================================================
LOADING
==================================================*/

@keyframes loading{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}