/*
    Sezione dedicata alle animazioni, racchiuse in un file a parte consentono di poter fare le modifiche in maniera più veloce
*/

/*si riferisce alla prima animazione che abbiamo nella hero della pagina appena ci si atterra*/
.player-home {
    width: fit-content;
}

/*Animazione della sfera che si muove nella hero section appena si atterra nella pagina*/
.light-hero-home {
    animation: move-hero-home 10s linear infinite;
    background: radial-gradient(50% 50% at 50% 50%, #6B2FCB 0%, rgba(107, 47, 203, 0.00) 100%);
    position: absolute;
}

@keyframes move-hero-home {
    0% {
        width: 611px;
        height: 615px;
        border-radius: 615px;
        right: 85%;
        top: 65%;
    }

    50% {
        width: 1274px;
        height: 1255px;
        right: 40%;
        top: -45%;
    }

    75% {
        width: 1012px;
        height: 997px;
        top: 30%;
        right: 40%;
    }

    100% {
        width: 611px;
        height: 615px;
        top: 65%;
        right: 85%;
    }
}

/*Seconda animazione della sfera che si muove vicino alle card*/
.light-home-2 {
    animation: move-light-home 4s linear infinite;
    background: radial-gradient(50% 50% at 50% 50%, #1D2BF0 0%, rgba(107, 47, 203, 0.00) 100%);
    position: absolute;
}

@keyframes move-light-home {
    0% {
        width: 1252px;
        height: 1260px;
        border-radius: 1260px;
        right: 70%;
        /* top: 120%; */
    }

    50% {
        width: 837px;
        height: 842px;
        border-radius: 842px;
        right: 85%;
        /* top: 100%; */
    }

    100% {
        width: 1252px;
        height: 1260px;
        border-radius: 1260px;
        right: 70%;
        padding-bottom: 500px;
        /* top: 120%; */
    }
}

/*Serve per l'animazione del testo che gira a cerchio*/
#circle {
    position: relative;
    border-radius: 100%;
    animation: rotate-animation 8s infinite linear;
    right: 85%;
    bottom: 75%;
}

#circle span {
    position: absolute;
    transform-origin: top left;
}

@keyframes rotate-animation {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/*Animazione della stellina che ruota nel testo pre footer*/
.start-animate {
    animation: rotate-bounce-1 6s linear infinite;
}

@keyframes rotate-bounce-1 {
    0% {
        right: 13%;
        transform: rotate(0deg);
        margin-top: 0;
    }

    25% {
        right: 19%;
        transform: rotate(-50deg);
        margin-top: 15px;
    }

    50% {
        right: 25%;
        transform: rotate(-150deg);
        margin-top: 70px;
    }

    75% {
        right: 19%;
        transform: rotate(50deg);
        margin-top: 15px;
    }

    100% {
        right: 13%;
        transform: rotate(0deg);
        margin-top: 0;
    }
}

/*Animazione zoom img on hover*/
.zoom-1>img,
.zoom-2>img,
.zoom-3>img,
.zoom-4>img,
.zoom-5>img,
.zoom-6>img {
    transition: transform 0.54s ease-in-out;
}

.zoom-1>img:hover,
.zoom-2>img:hover,
.zoom-3>img:hover,
.zoom-4>img:hover,
.zoom-5>img:hover,
.zoom-6>img:hover {
    transform: scale(1.2);
}

/*luce marketing page*/
.marketing-light {
    height: 1264px;
    width: 1264px;
    flex-shrink: 0;
    left: 65%;
    border-radius: 1264px;
    background: radial-gradient(50% 50% at 50% 50%, #6B2FCB 0%, rgba(107, 47, 203, 0.00) 100%);
}

.creativity-design-light {
    height: 1264px;
    width: 1264px;
    flex-shrink: 0;
    left: 65%;
    border-radius: 1264px;
    background: radial-gradient(50% 50% at 50% 50%, #E0119D 0%, rgba(224, 17, 157, 0.00) 100%);
}

.light-digital-presence {
    background: radial-gradient(50% 50% at 50% 50%, #B82AF7 0%, rgba(184, 42, 247, 0.00) 100%);
}

.light-it-infrastructure {
    background: radial-gradient(50% 50% at 50% 50%, #1D2BF0 0%, rgba(29, 43, 240, 0.00) 100%);
}


/*
    Animation on hover of marketing card
*/

.animation-card-mark>.move-hose,
.animation-card-mark>.move-card {
    transition: transform;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

.animation-card-mark:hover>.move-hose {
    transform: translate(-35px, 65px);
}

.animation-card-mark:hover>.move-card {
    transform: translate(35px, -65px);
}

.btn-scopri-home-hov:hover>.btn-scopri-home,
.btn-scopri-home-hov:hover>.arrow-btn,
.btn-scopri-home-hov:hover>.arrow-btn>.arrow-home-link>path,
.btn-scopri-home-hov:focus>.btn-scopri-home,
.btn-scopri-home-hov:focus>.arrow-btn,
.btn-scopri-home-hov:focus>.arrow-btn>.arrow-home-link>path,
.contact-btn:hover>.contattaci-btn,
.contact-btn:hover>.arrow-btn,
.contact-btn:hover>.arrow-btn>.arrow-home-link>path,
.contact-btn:focus>.contattaci-btn,
.contact-btn:focus>.arrow-btn,
.contact-btn:focus>.arrow-btn>.arrow-home-link>path {
    fill: #000;
    background-color: transparent;
    color: #000;
    box-shadow: inset 30em 0 0 0 #fff;
}

/*animazioni carosello*/
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/*animazioni della sezione close to me cuoieria fiorentina*/
#section-animate-img-cf .cf-img-1,
#section-animate-img-cf .cf-img-2,
#section-animate-img-cf .cf-img-3 {
    top: -18vh;
}

#section-animate-img-cf .cf-img-1,
#section-animate-img-cf .cf-img-2,
#section-animate-img-cf .cf-img-3 {
    transition: transform;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

#section-animate-img-cf:hover .cf-img-1 {
    transform: translate(25px, 18vh);
}

#section-animate-img-cf:hover .cf-img-2 {
    transform: translate(0px, -7vh);
}

#section-animate-img-cf:hover .cf-img-3 {
    transform: translate(45px, -2vh);
}


/*animazione banner prooject pagina cuoieria fiorentina ecommerce*/
#animation-img-cf-ecommerce .img-ecommerce-cf-1,
#animation-img-cf-ecommerce .img-ecommerce-cf-2,
#animation-img-cf-ecommerce .img-ecommerce-cf-3 {
    transition: transform;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

#animation-img-cf-ecommerce:hover .img-ecommerce-cf-1 {
    transform: translate(-50px, 18vh);
}

#animation-img-cf-ecommerce:hover .img-ecommerce-cf-2 {
    transform: translate(150px, -8vh);
}

