/* ============================================================================
   09 SUBSTRATE — Foundry tier 02. PCB flythrough + chip selector.
   Palette: copper-amber + PCB-green + black die + gold pad + cyan accent.
   ============================================================================ */

:root {
  --pcb-bg:        #07120a;
  --pcb-bg-soft:   #0a3d1f;
  --pcb-lit:       #1a5a30;
  --copper:        #b87333;
  --copper-lit:    #ff9a4d;
  --amber:         #ffb347;
  --gold:          #d4af37;
  --cyan:          #22d3ee;
  --paper:         #f4ece0;
  --paper-mute:    rgba(244, 236, 224, 0.62);
  --paper-faint:   rgba(244, 236, 224, 0.32);
  --hair:          rgba(244, 236, 224, 0.08);
  --hair-strong:   rgba(244, 236, 224, 0.18);

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', system-ui, sans-serif;
  --mono:  'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100svh; background: var(--pcb-bg); color: var(--paper); overflow-x: hidden; }
body {
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

/* ============ WebGL canvas (fixed) ============ */
#trace-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
  background: var(--pcb-bg);
}

/* ============ HUD overlays ============ */
.trace-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,0.78) 100%); }
.trace-grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.trace-scanlines { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.07; mix-blend-mode: screen; animation: trace-scan 9s linear infinite;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.6) 2px 3px), linear-gradient(180deg, rgba(34,211,238,0.04), transparent 50%, rgba(255,179,71,0.04));
}
@keyframes trace-scan { from { transform: translateY(0); } to { transform: translateY(3px); } }

.trace-bracket { position: fixed; width: 18px; height: 18px; border-color: rgba(34,211,238,0.55); box-shadow: 0 0 8px rgba(34,211,238,0.18); z-index: 4; pointer-events: none; }
.trace-bracket--tl { top: 18px; left: 18px;   border-top: 1px solid; border-left: 1px solid; }
.trace-bracket--tr { top: 18px; right: 18px;  border-top: 1px solid; border-right: 1px solid; }
.trace-bracket--bl { bottom: 18px; left: 18px;  border-bottom: 1px solid; border-left: 1px solid; }
.trace-bracket--br { bottom: 18px; right: 18px; border-bottom: 1px solid; border-right: 1px solid; }

/* ============ Fixed chrome ============ */
.trace-chrome {
  position: fixed; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(34px, 4vw, 64px);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--paper-mute);
  pointer-events: none;
}
.trace-chrome--top { top: 0; }
.trace-chrome--bot { bottom: 0; }
.trace-chrome a, .trace-chrome button { pointer-events: auto; }

.trace-brand { display: inline-flex; align-items: center; gap: 12px; }
.trace-brand__mark {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: 18px; color: var(--copper-lit);
  text-shadow: 0 0 8px rgba(255, 154, 77, 0.6);
  animation: trace-mark-pulse 4.6s ease-in-out infinite;
}
@keyframes trace-mark-pulse {
  0%, 100% { color: var(--copper-lit); text-shadow: 0 0 8px rgba(255, 154, 77, 0.6); }
  50%      { color: var(--amber);      text-shadow: 0 0 14px rgba(255, 179, 71, 0.85); }
}
.trace-brand__label strong { color: var(--paper); font-weight: 500; letter-spacing: 0.32em; }
.trace-brand__label em     { font-style: normal; color: var(--paper-faint); }

.trace-meta { display: inline-flex; gap: 28px; }
.trace-meta__pair { display: inline-flex; gap: 8px; align-items: baseline; }
.trace-meta__pair span    { color: var(--paper-faint); }
.trace-meta__pair strong  { color: var(--cyan); font-weight: 500; }

.trace-cypher {
  display: inline-block;
  font-size: 9.5px; letter-spacing: 0.22em;
  color: var(--paper-faint);
  white-space: nowrap; overflow: hidden;
  max-width: 70vw;
}
.trace-frame strong, .trace-frame span { color: var(--copper-lit); font-weight: 500; }

/* ============ Spec slide-in panel ============ */
.trace-panel {
  position: fixed; top: 64px; right: 28px; z-index: 8;
  width: clamp(320px, 28vw, 420px);
  padding: 28px 26px;
  background: rgba(7, 18, 10, 0.78);
  border: 1px solid rgba(255, 154, 77, 0.22);
  border-radius: 14px;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.6),
    0 0 32px -10px rgba(255, 154, 77, 0.18) inset;
  transform: translateX(36px);
  opacity: 0;
  pointer-events: none;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1),
              opacity 380ms ease;
}
.trace-panel.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.trace-panel__close {
  position: absolute; top: 10px; right: 14px;
  width: 28px; height: 28px;
  background: transparent; border: 0;
  font-family: var(--mono); font-size: 22px; color: var(--paper-faint);
  cursor: pointer;
  transition: color 200ms;
}
.trace-panel__close:hover { color: var(--copper-lit); }

