/* ========================================
   Browse Topics - Rainbow Background Animation
   ======================================== */

.browse-topics-section {
    padding: 100px 0;
    background: #4a8ac4;
    position: relative;
    overflow: hidden;
}

/* Rainbow Beam Animation */
.rainbow-beam {
    height: 100vh;
    width: 0;
    top: 0;
    position: absolute;
    transform: rotate(10deg);
    transform-origin: top right;
}

/* Generate 25 rainbow beams with animation delays */
.rainbow-beam:nth-child(1) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(43, 79, 135, 0.6),
        0 0 50px 25px rgba(91, 155, 213, 0.6),
        50px 0 50px 25px rgba(168, 213, 245, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 29s linear infinite slide;
    animation-delay: -1.8s;
}
.rainbow-beam:nth-child(2) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(91, 155, 213, 0.6),
        0 0 50px 25px rgba(168, 213, 245, 0.6),
        50px 0 50px 25px rgba(43, 79, 135, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 41.4s linear infinite slide;
    animation-delay: -3.6s;
}
.rainbow-beam:nth-child(3) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(168, 213, 245, 0.6),
        0 0 50px 25px rgba(43, 79, 135, 0.6),
        50px 0 50px 25px rgba(91, 155, 213, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 39.6s linear infinite slide;
    animation-delay: -5.4s;
}
.rainbow-beam:nth-child(4) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(43, 79, 135, 0.6),
        0 0 50px 25px rgba(91, 155, 213, 0.6),
        50px 0 50px 25px rgba(168, 213, 245, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 37.8s linear infinite slide;
    animation-delay: -7.2s;
}
.rainbow-beam:nth-child(5) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(91, 155, 213, 0.6),
        0 0 50px 25px rgba(43, 79, 135, 0.6),
        50px 0 50px 25px rgba(168, 213, 245, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 36s linear infinite slide;
    animation-delay: -9s;
}
.rainbow-beam:nth-child(6) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(168, 213, 245, 0.6),
        0 0 50px 25px rgba(91, 155, 213, 0.6),
        50px 0 50px 25px rgba(43, 79, 135, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 34.2s linear infinite slide;
    animation-delay: -10.8s;
}
.rainbow-beam:nth-child(7) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(43, 79, 135, 0.6),
        0 0 50px 25px rgba(168, 213, 245, 0.6),
        50px 0 50px 25px rgba(91, 155, 213, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 32.4s linear infinite slide;
    animation-delay: -12.6s;
}
.rainbow-beam:nth-child(8) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(91, 155, 213, 0.6),
        0 0 50px 25px rgba(168, 213, 245, 0.6),
        50px 0 50px 25px rgba(43, 79, 135, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 30.6s linear infinite slide;
    animation-delay: -14.4s;
}
.rainbow-beam:nth-child(9) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(168, 213, 245, 0.6),
        0 0 50px 25px rgba(43, 79, 135, 0.6),
        50px 0 50px 25px rgba(91, 155, 213, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 28.8s linear infinite slide;
    animation-delay: -16.2s;
}
.rainbow-beam:nth-child(10) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(43, 79, 135, 0.6),
        0 0 50px 25px rgba(91, 155, 213, 0.6),
        50px 0 50px 25px rgba(168, 213, 245, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 27s linear infinite slide;
    animation-delay: -18s;
}
.rainbow-beam:nth-child(11) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(91, 155, 213, 0.6),
        0 0 50px 25px rgba(43, 79, 135, 0.6),
        50px 0 50px 25px rgba(168, 213, 245, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 25.2s linear infinite slide;
    animation-delay: -19.8s;
}
.rainbow-beam:nth-child(12) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(168, 213, 245, 0.6),
        0 0 50px 25px rgba(91, 155, 213, 0.6),
        50px 0 50px 25px rgba(43, 79, 135, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 23.4s linear infinite slide;
    animation-delay: -21.6s;
}
.rainbow-beam:nth-child(13) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(43, 79, 135, 0.6),
        0 0 50px 25px rgba(168, 213, 245, 0.6),
        50px 0 50px 25px rgba(91, 155, 213, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 21.6s linear infinite slide;
    animation-delay: -23.4s;
}
.rainbow-beam:nth-child(14) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(91, 155, 213, 0.6),
        0 0 50px 25px rgba(168, 213, 245, 0.6),
        50px 0 50px 25px rgba(43, 79, 135, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 19.8s linear infinite slide;
    animation-delay: -25.2s;
}
.rainbow-beam:nth-child(15) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(168, 213, 245, 0.6),
        0 0 50px 25px rgba(43, 79, 135, 0.6),
        50px 0 50px 25px rgba(91, 155, 213, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 18s linear infinite slide;
    animation-delay: -27s;
}
.rainbow-beam:nth-child(16) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(43, 79, 135, 0.6),
        0 0 50px 25px rgba(91, 155, 213, 0.6),
        50px 0 50px 25px rgba(168, 213, 245, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 16.2s linear infinite slide;
    animation-delay: -28.8s;
}
.rainbow-beam:nth-child(17) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(91, 155, 213, 0.6),
        0 0 50px 25px rgba(43, 79, 135, 0.6),
        50px 0 50px 25px rgba(168, 213, 245, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 14.4s linear infinite slide;
    animation-delay: -30.6s;
}
.rainbow-beam:nth-child(18) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(168, 213, 245, 0.6),
        0 0 50px 25px rgba(91, 155, 213, 0.6),
        50px 0 50px 25px rgba(43, 79, 135, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 12.6s linear infinite slide;
    animation-delay: -32.4s;
}
.rainbow-beam:nth-child(19) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(43, 79, 135, 0.6),
        0 0 50px 25px rgba(168, 213, 245, 0.6),
        50px 0 50px 25px rgba(91, 155, 213, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 10.8s linear infinite slide;
    animation-delay: -34.2s;
}
.rainbow-beam:nth-child(20) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(91, 155, 213, 0.6),
        0 0 50px 25px rgba(168, 213, 245, 0.6),
        50px 0 50px 25px rgba(43, 79, 135, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 9s linear infinite slide;
    animation-delay: -36s;
}
.rainbow-beam:nth-child(21) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(168, 213, 245, 0.6),
        0 0 50px 25px rgba(43, 79, 135, 0.6),
        50px 0 50px 25px rgba(91, 155, 213, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 7.2s linear infinite slide;
    animation-delay: -37.8s;
}
.rainbow-beam:nth-child(22) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(43, 79, 135, 0.6),
        0 0 50px 25px rgba(91, 155, 213, 0.6),
        50px 0 50px 25px rgba(168, 213, 245, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 5.4s linear infinite slide;
    animation-delay: -39.6s;
}
.rainbow-beam:nth-child(23) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(91, 155, 213, 0.6),
        0 0 50px 25px rgba(43, 79, 135, 0.6),
        50px 0 50px 25px rgba(168, 213, 245, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 3.6s linear infinite slide;
    animation-delay: -41.4s;
}
.rainbow-beam:nth-child(24) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(168, 213, 245, 0.6),
        0 0 50px 25px rgba(91, 155, 213, 0.6),
        50px 0 50px 25px rgba(43, 79, 135, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 1.8s linear infinite slide;
    animation-delay: -43.2s;
}
.rainbow-beam:nth-child(25) {
    box-shadow: -130px 0 80px 40px rgba(255, 255, 255, 0.1),
        -50px 0 50px 25px rgba(43, 79, 135, 0.6),
        0 0 50px 25px rgba(168, 213, 245, 0.6),
        50px 0 50px 25px rgba(91, 155, 213, 0.6),
        130px 0 80px 40px rgba(255, 255, 255, 0.1);
    animation: 0s linear infinite slide;
    animation-delay: -45s;
}

