/* Global Styles */
body {
    font-family: "Plus Jakarta Sans", sans-serif;
}

/* Scrollbar Hiding */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Carousel Animation Styles */
.carousel-active-card {
    transform: scale(1.15) !important;
    box-shadow: 0 0 25px 5px rgba(236, 72, 153, 0.6) !important;
    z-index: 20 !important;
    filter: grayscale(0) !important;
}

#event-carousel {
    scroll-behavior: smooth;
}

/* Lightbox & Modal Styles */
/* Loading Dots Animation */
.dot-bounce {
    width: 10px;
    height: 10px;
    background-color: #ec4899; /* primary */
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.dot-bounce-1 { animation-delay: -0.32s; }
.dot-bounce-2 { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Masonry Grid Styles */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 10px;
    gap: 16px;
}
.masonry-item-v { grid-row: span 40; }
.masonry-item-s { grid-row: span 25; }
.masonry-item-h { grid-row: span 20; }

/* Lightbox target fallback */
#lightbox {
    display: none;
}
#lightbox.flex {
    display: flex;
}

/* Classes Page Styles */
.schedule-container {
    height: calc(100vh - 80px);
}
.active-link {
    position: relative;
}
.active-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ec4699;
    box-shadow: 0 0 8px #ec4699;
}

/* Albums Page Styles */
.album-card .overlay {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
.album-card:hover .overlay {
    opacity: 0.6;
}
.album-card .title-slide {
    transform: translateY(-20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.album-card:hover .title-slide {
    transform: translateY(0);
    opacity: 1;
}
.album-card .badge-slide {
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.album-card:hover .badge-slide {
    transform: translateY(0);
    opacity: 1;
}
.active-nav {
    color: #ec46a1 !important;
    position: relative;
}
.active-nav::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ec46a1;
}