.trace-panel__no {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em;
  color: var(--cyan);
  margin-bottom: 8px;
}
.trace-panel__name {
  font-family: var(--serif); font-weight: 400;
  font-size: 24px; line-height: 1.05; letter-spacing: -0.012em;
  color: var(--paper);
  margin-bottom: 4px;
}
.trace-panel__tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--copper-lit);
  margin-bottom: 18px;
}
.trace-panel__rule {
  height: 1px; width: 38px;
  background: linear-gradient(90deg, var(--copper-lit), transparent);
  margin-bottom: 18px;
}
.trace-panel__specs {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.trace-panel__specs dt { color: var(--paper-faint); text-transform: uppercase; }
.trace-panel__specs dd { color: var(--paper); }
.trace-panel__line {
  font-family: var(--sans); font-weight: 300;
  font-size: 13.5px; line-height: 1.55;
  color: var(--paper-mute);
  margin-bottom: 22px;
}
.trace-panel__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 154, 77, 0.4);
  border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--copper-lit);
  transition: background 220ms, color 220ms, border-color 220ms;
}
.trace-panel__cta:hover { background: rgba(255, 154, 77, 0.12); color: var(--paper); border-color: var(--copper-lit); }
.trace-panel__cta span { color: var(--cyan); }

/* ============ Document deck ============ */
.trace-deck {
  position: relative; z-index: 5;
}

.trace-section__label {
  display: inline-block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--paper-faint);
  padding-left: 14px; position: relative;
  margin-bottom: 18px;
}
.trace-section__label::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 8px; height: 1px; background: var(--copper-lit);
  transform: translateY(-50%);
}
.trace-section__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.022em;
  color: var(--paper);
  max-width: 18ch;
  margin-bottom: 22px;
}
.trace-section__title em {
  font-style: italic;
  background: linear-gradient(120deg, var(--copper-lit) 0%, var(--amber) 50%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.trace-section__lede {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.6;
  color: var(--paper-mute);
  max-width: 56ch;
  margin-bottom: 36px;
}

/* ----- HERO ----- */
.trace-hero {
  min-height: 100svh;
  padding: 120px clamp(34px, 5vw, 96px) 80px;
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center;
}
.trace-hero__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 28px;
}
.trace-hero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(56px, 9vw, 148px); line-height: 0.94; letter-spacing: -0.028em;
  color: var(--paper);
  margin-bottom: 32px;
}
.trace-hero__title .line { display: block; }
.trace-hero__title em {
  font-style: italic;
  background: linear-gradient(120deg, var(--copper-lit), var(--amber) 50%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.trace-hero__lede {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(15px, 1.4vw, 19px); line-height: 1.6;
  color: var(--paper-mute);
  max-width: 58ch;
  margin-bottom: 32px;
}
.trace-hero__lede strong { color: var(--paper); font-weight: 500; }
.trace-hero__meta {
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
}
.trace-hero__meta span { display: inline-flex; flex-direction: column; gap: 4px; }
.trace-hero__meta em { color: var(--paper-faint); font-style: normal; }
.trace-hero__meta strong { color: var(--copper-lit); font-weight: 500; }
.trace-hero__cue {
  margin-top: 44px;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--paper-faint);
}
.trace-hero__cue-line {
  display: inline-block; width: 38px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper-lit), transparent);
  animation: trace-cue 2.6s ease-in-out infinite;
}
@keyframes trace-cue { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

/* ----- PRODUCTS chip list ----- */
.trace-products {
  padding: 100px clamp(34px, 5vw, 96px) 60px;
  max-width: 1280px; margin: 0 auto;
}
.trace-chiplist {
  list-style: none;
  display: grid; grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hair);
}
.trace-chip {
  display: grid;
  grid-template-columns: 56px 1.3fr 1fr 0.7fr 1fr 28px;
  align-items: center;
  gap: 22px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--hair);
  cursor: pointer;
  transition: background 280ms, border-color 280ms, padding-left 280ms;
}
.trace-chip:hover {
  background: linear-gradient(90deg, rgba(255, 154, 77, 0.05) 0%, transparent 80%);
  border-bottom-color: rgba(255, 154, 77, 0.32);
  padding-left: 16px;
}
.trace-chip.is-active {
  background: linear-gradient(90deg, rgba(255, 154, 77, 0.10) 0%, transparent 70%);
  border-bottom-color: var(--copper-lit);
}
.trace-chip__no {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--cyan);
}
.trace-chip__name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.1;
  color: var(--paper);
}
.trace-chip:hover .trace-chip__name { color: var(--copper-lit); }
.trace-chip__role {
  font-family: var(--sans); font-weight: 300; font-size: 13.5px;
  color: var(--paper-mute);
}
.trace-chip__num {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em;
  color: var(--amber);
  white-space: nowrap;
}
.trace-chip__pkg {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-faint);
}
.trace-chip::after {
  content: '→';
  font-family: var(--mono); font-size: 16px;
  color: var(--paper-faint);
  transition: transform 280ms, color 280ms;
}
.trace-chip:hover::after { transform: translateX(4px); color: var(--copper-lit); }

