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

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

/*
 * Design system definition.
 *
 * The @theme inline block maps CSS custom properties to Tailwind utility
 * classes (e.g. --color-primary -> bg-primary, text-primary).
 *
 * The :root and .dark blocks define the actual color values using oklch.
 * All colors MUST use oklch format.
 *
 * To add a new semantic color:
 * 1. Add the variable to :root (light value) and .dark (dark value)
 * 2. Register it in @theme inline as --color-<name>: var(--<name>)
 */

@theme inline {
  --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);
  --radius-4xl: calc(var(--radius) + 16px);
  --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-ring-offset-background: var(--background);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.5rem;
  --background: oklch(0.99 0.002 240);
  --foreground: oklch(0.18 0.02 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.208 0.042 265.755);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.968 0.007 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent: oklch(0.968 0.007 247.896);
  --accent-foreground: oklch(0.208 0.042 265.755);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.704 0.04 256.788);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.704 0.04 256.788);
}

.dark {
  --background: oklch(0.16 0.012 260);
  --foreground: oklch(0.96 0.003 247);
  --card: oklch(0.195 0.014 260);
  --card-foreground: oklch(0.96 0.003 247);
  --popover: oklch(0.195 0.014 260);
  --popover-foreground: oklch(0.96 0.003 247);
  --primary: oklch(0.96 0.003 247);
  --primary-foreground: oklch(0.18 0.02 260);
  --secondary: oklch(0.235 0.015 260);
  --secondary-foreground: oklch(0.96 0.003 247);
  --muted: oklch(0.225 0.013 260);
  --muted-foreground: oklch(0.65 0.02 256);
  --accent: oklch(0.255 0.018 260);
  --accent-foreground: oklch(0.98 0.003 247);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(1 0 0 / 8%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.551 0.027 264.364);
  --sidebar: oklch(0.175 0.013 260);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar-foreground: oklch(0.96 0.003 247);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.279 0.041 260.031);
  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
}

@layer base {
  * {
    border-color: var(--color-border);
  }

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

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-feature-settings:
      "rlig" 1,
      "calt" 1,
      "cv11",
      "ss01";
  }
}

.grid-bg {
  background-image:
    linear-gradient(
      to right,
      color-mix(in oklab, var(--foreground) 5%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in oklab, var(--foreground) 5%, transparent) 1px,
      transparent 1px
    );
  background-size: 24px 24px;
}

/* Flowing gradient bar used for model share */
.model-share-bar {
  background-image: linear-gradient(
    90deg,
    var(--bar-color-soft) 0%,
    var(--bar-color) 35%,
    color-mix(in oklab, var(--bar-color) 60%, white) 50%,
    var(--bar-color) 65%,
    var(--bar-color-soft) 100%
  );
  background-size: 250% 100%;
  background-repeat: repeat;
  animation: model-bar-flow 3.2s linear infinite;
  box-shadow: 0 0 8px -2px var(--bar-color);
}

@keyframes model-bar-flow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -250% 0%;
  }
}

/* Dream Review starfield */
@keyframes star-twinkle {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes star-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -40px, 0);
  }
}
.dream-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.dream-stars::before,
.dream-stars::after {
  content: "";
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 80px 120px, rgba(221, 214, 254, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(1px 1px at 240px 200px, rgba(196, 181, 253, 0.85), transparent),
    radial-gradient(1px 1px at 320px 90px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 420px 220px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(1px 1px at 520px 60px, rgba(221, 214, 254, 0.9), transparent),
    radial-gradient(1px 1px at 600px 180px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 720px 40px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(1px 1px at 820px 250px, rgba(196, 181, 253, 0.85), transparent),
    radial-gradient(1px 1px at 920px 110px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 1040px 200px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(1px 1px at 1140px 70px, rgba(221, 214, 254, 0.85), transparent);
  background-size: 1200px 320px;
  background-repeat: repeat;
  animation:
    star-drift 60s linear infinite,
    star-twinkle 4s ease-in-out infinite;
}
.dream-stars::after {
  background-position: 60px 80px;
  animation-duration: 90s, 6s;
  opacity: 0.7;
}

/* Dream confetti burst */
@keyframes confetti-burst {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot));
    opacity: 0;
  }
}
.confetti-piece {
  border-radius: 1px;
  animation: confetti-burst 0.7s cubic-bezier(0.18, 0.85, 0.4, 1) forwards;
}

/* Token flow shimmer */
@keyframes token-flow-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}
.token-flow-shimmer {
  animation: token-flow-shimmer 2.6s ease-in-out infinite;
}

/* Skill-card hover sheen — a diagonal ray of light sweeps across the card
 * once when the user hovers. Paused by default so idle cards don't burn
 * CPU; resumes on group-hover, then resets when the cursor leaves. */
@keyframes skill-card-sheen {
  0% {
    transform: translateX(-120%) skewX(-18deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(260%) skewX(-18deg);
    opacity: 0;
  }
}
.skill-card-sheen {
  animation: skill-card-sheen 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) paused;
}
.group:hover .skill-card-sheen {
  animation-play-state: running;
}

