/* Tiny custom overlay — Tailwind handles the rest via CDN. */

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "ss01", "cv11", "cv03";
}

/* Selection treatment uses the flag-red ink. */
::selection {
  background: #b31942;
  color: #f6f3ec;
}

/* D3 axis text default is too dark on the spectrogram; we color it in JS,
   but this keeps user-agent stroke off the path. */
.tick line {
  stroke-opacity: 0.6;
}

/* Cards lift gently on hover without using Tailwind plugins. */
article.group:hover {
  transform: translateY(-2px);
  transition: transform 200ms ease;
}

/* Make sure SVGs occupy their container even before D3 attrs are set. */
svg#hero-network,
svg#spectrogram,
svg#cluster-scatter,
svg#tensor-graph,
svg#enterprise-arch,
svg#recall-curve {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================
   Background motifs — math frontends as decor
   ============================================ */

/* Subtle dot grid; color inherits via currentColor so we can tint per section. */
.bg-dot-grid {
  background-image: radial-gradient(currentColor 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: 0 0;
}

.bg-dot-grid-tight {
  background-image: radial-gradient(currentColor 0.8px, transparent 1.2px);
  background-size: 14px 14px;
}

/* Diagonal lattice — hex-ish, evokes circuit / hardware feel. */
.bg-hex {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='52' viewBox='0 0 90 52'><g fill='none' stroke='%23b31942' stroke-width='0.8' opacity='0.5'><path d='M22.5 0 L67.5 0 L90 26 L67.5 52 L22.5 52 L0 26 Z'/><path d='M22.5 0 L0 26' /><path d='M67.5 0 L90 26' /></g></svg>");
  background-size: 90px 52px;
}

/* Soft horizontal "spectral" waves, layered. Tints via the SVG fill color. */
.bg-wave {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='160' viewBox='0 0 600 160'><g fill='none' stroke='%23b31942' stroke-width='1' opacity='0.7'><path d='M0 30 Q75 10 150 30 T300 30 T450 30 T600 30'/><path d='M0 70 Q75 50 150 70 T300 70 T450 70 T600 70'/><path d='M0 110 Q75 90 150 110 T300 110 T450 110 T600 110'/><path d='M0 150 Q75 130 150 150 T300 150 T450 150 T600 150'/></g></svg>");
  background-size: 600px 160px;
}

/* Embedding-scatter — distributed dots at varied intensities. */
.bg-scatter {
  background-image:
    radial-gradient(circle at 12% 18%, currentColor 1.2px, transparent 1.6px),
    radial-gradient(circle at 28% 62%, currentColor 0.8px, transparent 1.2px),
    radial-gradient(circle at 47% 22%, currentColor 1.4px, transparent 1.8px),
    radial-gradient(circle at 61% 75%, currentColor 1px, transparent 1.4px),
    radial-gradient(circle at 78% 35%, currentColor 1.2px, transparent 1.6px),
    radial-gradient(circle at 88% 80%, currentColor 0.8px, transparent 1.2px),
    radial-gradient(circle at 38% 88%, currentColor 1px, transparent 1.4px),
    radial-gradient(circle at 8% 78%, currentColor 1.2px, transparent 1.6px),
    radial-gradient(circle at 72% 12%, currentColor 0.8px, transparent 1.2px),
    radial-gradient(circle at 22% 42%, currentColor 1px, transparent 1.4px);
  background-size: 320px 320px;
}

/* Topographic contour lines — gentle nested arcs. */
.bg-topo {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='240' viewBox='0 0 400 240'><g fill='none' stroke='%230a3161' stroke-width='0.7' opacity='0.55'><circle cx='200' cy='120' r='30'/><circle cx='200' cy='120' r='60'/><circle cx='200' cy='120' r='90'/><circle cx='200' cy='120' r='120'/><circle cx='200' cy='120' r='150'/><circle cx='200' cy='120' r='180'/></g></svg>");
  background-size: 400px 240px;
}

/* Subtle network-filament motif — sparse line segments. */
.bg-filament {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'><g fill='none' stroke='%23f5f2e8' stroke-width='0.9' opacity='0.7'><path d='M20 20 L80 70 L60 130 L130 110 L180 170 L240 130'/><path d='M40 200 L100 220 L150 200 L210 240'/><path d='M30 100 L90 130 L150 70 L200 100 L250 60'/><circle cx='80' cy='70' r='1.5' fill='%23f5f2e8'/><circle cx='150' cy='70' r='1.5' fill='%23f5f2e8'/><circle cx='130' cy='110' r='1.5' fill='%23f5f2e8'/><circle cx='90' cy='130' r='1.5' fill='%23f5f2e8'/><circle cx='180' cy='170' r='1.5' fill='%23f5f2e8'/><circle cx='150' cy='200' r='1.5' fill='%23f5f2e8'/><circle cx='200' cy='100' r='1.5' fill='%23f5f2e8'/></g></svg>");
  background-size: 280px 280px;
}

/* Decor wrapper utility: stretch behind content, ignore pointer events. */
.bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Lift content above any .bg-decor sibling. */
.content-front {
  position: relative;
  z-index: 1;
}

/* Vertical fade so background patterns soften toward content edges. */
.fade-mask-y {
  mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 25%,
    black 75%,
    transparent 100%
  );
}

/* ============================================
   Print stylesheet — used when exporting PDF
   ============================================ */
@media print {
  /* Force background and color rendering. Without this Chrome strips dark
     backgrounds on print, which kills the brand. */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Sticky chrome and decorative animation surfaces — irrelevant in print. */
  header,
  .bg-decor,
  #hero-canvas {
    display: none !important;
  }

  /* Keep cards intact across page breaks. */
  article,
  .rounded-xl,
  .rounded-2xl,
  section > div > div {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Section headings shouldn't be orphaned at the bottom of a page. */
  h1, h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Tighter section padding so more content fits per page. */
  section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* Render full-color SVG charts (latency, recall, cost projection). */
  svg {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* CTAs render as solid blocks; underline links inline so they read clearly. */
  a {
    text-decoration: none;
  }
}

@page {
  size: letter;
  margin: 0.5in;
}