@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {

    /* Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    /* IE, Edge and Firefox */
    .no-scrollbar {
        -ms-overflow-style: none;
        /* IE/Edge */
        scrollbar-width: none;
        /* Firefox */
    }
}

@font-face {
    font-family: 'Peugeot New Regular';
    src: url('../fonts/PeugeotNewRegular.otf') format('truetype');
}

@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v109/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --transition: all 300ms ease-in-out;
}

.transition-one {
    transition: var(--transition);
}

body {
    font-family: 'Peugeot New Regular', sans-serif !important;
    background-color: #FEFFFF;
    scroll-behavior: smooth !important;
    transition: var(--transition-one);
}

.peugeot-font {
    font-family: 'Peugeot New Regular', sans-serif !important;
}

.inter-font {
    font-family: "Inter", sans-serif !important;
}

.site-header-sticky {
    position: fixed !important;
    top: -110px !important;
    left: 0;
    height: 110px;
    transition: top 260ms ease;
    will-change: top;
}

.site-header-sticky.is-header-visible {
    top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .site-header-sticky {
        transition: none;
    }
}

header nav .active-page {
    color: #ef4444 !important;
    font-weight: 700;
}

@media (min-width: 1024px) {
    header nav:not(.flex-col)>a.active-page,
    header nav:not(.flex-col)>div>.active-page {
        position: relative;
    }

    header nav:not(.flex-col)>a.active-page::after,
    header nav:not(.flex-col)>div>.active-page::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -8px;
        height: 2px;
        background: currentColor;
    }
}

.hero-overlay {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.05));
}

.section-title {
    @apply text-[42px] font-black uppercase tracking-[-2px];
}

.partners-track[data-cloned="true"] {

    animation: infiniteScroll 20s linear infinite;

}

.partners-set {
    display: flex;
    align-items: center;
    gap: 5rem;
    flex-shrink: 0;
}

.partners-track[data-cloned="true"]:hover {

    animation-play-state: paused;

}

.scroll-top-button {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #C30027;
    color: #fff;
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.22);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 200ms ease, transform 200ms ease, background-color 200ms ease;
}

.scroll-top-button.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-top-button:hover,
.scroll-top-button:focus-visible {
    background: #111827;
}

.scroll-top-button:focus-visible {
    outline: 3px solid rgba(195, 0, 39, 0.28);
    outline-offset: 4px;
}

@media (max-width: 640px) {
    .scroll-top-button {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }
}

@keyframes infiniteScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(var(--partners-scroll-distance) * -1));
    }

}

.hero-overlay {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, .85),
            rgba(0, 0, 0, .15));
}

.card-hover:hover img {
    transform: scale(1.05);
}

@keyframes marquee {

    from {
        transform: translateX(0);
    }

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

}