/* assets/css/style.css - Global Stylesheet definitions */

/* Glassmorphic elements */
.glass-panel {
    background: rgba(18, 46, 52, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(224, 180, 178, 0.15);
}

.glass-panel-light {
    background: rgba(18, 46, 52, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(171, 175, 181, 0.1);
}

.glass-panel-heavy {
    background: rgba(14, 29, 33, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(98, 35, 71, 0.2);
}

/* Hover scales */
.glass-card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-hover:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 30px -10px rgba(98, 35, 71, 0.3);
    border-color: rgba(224, 180, 178, 0.3);
}

/* Insets and shadow depths */
.neumorph-inset {
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5), inset -2px -2px 5px rgba(255,255,255,0.05);
}

.neumorph-outset {
    box-shadow: 5px 5px 15px rgba(0,0,0,0.4), -3px -3px 10px rgba(255,255,255,0.02);
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(14, 29, 33, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(103, 126, 138, 0.4);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(224, 180, 178, 0.6);
}

/* Soft Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(0.5deg); }
}

@keyframes float-reverse {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(8px) rotate(-0.5deg); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.3; }
}

.animate-float-slow {
    animation: float 8s ease-in-out infinite;
}

.animate-float-reverse {
    animation: float-reverse 10s ease-in-out infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 6s ease-in-out infinite;
}