/* static/style.css */

html { 
    scroll-behavior: smooth; 
}
body { 
    font-family: 'mono', monospace; 
}

/* Color Variables */
:root {
    --bg: #F8FAFC;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --text: #0F172A;
    --muted: #475569;
    --border: #E2E8F0;
    --primary: #2563EB;
    --primary-2: #7C3AED;
    --ring: rgba(37, 99, 235, .35);
}

.dark {
    --bg: #0B0F17;
    --surface: #0F172A;
    --card: #111827;
    --text: #E2E8F0;
    --muted: #94A3B8;
    --border: #1E293B;
    --primary: #3B82F6;
    --primary-2: #8B5CF6;
    --ring: rgba(59, 130, 246, .35);
}

/* Focus Ring Styling */
:where(a, button, input, textarea, select):focus-visible {
    outline: 0; 
    box-shadow: 0 0 0 3px var(--ring); 
    border-radius: .5rem;
}

/* Mobile Drawer & Overlay */
#page-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 30; 
    opacity: 0;
    pointer-events: none; 
    transition: opacity 0.3s ease-in-out;
}
#page-overlay.is-visible {
    opacity: 1; 
    pointer-events: auto;
}
#mobile-drawer {
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 80%; 
    max-width: 300px;
    background-color: var(--card); 
    z-index: 40;
    transform: translateX(-100%); 
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}
#mobile-drawer.is-open {
    transform: translateX(0);
}
    
/* Animation Effects */
@keyframes blink-3-times {
    0%, 16.66%, 33.33%, 50%, 66.66%, 83.33%, 100% { opacity: 1 }
    8.33%, 25%, 41.66%, 58.33%, 75%, 91.66% { opacity: .3 }
}
.blink-3-times { 
    animation: blink-3-times 2s ease-in-out; 
}

@keyframes glow-3-times {
    0%, 16.66%, 33.33%, 50%, 66.66%, 83.33%, 100% { box-shadow: 0 0 20px rgba(37, 99, 235, .25) }
    8.33%, 25%, 41.66%, 58.33%, 75%, 91.66% { box-shadow: 0 0 40px rgba(124, 58, 237, .45) }
}
.glow-3-times { 
    animation: glow-3-times 2s ease-in-out; 
}