#animation-img-cf-ecommerce:hover .img-ecommerce-cf-3 {
    transform: translate(-90px, -1vh);
}

/*animazione banner apoteca natura*/
#animation-img-apoteca .img-apoteca-1,
#animation-img-apoteca .img-apoteca-2 {
    transition: transform;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

#animation-img-apoteca:hover .img-apoteca-1 {
    transform: translate(-65px, -40px);
}

#animation-img-apoteca:hover .img-apoteca-2 {
    transform: translate(180px, 45px);
}

/*animazione sezione rivista vanity fair cuoieria fiorentina*/
.vanity-fair-animate-1 .vanity-img-1 {
    top: -20vh;
}

.vanity-fair-animate-1 .vanity-img-1 {
    transition: transform;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

.vanity-fair-animate-1:hover .vanity-img-1 {
    transform: translate(-70px, -10vh);
}

/*animazione sezion tram*/
.tram-animate-1 .tram-img-1 {
    top: -144px;
    right: 325px;
}

.tram-animate-1 .tram-img-1 {
    transition: transform;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

.tram-animate-1:hover .tram-img-1 {
    transform: translate(35px, 55px);
}

.tram-animate-1 .cst-img-1 {
    top: -76px;
    right: 325px;
}

/*safimet animation*/
#safimet-animation-1 .animation-image-safimet-1,
#safimet-animation-1 .animation-image-safimet-2,
#safimet-animation-1 .animation-image-safimet-3 {
    transition: transform;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

#safimet-animation-1:hover .animation-image-safimet-1 {
    transform: translate(-70px, 10vh);
}

#safimet-animation-1:hover .animation-image-safimet-2 {
    transform: translate(-30px, 10vh);
}

#safimet-animation-1:hover .animation-image-safimet-3 {
    transform: translate(10px, -2vh);
}

/*animazione banner salute consapevole*/
#animation-img-salute-consapevole .img-salute-consapevole-1,
#animation-img-salute-consapevole .img-salute-consapevole-2 {
    transition: transform;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

#animation-img-salute-consapevole:hover .img-salute-consapevole-1 {
    transform: translate(-65px, -40px);
}

#animation-img-salute-consapevole:hover .img-salute-consapevole-2 {
    transform: translate(50px, 45px);
}


/*animazione testo homepage che appare un pochito alla vuelta*/
.FadeText>span {
    animation: FadeText 0.3s forwards;
    opacity: 0;
}

@keyframes FadeText {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.light-manifesto {
    background: radial-gradient(50% 50% at 50% 50%, #1D2BF0 0%, rgba(107, 47, 203, 0.00) 100%);
    animation: move-manifesto 15s infinite;
    width: 611px;
    height: 615px;
    border-radius: 615px;
}

@keyframes move-manifesto {
    0% {
        top: -10%;
        left: -10%;
    }

    50% {
        top: -20%;
        left: 80%;
    }

    75% {
        top: 70%;
        left: 15%;
    }

    100% {
        top: -10%;
        left: -10%;
    }
}