/* ── Waggle Landing Page — Warm-Hive Design System ── */
/* No Tailwind — pure CSS custom properties + CSS Modules per component.     */
/* Token VALUES are the warm-Hive palette (PR8), 1:1 with the product app.   */
/* Canonical source: docs/design_handoff_waggle_app/design-files/styles/waggle.css §7 */

:root {
  /* Warm graphite hive scale (replaces the cool blue-grey scale) */
  --hive-950: #0e0c07;
  --hive-900: #14110b;
  --hive-850: #1a160f;
  --hive-800: #1f1a12;
  --hive-700: #272117;
  --hive-600: #4a4030;
  --hive-500: #6b6250;
  --hive-400: #948a73;
  --hive-300: #c8bfa9;
  --hive-200: #d8cfba;
  --hive-100: #ece3d0;
  --hive-50: #f6f1e4;
  /* Honey accent (warmer, replaces the prior honey family) */
  --honey-600: #c07e16;
  --honey-500: #e9a52c;
  --honey-400: #f6c45a;
  --honey-300: #f9d27e;
  --honey-glow: rgba(233, 165, 44, 0.12);
  --honey-pulse: rgba(233, 165, 44, 0.06);
  --shadow-honey: 0 0 24px rgba(233,165,44,0.12), 0 0 4px rgba(233,165,44,0.08);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);

  /* Named warm tokens (from waggle.css section 7) */
  --bg: #14110b;
  --bg-2: #1a160f;
  --surface: #1f1a12;
  --surface-2: #272117;
  --surface-3: #322a1d;
  --line: #38301f;
  --line-soft: #2a2417;
  --line-strong: #4a4030;
  --text: #f6f1e4;
  --text-2: #c8bfa9;
  --text-muted: #948a73;
  --text-dim: #6b6250;
  --honey: #e9a52c;
  --honey-bright: #f6c45a;
  --honey-deep: #c07e16;
  --honey-wash: rgba(233, 165, 44, 0.10);
  --honey-line: rgba(233, 165, 44, 0.28);
  --work: #7aa6d6;
  --intel: #b196dd;
  --healthy: #6cb78c;
  --attention: #e9a52c;
  --risk: #db8068;
  --status-ai: #b196dd;
  --status-healthy: #6cb78c;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --sans: var(--font-hanken), 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: var(--font-mono), 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* ── Type scale (marketing foundation) ── */
  --text-display: clamp(2.5rem, 5.4vw, 4.25rem);   /* hero h1 */
  --text-h2: clamp(1.75rem, 3.1vw, 2.5rem);        /* section headline */
  --text-h3: clamp(1.125rem, 1.6vw, 1.3125rem);    /* card / step titles */
  --text-lead: clamp(1.0625rem, 1.5vw, 1.1875rem); /* section subhead */
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  /* ── Layout rhythm ── */
  --container: 1120px;
  --container-wide: 1200px;
  --section-pad: clamp(80px, 11vw, 144px);
  --gutter: 24px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--sans);
  background: var(--hive-950);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background: var(--hive-950);
  font-family: var(--sans);
}

/* ── Scrollbar — thin warm overlay (the stock Windows scrollbar reads as
      chrome on the hero). Standard properties cover Firefox + modern
      Chromium; the ::-webkit-* rules cover Safari + older Chromium. ── */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--hive-600) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--hive-600);
  border-radius: 999px;
  /* Transparent border + padding-box clip = a slimmer overlay-style thumb. */
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--hive-500);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { letter-spacing: -0.03em; }

p { text-wrap: pretty; }

::selection {
  background: rgba(233, 165, 44, 0.28);
  color: var(--hive-50);
}

:focus-visible {
  outline: 2px solid var(--honey-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Fixed 64px navbar: anchor-jump targets (/#pricing, /#personas, …) must
   land with their headline clear of the nav, not occluded under it. */
[id] {
  scroll-margin-top: 80px;
}

/* ── Skip link (a11y) ── */
.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  background: var(--honey-500);
  color: var(--hive-950);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus-visible {
  top: 12px;
}

/* ── Shared layout primitives ── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--honey-500);
  margin-bottom: 16px;
}

.section-headline {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.12;
  color: var(--hive-50);
  max-width: 22em;
}

.section-lead {
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--hive-300);
  max-width: 40em;
  margin-top: 16px;
}

/* Machine-truth line: mono, muted — the signature device for verifiable facts */
.mono-line {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--honey-500);
  color: var(--hive-950);
  box-shadow: var(--shadow-honey);
}
.btn-primary:hover {
  background: var(--honey-400);
  box-shadow: 0 0 32px rgba(233, 165, 44, 0.2), 0 0 6px rgba(233, 165, 44, 0.12);
}

.btn-ghost {
  background: transparent;
  color: var(--hive-100);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--hive-500);
  background: rgba(236, 227, 208, 0.04);
}

.btn-small {
  padding: 9px 18px;
  border-radius: var(--r-sm);
  font-size: 13px;
}

/* ── Card ── */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  border-color: var(--line-strong);
}

/* ── Honeycomb Background ── */
.honeycomb-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23e9a52c' fill-opacity='0.03'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ── Animations ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes honey-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.float { animation: float 3s ease-in-out infinite; }
.honey-pulse { animation: honey-pulse 3s ease-in-out infinite; }
.card-enter { animation: card-enter 0.6s ease-out both; }

.card-enter-1 { animation-delay: 0.1s; }
.card-enter-2 { animation-delay: 0.2s; }
.card-enter-3 { animation-delay: 0.3s; }
.card-enter-4 { animation-delay: 0.4s; }

/* ── Scroll reveal (used via <Reveal>) ──
   Gated behind html.js (set by an inline script in layout.tsx) so content
   stays fully visible when JavaScript is unavailable. */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-d1 { transition-delay: 0.06s; }
.reveal-d2 { transition-delay: 0.12s; }
.reveal-d3 { transition-delay: 0.18s; }
.reveal-d4 { transition-delay: 0.24s; }
.reveal-d5 { transition-delay: 0.3s; }

/* ── Card hover lift (legacy — kept for existing components) ── */
.card-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-honey);
  border-color: var(--honey-500) !important;
}

/* ── Button press (legacy — kept for existing components) ── */
.btn-press:active {
  transform: scale(0.97);
}

/* ── Reduced motion: disable all non-essential animation ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float,
  .honey-pulse,
  .card-enter {
    animation: none;
  }
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .card-lift,
  .btn,
  .card {
    transition: none;
  }
}