/* ═══════════════════════════════════════════════════
   MarsLink AI — Global Motion + Dark Mode Layer
   motion.css — included on every page
═══════════════════════════════════════════════════ */

/* ── Dark mode tokens ──────────────────────────── */
:root {
  --bg:      #F6F9FF;
  --surface: #ffffff;
  --surface2:#f0f4ff;
  --ink:     #0f1117;
  --ink2:    #374151;
  --ink3:    #6b7280;
  --border:  #e5e7eb;
  --border2: #d1d5db;
  --blue:    #3D61DD;
  --grad:    linear-gradient(135deg,#849BE5,#3D61DD);
  --shadow:  0 2px 12px rgba(0,0,0,.07);
  --shadow-md:0 8px 32px rgba(0,0,0,.10);
  --font-sans:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg:      #080c18;
  --surface: #0f1524;
  --surface2:#131929;
  --ink:     #f0f4ff;
  --ink2:    #b8c4e0;
  --ink3:    #6b7a99;
  --border:  #1e2a42;
  --border2: #1a2438;
  --blue:    #5b7ef5;
  --grad:    linear-gradient(135deg,#5b7ef5,#3D61DD);
  --shadow:  0 2px 16px rgba(0,0,0,.4);
  --shadow-md:0 8px 40px rgba(0,0,0,.5);
  color-scheme: dark;
}
[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}
[data-theme="dark"] nav,
[data-theme="dark"] .site-nav {
  background: rgba(8,12,24,0.9) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .nav-dropdown-content,
[data-theme="dark"] .site-nav .nav-dropdown-content {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] a { color: var(--ink2); }
[data-theme="dark"] .btn-primary { background: var(--blue) !important; }

/* ── Theme toggle button ───────────────────────── */
.ml-theme-btn, .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border2);
  background: var(--surface2);
  cursor: pointer;
  color: var(--ink2);
  flex-shrink: 0;
  padding: 0;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, color 0.25s;
}
.ml-theme-btn:hover, .theme-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 0 0 4px rgba(61,97,221,0.10);
}
[data-theme="dark"] .ml-theme-btn:hover,
[data-theme="dark"] .theme-btn:hover {
  box-shadow: 0 0 0 4px rgba(91,126,245,0.15);
}
/* animated icon swap — rotate + fade */
.ml-theme-btn svg, .theme-btn svg {
  position: absolute;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(.23,1,.32,1);
  pointer-events: none;
}
/* light mode: moon visible, sun hidden */
.ml-theme-btn .t-sun, .theme-btn .t-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}
.ml-theme-btn .t-moon, .theme-btn .t-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
/* dark mode: sun visible, moon hidden */
[data-theme="dark"] .ml-theme-btn .t-sun,
[data-theme="dark"] .theme-btn .t-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
[data-theme="dark"] .ml-theme-btn .t-moon,
[data-theme="dark"] .theme-btn .t-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

/* ── Scroll progress bar ───────────────────────── */
#ml-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--grad);
  z-index: 100000;
  pointer-events: none;
  transition: width 0.08s linear;
}

/* ── Custom cursor ─────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
}
#ml-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%,-50%);
  transition: width .15s, height .15s, background .15s;
}
#ml-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 38px; height: 38px;
  border: 1.5px solid rgba(61,97,221,0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%,-50%);
}
#ml-cursor.hovered { width: 6px; height: 6px; background: #6366f1; }
#ml-cursor-ring.hovered { border-color: rgba(99,102,241,0.5); }
[data-theme="dark"] #ml-cursor-ring { border-color: rgba(91,126,245,0.35); }
@media (hover: none) {
  #ml-cursor, #ml-cursor-ring { display: none !important; }
}

/* ── Nav morph on scroll ───────────────────────── */
nav, .site-nav {
  transition: background 0.12s ease, box-shadow 0.12s ease !important;
}
nav.ml-scrolled, .site-nav.ml-scrolled {
  background: rgba(246,249,255,0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 24px rgba(0,0,0,0.07) !important;
}
[data-theme="dark"] nav.ml-scrolled,
[data-theme="dark"] .site-nav.ml-scrolled {
  background: rgba(8,12,24,0.88) !important;
}

/* ── Hero stagger ──────────────────────────────── */
.ml-hero-1 { animation: mlUp 0.35s cubic-bezier(.23,1,.32,1) 0s both; }
.ml-hero-2 { animation: mlUp 0.35s cubic-bezier(.23,1,.32,1) 0.06s both; }
.ml-hero-3 { animation: mlUp 0.35s cubic-bezier(.23,1,.32,1) 0.12s both; }
.ml-hero-4 { animation: mlUp 0.35s cubic-bezier(.23,1,.32,1) 0.18s both; }
.ml-hero-5 { animation: mlUp 0.35s cubic-bezier(.23,1,.32,1) 0.24s both; }
.ml-hero-6 { animation: mlUp 0.35s cubic-bezier(.23,1,.32,1) 0.30s both; }
@keyframes mlUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Scroll reveal ─────────────────────────────── */
.ml-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.4s cubic-bezier(.23,1,.32,1),
              transform 0.4s cubic-bezier(.23,1,.32,1);
}
.ml-reveal.ml-visible { opacity:1; transform:translateY(0); }
.ml-d1 { transition-delay: 0.05s !important; }
.ml-d2 { transition-delay: 0.10s !important; }
.ml-d3 { transition-delay: 0.15s !important; }
.ml-d4 { transition-delay: 0.20s !important; }

