.page-header-ui {
    position: relative;
}

header.page-header-ui {
    background: linear-gradient(135deg, #0f1729 0%, #1a2332 25%, #1e3a5f 50%, #2563eb 100%) !important;
    background-size: 200% 200%;
}

.header-animated-bg {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100% - 80px);
    overflow: hidden;
    z-index: 0;
}

.card-row {
    display: flex;
    gap: 20px;
    position: absolute;
    white-space: nowrap;
    will-change: transform;
}

/* Efficient Marquee System:
   - HTML contains 12 cards per row
   - JavaScript dynamically duplicates cards on page load
   - Duplication count adapts to viewport width (3-6 sets)
   - Card dimensions: 200px width + 20px gap = 220px per card
   - 12 cards per set = 2640px per complete set
*/

.game-card {
    flex-shrink: 0;
    width: 200px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    opacity: 0.15;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4),
                0 0 40px rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 10;
}

.card-row:hover {
    animation-play-state: paused;
}

.game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-row-1 {
    top: 40px;
    animation: scrollRight 60s linear infinite;
}

.card-row-2 {
    top: 180px;
    animation: scrollLeft 45s linear infinite;
}

.card-row-3 {
    top: 320px;
    animation: scrollRight 70s linear infinite;
}

.card-row-4 {
    top: 460px;
    animation: scrollLeft 55s linear infinite;
}

.card-row-5 {
    top: 600px;
    animation: scrollRight 50s linear infinite;
}

.card-row-6 {
    top: 740px;
    animation: scrollLeft 65s linear infinite;
}

/* Seamless infinite scroll right (cards move left to right) */
@keyframes scrollRight {
    from {
        transform: translateX(calc(-1 * var(--marquee-distance, 25%)));
    }

    to {
        transform: translateX(0);
    }
}

/* Seamless infinite scroll left (cards move right to left) */
@keyframes scrollLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--marquee-distance, 25%)));
    }
}

/* Header content positioned above animated cards */
.page-header-ui-content {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* Text elements pass hover events through to animated cards */
.page-header-ui-content h1,
.page-header-ui-content h2,
.page-header-ui-content h3,
.page-header-ui-content p,
.page-header-ui-content div,
.page-header-ui-content span {
    pointer-events: none !important;
}

/* Interactive elements capture pointer events */
.page-header-ui-content a,
.page-header-ui-content button,
.page-header-ui-content input,
.page-header-ui-content select,
.page-header-ui-content textarea {
    pointer-events: auto;
}

/* Badges block hover events to cards underneath */
.page-header-ui-content .badge {
    pointer-events: auto !important;
}

/* Fixed navbar container transparent to pointer events */
.navbar.fixed-top {
    pointer-events: none;
}

/* Interactive navbar elements capture pointer events */
.navbar.fixed-top .navbar-brand,
.navbar.fixed-top .navbar-toggler,
.navbar.fixed-top .nav-link,
.navbar.fixed-top .btn,
.navbar.fixed-top button,
.navbar.fixed-top a,
.navbar.fixed-top input,
.navbar.fixed-top select,
.navbar.fixed-top .dropdown-menu,
.navbar.fixed-top .dropdown-toggle {
    pointer-events: auto;
}

@media (max-width: 768px) {
    .game-card {
        width: 150px;
        height: 90px;
    }

    .card-row {
        gap: 15px;
    }
}

/* Desktop: Show only 5 rows on landing page with animated cards */
@media (min-width: 769px) {
    header.page-header-ui:has(.header-animated-bg) {
        min-height: 900px;
    }

    .card-row-6 {
        display: none;
    }
}