/* ============================================================================
   Otter Lab — VC Landing Site
   base.css : design tokens + reset + signature brand animations
   Tokens & motion extracted 1:1 from the real product repos:
     - rag-knowledge-api-main/dashboard/src/styles/main.css
     - chatbot-main_otter-lab/app/globals.css
   ============================================================================ */

/* Self-hosted fonts — generated, latin + latin-ext subsets */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrainsmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrainsmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrainsmono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrainsmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/outfit-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/outfit-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/outfit-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/outfit-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/outfit-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/outfit-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/outfit-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/outfit-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/outfit-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/outfit-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/outfit-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/outfit-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ─── Design Tokens (Otter Lab Brand · Deep Space "hero" mode is dark) ─── */
:root {
  /* Brand CI (Brand Evolution 2026) */
  --coral: #FF6B6B;          /* brand-1  Otter Coral   */
  --orange: #FF8E53;         /* brand-2  Sunset Orange */
  --cyan: #00E5FF;           /* brand-3  Matrix Cyan   */
  --cyan-soft: #7EE8FF;
  --cyan-glow: rgba(0, 229, 255, 0.6);

  /* Deep Space surfaces (slight blue-black hue) */
  --bg: #0A0C10;
  --bg-elevated: #0F1218;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-input: rgba(255, 255, 255, 0.05);
  --bg-hover: rgba(255, 255, 255, 0.08);
  --bg-navbar: rgba(10, 12, 16, 0.72);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-cyan: rgba(0, 229, 255, 0.22);

  /* Text */
  --text: #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;

  /* Status (for the governance / audit visuals) */
  --success-fg: #6EE7B7;
  --success-bg: rgba(6, 78, 59, 0.45);
  --success-border: rgba(16, 185, 129, 0.35);
  --warning-fg: #FCD34D;
  --warning-bg: rgba(120, 53, 15, 0.4);

  /* Radii */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Brand gradient */
  --grad-brand: linear-gradient(135deg, var(--coral), var(--orange), var(--cyan));
  --grad-warm: linear-gradient(100deg, var(--coral), var(--orange), var(--coral), var(--orange));

  /* ── Motion system · "Hold the Current" ──────────────────────────────
     One timing scale + four easing roles tie every effect into one language.
     EASING ROLES (do not add new curves):
       --ease-spring → ALL entrances/reveals + button lift. The house curve;
                       settles, never overshoots.
       --ease-smooth → state changes, fades, looping/ambient (aurora, glow,
                       flow-pulse, locale flip).
       --ease-draw   → stroke-draw / path-length only (logo, line-draws).
       --ease-bounce → RESERVED for exactly two accents: the logo dot pop-in
                       and the Permission-Gate hand-hold "lock" snap. Nowhere
                       else, so the page's one bounce reads as intentional.
     STAGGER: sibling groups step in multiples of --stagger.
     DISTANCE: entrance travel never exceeds --d-rise-lg (restraint = expensive).
  */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Global tempo knob ───────────────────────────────────────────────
     ONE master multiplier governs the whole site's cinematic pace. Every
     timing token below (and the reveal-delays + stagger that ride them)
     derives from it via calc(), so "make the site calmer / faster" is a
     single-line change here — never re-tune dozens of values.
       1.0  = original tempo
       1.45 = prior — a deliberately slower, composed cadence
       1.7  = prior — an unhurried, cinematic read
       1.8  = current — the CEILING for entrances (~1.26s reveals). Any
              slower and "cinematic" flips to "sluggish"; if the site must
              calm further, slow the Tier-3 ambient periods below instead.
     Interactive feedback (--t-micro) is INTENTIONALLY exempt: direct-
     manipulation response must stay snappy or the UI feels laggy/cheap —
     the opposite of "world-class". Luxury lives in the passive motion. */
  --motion-scale: 1.8;

  /* Timing scale (all but --t-micro scale with --motion-scale) */
  --t-micro: calc(0.18s * 1.2);                  /* hover / active / button lift — kept responsive */
  --t-quick: calc(0.35s * var(--motion-scale));  /* small UI flips: locale fade, frame, beat state */
  --t-base:  calc(0.5s  * var(--motion-scale));  /* gate beats, hand-hold reveal, ledger row rise  */
  --t-rise:  calc(0.7s  * var(--motion-scale));  /* scroll-reveal entrance                         */
  --t-draw:  calc(0.9s  * var(--motion-scale));  /* logo curve stroke-draw / line-draws            */
  --stagger: calc(0.08s * var(--motion-scale));  /* one stagger unit                               */
  --d-rise: 22px;     /* default entrance travel (transform only)       */
  --d-rise-lg: 28px;  /* hero/large blocks — the ceiling                */

  /* Layout */
  --maxw: 1200px;
  --nav-h: 64px;

  --shadow-float: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-glow: 0 0 32px -8px var(--cyan);

  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}

