/* ============================================================
   Nairobi Neon — Custom CSS Utilities
   Scholagora Design System
   ============================================================ */

/* ------ Glassmorphism Variants ------ */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

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

.glass-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ------ Glow & Shadow Effects ------ */
.neon-glow {
    box-shadow: 0 0 15px rgba(114, 71, 158, 0.4);
}

.neon-pulse {
    box-shadow: 0 0 15px rgba(187, 141, 233, 0.4);
}

.shadow-ambient {
    box-shadow: 0 20px 40px rgba(114, 71, 158, 0.08);
}

.shadow-ambient-lg {
    box-shadow: 0 40px 80px rgba(114, 71, 158, 0.12);
}

/* ------ Gradient Backgrounds ------ */
.primary-gradient {
    background: linear-gradient(135deg, #72479e 0%, #3952bc 100%);
}

/* ------ Scrollbar Utilities ------ */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #d3dcf9;
    border-radius: 10px;
}

/* ------ Masonry Grid ------ */
.masonry-grid {
    column-count: 1;
    column-gap: 1.5rem;
}
@media (min-width: 768px) {
    .masonry-grid { column-count: 2; }
}
@media (min-width: 1280px) {
    .masonry-grid { column-count: 3; }
}
.masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

/* ------ Material Symbols Defaults ------ */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ------ No-Scrollbar Utility ------ */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ------ Flash Message Animation ------ */
@keyframes slideInRight {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.flash-animate {
    animation: slideInRight 0.4s ease-out forwards;
}

/* ------ Selection Style ------ */
::selection {
    background: #c99af8;
    color: #42146d;
}

/* ------ Smooth Scroll ------ */
html {
    scroll-behavior: smooth;
}

/* ------ Body Base ------ */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f5f6ff;
    color: #282f3f;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}