/* === GLASS BASE === */
.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
    padding: 2rem;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, box-shadow, filter;
}

/* === MINI CARDS === */
.mini-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
    color: #e5e7eb; /* visible in dark mode */
}

/* === HOVERABLE (for all sections) === */
.hoverable:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.45);
    filter: brightness(1.08);
}

/* === LIGHT MODE === */
body.light-mode {
    background-color: #f9fafb;
    color: #111827;
}

body.light-mode .glass,
body.light-mode .mini-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    color: #111827 !important; /* force text visible */
}

body.light-mode .hoverable:hover {
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.45);
    filter: brightness(1.05);
}

body.light-mode p,
body.light-mode li,
body.light-mode ul {
    color: #111827 !important;
}

body.light-mode strong {
    color: #0f766e; /* subtle green emphasis in light mode */
}

/* === HEADING GRADIENTS === */
.section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #60a5fa, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-mode .section-heading {
    background: linear-gradient(to right, #2563eb, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* === ANIMATIONS === */
.left-anim { transform: translateX(-60px); }
.right-anim { transform: translateX(60px); }
.visible { opacity: 1 !important; transform: translateX(0) translateY(0) !important; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp { animation: fadeInUp 0.8s ease forwards; }

/* === PARALLAX BASE === */
.parallax-card { transform-style: preserve-3d; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.4);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(59, 130, 246, 0.6); }