/*
=========================================================
LA DARSENA DELLA VELA
Animations
=========================================================
*/

/* =====================================================
   KEYFRAMES
===================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes zoomOut{

    from{

        opacity:0;

        transform:scale(1.15);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes bounce{

    0%{

        transform:translate(-50%,0);

    }

    50%{

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

    }

    100%{

        transform:translate(-50%,0);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes shimmer{

    0%{

        background-position:-300px 0;

    }

    100%{

        background-position:300px 0;

    }

}

/* =====================================================
   DEFAULT ANIMATION CLASSES
===================================================== */

.fade-in{

    animation:fadeIn .8s ease both;

}

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-down{

    animation:fadeDown .8s ease both;

}

.fade-left{

    animation:fadeLeft .8s ease both;

}

.fade-right{

    animation:fadeRight .8s ease both;

}

.zoom-in{

    animation:zoomIn .7s ease both;

}

.zoom-out{

    animation:zoomOut .8s ease both;

}

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

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.visible{

    opacity:1;

    transform:translateY(0);

}

.reveal-left{

    opacity:0;

    transform:translateX(-80px);

    transition:.8s;

}

.reveal-left.visible{

    opacity:1;

    transform:translateX(0);

}

.reveal-right{

    opacity:0;

    transform:translateX(80px);

    transition:.8s;

}

.reveal-right.visible{

    opacity:1;

    transform:translateX(0);

}

.reveal-scale{

    opacity:0;

    transform:scale(.9);

    transition:.8s;

}

.reveal-scale.visible{

    opacity:1;

    transform:scale(1);

}

/* =====================================================
   HOVER EFFECTS
===================================================== */

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-10px);

}

.hover-grow{

    transition:.35s;

}

.hover-grow:hover{

    transform:scale(1.05);

}

.hover-rotate{

    transition:.35s;

}

.hover-rotate:hover{

    transform:rotate(-3deg);

}

/* =====================================================
   BUTTON EFFECTS
===================================================== */

.btn-primary,
.btn-secondary,
.book-button{

    position:relative;

    overflow:hidden;

}

.btn-primary::before,
.btn-secondary::before,
.book-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.6s;

}

.btn-primary:hover::before,
.btn-secondary:hover::before,
.book-button:hover::before{

    left:160%;

}

/* =====================================================
   IMAGE EFFECTS
===================================================== */

.gallery img,
.about img,
.experience img{

    transition:
        transform .5s ease,
        filter .5s ease;

}

.gallery img:hover,
.about img:hover,
.experience img:hover{

    transform:scale(1.04);

    filter:brightness(1.05);

}

/* =====================================================
   PRELOADER
===================================================== */

.loader-line span{

    animation:shimmer 1.2s linear infinite;

    background-image:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.7),

        transparent

    );

    background-size:300px 100%;

}

/* =====================================================
   WHATSAPP
===================================================== */

.whatsapp-button{

    animation:pulse 2.5s infinite;

}

.whatsapp-button:hover{

    animation:none;

}

/* =====================================================
   GALLERY MODAL
===================================================== */

.gallery-modal.open{

    animation:fadeIn .35s ease;

}

.gallery-modal-content img{

    animation:zoomIn .35s ease;

}

/* =====================================================
   NEWSLETTER
===================================================== */

.newsletter-box{

    animation:zoomIn .4s ease;

}

/* =====================================================
   COOKIE BANNER
===================================================== */

.cookie-banner.show{

    animation:fadeUp .45s ease;

}

/* =====================================================
   BACK TO TOP
===================================================== */

.back-to-top.show{

    animation:fadeUp .35s ease;

}