/* General Styles */
html {
    scroll-behavior: smooth;
}

/* Dark Mode Overrides */
.dark {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.dark .bg-white {
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.dark .text-gray-800 {
    color: rgb(229 231 235 / var(--tw-text-opacity));
}
.dark .text-gray-700 {
    color: rgb(209 213 219 / var(--tw-text-opacity));
}
.dark .bg-gray-100 {
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.dark .border-gray-300 {
    border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
.dark .text-gray-400 {
    color: rgb(156 163 175 / var(--tw-text-opacity));
}

/* Animations */
@keyframes kick {
    0%, 100% { transform: rotate(45deg) translateX(0) translateY(0); }
    50% { transform: rotate(55deg) translateX(10px) translateY(-5px); }
}
@keyframes armSwing {
    0%, 100% { transform: rotate(45deg); }
    50% { transform: rotate(30deg); }
}
@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes spin-slow-reverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
@keyframes fade-in {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-kick { animation: kick 0.8s ease-in-out infinite; }
.animate-armSwing { animation: armSwing 1s ease-in-out infinite; }
.animate-spin-slow { animation: spin-slow 8s linear infinite; }
.animate-spin-slow-reverse { animation: spin-slow-reverse 6s linear infinite; }
.animate-fade-in { animation: fade-in 1s ease-out forwards; }


/* Component Styles */
#main-menu a {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
#main-menu a.active {
    background-color: #991b1b; 
    color: white;
    border-color: #991b1b;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.hero-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.schedule-day {
    transition: all 0.3s ease;
}
.schedule-day:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.gallery-item {
    transition: all 0.3s ease;
}
.gallery-item:hover {
    transform: scale(1.03);
}