/* =========================
   General Styling
   ========================= */
.university-header {
    display: flex;
    align-items: center;
    justify-content: left;
    background-color: #f8f9fa;
    padding: 10px 0;
}
.university-header img { max-height: 60px; margin-right: 15px; }
.university-header h2 { margin: 0; font-size: 1.8rem; color: #007bff; font-weight: bold; }

#music-controls {
    position: fixed; bottom:20px; right:20px; background:#007bff; color:white;
    width:55px; height:55px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:22px; box-shadow:0 4px 10px rgba(0,0,0,0.3);
    cursor:pointer; z-index:9999;
}
#music-controls.playing { animation: pulse 2s infinite, spin 5s linear infinite; }

@keyframes pulse {
    0% { box-shadow:0 0 0 0 rgba(0,123,255,0.7); }
    70% { box-shadow:0 0 0 15px rgba(0,123,255,0); }
    100% { box-shadow:0 0 0 0 rgba(0,123,255,0); }
}
@keyframes spin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

@keyframes textFlash {
    0% { color:#007bff; text-shadow:0 0 5px #007bff; }
    50% { color:#fff; text-shadow:0 0 10px #007bff; }
    100% { color:#007bff; text-shadow:0 0 5px #007bff; }
}
.university-header h2.flashing { animation:textFlash 2s infinite; }

#confetti-canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:5; }
#leaderboard-container { position: relative; }

.content-row { display:flex; gap:20px; }
.leaderboard-table { flex:2; }
.photo-carousel { flex:1; min-width:250px; }

.carousel-item { height:490px; }
.carousel-item img { height:100%; width:100%; object-fit:cover; border-radius:8px; }

@media (max-width: 992px) {
    .carousel-item { height:300px; }
}
@media (max-width: 576px) {
    .content-row { flex-direction: column; gap: 15px; }
    .leaderboard-table, .photo-carousel { flex: 1 1 100%; min-width: 0; }
    .carousel-item { height:250px; }
}


/* =========================
   Bee Cursor and Effects
   ========================= */

/* Hide default cursor */
body {
    cursor: none;
}

/* Bee cursor (keep your path correct for your setup) */
#bee-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: url('../images/bee.png') no-repeat center center / contain;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.08s linear;
    filter: drop-shadow(0 0 10px yellow);
    animation: beeHover 0.8s infinite alternate ease-in-out;
}

/* Subtle hover effect on bee */
@keyframes beeHover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}


.trail-icon {
    position: fixed;
    pointer-events: none;
    font-size: 18px;
    opacity: 1;
    animation: fallFade var(--fall-duration) cubic-bezier(0.25, 0.8, 0.5, 1) forwards;
}

@keyframes fallFade {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(var(--fall-distance)) translateX(var(--drift));
        opacity: 0.8;
    }
}



/* Ripple effect */
.ripple-effect {
    position: fixed;
    width: 50px;
    height: 50px;
    background: rgba(255, 215, 0, 0.4);
    border-radius: 50%;
    pointer-events: none;
    animation: ripple 0.6s ease-out forwards;
    z-index: 9999;
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.8;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}