/* ── Gradient text shimmer ─────────────────────── */
.grad-text {
  background-size: 200% 100% !important;
  animation: mlShimmer 4s ease-in-out infinite !important;
}
@keyframes mlShimmer {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Blob floats ───────────────────────────────── */
.sky-b1,.ai-sky-blob:nth-child(1) { animation: mlBlob1 14s ease-in-out infinite alternate; }
.sky-b2,.ai-sky-blob:nth-child(2) { animation: mlBlob2 18s ease-in-out infinite alternate; }
.sky-b3,.ai-sky-blob:nth-child(3) { animation: mlBlob3 22s ease-in-out infinite alternate; }
.sky-b4,.ai-sky-blob:nth-child(4) { animation: mlBlob4 16s ease-in-out infinite alternate; }
@keyframes mlBlob1 { 0%{transform:translate(0,0) scale(1);}   100%{transform:translate(60px,-40px) scale(1.12);} }
@keyframes mlBlob2 { 0%{transform:translate(0,0) scale(1.05);}100%{transform:translate(-50px,60px) scale(0.92);} }
@keyframes mlBlob3 { 0%{transform:translate(0,0) scale(0.95);}100%{transform:translate(40px,50px) scale(1.1);}  }
@keyframes mlBlob4 { 0%{transform:translate(0,0) scale(1);}   100%{transform:translate(-60px,-30px) scale(1.08);} }

/* ── Magnetic buttons ──────────────────────────── */
.btn-primary, .btn-ghost, .nav-cta, .nav-cta-global {
  transition: transform 0.12s cubic-bezier(.23,1,.32,1), box-shadow 0.12s ease !important;
  will-change: transform;
}
.btn-primary:hover { box-shadow: 0 12px 40px rgba(61,97,221,0.32) !important; }

/* ── Card tilt ─────────────────────────────────── */
.niche-card, .service-card, .mockup-card, .out-card, .inputs-card {
  transition: transform 0.15s cubic-bezier(.23,1,.32,1), box-shadow 0.15s ease !important;
  will-change: transform;
}

/* ── Float bob ─────────────────────────────────── */
@keyframes mlBob {
  from { transform: translateY(0px) rotate(-0.5deg); }
  to   { transform: translateY(-10px) rotate(0.5deg); }
}
.float-stat { animation: mlBob 3s ease-in-out infinite alternate; }
.float-stat-2 { animation-duration: 3.7s !important; animation-delay: 0.4s; }

/* ── Grid background ───────────────────────────── */
.ml-grid-bg {
  position: relative;
  overflow: hidden;
}
.ml-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(61,97,221,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,97,221,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}

/* ══════════════════════════════════════════════════
   ANIMATED BOT CHARACTERS
══════════════════════════════════════════════════ */
.ml-bot-container {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.ml-bot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: botFloat 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 20px rgba(61,97,221,0.2));
}
.ml-bot:nth-child(2) { animation-duration: 5s; animation-delay: 0.8s; }
.ml-bot:nth-child(3) { animation-duration: 3.5s; animation-delay: 1.4s; }
@keyframes botFloat {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-18px) rotate(2deg); }
}
.ml-bot svg { overflow: visible; }
/* eyes blink */
.bot-eye {
  animation: botBlink 3.5s ease-in-out infinite;
  transform-origin: center;
}
.ml-bot:nth-child(2) .bot-eye { animation-delay: 1.2s; }
.ml-bot:nth-child(3) .bot-eye { animation-delay: 0.6s; }
@keyframes botBlink {
  0%,92%,100% { transform: scaleY(1); }
  95%          { transform: scaleY(0.05); }
}
/* antenna pulse */
.bot-antenna-dot {
  animation: antennaPulse 1.8s ease-in-out infinite;
}
.ml-bot:nth-child(2) .bot-antenna-dot { animation-delay: 0.5s; }
@keyframes antennaPulse {
  0%,100% { opacity:1; r:3; }
  50%     { opacity:0.4; r:5; }
}
/* speech bubble */
.bot-bubble {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 10px 10px 10px 2px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  animation: bubblePop 0.3s cubic-bezier(.23,1,.32,1) both;
  opacity: 0;
}
[data-theme="dark"] .bot-bubble { background: var(--surface); }
.ml-bot.bubble-visible .bot-bubble { opacity: 1; }
@keyframes bubblePop {
  from { transform: scale(0.7); opacity:0; }
  to   { transform: scale(1); opacity:1; }
}

/* ── Status dot pulse ──────────────────────────── */
.status-dot {
  animation: statusPulse 1.8s ease-in-out infinite !important;
}
@keyframes statusPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(61,97,221,0.5); }
  50%     { box-shadow: 0 0 0 6px rgba(61,97,221,0); }
}

/* ── Mock row hover ────────────────────────────── */
.mock-row {
  transition: background 0.2s ease, transform 0.2s ease !important;
  border-radius: 8px;
}
.mock-row:hover {
  background: rgba(61,97,221,0.05) !important;
  transform: translateX(4px) !important;
}