/* ==========================================================================
   MAPPIN LANDING - ATMOSPHERE  (v3 - whole site: home, docs, legal, blog)
   Three layers that give the page depth and a subject:
     1. Aurora      - three slow-drifting brand colour fields behind everything
                      (fixed, transform-only animation, NO filter:blur -> cheap).
                      Replaces .gradient-mesh, the particle canvas, the cursor glow
                      and the three blur(100px) hero blobs.
     2. Living map  - dotted world map behind the hero with animated mapping arcs
                      (canvas drawn by livemap.js; colours come from the tokens below).
     3. Beams       - a light that travels along section dividers.
   Loaded after theme.css. Light-mode values live under [data-theme="light"].
   ========================================================================== */

:root {
    --au-1: rgba(124, 92, 255, 0.34);
    --au-2: rgba(168, 85, 247, 0.20);
    --au-3: rgba(6, 182, 212, 0.17);

    --lm-dot: rgba(165, 168, 255, 0.42);
    --lm-hub: #c4b5fd;
    --lm-arc-1: #a78bfa;
    --lm-arc-2: #67e8f9;
    --lm-chip-bg: rgba(10, 10, 26, 0.80);
    --lm-chip-fg: #e2e8f0;
    --lm-chip-line: rgba(165, 168, 255, 0.35);

    --beam-line: rgba(124, 92, 255, 0.14);

    --tk-bg: rgba(10, 10, 26, 0.55);
    --tk-fg: #cbd5e1;
    --tk-id: #a5a8ff;
    --tk-line: rgba(124, 92, 255, 0.18);
    --radar-ring: rgba(124, 92, 255, 0.22);
    --radar-sweep: rgba(124, 92, 255, 0.28);
    --spot: rgba(124, 92, 255, 0.16);
}
[data-theme="light"] {
    --au-1: rgba(124, 92, 255, 0.20);
    --au-2: rgba(168, 85, 247, 0.13);
    --au-3: rgba(6, 182, 212, 0.15);

    --lm-dot: rgba(91, 63, 224, 0.40);
    --lm-hub: #5b3fe0;
    --lm-arc-1: #6d28d9;
    --lm-arc-2: #0e7490;
    --lm-chip-bg: rgba(255, 255, 255, 0.92);
    --lm-chip-fg: #0f172a;
    --lm-chip-line: rgba(91, 63, 224, 0.35);

    --beam-line: rgba(15, 23, 42, 0.09);

    --tk-bg: rgba(255, 255, 255, 0.7);
    --tk-fg: #334155;
    --tk-id: #5b3fe0;
    --tk-line: rgba(91, 63, 224, 0.18);
    --radar-ring: rgba(91, 63, 224, 0.20);
    --radar-sweep: rgba(91, 63, 224, 0.20);
    --spot: rgba(91, 63, 224, 0.12);
}