/* ----- SPEC GRID ----- */
.trace-specs {
  padding: 80px clamp(34px, 5vw, 96px) 80px;
  max-width: 1280px; margin: 0 auto;
}
.trace-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
}
.trace-spec {
  background: rgba(7, 18, 10, 0.72);
  padding: 30px 26px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background 280ms;
}
.trace-spec:hover { background: rgba(26, 90, 48, 0.32); }
.trace-spec__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--paper-faint);
}
.trace-spec__value {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -0.012em;
  color: var(--copper-lit);
}
.trace-spec__sub {
  font-family: var(--sans); font-weight: 300;
  font-size: 13px; line-height: 1.5;
  color: var(--paper-mute);
}

/* ----- BUILT FOR BUILDERS ----- */
.trace-builders {
  padding: 80px clamp(34px, 5vw, 96px) 100px;
  max-width: 1280px; margin: 0 auto;
}
.trace-builders__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.trace-builders__card {
  padding: 32px 28px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: rgba(7, 18, 10, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 320ms, transform 380ms cubic-bezier(.2,.8,.2,1);
}
.trace-builders__card:hover { border-color: rgba(255, 154, 77, 0.32); transform: translateY(-4px); }
.trace-builders__no {
  display: inline-block;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.28em;
  color: var(--copper-lit);
  margin-bottom: 14px;
}
.trace-builders__card h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2vw, 30px); line-height: 1.05; letter-spacing: -0.014em;
  color: var(--paper);
  margin-bottom: 10px;
}
.trace-builders__card p {
  font-family: var(--sans); font-weight: 300;
  font-size: 14px; line-height: 1.6;
  color: var(--paper-mute);
}

/* ----- FOOTER / REACH ----- */
.trace-footer {
  padding: 100px clamp(34px, 5vw, 96px) 80px;
  max-width: 1280px; margin: 0 auto;
}
.trace-footer__cta { margin-bottom: 60px; }
.trace-footer__line {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(15px, 1.4vw, 19px); line-height: 1.6;
  color: var(--paper-mute);
  margin-bottom: 28px;
}
.trace-footer__line a { color: var(--copper-lit); border-bottom: 1px solid rgba(255, 154, 77, 0.32); }
.trace-footer__btns { display: inline-flex; flex-wrap: wrap; gap: 14px; }
.trace-footer__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--paper);
  transition: background 240ms, color 240ms, border-color 240ms;
  min-height: 48px;
}
.trace-footer__btn:hover { border-color: var(--copper-lit); color: var(--copper-lit); }
.trace-footer__btn--primary {
  background: linear-gradient(120deg, var(--copper-lit), var(--amber));
  color: var(--pcb-bg); border-color: transparent;
}
.trace-footer__btn--primary:hover { color: var(--pcb-bg); transform: translateY(-1px); }

.trace-footer__rule { height: 1px; background: var(--hair); margin: 30px 0; }
.trace-footer__meta {
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--paper-faint);
}
.trace-footer__meta a { color: var(--copper-lit); }

/* ============ Letter reveal ============ */
.splitch {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(0.18em);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.splitch.is-visible { opacity: 1; filter: blur(0); transform: translateY(0); }

.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(.22,.61,.36,1),
              transform 0.85s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .trace-spec-grid { grid-template-columns: repeat(2, 1fr); }
  .trace-builders__grid { grid-template-columns: 1fr; }
  .trace-chip { grid-template-columns: 44px 1.2fr 0.7fr 0.7fr 24px; gap: 14px; padding: 18px 6px; }
  .trace-chip__pkg { display: none; }
  .trace-panel { right: 14px; left: 14px; width: auto; top: auto; bottom: 80px; }
}
@media (max-width: 640px) {
  .trace-meta { display: none; }
  .trace-spec-grid { grid-template-columns: 1fr; }
  .trace-bracket { display: none; }
  .trace-cypher { font-size: 9px; opacity: 0.6; }
  .trace-chip { grid-template-columns: 1fr 24px; gap: 4px; padding: 16px 6px; }
  .trace-chip__no, .trace-chip__role, .trace-chip__num { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .splitch { opacity: 1; filter: none; transform: none; }
  .reveal { opacity: 1; transform: none; }
}