/* ==========================================================================
   Mangrove motion: page loader, sign-in / sign-out transition, button busy state.
   One look everywhere: a seedling that grows out of a tide line.
   Respects "reduce motion" (prefers-reduced-motion): no sweeping or growing, only fades.
   ========================================================================== */
:root {
    --mg-deep: #022c22;
    --mg-deep-2: #011a14;
    --mg-leaf: #34d399;
    --mg-leaf-2: #10b981;
    --mg-mist: #a7f3d0;
    --mg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Full-screen stage (page loader + sign-in/out) ───────────────────────── */
.mg-stage {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #ecfdf5;
    background:
        radial-gradient(60% 50% at 20% 15%, rgba(16, 185, 129, 0.18), transparent 70%),
        radial-gradient(50% 45% at 85% 90%, rgba(4, 120, 87, 0.22), transparent 70%),
        radial-gradient(circle at center, var(--mg-deep) 0%, var(--mg-deep-2) 100%);
    opacity: 0;
    transition: opacity 0.32s ease;
    font-family: 'Outfit', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.mg-stage.is-visible { opacity: 1; }
.mg-stage.is-leaving { opacity: 0; transition-duration: 0.28s; }
.mg-stage-inner { text-align: center; max-width: 440px; width: 100%; }

/* Page loader only appears if loading takes longer than ~180 ms (no flash on fast loads) */
.mg-page-loader { opacity: 1; animation: mgDelayIn 0.25s 0.18s both; }
.mg-page-loader .mg-stage-inner { animation: mgRise 0.6s 0.18s var(--mg-ease-out) both; }
@keyframes mgDelayIn { from { opacity: 0; } to { opacity: 1; } }
.mg-page-loader.is-leaving { animation: none; opacity: 0; transition: opacity 0.3s ease; }

/* ── Seedling mark ───────────────────────────────────────────────────────── */
.mg-mark { position: relative; width: 120px; height: 120px; margin: 0 auto 18px; }
.mg-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mg-stem {
    stroke: var(--mg-leaf);
    stroke-width: 3.2;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: mgDraw 0.5s 0.05s var(--mg-ease-out) forwards;
}
.mg-leaf {
    fill: url(#mgLeafGrad);
    transform-box: fill-box;
    transform: scale(0);
    animation: mgLeafOpen 0.45s var(--mg-ease-out) forwards, mgSway 3.2s 1s ease-in-out infinite;
}
.mg-leaf.l { transform-origin: 100% 100%; animation-delay: 0.32s, 1s; }
.mg-leaf.r { transform-origin: 0% 100%; animation-delay: 0.42s, 1.1s; }
.mg-root {
    stroke: #6ee7b7;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
    opacity: 0.75;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: mgDraw 0.5s 0.2s var(--mg-ease-out) forwards;
}
.mg-tide {
    stroke: rgba(167, 243, 208, 0.55);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 8 6;
    animation: mgTide 2.6s linear infinite;
}
.mg-ripple {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 26px;
    height: 9px;
    margin-left: -13px;
    border-radius: 50%;
    border: 2px solid var(--mg-leaf);
    opacity: 0;
    animation: mgRipple 2.4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}
.mg-ripple:nth-of-type(2) { animation-delay: 0.8s; }
.mg-ripple:nth-of-type(3) { animation-delay: 1.6s; }

@keyframes mgDraw { to { stroke-dashoffset: 0; } }
@keyframes mgLeafOpen { from { transform: scale(0) rotate(-10deg); } to { transform: scale(1) rotate(0); } }
@keyframes mgSway { 0%, 100% { rotate: 0deg; } 50% { rotate: -5deg; } }
@keyframes mgTide { to { stroke-dashoffset: -28; } }
@keyframes mgRipple {
    0% { transform: scale(0.7); opacity: 0.9; }
    100% { transform: scale(4.4, 4); opacity: 0; }
}
@keyframes mgRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Text + progress ─────────────────────────────────────────────────────── */
.mg-brand { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mg-mist); opacity: 0.85; }
.mg-title { font-family: 'Playfair Display', 'Newsreader', Georgia, serif; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; margin: 6px 0 6px; color: #fff; letter-spacing: -0.01em; }
.mg-sub { font-size: 0.92rem; color: rgba(236, 253, 245, 0.78); min-height: 1.4em; }
.mg-track { width: min(260px, 80%); height: 4px; margin: 20px auto 0; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; position: relative; }
.mg-track::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, var(--mg-leaf), var(--mg-mist), transparent);
    animation: mgIndeterminate 1.3s ease-in-out infinite;
}
@keyframes mgIndeterminate { from { left: -40%; } to { left: 100%; } }
.mg-done .mg-track::after { animation: none; left: 0; width: 100%; background: var(--mg-leaf); transition: width 0.3s; }
.mg-check {
    display: inline-flex; width: 26px; height: 26px; margin-left: 6px; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--mg-leaf-2); color: #fff; font-size: 0.8rem; vertical-align: middle; animation: mgPop 0.35s var(--mg-ease-out);
}
@keyframes mgPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mg-stage-inner > * { animation: mgRise 0.5s var(--mg-ease-out) both; }
.mg-stage-inner > :nth-child(2) { animation-delay: 0.08s; }
.mg-stage-inner > :nth-child(3) { animation-delay: 0.14s; }
.mg-stage-inner > :nth-child(4) { animation-delay: 0.2s; }
.mg-stage-inner > :nth-child(5) { animation-delay: 0.26s; }

/* ── Button busy state + error shake ────────────────────────────────────── */
.mg-busy { position: relative; pointer-events: none; }
.mg-dots { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.mg-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: mgDot 1s ease-in-out infinite; font-style: normal; }
.mg-dots i:nth-child(2) { animation-delay: 0.15s; }
.mg-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes mgDot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.mg-shake { animation: mgShake 0.42s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes mgShake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

/* ── Reduce motion: keep fades, drop movement ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mg-stage *, .mg-stage-inner > *, .mg-page-loader .mg-stage-inner { animation: none !important; }
    .mg-stem, .mg-root { stroke-dashoffset: 0; }
    .mg-leaf { transform: scale(1); }
    .mg-track::after { left: 30%; }
    .mg-ripple { display: none; }
    .mg-dots i, .mg-shake { animation: none !important; }
}