/* marquee.css */
/* =========================== */
/* 6. Marquee Section */
/* =========================== */
.marquee-section {
    width: 100%;
    margin: 8rem 0 10rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marquee-container {
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 1400px;
    overflow: hidden;
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
}

.marquee-inner {
    display: flex;
    white-space: nowrap;
    animation: marquee-scroll 30s linear infinite;
}

/* Animation direction for right-to-left scroll */
.marquee-inner.right-to-left {
    animation-direction: reverse;
}

/* Pause animation on hover */
.marquee-inner.paused {
    animation-play-state: paused;
}

/* Wrapper for each set of marquee items to control spacing */
.marquee-item-wrapper {
    display: flex;
    gap: 16px;
    padding-right: 12px;
}

/* Individual marquee item (tag) styling */
.marquee-item {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    max-width: 65ch;
    font-style: normal;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid currentColor;
    flex-shrink: 0;
    transition: background-color 0.3s, color 0.3s;
    opacity: 0.2;
}

.marquee-item, p {
    margin-top: 10px;
    margin-bottom: 10px;
}

.marquee-item:hover {
    background-color: var(--dark-marquee-item-hover-bg); /* Default to dark theme */
    color: var(--dark-marquee-item-hover-color); /* Default to dark theme */
    opacity: 0.8;
}
body[data-theme="light"] .marquee-item:hover {
    background-color: var(--light-marquee-item-hover-bg); /* Apply light theme */
    color: var(--light-marquee-item-hover-color); /* Apply light theme */
}


/* Primary color for marquee items */
.marquee-primary-color {
    color: var(--dark-ctx-primary-fg-primary); /* Default to dark theme */
}
body[data-theme="light"] .marquee-primary-color {
    color: var(--light-ctx-primary-fg-primary); /* Apply light theme */
}


/* Secondary color for marquee items */
.marquee-secondary-color {
    color: var(--dark-ctx-primary-fg-secondary); /* Default to dark theme */
}
body[data-theme="light"] .marquee-secondary-color {
    color: var(--light-ctx-primary-fg-secondary); /* Apply light theme */
}


/* Fade overlay for marquee edges */
.fade-overlay {
    position: absolute;
    top: 0;
    z-index: 10;
    height: 100%;
    width: 20vw;
    pointer-events: none;
}

/* Left fade overlay */
.fade-left {
    left: 0;
    background: linear-gradient(to right, var(--dark-marquee-fade-bg), transparent); /* Default to dark theme */
}
body[data-theme="light"] .fade-left {
    background: linear-gradient(to right, var(--light-marquee-fade-bg), transparent); /* Apply light theme */
}

/* Right fade overlay */
.fade-right {
    right: 0;
    left: unset;
    background: linear-gradient(to left, var(--dark-marquee-fade-bg), transparent); /* Default to dark theme */
}
body[data-theme="light"] .fade-right {
    background: linear-gradient(to left, var(--light-marquee-fade-bg), transparent); /* Apply light theme */
}

/* Keyframe animation for horizontal scrolling */
@keyframes marquee-scroll-rtl-fast {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@keyframes marquee-scroll-ltr-medium {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

@keyframes marquee-scroll-rtl-slow {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@keyframes marquee-scroll-ltr-v_slow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}