/**
 * Fichier  : /pages/homepage/header/assets/css/swipe-down.css
 * Fonction : style du bouton animé "swipe down" - page d'accueil
 */


/* ==================================================
   CONTAINER
================================================== */

.swipedown {
    margin-top: 2em;
}


/* ==================================================
   LINK
================================================== */

.swipedown a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}


/* ==================================================
   LABEL
================================================== */

.swipedown a span {
    font-family: 'aesthetic-font';
    font-size: 18px;
    color: #fff;
}


/* ==================================================
   ARROW
================================================== */

.swipedown a .arrow {
    width: 26px;
    height: 60px;
}

.swipedown a .arrow svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.swipedown a .arrow path {
    fill: none;
    stroke: #fff;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 100;
    stroke-dashoffset: 100;

    animation: drawArrow 1.6s ease-in-out infinite;
}


/* ==================================================
   ANIMATIONS
================================================== */

@keyframes drawArrow {

    0% {
        stroke-dashoffset: 100;
        opacity: 0;
        transform: translateY(-6px);
    }

    20% {
        opacity: 1;
    }

    60% {
        stroke-dashoffset: 0;
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        stroke-dashoffset: 0;
        opacity: .15;
        transform: translateY(8px);
    }

}


/* ==================================================
   DESKTOP INTERACTIONS
================================================== */

@media screen and (min-width: 1024px) {

    .swipedown a:hover {
        transform: translateY(-10px);
        transition: .3s ease-in-out;
    }

}


/* ==================================================
   RESPONSIVE
================================================== */

@media screen and (max-width: 1024px) {

    .swipedown {
        margin-top: 1em;
    }

    .swipedown a span {
        display: none;
    }

}