/* Product Lab — page layer on top of Nocturne (assets/nocturne.css).
   Ported from the Claude Design prototype "Product Lab.dc.html"; values match it 1:1. */

:root {
  --color-accent: oklch(0.66 0.27 292);
  --color-accent-200: oklch(0.86 0.13 292);
  --color-accent-300: oklch(0.8 0.18 292);
  --color-accent-400: oklch(0.73 0.24 292);
  --color-accent-500: oklch(0.66 0.27 292);
  --color-accent-600: oklch(0.55 0.25 292);
  --color-accent-700: oklch(0.44 0.21 292);
  --ink: #080808;
  --mono: "Geist Mono", ui-monospace, monospace;
  --gutter: clamp(20px, 4vw, 56px);
}

html { scroll-behavior: smooth; background: var(--ink); }
body { background: var(--ink); margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent-200); }
@media (pointer: fine) { html.lab-cursor, html.lab-cursor * { cursor: none !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  html { scroll-behavior: auto; }
}

@keyframes rise { from { opacity: 0; filter: blur(14px); transform: translateY(0.3em); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes spin { from { transform: rotateX(-22deg) rotateY(0deg); } to { transform: rotateX(-22deg) rotateY(360deg); } }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.page { position: relative; min-height: 100vh; background: var(--ink); color: var(--color-text); font-family: var(--font-body); overflow-x: clip; }
.mono { font-family: var(--mono); }
.label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-400); }
.eyebrow { display: flex; gap: 14px; align-items: center; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--color-accent); flex: none; }
.muted-600 { color: var(--color-neutral-600); }
.muted-400 { color: var(--color-neutral-400); }

/* ---- ambient layers & cursor ---- */
.lab-glow { position: fixed; left: 0; top: 0; width: 640px; height: 640px; border-radius: 50%; pointer-events: none; z-index: 0; display: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 13%, transparent) 0%, transparent 62%); will-change: transform; }
.lab-grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lab-dot { position: fixed; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--color-text); pointer-events: none; z-index: 80; display: none; }
.lab-ring { position: fixed; left: 0; top: 0; width: 34px; height: 34px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-text) 35%, transparent);
  pointer-events: none; z-index: 79; display: none; align-items: center; justify-content: center;
  transition: width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), background .35s, border-color .35s;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text); }
.lab-ring span { opacity: 0; transition: opacity .25s; white-space: nowrap; }

/* ---- header ---- */
.lab-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--gutter); background: linear-gradient(var(--ink) 10%, transparent);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; animation: fadein 1s .1s both; }
.lab-brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); }
.lab-brand::before { content: ""; width: 7px; height: 7px; background: var(--color-accent); border-radius: 1px; }
.lab-nav { display: flex; gap: 28px; color: var(--color-neutral-400); }
.lab-nav a { display: flex; gap: 8px; }
.lab-nav .num { color: var(--color-neutral-600); }

/* ---- buttons ---- */
.btn-lab { flex: none; white-space: nowrap; padding: 12px 18px; font-size: 14px; gap: 12px; border-radius: var(--radius-md); }
.btn-lab:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-200); }

/* ---- reveal-on-scroll ---- */
[data-reveal] { opacity: 0; filter: blur(10px); transform: translateY(28px);
  transition: opacity 1s cubic-bezier(.2,.7,.1,1), filter 1s, transform 1s cubic-bezier(.2,.7,.1,1); }
.no-js [data-reveal] { opacity: 1; filter: none; transform: none; }

/* ---- footer ---- */
.lab-footer { position: relative; z-index: 1; padding: 0 var(--gutter) 36px; }
.lab-footer .rule { height: 1px; background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent); }
.lab-footer .row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 26px; }
.lab-footer .links { display: flex; gap: 24px; }
.lab-footer .links a { color: var(--color-neutral-300); }

/* ---- status dot (LIVE pulses) ---- */
.status { display: flex; align-items: center; gap: 8px; }
.status .dot { position: relative; width: 6px; height: 6px; }
.status .dot::before, .status .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; }
.status .dot::after { display: none; }
.status.live .dot::after { display: block; animation: pulse 2s cubic-bezier(.2,.7,.2,1) infinite; }

/* ---- tags ---- */
.lab-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 4px 9px; border-radius: var(--radius-sm);
  color: var(--color-neutral-300); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }

@media (max-width: 819px) {
  .lab-nav { gap: 18px; }
  .lab-nav .num { display: none; }
}