styles.css

@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-surface: var(--surface);
  --color-surface-elevated: var(--surface-elevated);
  --color-grid-line: var(--grid-line);
  --color-signal: var(--signal);
  --color-signal-foreground: var(--signal-foreground);

  /* Instrumentation band — an intentionally dark surface used for the hero and
     other "evidence" sections. Identical in light and dark mode so the brand
     always opens on the same note. */
  --color-deep: var(--deep);
  --color-deep-elevated: var(--deep-elevated);
  --color-deep-sunken: var(--deep-sunken);
  --color-deep-foreground: var(--deep-foreground);
  --color-deep-muted: var(--deep-muted);
  --color-deep-border: var(--deep-border);

  --shadow-elevated: 0 1px 2px 0 oklch(0 0 0 / 0.04), 0 8px 24px -8px oklch(0 0 0 / 0.08);
  --shadow-glow: 0 0 0 1px var(--primary), 0 8px 32px -4px color-mix(in oklab, var(--primary) 35%, transparent);
  --shadow-cta: 0 10px 30px -10px color-mix(in oklab, var(--primary) 60%, transparent);
  --shadow-panel: 0 40px 80px -32px oklch(0 0 0 / 0.65);


  --gradient-radial-red: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 70%);
  --gradient-mesh: radial-gradient(circle at 20% 0%, color-mix(in oklab, var(--primary) 10%, transparent), transparent 50%), radial-gradient(circle at 80% 30%, color-mix(in oklab, var(--primary) 6%, transparent), transparent 50%);

  /* Tailwind v4 keyframes — exposed as `animate-*` utilities */
  --animate-fade-in: fade-in 0.3s ease-out both;
  --animate-fade-out: fade-out 0.3s ease-out both;
  --animate-fade-up: fade-up 0.6s ease-out both;
  --animate-scale-in: scale-in 0.2s ease-out both;
  --animate-scale-out: scale-out 0.2s ease-out both;
  --animate-slide-in-right: slide-in-right 0.3s ease-out both;
  --animate-slide-out-right: slide-out-right 0.3s ease-out both;
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  /* Cinematic chart reveal keyframes */
  --animate-chart-fade: chart-fade 0.8s ease-out both;
  --animate-chart-slide-up: chart-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-chart-slide-right: chart-slide-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-chart-grow-up: chart-grow-up 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-chart-scale-in: chart-scale-in 0.6s ease-out both;

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(10px); }
  }
  @keyframes scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes scale-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.95); }
  }
  @keyframes slide-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }
  @keyframes slide-out-right {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
  }
  @keyframes accordion-down {
    from { height: 0; opacity: 0; }
    to   { height: var(--radix-accordion-content-height); opacity: 1; }
  }
  @keyframes accordion-up {
    from { height: var(--radix-accordion-content-height); opacity: 1; }
    to   { height: 0; opacity: 0; }
  }

  @keyframes chart-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes chart-slide-up {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes chart-slide-right {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes chart-grow-up {
    from { transform: scaleY(0); transform-origin: bottom; }
    to   { transform: scaleY(1); transform-origin: bottom; }
  }
  @keyframes chart-scale-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
  }
}

:root {
  --radius: 0.5rem;

  /* Light, Twilio/Stripe-grade neutrals */
  --background: oklch(1 0 0);
  --foreground: oklch(0.18 0.01 270);
  --surface: oklch(0.985 0.002 270);
  --surface-elevated: oklch(1 0 0);
  --grid-line: oklch(0.93 0.005 270);

  /* Instrumentation band (theme-independent) */
  --deep: oklch(0.16 0.014 265);
  --deep-elevated: oklch(0.21 0.014 265);
  --deep-sunken: oklch(0.13 0.014 265);
  --deep-foreground: oklch(0.985 0 0);
  --deep-muted: oklch(0.73 0.012 265);
  --deep-border: oklch(1 0 0 / 12%);


  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.01 270);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.01 270);

  /* Pure power red — no pink undertones */
  --primary: oklch(0.54 0.24 28);
  --primary-foreground: oklch(0.99 0 0);

  /* Lime green — signal of life / "it works" */
  --signal: oklch(0.86 0.24 130);
  --signal-foreground: oklch(0.18 0.05 140);

  /* Chart baseline series (the "ungraded" comparator) — CVD-validated
     against --primary on the light surface. */
  --chart-baseline: #4a63b8;

  --secondary: oklch(0.97 0.003 270);
  --secondary-foreground: oklch(0.22 0.01 270);
  --muted: oklch(0.965 0.003 270);
  --muted-foreground: oklch(0.5 0.012 270);
  --accent: oklch(0.96 0.005 270);
  --accent-foreground: oklch(0.2 0.01 270);
  /* Errors must not read as CTAs: destructive is a deeper crimson (hue 8)
     while --primary is the orange-leaning action red (hue 28). */
  --destructive: oklch(0.45 0.2 8);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.92 0.004 270);
  --input: oklch(0.93 0.004 270);
  --ring: oklch(0.54 0.24 28);
}

