body {
    font-family: "Inter", sans-serif;
}

h1,
.brand {
    font-family: "Poppins", sans-serif;
    letter-spacing: -0.015em;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
}

/* Background slider */
.bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
    filter: brightness(0.85) saturate(0.95);
}

.bg-slide.active {
    opacity: 1;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

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

.animate-marquee {
    animation: marquee 25s linear infinite;
}

@keyframes bgMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.animate-bgMove {
    background-size: 200% 200%;
    animation: bgMove 12s ease-in-out infinite;
}

@keyframes countPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

.animate-count {
    animation: countPulse 4s ease-in-out infinite;
}

.marquee {
    width: 100%;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    gap: 4rem;
    /* matches gap-16 */
    width: max-content;
    white-space: nowrap;
    animation: marquee 28s linear infinite;
}

.marquee-track span {
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 600;
    color: darkgrey;
    /* eco-primary */
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

/* Seamless infinite scroll */
@keyframes marquee {
    from {
        transform: translateX(0);
    }

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

@media (max-width: 640px) {
    .marquee-track {
        animation-duration: 40s;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fadeUp 0.9s ease-out forwards;
}

/* ===== Scrollbar (Yellow Accent) ===== */

/* Width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #fbfbf7;
    /* very soft warm neutral */
    border-radius: 999px;
}

/* Thumb */
::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(255, 222, 89, 0.85),
        rgba(255, 222, 89, 0.55)
    );
    border-radius: 999px;
    border: 2px solid #fbfbf7;
    /* floating pill effect */
}

/* Hover */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(255, 222, 89, 1),
        rgba(255, 222, 89, 0.7)
    );
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 222, 89, 0.8) #fbfbf7;
}