h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
p { line-height: 1.65; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: rgba(255, 107, 107, 0.85); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }

.font-mono { font-family: var(--font-mono); }

/* Screen-reader-only (visually hidden but announced) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ─── Layout helpers ─── */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
/* Section rhythm: a breath between beats, not a void. Two adjacent sections
   stack their padding, so keep each edge tight (≈72px desktop / 48px mobile
   → ≈144px combined, down from ≈190px). */
.section { position: relative; padding: clamp(48px, 5vw, 72px) 0; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0.85;
}

/* ─── Brand gradient text (flowing coral→orange) ─── */
.text-gradient {
  background: var(--grad-warm);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradient-flow 15s ease-in-out infinite;
}
.text-cyan { color: var(--cyan); }
.text-coral { color: var(--coral); }

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── Signature: breathing cyan glow (pulse-glow) ─── */
@keyframes pulse-glow {
  0% { filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4)); }
  100% { filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.85)); }
}

/* ─── Signature: aurora drift (brand blobs) ─── */
@keyframes aurora-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(4%, -6%) rotate(8deg) scale(1.08); }
  66% { transform: translate(-5%, 4%) rotate(-6deg) scale(0.96); }
}
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora span {
  position: absolute;
  border-radius: 999px;
  filter: blur(100px);
  opacity: 0.5;
  will-change: transform;
}
.aurora .a1 { top: -18%; left: 6%; width: 46vw; height: 46vw; background: var(--coral); animation: aurora-drift 37s ease-in-out infinite; }
.aurora .a2 { top: 18%; right: -12%; width: 40vw; height: 40vw; background: var(--cyan); animation: aurora-drift 44s ease-in-out infinite reverse; opacity: 0.4; }
.aurora .a3 { bottom: -20%; left: 28%; width: 38vw; height: 38vw; background: var(--orange); animation: aurora-drift 50s ease-in-out infinite; opacity: 0.3; }

/* ─── Signature: coral dot-grid ─── */
.dot-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--coral) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.05;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}

/* ─── Signature: breathing gradient frame (focus border) ─── */
.gradient-frame { position: relative; }
.gradient-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-quick) var(--ease-smooth);
  pointer-events: none;
}
.gradient-frame:focus-within::after { opacity: 1; }
.gradient-frame.is-lit::after { opacity: 1; }
/* opt-in: light the coral→cyan frame on hover (cards, posture tiles, ghost CTA) */
.gradient-frame-hover:hover::after { opacity: 0.85; }
@keyframes gradient-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.gradient-frame-breathe:focus-within::after,
.gradient-frame-breathe.is-lit::after { animation: gradient-breathe 4s ease-in-out infinite; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  transition: transform var(--t-micro) var(--ease-spring), box-shadow 0.25s var(--ease-smooth), background 0.2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary {
  color: #0A0C10;
  background: linear-gradient(135deg, var(--coral), var(--orange));
  box-shadow: 0 8px 28px -10px rgba(255, 107, 107, 0.7);
  font-weight: 700;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px -10px rgba(255, 142, 83, 0.85); }
.btn-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: var(--bg-hover); border-color: var(--border-cyan); transform: translateY(-2px); }
.btn-lg { height: 54px; padding: 0 30px; font-size: 16px; }
/* Envelope glyph inside CTAs — signals the button opens an email to the founder */
.mail-ico { width: 18px; height: 18px; flex-shrink: 0; }
.btn-lg .mail-ico { width: 20px; height: 20px; }

/* ─── Chips / pills ─── */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-cyan);
  background: rgba(0, 229, 255, 0.07);
  color: var(--cyan-soft);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  font-family: var(--font-mono);
}
.chip-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan); }

/* ─── Card ─── */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* ─── Scroll-reveal (staggered rise) ─── */
.reveal {
  opacity: 0;
  transform: translateY(var(--d-rise));
  transition: opacity var(--t-rise) var(--ease-spring), transform var(--t-rise) var(--ease-spring);
  /* reveal-delays ride the tempo knob too, so the cascade stays in proportion
     with the (now longer) durations — never a blur of overlapping rises */
  transition-delay: calc(var(--reveal-delay, 0s) * var(--motion-scale));
  will-change: opacity, transform;
}
/* drop the compositor hint once settled, so dozens of revealed nodes don't
   hold GPU layers for the life of the page */
.reveal.in { opacity: 1; transform: none; will-change: auto; }

/* ─── Reduced motion: kill all infinite/entrance motion ─── */
@media (prefers-reduced-motion: reduce) {
  .text-gradient, .aurora span,
  .gradient-frame-breathe:focus-within::after, .gradient-frame-breathe.is-lit::after { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { scroll-behavior: auto !important; }
}