/* ==========================================================================
   MESHLUMA — Motion Design System & Premium UI Polish
   ========================================================================== */

:root {
    /* Brand Colors */
    --ml-emerald: #10b981;
    --ml-emerald-dark: #059669;
    --ml-cyan: #06b6d4;
    --ml-indigo: #6366f1;
    --ml-ink: #070b14;
    --ml-navy: #0b1120;
    --ml-slate: #0f172a;

    /* Motion Tokens */
    --ml-dur-btn: 150ms;
    --ml-dur-hover: 220ms;
    --ml-dur-menu: 240ms;
    --ml-dur-card: 380ms;
    --ml-dur-section: 520ms;
    --ml-dur-logo: 1200ms;

    --ml-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ml-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. Animated MESHLUMA SVG Logo */
.ml-brand-mark .ml-mesh-path {
    stroke-dasharray: 120;
    stroke-dashoffset: 0;
}

.ml-brand-mark.is-animated .ml-mesh-path {
    stroke-dashoffset: 120;
    animation: mlDrawMesh var(--ml-dur-logo) var(--ml-ease-out) forwards;
}

.ml-brand-mark.is-animated .ml-mesh-bridge {
    opacity: 0;
    animation: mlFadeIn 600ms var(--ml-ease-out) 450ms forwards;
}

.ml-brand-mark.is-animated .ml-node {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: mlNodePop 380ms var(--ml-ease-out) forwards;
}

.ml-brand-mark.is-animated .ml-node-1 { animation-delay: 80ms; }
.ml-brand-mark.is-animated .ml-node-2 { animation-delay: 220ms; }
.ml-brand-mark.is-animated .ml-node-3 { animation-delay: 420ms; }
.ml-brand-mark.is-animated .ml-node-4 { animation-delay: 540ms; }
.ml-brand-mark.is-animated .ml-node-5 { animation-delay: 640ms; }
.ml-brand-mark.is-animated .ml-node-6 { animation-delay: 820ms; }

.ml-brand-mark.is-animated .ml-mesh-pulse {
    stroke-dasharray: 22 140;
    stroke-dashoffset: 162;
    animation: mlLightPulse 3.8s var(--ml-ease-in-out) 1.2s infinite;
}

.ml-brand-mark.is-animated .ml-wordmark {
    opacity: 0;
    transform: translateX(-6px);
    animation: mlWordmarkReveal 520ms var(--ml-ease-out) 480ms forwards;
}

@keyframes mlDrawMesh {
    to { stroke-dashoffset: 0; }
}

@keyframes mlFadeIn {
    to { opacity: 1; }
}

@keyframes mlNodePop {
    0% { opacity: 0; transform: scale(0.4); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes mlWordmarkReveal {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes mlLightPulse {
    0% { stroke-dashoffset: 162; opacity: 0; }
    15% { opacity: 0.9; }
    65% { opacity: 0.9; }
    100% { stroke-dashoffset: -40; opacity: 0; }
}

/* 2. Branded Non-Blocking Loader */
.ml-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 11, 20, 0.65);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--ml-dur-menu) var(--ml-ease-out), visibility var(--ml-dur-menu) var(--ml-ease-out);
}

.ml-loader-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ml-loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 32px;
    border-radius: 16px;
    background: #0f172a;
    border: 1px solid rgba(16, 185, 129, 0.28);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.ml-loader-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #cbd5e1;
}

/* 3. Premium Hero & Network Canvas */
.ml-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 18% 22%, rgba(16, 185, 129, 0.16), transparent 45%),
                radial-gradient(circle at 82% 28%, rgba(6, 182, 212, 0.14), transparent 48%),
                linear-gradient(155deg, #070b14 0%, #0b1120 55%, #0f172a 100%);
    min-height: 78vh;
    display: flex;
    align-items: center;
    padding: 88px 0 80px;
}

.ml-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.ml-hero-content {
    position: relative;
    z-index: 2;
}

.ml-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ml-hero-title {
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #ffffff;
}

.ml-hero-lead {
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.65;
    color: #cbd5e1;
    max-width: 60ch;
}

/* 4. Micro-Interactions (Buttons, Cards, Nav, Forms, Links) */
.primary-btn,
.primary-btn2,
.btn {
    transition: transform var(--ml-dur-btn) var(--ml-ease-out),
                background-color var(--ml-dur-hover) var(--ml-ease-out),
                border-color var(--ml-dur-hover) var(--ml-ease-out),
                box-shadow var(--ml-dur-hover) var(--ml-ease-out),
                color var(--ml-dur-hover) var(--ml-ease-out);
}

.primary-btn:hover,
.primary-btn2:hover,
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.primary-btn:active,
.primary-btn2:active,
.btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn:focus-visible,
.primary-btn:focus-visible,
.primary-btn2:focus-visible,
a:focus-visible {
    outline: 2px solid var(--ml-cyan);
    outline-offset: 2px;
}

.card,
.feature-item,
.single-popular-cause {
    transition: transform var(--ml-dur-card) var(--ml-ease-out),
                box-shadow var(--ml-dur-card) var(--ml-ease-out),
                border-color var(--ml-dur-hover) var(--ml-ease-out);
}

.card:hover,
.feature-item:hover,
.single-popular-cause:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

.default-header .navbar-nav a.nav-link {
    position: relative;
}

.default-header .navbar-nav a.nav-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    background: linear-gradient(90deg, var(--ml-emerald), var(--ml-cyan));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ml-dur-hover) var(--ml-ease-out);
}

.default-header .navbar-nav a.nav-link:hover::after,
.default-header .navbar-nav a.nav-link.active::after {
    transform: scaleX(1);
}

.form-control {
    transition: border-color var(--ml-dur-hover) var(--ml-ease-out),
                box-shadow var(--ml-dur-hover) var(--ml-ease-out);
}

.form-control:focus {
    border-color: var(--ml-emerald);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

/* 5. Tasteful Scroll Reveals (Content visible by default if JS disabled) */
.ml-anim-ready .ml-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--ml-dur-section) var(--ml-ease-out),
                transform var(--ml-dur-section) var(--ml-ease-out);
}

.ml-anim-ready .ml-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 6. Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ml-brand-mark.is-animated .ml-mesh-path {
        stroke-dashoffset: 0 !important;
    }

    .ml-brand-mark.is-animated .ml-node,
    .ml-brand-mark.is-animated .ml-wordmark,
    .ml-brand-mark.is-animated .ml-mesh-bridge,
    .ml-anim-ready .ml-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .ml-brand-mark.is-animated .ml-mesh-pulse {
        display: none !important;
    }
}