/*==================================================
  ANIMATIONS
  Zen Spa Home
==================================================*/

/*==============================================
  TRANSITIONS
==============================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

}

.fade-down{

    opacity:0;

    transform:translateY(-40px);

}

.fade-left{

    opacity:0;

    transform:translateX(-40px);

}

.fade-right{

    opacity:0;

    transform:translateX(40px);

}

.zoom-in{

    opacity:0;

    transform:scale(.9);

}

.scale-in{

    opacity:0;

    transform:scale(.8);

}

.rotate-in{

    opacity:0;

    transform:rotate(-6deg) scale(.95);

}

/*==============================================
  GPU
==============================================*/

.will-change{

    will-change:transform, opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==============================================
  FLOAT
==============================================*/

.float{

    animation:float 5s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.pulse{

    animation:pulse 2.4s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

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

.hero-scroll-dot{

    animation:scrollDot 2s ease-in-out infinite;

}

@keyframes scrollDot{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    30%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(28px);

    }

}

/*==============================================
  SHIMMER
==============================================*/

.shimmer{

    position:relative;

    overflow:hidden;

}

.shimmer::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            110deg,

            transparent,

            rgba(255,255,255,.18),

            transparent

        );

    transform:translateX(-120%);

    animation:shimmer 3.5s infinite;

}

@keyframes shimmer{

    to{

        transform:translateX(120%);

    }

}

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

.spin{

    animation:spin 10s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*==============================================
  REVEAL
==============================================*/

.reveal{

    overflow:hidden;

}

.reveal > *{

    transform:translateY(100%);

}

/*==============================================
  BLINK
==============================================*/

.blink{

    animation:blink 1.5s infinite;

}

@keyframes blink{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.25;

    }

}

/*==============================================
  IMAGE HOVER
==============================================*/

.hover-zoom{

    overflow:hidden;

}

.hover-zoom img{

    transition:

        transform .9s cubic-bezier(.22,.61,.36,1),

        filter .5s ease;

}

.hover-zoom:hover img{

    transform:scale(1.08);

}

/*==============================================
  BUTTON PRESS
==============================================*/

.btn:active{

    transform:scale(.97);

}

/*==============================================
  SMOOTH
==============================================*/

.smooth{

    transition:

        transform .45s cubic-bezier(.22,.61,.36,1),

        opacity .45s ease,

        background .35s ease,

        color .35s ease,

        border-color .35s ease;

}