@import 'tailwindcss';

/* ── Hover design system ──────────────────────────────────────────────
 * Tokens lifted verbatim from the widget's style.css so the landing page
 * and the in-app widget read as one product. Source of truth:
 * packages/widget-bootstrap/src/widget/style.css (the `.hover-root` block).
 * Tailwind v4 CSS-first config — no tailwind.config.js. */
@theme {
  /* Surfaces — near-black, micro-layered */
  --color-bg: #1a1a1a;
  --color-bg-2: #222224;
  --color-bg-3: #141414;
  --color-line: #2a2a2c;
  --color-line-2: #3a3a3c;

  /* Text */
  --color-text: #e5e7eb;
  --color-text-mute: #9ca3af;
  --color-text-dim: #6b7280;

  /* Mint — the single primary accent (running / success in the widget) */
  --color-mint: #7cffa8;

  /* Secondary signal colors, used sparingly (mirror the widget) */
  --color-link: #7dd3fc;
  --color-warn: #fbbf24;
  --color-error: #f87171;
  --color-star: #ffd700;

  /* Type — same stacks the widget uses */
  --font-sans: -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

html {
  scroll-behavior: smooth;
}

/* The nav is sticky (~64px); offset anchor targets so a #jump doesn't tuck the
 * section heading under the header. */
:where(section[id], div[id='install']) {
  scroll-margin-top: 84px;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(124, 255, 168, 0.22);
  color: #fff;
}

/* ── Coverage marquee ─────────────────────────────────────────────────
 * Two identical tracks scroll left forever; pausing on hover lets a reader
 * stop to read. Edges fade via a mask so pills enter/exit cleanly. On touch
 * (no hover) the marquee still animates but the row is also swipeable. */
.hover-marquee {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hover-marquee-track {
  animation: hover-marquee 38s linear infinite;
}
.hover-marquee:hover .hover-marquee-track {
  animation-play-state: paused;
}
@keyframes hover-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* Each track is half the doubled width; shift exactly one track left. */
    transform: translateX(-50%);
  }
}

/* Reduced-motion: stop the loop and let the row wrap + scroll manually. */
@media (prefers-reduced-motion: reduce) {
  .hover-marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.75rem;
    row-gap: 0.75rem;
  }
}

/* Mint glow breathing — same feel as the widget launcher's pulse */
@keyframes mint-pulse {
  0%,
  100% {
    box-shadow:
      0 4px 18px rgba(124, 255, 168, 0.28),
      0 4px 16px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 4px 24px rgba(124, 255, 168, 0.55),
      0 4px 16px rgba(0, 0, 0, 0.4);
  }
}
