@layer base, theme, layout, components, utilities;

@layer theme {
  :root {
    /* Follows the OS by default; data-theme="light|dark" (set by theme.js) forces a scheme. */
    color-scheme: light dark;

    /* Warm paper & charcoal studio palette: light-dark(<light>, <dark>) */
    --bg-paper: light-dark(#fffdf9, #141413);
    --bg-sand: light-dark(#f3efe8, #1c1c1a);
    --bg-elevated: light-dark(#f8f6f1, #1c1c1a);

    --ink-primary: light-dark(#141413, #f4f1ea);
    --ink-secondary: light-dark(#57544e, #a8a49c);
    --ink-muted: light-dark(#87837b, #8a867e);

    --border-hairline: light-dark(#e6e1d7, #2a2926);
    --border-strong: light-dark(#d2cbc0, #3a3935);

    /* Restrained earthy accents */
    --accent-clay: light-dark(#d46b4a, #ee7a58);
    --accent-clay-soft: light-dark(#f6e7e1, #3a211a);
    --accent-sage: light-dark(#587250, #8fb184);

    /* Cursor/HUD highlight: clay on paper, luminous cyan on dark (matches particle highlight) */
    --accent-highlight: light-dark(#d46b4a, #61dcdf);
    --accent-highlight-soft: light-dark(#f6e7e1, #1d3a3b);

    --shadow-float: light-dark(rgba(20, 20, 19, 0.08), rgba(0, 0, 0, 0.45));

    /* Editorial Typography Stack */
    --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    /* Spatial Rhythm */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-pill: 9999px;

    --container-max: 76rem;
    --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
  }

  :root[data-theme="light"] {
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
  }
}

@layer base {
  html,
  body,
  div,
  header,
  nav,
  main,
  section,
  article,
  aside,
  footer,
  h1,
  h2,
  h3,
  h4,
  p,
  ul,
  ol,
  li,
  figure,
  figcaption,
  a,
  button,
  span,
  canvas,
  svg {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    font-family: var(--font-sans);
    font-size: 100%;
    line-height: 1.5;
    background-color: var(--bg-paper);
    color: var(--ink-primary);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body {
    min-block-size: 100dvh;
    background-color: var(--bg-paper);
    color: var(--ink-primary);
    overflow-x: hidden;
    position: relative;
  }

  ::selection {
    background-color: var(--accent-clay-soft);
    color: var(--ink-primary);
  }

  :where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-clay);
    outline-offset: var(--space-1);
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: inherit;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

@layer layout {
  /* =========================================================================
     WHOLE-PAGE FIXED WEBGL CANVAS (ORGANIC SCROLL MORPHING LAYER)
     ========================================================================= */
  .wholepage-canvas {
    position: fixed;
    inset: 0;
    inline-size: 100vw;
    block-size: 100dvh;
    pointer-events: none;
    z-index: 2;
    display: block;

    :root[data-no-webgl="true"] & {
      display: none;
    }
  }

  /* =========================================================================
     SMART SURGICAL CURSOR INSPECTOR (SECTION & MORPH-AWARE TELEMETRY HUD)
     ========================================================================= */
  .smart-cursor {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 85;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 220ms var(--ease-calm);
  }

  @media (pointer: fine) {
    .smart-cursor[data-visible="true"] {
      opacity: 1;
    }

    .smart-cursor[data-over-ui="true"] {
      opacity: 0;
    }
  }

  .smart-cursor-reticle {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    margin-inline-start: -0.875rem;
    margin-block-start: -0.875rem;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in oklab, var(--ink-primary) 38%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      transform 220ms var(--ease-calm),
      border-color 220ms var(--ease-calm),
      background-color 220ms var(--ease-calm);
  }

  .reticle-dot {
    inline-size: 0.25rem;
    block-size: 0.25rem;
    border-radius: var(--radius-pill);
    background-color: var(--ink-primary);
    transition:
      transform 220ms var(--ease-calm),
      background-color 220ms var(--ease-calm);
  }

  .smart-cursor[data-locked="true"] .smart-cursor-reticle {
    transform: scale(1.18);
    border-color: var(--accent-highlight);
    background-color: color-mix(in oklab, var(--accent-highlight) 12%, transparent);
  }

  .smart-cursor[data-locked="true"] .reticle-dot {
    background-color: var(--accent-highlight);
    transform: scale(1.35);
  }

  .smart-cursor[data-pulsing="true"] .smart-cursor-reticle {
    transform: scale(1.48);
    border-color: var(--accent-highlight);
    background-color: color-mix(in oklab, var(--accent-highlight) 24%, transparent);
  }

  .smart-cursor-hud {
    margin-block-start: -0.875rem;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-sm);
    background-color: color-mix(in oklab, var(--bg-elevated) 90%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-strong);
    box-shadow: 0 8px 24px var(--shadow-float);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    opacity: 0;
    transform: translateX(-0.35rem) scale(0.96);
    transition:
      opacity 200ms var(--ease-calm),
      transform 200ms var(--ease-calm),
      border-color 200ms var(--ease-calm),
      background-color 200ms var(--ease-calm);
  }

  .smart-cursor[data-locked="true"] .smart-cursor-hud {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  .smart-cursor[data-flip-x="true"][data-locked="true"] .smart-cursor-hud {
    transform: translateX(calc(-100% - 2.25rem)) scale(1);
  }

  .smart-cursor[data-pulsing="true"] .smart-cursor-hud {
    border-color: var(--accent-highlight);
  }

  /* Over the dark scene the HUD re-resolves every token in dark scheme. */
  .smart-cursor[data-dark="true"] {
    color-scheme: dark;
  }

  .cursor-hud-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--ink-primary);
    white-space: nowrap;
  }

  .cursor-hud-badge {
    font-size: 0.6rem;
    padding: 0.08rem 0.35rem;
    border-radius: 0.2rem;
    background-color: var(--accent-highlight-soft);
    color: var(--accent-highlight);
    font-weight: 500;
    letter-spacing: 0.05em;
  }

  .cursor-hud-meta {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  .page-content {
    position: relative;
    z-index: 3;
  }

  /* Top Navigation Header */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    background-color: color-mix(in oklab, var(--bg-paper) 82%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--border-hairline);
  }

  .header-inner {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-8);
    min-block-size: 4.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }

  .brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .ai-mark {
   border: 0.2px solid;
   padding: 4px 10px;
  }

  .brand-mark {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  /* Structural Horizontal Pacing Bands */
  .band-sand {
    background-color: color-mix(in oklab, var(--bg-sand) 78%, transparent);
  }

  .band-inner {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-8);
  }

  /* Always-dark band: every light-dark() token re-resolves to its dark value inside. */
  .band-ink {
    color-scheme: dark;
    color: var(--ink-primary);
  }

  /* Hero Section (Counter-balanced on the left while breathing fluid field occupies the stage) */
  .hero-section {
    min-block-size: 92dvh;
    display: flex;
    align-items: center;
    padding-block: var(--space-20);
  }

  .hero-stage-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
  }

  @media (min-width: 58rem) {
    .hero-stage-grid {
      grid-template-columns: 6fr 6fr;
    }
  }

  .hero-column {
    max-inline-size: 38rem;
  }

  /* Single-Card-Per-Section Scroll Chapters (100dvh per card for dedicated focus) */
  .scroll-chapters {
    padding-block: 0;
  }

  .chapter-step {
    min-block-size: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: center;
    padding-block: var(--space-20);
  }

  @media (min-width: 58rem) {
    .chapter-step {
      grid-template-columns: 5fr 7fr;
      gap: var(--space-16);
    }

    .chapter-step-right {
      grid-template-columns: 7fr 5fr;
    }
  }

  .sculpture-anchor {
    width: 100%;
    min-block-size: 22rem;
    pointer-events: none;
  }

  @media (max-width: 57.99rem) {
    .sculpture-anchor {
      min-block-size: 16rem;
    }
  }

  .chapter-card {
    max-inline-size: 31rem;
    padding: var(--space-8);
    border-radius: var(--radius-md);
    background-color: color-mix(in oklab, var(--bg-paper) 34%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-hairline);
    transition:
      border-color 360ms var(--ease-calm),
      background-color 360ms var(--ease-calm),
      transform 360ms var(--ease-calm);
  }

  .chapter-step[data-active-chapter="true"] .chapter-card {
    border-color: var(--border-strong);
    background-color: color-mix(in oklab, var(--bg-elevated) 40%, transparent);
  }

  /* Surgical Precision Section */
  .editorial-section {
    padding-block: var(--space-24);
  }

  .precision-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
  }

  @media (min-width: 58rem) {
    .precision-grid {
      grid-template-columns: 5fr 7fr;
      gap: var(--space-16);
    }
  }

  /* Solo to Enterprise Continuum Grid */
  .scale-header {
    max-inline-size: 38rem;
    margin-block-end: var(--space-16);
  }

  .scale-tiers {
    display: grid;
    grid-template-columns: 1fr;
    border-block-start: 1px solid var(--border-hairline);
  }

  @media (min-width: 48rem) {
    .scale-tiers {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .scale-tier {
    padding-block: var(--space-8);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-6);

    &:not(:last-child) {
      border-block-end: 1px solid var(--border-hairline);
    }
  }

  @media (min-width: 48rem) {
    .scale-tier {
      padding-inline: var(--space-6);

      &:first-child {
        padding-inline-start: 0;
      }

      &:last-child {
        padding-inline-end: 0;
      }

      &:not(:last-child) {
        border-block-end: none;
        border-inline-end: 1px solid var(--border-hairline);
      }
    }
  }

  /* Quiet Invite Coda & Footer */
  .coda-box {
    padding-block: var(--space-20);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-10);
  }

  @media (min-width: 56rem) {
    .coda-box {
      padding-block: var(--space-24);
      flex-direction: row;
      align-items: flex-end;
    }
  }

  .site-footer {
    padding-block: var(--space-8);
    border-block-start: 1px solid var(--border-hairline);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: 0.8125rem;
    color: var(--ink-muted);
  }
}

@layer components {
  .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .clay-dot {
    inline-size: 0.4375rem;
    block-size: 0.4375rem;
    border-radius: var(--radius-pill);
    background-color: var(--accent-clay);
    display: inline-block;
  }

  .display-hero {
    font-size: clamp(2.5rem, 1.8rem + 2.9vw, 4rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
    margin-block-start: var(--space-5);
  }

  .display-section {
    font-size: clamp(1.875rem, 1.35rem + 1.6vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-block-start: var(--space-3);
  }

  .title-chapter {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
    line-height: 1.2;
    margin-block-start: var(--space-3);
  }

  .title-tier {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    line-height: 1.25;
    margin-block-start: var(--space-2);
  }

  .prose-lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-secondary);
    max-inline-size: 46ch;
    margin-block-start: var(--space-6);
  }

  .prose-muted {
    font-size: 0.9375rem;
    line-height: 1.62;
    color: var(--ink-secondary);
    max-inline-size: 50ch;
  }

  .action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-block-start: var(--space-8);
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.75rem 1.375rem;
    min-block-size: 2.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    background-color: var(--ink-primary);
    color: var(--bg-paper);
    border: 1px solid var(--ink-primary);
    transition:
      background-color 220ms var(--ease-calm),
      border-color 220ms var(--ease-calm),
      transform 220ms var(--ease-calm);

    &:hover:not(:disabled) {
      background-color: var(--accent-clay);
      border-color: var(--accent-clay);
      color: var(--bg-elevated);
    }
  }

  .btn-subtle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.625rem 1rem;
    min-block-size: 2.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-primary);
    border: 1px solid var(--border-strong);
    background-color: color-mix(in oklab, var(--bg-paper) 80%, transparent);
    transition:
      border-color 220ms var(--ease-calm),
      background-color 220ms var(--ease-calm);

    &:hover:not(:disabled) {
      background-color: var(--bg-sand);
      border-color: var(--ink-primary);
    }
  }

  .arrow-glyph {
    display: inline-block;
    transition: transform 220ms var(--ease-calm);
  }

  :where(.btn-primary, .btn-subtle):hover .arrow-glyph {
    transform: translateX(0.2rem);
  }

  /* Live Concept Ledger inside Chapter Cards (synchronizes foreground card with active particle morph) */
  .concept-ledger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border-hairline);
  }

  .concept-pill {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    color: var(--ink-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition:
      color 220ms var(--ease-calm),
      border-color 220ms var(--ease-calm),
      background-color 220ms var(--ease-calm);

    &::before {
      content: "";
      inline-size: 0.3125rem;
      block-size: 0.3125rem;
      border-radius: var(--radius-pill);
      background-color: var(--border-strong);
      transition: background-color 220ms var(--ease-calm), transform 220ms var(--ease-calm);
    }

    &:hover {
      color: var(--ink-primary);
      border-color: var(--border-strong);
    }

    &[data-active="true"] {
      color: var(--ink-primary);
      border-color: var(--accent-clay);
      background-color: color-mix(in oklab, var(--accent-clay-soft) 55%, transparent);

      &::before {
        background-color: var(--accent-clay);
        transform: scale(1.2);
      }
    }
  }

  /* Surgical vs. One-Shot Interactive Comparison Demo */
  .surgical-demo-card {
    background-color: color-mix(in oklab, var(--bg-elevated) 90%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .surgical-stage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  @media (min-width: 38rem) {
    .surgical-stage-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .demo-pane {
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-hairline);
    background-color: var(--bg-paper);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .demo-pane-targeted {
    border-color: var(--accent-clay);
    background-color: var(--bg-elevated);
  }

  .demo-pane-head {
    display: flex;
    justify-content: space-between;
    inline-size: 100%;
  }

  .demo-pane-targeted .demo-pane-head {
    color: var(--accent-clay);
  }

  .demo-caption {
    font-size: 0.8125rem;
    color: var(--ink-secondary);
  }

  .demo-pane-targeted .demo-caption {
    color: var(--ink-primary);
  }

  /* Demo SVGs are themed purely through CSS so they follow light/dark. */
  .demo-svg {
    display: block;
    inline-size: 100%;
    block-size: auto;

    & :is(rect, line, path) {
      fill: none;
      stroke: var(--ink-primary);
      stroke-width: 1;
    }

    & .muted {
      stroke: var(--ink-muted);
    }

    & .sage {
      stroke: var(--accent-sage);
    }

    & circle.sage {
      fill: var(--accent-sage);
      stroke: none;
    }

    & circle.clay {
      fill: var(--accent-clay);
      stroke: none;
    }
  }

  .demo-svg-noise :is(rect) {
    stroke: var(--ink-muted);
  }

  .demo-svg-interactive {
    cursor: pointer;

    & [data-part-selected="true"] rect {
      fill: var(--accent-clay-soft);
      stroke: var(--accent-clay);
      stroke-width: 1.35;
    }
  }

  /* Prose spacing that previously lived in inline styles */
  .title-chapter + .prose-muted {
    margin-block-start: var(--space-3);
  }

  .title-tier + .prose-muted {
    margin-block-start: var(--space-2);
  }

  .coda-box .display-section {
    max-inline-size: 22ch;
  }

  .coda-box .action-row {
    margin-block-start: 0;
  }

  /* System / Light / Dark segmented switch */
  .theme-switch {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background-color: color-mix(in oklab, var(--bg-paper) 80%, transparent);

    & button {
      appearance: none;
      cursor: pointer;
      padding: 0.25rem 0.625rem;
      border: 0;
      border-radius: var(--radius-pill);
      background: transparent;
      color: var(--ink-muted);
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      letter-spacing: 0.03em;
      transition:
        color 220ms var(--ease-calm),
        background-color 220ms var(--ease-calm);

      &:hover {
        color: var(--ink-primary);
      }

      &[aria-checked="true"] {
        background-color: var(--ink-primary);
        color: var(--bg-paper);
      }
    }
  }
}

@media (max-width: 48rem) {
  .theme-switch {
    a {
      display: none;
    }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes target-morph {
      0%,
      100% {
        transform: scaleX(1) translateY(0);
      }
      50% {
        transform: scaleX(1.08) translateY(-2px);
      }
    }

    @keyframes scramble-jitter {
      0%,
      100% {
        opacity: 0.85;
      }
      50% {
        opacity: 0.35;
      }
    }

    .animate-target-node {
      transform-origin: center;
      animation: target-morph 3.2s var(--ease-calm) infinite;
    }

    .animate-oneshot-noise {
      animation: scramble-jitter 2.6s var(--ease-calm) infinite;
    }

    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @keyframes editorial-reveal {
        from {
          opacity: 0;
          translate: 0 var(--space-3);
        }
        to {
          opacity: 1;
          translate: 0 0;
        }
      }

      .reveal-on-scroll {
        animation: editorial-reveal auto var(--ease-calm) backwards;
        animation-timeline: view(block);
        animation-range: entry 5% cover 20%;
      }
    }

    @supports not ((animation-timeline: view()) and (animation-range: entry)) {
      .reveal-on-scroll[data-reveal-ready="true"] {
        opacity: 0;
        translate: 0 var(--space-3);
        transition:
          opacity 520ms var(--ease-calm),
          translate 520ms var(--ease-calm);
      }

      .reveal-on-scroll[data-reveal-ready="true"][data-revealed="true"] {
        opacity: 1;
        translate: 0 0;
      }
    }
  }
}