/* Diker — shared.css (light, typography-driven) */

:root {
  --bg: #ffffff;
  --bg-subtle: #fafafa;
  --bg-card: #ffffff;
  --border: #e4e4e7;
  --border-subtle: #f0f0f2;
  --text: #18181b;
  --text-secondary: #52525b;
  --text-muted: #a1a1aa;
  --text-dim: #d4d4d8;
  --accent: #18181b;
  --accent-dim: rgba(24,24,27,0.06);
}

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--text);
  margin: 0;
}

::selection { background: rgba(24,24,27,0.15); color: var(--text); }

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal.revealed { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.14s; }
.reveal-d3 { transition-delay: 0.2s; }
.reveal-d4 { transition-delay: 0.26s; }

/* ── Nav dropdown ── */
.nav-dd-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: -0.75rem;
  padding-top: 0.25rem; min-width: 13rem; z-index: 60;
}
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu { display: block; }
.nav-dd-panel {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 0.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08); padding: 0.375rem; overflow: hidden;
}
.nav-dd-panel a {
  display: block; padding: 0.5rem 0.75rem; border-radius: 0.375rem;
  font-size: 0.8125rem; color: var(--text-secondary); text-decoration: none; transition: all 0.15s;
}
.nav-dd-panel a:hover { background: var(--bg-subtle); color: var(--text); }
.nav-dd-panel a span { display: block; font-size: 0.6875rem; color: var(--text-dim); margin-top: 0.125rem; }

/* ── Mobile menu ── */
.mobile-menu { display: none; border-top: 1px solid var(--border); padding: 1rem 1.5rem; background: var(--bg); }
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; padding: 0.625rem 0; font-size: 0.9375rem; color: var(--text-secondary);
  text-decoration: none; border-bottom: 1px solid var(--border-subtle);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.active { color: var(--text); }

/* ── Layer bars (diagram) ── */
.layer-bar {
  position: relative; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 1rem; border-radius: 0.5rem;
  border: 1px solid var(--border); background: var(--bg-card);
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
.layer-bar.stripped { opacity: 0.3; }
.layer-bar.stripped .layer-bar-label { text-decoration: line-through; }
.layer-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }

/* ── Diagram animation ── */
.diagram-animated .layer-bar {
  opacity: 0; transform: translateX(-12px);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.diagram-animated.in-view .layer-bar { opacity: 1; transform: none; }
.diagram-animated.in-view .layer-bar:nth-child(1) { transition-delay: 0.1s; }
.diagram-animated.in-view .layer-bar:nth-child(2) { transition-delay: 0.2s; }
.diagram-animated.in-view .layer-bar:nth-child(3) { transition-delay: 0.3s; }
.diagram-animated .after-col .layer-bar { transform: translateX(12px); }
.diagram-animated.in-view .after-col .layer-bar:nth-child(1) { transition-delay: 0.5s; }
.diagram-animated.in-view .after-col .layer-bar:nth-child(2) { transition-delay: 0.6s; }
.diagram-animated.in-view .after-col .layer-bar:nth-child(3) { transition-delay: 0.7s; }
.diagram-arrow-line { opacity: 0; transition: opacity 0.4s 0.35s; }
.diagram-animated.in-view .diagram-arrow-line { opacity: 1; }

/* ── Metadata pips ── */
.chain-meta-bar { display: flex; gap: 2px; margin-top: 4px; }
.chain-meta-pip { flex: 1; height: 3px; border-radius: 1.5px; transition: background 0.4s; }
.chain-meta-pip.active { background: var(--text-secondary); }
.chain-meta-pip.gone { background: var(--border); }

/* ── Code blocks ── */
.code-block {
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 0.5rem;
  overflow: hidden;
}
.code-header {
  padding: 8px 12px; border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 6px;
}
.code-dot { width: 6px; height: 6px; border-radius: 50%; }
.code-body {
  padding: 14px 16px; font-family: 'Menlo','Consolas',monospace;
  font-size: 12px; line-height: 1.7; color: var(--text-secondary); overflow-x: auto;
}
.code-key { color: var(--text); font-weight: 500; }
.code-str { color: var(--accent); }
.code-dim { color: var(--text-dim); }
.code-bool { color: #f97316; }

/* ── Waveform ── */
@keyframes waveShift { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.wave-anim { animation: waveShift 4s linear infinite; }

/* ── Pixel grid ── */
.pixel-grid { display: grid; gap: 1px; background: var(--border-subtle); border-radius: 4px; overflow: hidden; }
.pixel-cell { aspect-ratio: 1; }

/* ── Misc ── */
.text-balance { text-wrap: balance; }
a { color: inherit; }