/* ---------- 1. Aurora ---------- */
.aurora {
    position: fixed;
    inset: -25vh 0;                  /* taller than the viewport so the scroll parallax never shows an edge */
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
/* scroll parallax: the whole aurora slides up 25vh across the page (CSS scroll-driven, no JS;
   browsers without support simply get the fixed aurora) */
@supports (animation-timeline: scroll()) {
    .aurora { animation: au-parallax linear both; animation-timeline: scroll(root); }
    @keyframes au-parallax { to { transform: translate3d(0, 25vh, 0); } }
}
.aurora span {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
    background: radial-gradient(closest-side, var(--au-c), transparent 72%);
}
.aurora .au-a { --au-c: var(--au-1); width: 100vw; height: 100vw; left: -40vw; top: -30vh; animation: au-drift-a 46s ease-in-out infinite alternate; }
.aurora .au-b { --au-c: var(--au-2); width: 80vw;  height: 80vw;  right: -30vw; top: -10vh; animation: au-drift-b 58s ease-in-out infinite alternate; }
.aurora .au-c { --au-c: var(--au-3); width: 90vw;  height: 90vw;  left: 10vw;  top: 45vh;  animation: au-drift-c 72s ease-in-out infinite alternate; }
@keyframes au-drift-a { to { transform: translate3d(22vw, 18vh, 0) scale(1.12); } }
@keyframes au-drift-b { to { transform: translate3d(-20vw, 28vh, 0) scale(0.92); } }
@keyframes au-drift-c { to { transform: translate3d(-18vw, -28vh, 0) scale(1.15); } }

/* the aurora now carries the hero colour - the three blur(100px) blobs are retired */
.hero-section .hero-blob { display: none !important; }
/* light mode used a dot-paper on .gradient-mesh; that element is gone, nothing to do */

/* ---------- 2. Living map (hero) ---------- */
.hero-map {
    position: absolute;
    inset: -60px 0 0 0;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image:
        radial-gradient(ellipse 72% 78% at 58% 42%, #000 35%, transparent 100%),
        linear-gradient(90deg, transparent 4%, #000 44%);
    -webkit-mask-composite: source-in;
            mask-image:
        radial-gradient(ellipse 72% 78% at 58% 42%, #000 35%, transparent 100%),
        linear-gradient(90deg, transparent 4%, #000 44%);
            mask-composite: intersect;
}
.hero-map canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* the dashboard floats above the map with a soft halo */
.hero-section .hero-visual,
.hero-section .hero-content { position: relative; z-index: 2; }

@media (max-width: 1024px) {
    .hero-map {
        -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 70%);
                mask-image: linear-gradient(180deg, transparent 30%, #000 70%);
    }
}

/* ---------- 3. Beam dividers ---------- */
.section-beam {
    position: relative;
    z-index: 2;
    height: 1px;
    max-width: 1280px;
    margin: 0 auto;
    background: var(--beam-line);
}
.section-beam::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -220px;
    height: 3px;
    width: 220px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #7c5cff, #06b6d4, transparent);
    animation: beam-travel 7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.section-beam:nth-of-type(2n)::after { animation-delay: -2.4s; }
.section-beam:nth-of-type(3n)::after { animation-delay: -4.6s; }
@keyframes beam-travel {
    0%   { left: -220px; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 100%;  opacity: 0; }
}

/* ==========================================================================
   WHOLE-PAGE MOTION (v2)
   Rule: every continuous animation below is transform/opacity only, and only runs while its
   section carries .in-view (set by motion.js with an IntersectionObserver). Off-screen = idle.
   ========================================================================== */

/* The 13 section blobs (filter: blur(80px) + morphing border-radius, 20s infinite, even off-screen)
   were the most expensive thing on the page and nearly invisible. The aurora replaces them. */
.blob, .features-blob-1, .features-blob-2, .showcase-blob-1, .showcase-blob-2, .hiw-blob-1, .hiw-blob-2,
.bf-blob-1, .bf-blob-2, .pr-blob-1, .pr-blob-2, .faq-blob-1 { display: none !important; }

/* Off-screen sections cost nothing: every CSS animation inside a section that is not in view is
   paused (the original page ran ~45 pulse/float/dash animations on all sections at all times).
   Scoped to html.mp-motion (set by motion.js) so a page without motion.js is never frozen. */
html.mp-motion section:not(.in-view) *, html.mp-motion section:not(.in-view)::before, html.mp-motion section:not(.in-view)::after,
html.mp-motion section:not(.in-view) *::before, html.mp-motion section:not(.in-view) *::after { animation-play-state: paused !important; }

/* ---------- Stats: live mapping ticker (injected by motion.js) ---------- */
.mp-ticker {
    position: relative;
    z-index: 3;
    margin: 0 auto;
    max-width: 1280px;
    padding: 0 1.5rem 2.25rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    overflow: hidden;
}
.mp-ticker-track { display: flex; gap: 0.75rem; width: max-content; will-change: transform; }
.in-view .mp-ticker-track { animation: mp-ticker 70s linear infinite; }
.mp-ticker:hover .mp-ticker-track { animation-play-state: paused; }
@keyframes mp-ticker { to { transform: translate3d(-50%, 0, 0); } }
.mp-tk {
    display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap;
    padding: 0.45rem 0.9rem; border-radius: 999px;
    background: var(--tk-bg); border: 1px solid var(--tk-line);
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.72rem; color: var(--tk-fg);
}
.mp-tk i { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.mp-tk b { font-weight: 600; color: var(--tk-id); }
.mp-tk span { opacity: 0.65; }

/* ---------- Features: cursor spotlight on bento cards (motion.js writes --mx/--my) ---------- */
.bento-card::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 60%);
    opacity: 0; transition: opacity 0.4s ease;
}
.bento-card:hover::after { opacity: 1; }
.bento-card > * { position: relative; z-index: 1; }
.bento-card > .bento-card-glow { z-index: 0; }

/* ---------- Showcase: radar behind the dashboard cards (injected by motion.js) ---------- */
.mp-radar {
    position: absolute; z-index: 0; pointer-events: none;
    width: 820px; height: 820px; right: -260px; top: 50%; margin-top: -410px;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%);
            mask-image: radial-gradient(circle, #000 55%, transparent 72%);
}
.mp-radar i {
    position: absolute; border-radius: 50%; border: 1px solid var(--radar-ring);
    inset: 0; opacity: 0.9; will-change: transform, opacity;
}
.mp-radar i:nth-child(2) { inset: 16%; } .mp-radar i:nth-child(3) { inset: 32%; } .mp-radar i:nth-child(4) { inset: 48%; }
.in-view .mp-radar i:nth-child(1) { animation: mp-ring 6s ease-out infinite; }
.in-view .mp-radar i:nth-child(2) { animation: mp-ring 6s ease-out 1.5s infinite; }
@keyframes mp-ring { 0% { transform: scale(0.96); opacity: 0.9; } 100% { transform: scale(1.06); opacity: 0; } }
.mp-radar b {
    position: absolute; inset: 0; border-radius: 50%; will-change: transform;
    background: conic-gradient(from 0deg, transparent 0 78%, var(--radar-sweep) 97%, transparent 100%);
}
.in-view .mp-radar b { animation: mp-sweep 7s linear infinite; }
@keyframes mp-sweep { to { transform: rotate(360deg); } }
@media (max-width: 1024px) { .mp-radar { width: 520px; height: 520px; right: -200px; margin-top: -260px; } }

/* ---------- How it works: data flows through the four step cards ---------- */
.hiw-card::after {
    content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 2px; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, transparent, #7c5cff, #06b6d4, transparent);
    opacity: 0; will-change: transform, opacity;
}
.in-view .hiw-card::after { animation: mp-flow 4.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.in-view .hiw-step[data-step="2"] .hiw-card::after { animation-delay: 1.2s; }
.in-view .hiw-step[data-step="3"] .hiw-card::after { animation-delay: 2.4s; }
.in-view .hiw-step[data-step="4"] .hiw-card::after { animation-delay: 3.6s; }
@keyframes mp-flow { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 30% { opacity: 1; } 40% { transform: translateX(350%); opacity: 0; } 100% { transform: translateX(350%); opacity: 0; } }
.in-view .hiw-step-number { animation: mp-step 4.8s ease-in-out infinite; }
.in-view .hiw-step[data-step="2"] .hiw-step-number { animation-delay: 1.2s; }
.in-view .hiw-step[data-step="3"] .hiw-step-number { animation-delay: 2.4s; }
.in-view .hiw-step[data-step="4"] .hiw-step-number { animation-delay: 3.6s; }
@keyframes mp-step { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.08); } 24% { transform: scale(1); } }

/* ---------- Pricing: light travels around the popular plan; primary buttons get a shimmer ---------- */
@property --mp-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pr-card-popular { position: relative; isolation: isolate; }
.pr-card-popular::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--mp-ang), transparent 0 62%, #7c5cff 80%, #06b6d4 90%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.in-view .pr-card-popular::before { animation: mp-ring-spin 6s linear infinite; }
@keyframes mp-ring-spin { to { --mp-ang: 360deg; } }
.pr-card-popular > * { position: relative; z-index: 1; }

.mp-shine { position: relative; overflow: hidden; }
.in-view .mp-shine::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg); animation: mp-shimmer 4.5s ease-in-out infinite;
}
@keyframes mp-shimmer { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* ---------- CTA: rotating dotted globe behind the card (canvas, drawn by livemap.js) ---------- */
.mp-globe {
    position: absolute; z-index: 0; pointer-events: none;
    left: 76%; top: 50%; width: 1200px; height: 1200px; margin: -600px 0 0 -600px;   /* rises behind the right edge of the card */
    -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 68%);
            mask-image: radial-gradient(circle, #000 40%, transparent 68%);
}
.mp-globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cta-section .cta-grid-pattern { opacity: 0.25; }
@media (max-width: 1024px) { .mp-globe { left: 50%; top: 100%; width: 800px; height: 800px; margin: -400px 0 0 -400px; } }

/* ==========================================================================
   CONTENT PAGES (v3): docs, legal, blog
   ========================================================================== */

/* the blog's two blur(90px) floating blobs - same expensive/invisible pattern as the home blobs */
.bp-blob { display: none !important; }

/* map band behind the page header (motion.js injects .mp-pagemap as first child of the host) */
.mp-has-band { position: relative; }
.mp-pagemap {
    position: absolute; left: 0; right: 0; top: 0; height: 560px; z-index: 0; pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 20%, #000 30%, transparent 100%);
            mask-image: radial-gradient(ellipse 80% 90% at 50% 20%, #000 30%, transparent 100%);
}
.mp-pagemap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mp-has-band > *:not(.mp-pagemap) { position: relative; z-index: 1; }
main.mp-has-band .legal-wrapper { position: relative; z-index: 1; }
.bp-article-header.mp-has-band .mp-pagemap { opacity: 0.6; height: 420px; }
.legal-wrapper .section-beam { margin: 1.25rem 0 2rem; max-width: none; }
.bp-hero + .section-beam, .bp-article-header + .section-beam, .docs-hero + .section-beam { margin-bottom: 0.5rem; }
@media (max-width: 768px) { .mp-pagemap { height: 380px; } }

/* reading progress (legal pages + blog posts; home already has its own) */
.mp-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2147483000; pointer-events: none;
    background: linear-gradient(90deg, #7c5cff, #a855f7, #06b6d4);
    transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}

/* blog cards: same spotlight as the bento cards */
.bp-card { position: relative; }
.bp-card::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 60%);
    opacity: 0; transition: opacity 0.4s ease;
}
.bp-card:hover::after { opacity: 1; }

/* ---------- Accessibility / low-power ---------- */
@media (prefers-reduced-motion: reduce) {
    .aurora, .aurora span, .section-beam::after, .mp-ticker-track, .mp-radar i, .mp-radar b,
    .hiw-card::after, .hiw-step-number, .pr-card-popular::before, .btn-primary::after, .mp-shine::after { animation: none !important; }
}