/*==================================================
  ANIMATIONS.CSS
  Zen Spa Home
==================================================*/

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

.fade{

    transition:
        opacity var(--transition-base),
        transform var(--transition-base);

}

.transition{

    transition:all var(--transition-base);

}

.transition-fast{

    transition:all var(--transition-fast);

}

.transition-slow{

    transition:all var(--transition-slow);

}

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

.hover-lift{

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);

}

.hover-lift:hover{

    transform:translateY(-8px);

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

}

/*==============================================
  HOVER SCALE
==============================================*/

.hover-scale{

    transition:transform var(--transition-base);

}

.hover-scale:hover{

    transform:scale(1.04);

}

/*==============================================
  IMAGE ZOOM
==============================================*/

.zoom{

    overflow:hidden;

}

.zoom img{

    transition:transform .8s ease;

}

.zoom:hover img{

    transform:scale(1.08);

}

/*==============================================
  FADE UP
==============================================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

}

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

.fade-down{

    opacity:0;

    transform:translateY(-60px);

}

/*==============================================
  FADE LEFT
==============================================*/

.fade-left{

    opacity:0;

    transform:translateX(-60px);

}

/*==============================================
  FADE RIGHT
==============================================*/

.fade-right{

    opacity:0;

    transform:translateX(60px);

}

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

.zoom-in{

    opacity:0;

    transform:scale(.9);

}

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

.reveal{

    opacity:0;

    visibility:hidden;

}

/*==============================================
  PARALLAX
==============================================*/

.parallax{

    will-change:transform;

}

/*==============================================
  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.5s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

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

.rotate{

    animation:rotate 20s linear infinite;

}

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

.bounce{

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

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

.shimmer{

    position:relative;

    overflow:hidden;

}

.shimmer::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:translateX(-100%);

    animation:shimmer 2.5s infinite;

}

@keyframes shimmer{

    100%{

        transform:translateX(100%);

    }

}

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

.btn{

    position:relative;

    overflow:hidden;

}

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

img,
video,
.hero,
.service-card,
.gallery-item,
.btn{

    backface-visibility:hidden;

    transform:translateZ(0);

    will-change:transform;

}

/*==============================================
  REDUCED MOTION
==============================================*/

@media (prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}
/*==============================================
  MAGNETIC
==============================================*/

.magnetic{

    display:inline-flex;

    will-change:transform;

    transform:translate3d(0,0,0);

    backface-visibility:hidden;

}