/* ----------------------------------------------------------------
 * Anthropic-orange focus ring. Default browser focus is bright blue
 * which clashes with the brand. We nuke it for keyboard nav surfaces
 * inside the wizard and replace with a soft orange ring.
 * ---------------------------------------------------------------- */
.focus-orange:focus,
.focus-orange:focus-visible {
  outline: none;
  border-color: rgba(217, 119, 87, 0.55);
  box-shadow:
    0 0 0 3px rgba(255, 138, 61, 0.18),
    0 0 0 1px rgba(217, 119, 87, 0.7);
}

/* Inputs that should feel intentional when focused — pairs well with
 * the .focus-orange utility above. Use directly on inputs/buttons. */
input.focus-orange:focus,
textarea.focus-orange:focus,
button.focus-orange:focus {
  outline: none;
}

/* ----------------------------------------------------------------
 * Subtle vertical rise used by all "premium" cards. Keep the easing
 * tight so it doesn't feel laggy; the card lifts ~2px and gains a
 * touch of glow.
 * ---------------------------------------------------------------- */
.lift-on-hover {
  transition:
    transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 240ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.lift-on-hover:hover {
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------
 * Setup modal — top-edge highlight. The modal card uses a single
 * inset border-shadow plus a 1px highlight along the top edge so it
 * reads as a piece of glass rather than a flat panel.
 * ---------------------------------------------------------------- */
.modal-glass {
  box-shadow:
    0 24px 64px -16px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ----------------------------------------------------------------
 * Stepper dot — when active, gets a subtle orange glow + a soft
 * outer pulse. Used in the setup wizard.
 * ---------------------------------------------------------------- */
@keyframes stepper-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 138, 61, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 138, 61, 0);
  }
}
.stepper-active {
  animation: stepper-pulse 2.4s ease-out infinite;
}

/* ----------------------------------------------------------------
 * Slow, ambient gradient drift — used on the welcome hero overlay
 * so the background feels alive instead of static.
 * ---------------------------------------------------------------- */
@keyframes ambient-drift {
  0%,
  100% {
    transform: translate3d(-2%, -1%, 0) scale(1.04);
  }
  50% {
    transform: translate3d(2%, 1%, 0) scale(1.08);
  }
}
.ambient-drift {
  animation: ambient-drift 16s ease-in-out infinite;
}

/* ----------------------------------------------------------------
 * Find-line — appears in the detection scan loader as discoveries
 * land. We add a soft luminous left edge so each entry feels like
 * an event, not a list item.
 * ---------------------------------------------------------------- */
.find-line {
  position: relative;
  padding-left: 0.875rem;
}
.find-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(61, 220, 151, 0.85), rgba(61, 220, 151, 0));
  box-shadow: 0 0 6px rgba(61, 220, 151, 0.5);
}

/*
 * Hermes section brand — sourced from hermes-agent.nousresearch.com.
 * Deep teal-green + warm cream monochrome, sharp 0px corners, terminal type.
 * Mondwest (their actual heading face) is paid; Fraunces is the free Google
 * Fonts stand-in that captures the retro-display weight.
 *
 * The page sits on a layered background: their paper-engraving texture
 * (encoded inline as SVG noise via data URL) over the radial-green
 * gradient. Without the texture the page reads as a flat green slab —
 * the noise breaks it up so it "lives and breathes" like their site.
 */
/* Marquee — used by the Hermes Connections strip. The list is duplicated
 * inline (so the seam is invisible) and slid -50% over the configured
 * duration. Pure CSS so it survives SSR + works without JS. */
@keyframes hermes-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* SVG filter for chromatic-aberration on Pantheon images. Applied via
 * .pantheon-glitch class — uses feColorMatrix to isolate the red and blue
 * channels, then feOffset to push them apart, then feComposite back over
 * the source. Gives the same datamoshed RGB-split look as 06-labyrinth
 * regardless of what Kie.ai baked into each image. */
.pantheon-glitch {
  filter: url(#hermes-rgb-split);
}

.hermes-skin {
  --hermes-bg: #071D1C;
  --hermes-cream: #FFE6CB;
  --hermes-cream-dim: rgba(255, 230, 203, 0.6);
  --hermes-cream-muted: rgba(255, 230, 203, 0.4);
  --hermes-cream-soft: rgba(255, 230, 203, 0.12);
  --hermes-cream-border: rgba(255, 230, 203, 0.2);
  font-family: "Fraunces", ui-serif, Georgia, serif;
  letter-spacing: 0.005em;
  position: relative;
}
.hermes-skin::before {
  /* Paper-grain texture overlay. fractalNoise gives a soft engraved-paper
     feel; blend in multiply so the teal underlay shows through. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0.65 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}
.hermes-skin > * {
  position: relative;
  z-index: 1;
}
.hermes-skin .hermes-mono,
.hermes-skin code,
.hermes-skin pre,
.hermes-skin kbd {
  font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  letter-spacing: 0;
}
.hermes-skin .hermes-display {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  /* Heavier weight + slight optical-size tweak gives Fraunces a Mondwest-
     adjacent display feel — strong verticals, high contrast. */
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  letter-spacing: -0.005em;
  line-height: 1;
}
.hermes-skin .hermes-eyebrow {
  font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  color: var(--hermes-cream-dim);
}
