/* SYSTEM RESET & VARIABLE ANCHORS */
:root {
    --burgundy: #800020;
    --onyx: #1A1A1A;
    --gold: #D4AF37;
}

body { 
    background-color: #F9FAFB; 
    color: #1A1A1A; 
    overflow-x: hidden; 
    display: flex; 
    flex-direction: column; 
    min-height: 100dvh; 
    scroll-behavior: smooth; 
}

main { flex: 1; display: flex; flex-direction: column; z-index: 10; position: relative; }

/* TRUE GLASSMORPHISM ENGINES */
.true-glass {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
}

.true-glass-dark {
    background: rgba(26, 26, 26, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3);
}

/* FLOATING NAVIGATION WRAPPER */
.floating-nav { 
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(24px); 
    border-radius: 100px; 
    padding: 0.75rem 1rem; 
    box-shadow: 0 4px 24px rgba(0,0,0,0.06); 
    border: 1px solid rgba(255,255,255,0.9); 
}

/* SPATIAL UI VIEW TRANSITIONS */
.page-view { display: none; opacity: 0; flex: 1; transform: scale(0.98) translateY(20px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.page-view.active-page { display: flex; flex-direction: column; opacity: 1; transform: scale(1) translateY(0); animation: spatialFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.view-section { display: none !important; opacity: 0; transition: opacity 0.4s ease; }
#view-login.active { display: flex !important; opacity: 1; }
#view-dashboard.active { display: block !important; opacity: 1; }

@keyframes spatialFade { 
    from { opacity: 0; transform: scale(0.96) translateY(30px); filter: blur(10px); } 
    to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } 
}

/* BENTO SYSTEM HOVER INTERACTION */
.bento-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
.bento-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 20px 40px -15px rgba(0,0,0,0.08); }

/* SPATIAL FORM STATES & KEYBOARD FOCUS PATHS */
.spatial-input { background: rgba(255,255,255,0.7); border: 1px solid rgba(0,0,0,0.1); border-radius: 1rem; transition: all 0.3s ease; }
.spatial-input:focus, .spatial-input:focus-visible { background: #ffffff; border-color: var(--burgundy); box-shadow: 0 0 0 4px rgba(128,0,32,0.1); outline: none; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }

/* TELEMETRY ANIMATION HOOKS */
.reveal { opacity: 0; transform: translateY(40px) scale(0.98); filter: blur(4px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

.animate-fade-in-up { animation: spatialFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }

/* CUSTOM SCROLLBAR UTILITIES */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(26, 26, 26, 0.15); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(26, 26, 26, 0.3); }