.dark {
  --background: oklch(0.14 0.01 270);
  --foreground: oklch(0.98 0 0);
  --surface: oklch(0.18 0.01 270);
  --surface-elevated: oklch(0.22 0.012 270);
  --grid-line: oklch(0.28 0.01 270);
  --card: oklch(0.18 0.01 270);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.18 0.01 270);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.62 0.22 25);
  --primary-foreground: oklch(0.99 0 0);
  /* CVD-validated against dark --primary on the dark surface. */
  --chart-baseline: #6d84d6;
  --secondary: oklch(0.24 0.012 270);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.24 0.012 270);
  --muted-foreground: oklch(0.72 0.01 270);
  --accent: oklch(0.26 0.012 270);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.6 0.19 8);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.62 0.22 25);
}

@layer base {
  * { border-color: var(--color-border); }
  html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; overflow-x: hidden; }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv11";
    overflow-x: hidden;
  }
  ::selection { background: color-mix(in oklab, var(--primary) 25%, transparent); color: var(--foreground); }
}

@layer utilities {
  .font-mono { font-family: var(--font-mono); }
  .grid-bg {
    background-image:
      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
  }
  .hero-glow { background: var(--gradient-radial-red); }
  /* Fine technical grid for the instrumentation band, faded at the edges. */
  .deep-grid {
    background-image:
      linear-gradient(to right, oklch(1 0 0 / 0.045) 1px, transparent 1px),
      linear-gradient(to bottom, oklch(1 0 0 / 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 65% 55% at 50% 0%, black 60%, transparent 100%);
  }
  .deep-glow {
    background: radial-gradient(ellipse 55% 45% at 25% 0%, color-mix(in oklab, var(--primary) 26%, transparent), transparent 70%);
  }
  @keyframes sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
  }
  .sweep::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.18), transparent);
    animation: sweep 3.2s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .sweep::after { animation: none; opacity: 0; }
  }

  .mesh-bg { background: var(--gradient-mesh); }
  .text-gradient {
    background: linear-gradient(180deg, var(--foreground) 0%, color-mix(in oklab, var(--foreground) 70%, transparent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .ring-soft { box-shadow: 0 0 0 1px var(--border); }
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
  }
  .pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  .marquee { animation: marquee 40s linear infinite; }

  /* Typing caret */
  @keyframes caret-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  .caret {
    display: inline-block;
    width: 0.55ch;
    height: 1em;
    margin-left: 2px;
    background: currentColor;
    vertical-align: -2px;
    animation: caret-blink 1s steps(1) infinite;
  }

  /* Fade up on mount */
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .fade-up { animation: fade-up 0.6s ease-out both; }

  /* Cinematic chart reveal utilities */
  .chart-fade { animation: chart-fade 0.8s ease-out both; }
  .chart-slide-up { animation: chart-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .chart-slide-right { animation: chart-slide-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .chart-grow-up { animation: chart-grow-up 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .chart-scale-in { animation: chart-scale-in 0.6s ease-out both; }

  .chart-delay-100 { animation-delay: 100ms; }
  .chart-delay-200 { animation-delay: 200ms; }
  .chart-delay-300 { animation-delay: 300ms; }
  .chart-delay-400 { animation-delay: 400ms; }
  .chart-delay-500 { animation-delay: 500ms; }
  .chart-delay-600 { animation-delay: 600ms; }
  .chart-delay-700 { animation-delay: 700ms; }
  .chart-delay-800 { animation-delay: 800ms; }
  .chart-delay-900 { animation-delay: 900ms; }

  /* Skip link for keyboard users */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.5rem 0.875rem;
    border-radius: 0.375rem;
    background: var(--background);
    color: var(--foreground);
    font-size: 0.875rem;
    box-shadow: 0 0 0 1px var(--border);
  }
  .skip-link:focus { left: 1rem; top: 1rem; outline: 2px solid var(--primary); }
}

/* Respect reduced motion across all animations and transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}