/* Custom utilities */

/* Manually defined Tailwind colors because logic doesn't run CDN script */
.bg-mmc-primary {
    background-color: #13a4ec !important;
}

.text-mmc-primary {
    color: #13a4ec !important;
}

.border-mmc-primary {
    border-color: #13a4ec !important;
}

.ring-mmc-primary {
    --tw-ring-color: #13a4ec !important;
}

.shadow-mmc-primary\/30 {
    box-shadow: 0 10px 15px -3px rgba(19, 164, 236, 0.3), 0 4px 6px -4px rgba(19, 164, 236, 0.3) !important;
}

.shadow-mmc-primary\/10 {
    box-shadow: 0 4px 6px -1px rgba(19, 164, 236, 0.1), 0 2px 4px -1px rgba(19, 164, 236, 0.1) !important;
}

.shadow-mmc-primary\/20 {
    box-shadow: 0 10px 15px -3px rgba(19, 164, 236, 0.2), 0 4px 6px -4px rgba(19, 164, 236, 0.2) !important;
}

.bg-mmc-primary\/10 {
    background-color: rgba(19, 164, 236, 0.1) !important;
}

.bg-mmc-primary\/20 {
    background-color: rgba(19, 164, 236, 0.2) !important;
}

.bg-mmc-primary\/5 {
    background-color: rgba(19, 164, 236, 0.05) !important;
}

.glass-panel {
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Dark mode support */
:is(.dark .glass-panel) {
    background-color: rgba(16, 28, 34, 0.65);
}

.text-glow {
    text-shadow: 0 0 20px rgba(19, 164, 236, 0.3);
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 8s ease-in-out infinite 1s;
}