/* ==========================================================================
   Landing Page Design Tokens
   Centralized design system for the Vanalysis landing page redesign.
   All tokens scoped under .lp-root to avoid conflicts with existing styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Face Declarations
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'inter-regular-extra';
  src: url('/fonts/inter-ExtraBold.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Design Tokens — Dark Mode (Default)
   -------------------------------------------------------------------------- */

.lp-root {
  /* Prevent horizontal overflow at any viewport width (320px–2560px) */
  overflow-x: hidden;
  max-width: 100vw;
  background: var(--lp-bg);
  color: var(--lp-text);

  /* Colors */
  --lp-bg: #0a0a0a;
  --lp-surface: #18181b;
  --lp-surface-glass: rgba(24, 24, 27, 0.6);
  --lp-primary: #18181b;
  --lp-secondary: #1e40af;
  --lp-accent-orange: #111111;
  --lp-text: #fafafa;
  --lp-text-mute: #a1a1aa;
  --lp-border: rgba(63, 63, 70, 0.5);
  --lp-glow-primary: rgba(0, 0, 0, 0.15);
  --lp-glow-blue: rgba(30, 64, 175, 0.15);

  /* Typography */
  --lp-font-heading: 'Geist', 'Inter Display', system-ui, sans-serif;
  --lp-font-body: 'Inter', 'DM Sans', system-ui, sans-serif;
  --lp-font-mono: 'inter-regular-extra ', ui-monospace, monospace;

  /* Type Scale */
  --lp-fs-h1: 48px;
  --lp-fs-h2: 36px;
  --lp-fs-h3: 24px;
  --lp-fs-h4: 20px;
  --lp-fs-body: 16px;
  --lp-fs-small: 14px;
  --lp-fs-code: 14px;

  /* Spacing (4px base grid) */
  --lp-sp-xs: 4px;
  --lp-sp-sm: 8px;
  --lp-sp-md: 16px;
  --lp-sp-lg: 24px;
  --lp-sp-xl: 32px;
  --lp-sp-2xl: 48px;
  --lp-sp-3xl: 64px;

  /* Border Radius */
  --lp-radius-card: 12px;
  --lp-radius-btn: 8px;
  --lp-radius-modal: 20px;

  /* Shadows (subtle glow) */
  --lp-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --lp-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.08);
  --lp-shadow-blue: 0 4px 24px rgba(30, 64, 175, 0.15);

  /* Transitions */
  --lp-transition-fast: 150ms ease;
  --lp-transition-normal: 300ms ease;
  --lp-transition-slow: 500ms ease;

  /* Breakpoints (for reference in JS; media queries use literals) */
  --lp-bp-desktop: 1200px;
  --lp-bp-tablet: 860px;
  --lp-bp-phone: 480px;
}

/* --------------------------------------------------------------------------
   Light Mode Overrides
   -------------------------------------------------------------------------- */

body:not(.dark) .lp-root {
  --lp-bg: #ffffff;
  --lp-surface: #f8f8f8;
  --lp-surface-glass: rgba(255, 255, 255, 0.85);
  --lp-text: #111111;
  --lp-text-mute: #4a4a4a;
  --lp-border: rgba(0, 0, 0, 0.12);
  --lp-glow-primary: rgba(0, 0, 0, 0.05);
  --lp-glow-blue: rgba(30, 64, 175, 0.08);
  --lp-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --lp-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   Noise Texture Overlay
   Inline SVG fractal noise < 5KB, applied as fixed overlay on .lp-root
   -------------------------------------------------------------------------- */

.lp-root::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* --------------------------------------------------------------------------
   Eyebrow Shimmer Animation
   Looping shimmer on pill/badge eyebrow labels above section headings.
   2.5s cycle, opacity 0.85–1.0 (within 0.7–1.0 range per Req 17.4)
   -------------------------------------------------------------------------- */

.lp-root .lp-eyebrow,
.lp-root .lp-hero__eyebrow {
  animation: lp-eyebrow-shimmer 2.5s ease-in-out infinite;
}

@keyframes lp-eyebrow-shimmer {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Glassmorphism Card Hover (shared base)
   scale(1.02) + increased shadow, 250ms transition (Req 17.2)
   -------------------------------------------------------------------------- */

.lp-root .lp-glass-card {
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.lp-root .lp-glass-card:hover {
  transform: scale(1.02);
  box-shadow: var(--lp-shadow-hover);
}

/* --------------------------------------------------------------------------
   CTA Button Hover (shared base)
   translateY(-2px) lift, 200ms transition (Req 17.3)
   -------------------------------------------------------------------------- */

.lp-root .lp-btn--primary:hover,
.lp-root .lp-btn--ghost:hover {
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Scroll Reveal Base Styles
   Elements with [data-lp-reveal] start hidden and animate in when
   .lp-revealed class is added by the loader's IntersectionObserver.
   -------------------------------------------------------------------------- */

.lp-root [data-lp-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: calc(var(--lp-stagger, 0) * 80ms);
}

.lp-root [data-lp-reveal].lp-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Reduced Motion
   Disables all animations and transitions globally when user prefers.
   Shows final state immediately (Req 17.6, 15.5).
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lp-root *,
  .lp-root *::before,
  .lp-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .lp-root .lp-eyebrow,
  .lp-root .lp-hero__eyebrow {
    animation: none;
    opacity: 1;
  }

  .lp-root .lp-glass-card:hover {
    transform: none;
  }

  .lp-root .lp-btn--primary:hover,
  .lp-root .lp-btn--ghost:hover {
    transform: none;
  }

  .lp-root [data-lp-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}