/* style.css - Premium Apple-Style Enhancements & Micro-Interactions */

/* Reset & Custom Defaults */
@layer base {
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* Premium Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

.dark ::-webkit-scrollbar-track {
    background: #0f0f11;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c4;
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.dark ::-webkit-scrollbar-thumb {
    background: #3e3e42;
    border: 2px solid #0f0f11;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a0a0a5;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #55555a;
}

/* Keyframes & Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Micro-Interaction Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-fade-in {
    animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-scale-up {
    animation: scaleUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Delay modifiers for stagger effects */
.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-400 { animation-delay: 400ms; }

/* Custom Form Element Reset overrides for range slider */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0071e3;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.1s ease, background-color 0.1s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background-color: #147ce5;
}

input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(0.95);
    background-color: #005bb5;
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: #0071e3;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.1s ease, background-color 0.1s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.15);
    background-color: #147ce5;
}

/* Custom UI Component Interactions */
.metric-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Glassmorphism utility for modern layout details */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.dark .glass-panel {
    background: rgba(28, 28, 30, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Standard transition overrides on grid filter selections */
.guide-filter-btn {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Simple class wrapper to display card animations */
.show-card-glare {
    position: relative;
    overflow: hidden;
}

.show-card-glare::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
    transform: skewX(-25deg);
    transition: 0.75s ease;
    opacity: 0;
    pointer-events: none;
}

.show-card-glare:hover::before {
    animation: shine 0.85s;
    opacity: 1;
}

@keyframes shine {
    100% {
        left: 125%;
    }
}