/* Balboa Insights — Shared Styles
   ---------------------------------------------------------------
   Colors and motion tokens are duplicated as Tailwind theme extensions
   in each HTML file. This file holds keyframes, custom utilities,
   and a few hand-tuned components that don't belong in Tailwind. */

:root {
  --bi-navy: #0A2540;
  --bi-navy-deep: #061A2E;
  --bi-teal: #14B8A6;
  --bi-cyan: #22D3EE;
  --bi-sunset: #F59E0B;
  --bi-fog: #F5F7FA;
  --bi-ink: #0F172A;
  --bi-mute: #64748B;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--bi-ink); }
.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -0.02em; }

/* --- Aurora / hero gradient backgrounds ------------------------ */
.bg-aurora {
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(34, 211, 238, 0.18), transparent 60%),
    radial-gradient(50% 70% at 10% 30%, rgba(20, 184, 166, 0.18), transparent 60%),
    radial-gradient(40% 60% at 50% 100%, rgba(245, 158, 11, 0.10), transparent 60%),
    linear-gradient(180deg, #061A2E 0%, #0A2540 60%, #0A2540 100%);
}

.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* --- Glow card hover ------------------------------------------- */
.glow-card {
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.glow-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(34,211,238,0.0), rgba(34,211,238,0.0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  transition: background .35s ease;
}
.glow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -20px rgba(20, 184, 166, 0.35);
}
.glow-card:hover::before {
  background: linear-gradient(135deg, rgba(34,211,238,0.6), rgba(20,184,166,0.2));
}

/* --- Gradient text --------------------------------------------- */
.text-gradient {
  background: linear-gradient(90deg, #22D3EE 0%, #14B8A6 60%, #F59E0B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- Buttons --------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 9999px; font-weight: 600; transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease; will-change: transform; }
.btn-primary { background: linear-gradient(135deg, #14B8A6, #22D3EE); color: #04222D; box-shadow: 0 10px 30px -10px rgba(34,211,238,.55); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -14px rgba(34,211,238,.7); }
.btn-ghost { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }
.btn-dark { background: #0A2540; color: #fff; }
.btn-dark:hover { background: #061A2E; transform: translateY(-1px); }

/* --- Scroll reveal --------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- Subtle glow pulse for AI orbs ----------------------------- */
@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.08); opacity: .85; }
}
.pulse-glow { animation: pulseGlow 6s ease-in-out infinite; }

/* --- Marquee for trust bar logos ------------------------------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 32s linear infinite; }

/* --- Nav style swap on scroll ---------------------------------- */
.nav-scrolled {
  background: rgba(10, 37, 64, 0.85);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* --- Form fields ----------------------------------------------- */
.field {
  width: 100%;
  padding: .9rem 1rem;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: .85rem;
  font-size: 1rem;
  color: var(--bi-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field:focus { outline: none; border-color: #14B8A6; box-shadow: 0 0 0 4px rgba(20,184,166,.15); }

/* --- Timeline connector ---------------------------------------- */
.timeline-line {
  background: linear-gradient(90deg, #22D3EE 0%, #14B8A6 50%, #F59E0B 100%);
}

/* --- Reduced motion respect ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pulse-glow, .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}