@keyframes slide {
    from {
        right: -25vw;
    }
    to {
        right: 125vw;
    }
}

/* Horizontal light diffuser */
.rainbow-h {
    box-shadow: 0 0 50vh 40vh rgba(255, 255, 255, 0.05);
    width: 100vw;
    height: 0;
    bottom: 0;
    left: 0;
    position: absolute;
}

/* Vertical light diffuser */
.rainbow-v {
    box-shadow: 0 0 35vw 25vw rgba(255, 255, 255, 0.05);
    width: 0;
    height: 100vh;
    bottom: 0;
    left: 0;
    position: absolute;
}

/* Content stays above rainbow */
.browse-topics-section .container {
    position: relative;
    z-index: 10;
}

.browse-topics-section .section-tag,
.browse-topics-section .section-title,
.browse-topics-section .section-description {
    color: #ffffff;
    position: relative;
    z-index: 10;
}

.browse-topics-section .title-underline {
    background: rgba(255, 255, 255, 0.3);
}

/* Topic Cards - Update for dark background */
.topic-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.topic-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(168, 213, 245, 0.5);
}

.topic-title {
    color: #ffffff;
}

.topic-count {
    color: rgba(255, 255, 255, 0.7);
}

.topic-card:hover .topic-count {
    color: rgba(255, 255, 255, 0.9);
}