/**
 * Fichier  : /pages/homepage/section-1/assets/css/track.css
 * Fonction : style du texte défilant de la section vision - page d'accueil
 */


/* ==================================================
   TRACK
================================================== */

.ticker {
    position: relative;
    z-index: 1;
}

.ticker {
    overflow: hidden;
}

.ticker {
    width: 100%;
}

.ticker {
    padding: .35em 0;
}

.ticker {
    border-top: 1px solid rgba(0, 0, 0, .06);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.ticker {
    pointer-events: none;
}


/* ==================================================
   TRACK INNER
================================================== */

.ticker .track {
    width: max-content;
}

.ticker .track {
    display: flex;
}

.ticker .track {
    animation:
        visionTicker 36s
        linear
        infinite;
}


/* ==================================================
   CONTENT
================================================== */

.ticker .content {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


/* ==================================================
   TEXT
================================================== */

.ticker span {
    padding: 0 .16em;
}

.ticker span {
    font-family: 'bold-font';
    font-size: clamp(48px, 5.5vw, 92px);
    font-weight: 400;
    line-height: 1em;
    text-transform: uppercase;
    letter-spacing: -.035em;
    white-space: nowrap;
    color: rgba(18, 18, 18, .085);
}


/* ==================================================
   SEPARATOR
================================================== */

.ticker i {
    padding: 0 .12em;
}

.ticker i {
    font-family: 'bold-font';
    font-size: clamp(38px, 4vw, 68px);
    font-style: normal;
    font-weight: 400;
    line-height: 1em;
    color: var(--color-primary);
}


/* ==================================================
   ANIMATION
================================================== */

@keyframes visionTicker {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* ==================================================
   ACCESSIBILITÉ
================================================== */

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

    .ticker .track {
        animation: none;
    }

}


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

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

    .ticker .track {
        animation-duration: 40s;
    }

}

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

    .ticker span {
        font-size: 48px;
    }

    .ticker i {
        font-size: 36px;
    }

    .ticker .track {
        animation-duration: 44s;
    }

}