/* Sports Activities Marquee - Optimized & Flush */
.sports-marquee {
    position: relative;
    width: 100%;
    height: 80px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.95) 100%);
    border-top: 2px solid var(--neon-green, #b0d136);
    border-bottom: 2px solid var(--neon-green, #b0d136);
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow:
        0 0 25px rgba(176, 209, 54, 0.4),
        inset 0 0 20px rgba(176, 209, 54, 0.08),
        0 2px 10px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    z-index: 10;
    transform: translateZ(0);
    /* Hardware acceleration */
}

/* Ensure flush positioning after hero section */
.hero-section+.sports-marquee {
    margin-top: 0 !important;
}

/* Remove any potential spacing from container elements */
.sports-marquee * {
    margin: 0;
    padding: 0;
}

/* Ensure about section sits flush with marquee */
.sports-marquee+.about-wrapper,
.sports-marquee+.section-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove top margin/padding from first about section */
.about-wrapper .ko-about-section:first-child,
.section-wrapper .ko-about-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* Specifically target the about hero section */
.about-wrapper .ko-about-hero {
    margin-top: 0 !important;
    padding-top: 60px !important;
    border-top: none !important;
}

.marquee-container {
    display: flex;
    white-space: nowrap;
    animation: marqueeScroll 90s linear infinite;
    will-change: transform;
    width: max-content;
    animation-delay: 0s;
    animation-play-state: running;
    transform: translateZ(0); /* Hardware acceleration */
    backface-visibility: hidden; /* Smooth rendering */
    perspective: 1000px; /* 3D acceleration */
}

.marquee-text {
    font-family: 'Orbitron', 'Roboto', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: #39ff14; /* Solid punch green */
    text-transform: uppercase;
    letter-spacing: 4px;
    /* Solid color text: remove gradient and glow */
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    text-shadow: none;
    white-space: nowrap;
    display: inline-block;
    animation: none; /* Disable glow by default for readability */
    padding: 0 100px 0 0;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Seamless looping animation - smooth continuous scroll with duplicated content */
@keyframes marqueeScroll {
    0% {
        transform: translateX(0%);
    }

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

/* Glowing text animation */
@keyframes textGlow {
    0% {
        text-shadow:
            0 0 10px rgba(176, 209, 54, 0.8),
            0 0 20px rgba(176, 209, 54, 0.6),
            0 0 30px rgba(176, 209, 54, 0.4);
    }

    100% {
        text-shadow:
            0 0 15px rgba(176, 209, 54, 1),
            0 0 25px rgba(176, 209, 54, 0.8),
            0 0 35px rgba(176, 209, 54, 0.6),
            0 0 45px rgba(176, 209, 54, 0.4);
    }
}

/* Responsive Design - Optimized */
@media (max-width: 1024px) {
    .sports-marquee {
        height: 65px;
        margin: 0;
        padding: 0;
    }

    .marquee-text {
        font-size: 2.2rem;
        letter-spacing: 4px;
        padding-right: 120px;
    }

    .marquee-container {
        animation: marqueeScroll 35s linear infinite;
        animation-delay: 0s;
        /* start immediately */
    }
}

@media (max-width: 768px) {
    .sports-marquee {
        height: 55px;
        margin: 0;
        padding: 0;
        backdrop-filter: blur(2px);
    }

    .marquee-text {
        font-size: 1.8rem;
        letter-spacing: 3px;
        padding-right: 100px;
    }

    .marquee-container {
        animation: marqueeScroll 25s linear infinite;
        animation-delay: 0s;
        /* start immediately */
    }
}

/* Hover effects */
.sports-marquee:hover .marquee-container {
    animation-play-state: paused;
    animation-delay: 0s;
    /* start immediately */
}

.sports-marquee:hover .marquee-text {
    animation: textGlow 6s ease-in-out infinite alternate;
}

.sports-marquee:hover {
    box-shadow:
        0 0 30px rgba(176, 209, 54, 0.5),
        inset 0 0 30px rgba(176, 209, 54, 0.2);
}

/* Alternative smooth scrolling version for better performance */
@media (prefers-reduced-motion: no-preference) {
    .marquee-container {
        animation: marqueeScrollSmooth 90s linear infinite;
        animation-delay: 0s;
        /* start immediately */
    }
    
    /* Responsive smooth scrolling speeds */
    @media (max-width: 1024px) {
        .marquee-container {
            animation: marqueeScrollSmooth 35s linear infinite;
        }
    }
    
    @media (max-width: 768px) {
        .marquee-container {
            animation: marqueeScrollSmooth 25s linear infinite;
        }
    }
    
    @media (max-width: 480px) {
        .marquee-container {
            animation: marqueeScrollSmooth 15s linear infinite !important;
        }
    }
}

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

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

/* Mobile devices (max-width: 480px) */
@media (max-width: 480px) {
    .sports-marquee {
        height: 45px !important;
        margin: 0 !important;
        padding: 0 !important;
        backdrop-filter: blur(1px) !important;
    }

    .sports-marquee .marquee-text {
        font-size: 1.4rem !important;
        letter-spacing: 2px !important;
        padding-right: 80px !important;
        text-shadow:
            0 0 8px rgba(176, 209, 54, 0.9),
            0 0 16px rgba(176, 209, 54, 0.6),
            0 0 24px rgba(176, 209, 54, 0.4) !important;
    }

    /* More specific selector to override inline styles */
    html body .sports-marquee .marquee-container {
        animation: marqueeScroll 15s linear infinite !important;
        animation-delay: 0s !important;
        animation-play-state: running !important;
    }
}

/* Removed child-level transforms to prevent blurry text during movement */

/* Ensure immediate start and smooth performance */
.sports-marquee .marquee-container {
    animation-fill-mode: both;
    animation-timing-function: linear;
}

/* Prevent any layout shifts during animation */
.marquee-text {
    flex-shrink: 0;
    min-width: max-content;
}

/* Touch device optimizations */
@media (pointer: coarse) {
    .sports-marquee {
        -webkit-tap-highlight-color: transparent;
        touch-action: pan-y;
    }
    
    .marquee-container {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Ultra small mobile devices */
@media (max-width: 320px) {
    .sports-marquee {
        height: 40px !important;
    }
    
    .sports-marquee .marquee-text {
        font-size: 1.2rem !important;
        letter-spacing: 1px !important;
        padding-right: 60px !important;
    }
    
    html body .sports-marquee .marquee-container {
        animation: marqueeScroll 12s linear infinite !important;
    }
}