/* ChipFlow — Microchip Explorer (centerpiece 3D) */

.chip-section {
  padding: 140px 48px 120px;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, oklch(0.18 0.04 245 / 0.5), transparent 60%),
    var(--ink);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.chip-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 60px, oklch(0.28 0.02 250 / 0.18) 60px 61px),
    repeating-linear-gradient(90deg, transparent 0 60px, oklch(0.28 0.02 250 / 0.18) 60px 61px);
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
}

.chip-explorer {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  position: relative;
  z-index: 2;
  margin-top: 48px;
}

.chip-stage-wrap {
  position: relative;
  aspect-ratio: 4/3;
  background:
    radial-gradient(ellipse at 50% 60%, oklch(0.2 0.05 245) 0%, oklch(0.08 0.01 250) 80%);
  border: 1px solid var(--rule);
  overflow: hidden;
}

/* Subtle scanline + crosshair reticle on the stage */
.chip-stage-wrap::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(transparent 50%, oklch(0.72 0.14 240 / 0.025) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 4;
}
.chip-stage-wrap::after {
  content: "";
  position: absolute; inset: 16px;
  border: 1px solid oklch(0.72 0.14 240 / 0.18);
  pointer-events: none;
  z-index: 3;
}

.chip-stage-corners {
  position: absolute; inset: 16px; pointer-events: none; z-index: 5;
}
.chip-stage-corners span {
  position: absolute; width: 16px; height: 16px;
  border-color: oklch(0.85 0.12 200 / 0.7); border-style: solid; border-width: 0;
}
.chip-stage-corners span:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.chip-stage-corners span:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.chip-stage-corners span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.chip-stage-corners span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* Heads-up data overlay */
.chip-hud {
  position: absolute; inset: 24px; pointer-events: none; z-index: 6;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: oklch(0.85 0.1 220);
}
.chip-hud .hud-row {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.chip-hud .hud-tl { color: oklch(0.78 0.14 160); }
.chip-hud .hud-tl::before { content: "● "; animation: pulse 1.6s infinite; }
.chip-hud .hud-tr { color: oklch(0.85 0.1 220); opacity: 0.85; }
.chip-hud .hud-bl, .chip-hud .hud-br {
  position: absolute; bottom: 0;
  font-size: 9px; letter-spacing: 0.16em; color: var(--muted);
}
.chip-hud .hud-bl { left: 0; }
.chip-hud .hud-br { right: 0; text-align: right; }
.chip-hud .hud-br b {
  display: block; color: var(--silicon); font-weight: 400; font-size: 11px; letter-spacing: 0.04em;
}

/* The 3D scene */
.chip-scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  perspective: 1800px;
  perspective-origin: 50% 45%;
  cursor: grab;
  z-index: 2;
}
.chip-scene.dragging { cursor: grabbing; }

.chip-3d {
  position: relative;
  width: 360px; height: 360px;
  transform-style: preserve-3d;
  transition: transform 80ms linear;
  will-change: transform;
}

/* ───────── Package box (closed mode) ───────── */
.pkg {
  position: absolute;
  transform-style: preserve-3d;
  inset: 0;
  width: 360px; height: 360px;
}
.pkg .face {
  position: absolute;
  background: linear-gradient(135deg, oklch(0.18 0.015 250), oklch(0.1 0.01 250));
  border: 1px solid oklch(0.32 0.02 250);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
  transform-style: preserve-3d;
}
/* Top face — silkscreen + die outline + dimple */
.pkg .top {
  width: 360px; height: 360px;
  left: 0; top: 0;
  transform: translateZ(28px);
  background:
    radial-gradient(ellipse at 30% 25%, oklch(0.32 0.02 250) 0%, oklch(0.14 0.012 250) 60%),
    linear-gradient(135deg, oklch(0.18 0.015 250), oklch(0.1 0.01 250));
}
.pkg .top .silk {
  position: absolute; inset: 36px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--mono); color: oklch(0.78 0.04 240); letter-spacing: 0.3em;
  font-size: 10px; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.pkg .top .silk .corner { position: absolute; width: 8px; height: 8px; border: 1px solid oklch(0.68 0.05 240); border-right: none; border-bottom: none; top: 0; left: 0; }
.pkg .top .silk .dimple {
  position: absolute; top: 18px; left: 18px;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(0.05 0.005 250), #000);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.8);
}
.pkg .top .silk .brand {
  font-family: var(--display); font-size: 22px; letter-spacing: 0.04em;
  color: oklch(0.92 0.005 250); font-weight: 500;
}
.pkg .top .silk .sku { font-size: 9px; color: oklch(0.55 0.04 245); letter-spacing: 0.4em; }
.pkg .top .silk .lot { font-size: 8px; color: oklch(0.42 0.03 245); letter-spacing: 0.3em; }
.pkg .top .die-outline {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 180px; height: 180px;
  border: 1px solid oklch(0.4 0.04 245);
  background: oklch(0.05 0.01 250 / 0.5);
}
.pkg .top .die-outline::before {
  content: "DIE"; position: absolute; top: -14px; left: 0;
  font-family: var(--mono); font-size: 8px; color: oklch(0.55 0.04 245); letter-spacing: 0.3em;
}

.pkg .bottom {
  width: 360px; height: 360px;
  left: 0; top: 0;
  transform: translateZ(-28px) rotateY(180deg);
  background: oklch(0.1 0.012 250);
}
/* Sides (4) */
.pkg .side-front, .pkg .side-back, .pkg .side-left, .pkg .side-right {
  background: linear-gradient(180deg, oklch(0.22 0.018 250) 0%, oklch(0.08 0.008 250) 100%);
  border: 1px solid oklch(0.3 0.02 250);
}
.pkg .side-front  { width: 360px; height: 56px; left: 0;   top: 152px; transform: rotateX(90deg) translateZ(28px); }
.pkg .side-back   { width: 360px; height: 56px; left: 0;   top: 152px; transform: rotateX(-90deg) translateZ(28px); }
.pkg .side-left   { width: 56px;  height: 360px; left: -28px; top: 0;   transform: rotateY(-90deg) translateZ(0); transform-origin: right center; }
.pkg .side-right  { width: 56px;  height: 360px; right: -28px; top: 0;  transform: rotateY(90deg) translateZ(0);  transform-origin: left center; }
.pkg .side-front::before, .pkg .side-back::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 4px, oklch(0.3 0.02 250 / 0.3) 4px 5px);
  opacity: 0.4;
}

/* ───────── BGA pin grid (bottom view) ───────── */
.bga-grid {
  position: absolute;
  left: 0; top: 0; width: 360px; height: 360px;
  transform: translateZ(-29px) rotateX(180deg);
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(14, 1fr);
  gap: 6px;
  padding: 22px;
  transform-style: preserve-3d;
}
.bga-grid .ball {
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, oklch(0.85 0.12 60) 0%, oklch(0.55 0.13 40) 60%, oklch(0.35 0.1 35) 100%);
  box-shadow:
    inset -1px -1px 2px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.6);
  transform: translateZ(-6px);
}
.bga-grid .ball.power { background: radial-gradient(circle at 30% 30%, oklch(0.9 0.16 25) 0%, oklch(0.55 0.18 25) 60%, oklch(0.32 0.14 25) 100%); }
.bga-grid .ball.gnd { background: radial-gradient(circle at 30% 30%, oklch(0.5 0.01 250) 0%, oklch(0.25 0.005 250) 60%, oklch(0.12 0.005 250) 100%); }

/* ───────── Die layer (revealed when exploded / xray) ───────── */
.die-layer {
  position: absolute;
  left: 50%; top: 50%;
  width: 200px; height: 200px;
  background:
    linear-gradient(135deg, oklch(0.45 0.16 240) 0%, oklch(0.25 0.12 245) 100%);
  border: 1px solid oklch(0.72 0.14 240);
  box-shadow:
    inset 0 0 30px oklch(0.2 0.08 245),
    0 0 40px oklch(0.5 0.18 245 / 0.3);
  transform-style: preserve-3d;
}

.die-layer .blocks {
  position: absolute; inset: 8px;
  display: grid;
  grid-template-areas:
    "cpu cpu gpu gpu"
    "cpu cpu gpu gpu"
    "sram sram io fab"
    "sram sram io fab";
  gap: 4px;
}
.die-layer .blocks .blk {
  position: relative;
  border: 1px solid oklch(0.5 0.16 245 / 0.6);
  background:
    linear-gradient(135deg, oklch(0.18 0.04 245), oklch(0.1 0.02 245));
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em;
  color: oklch(0.85 0.1 220);
  padding: 8px;
  text-transform: uppercase;
  overflow: hidden;
}
.die-layer .blocks .blk::before {
  /* Sub-grid texture (silicon) */
  content: ""; position: absolute; inset: 0; opacity: 0.4;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, oklch(0.85 0.1 220 / 0.18) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, oklch(0.85 0.1 220 / 0.18) 3px 4px);
}
.die-layer .blocks .cpu { grid-area: cpu; border-color: oklch(0.72 0.14 240 / 0.7); color: oklch(0.85 0.1 220); }
.die-layer .blocks .gpu { grid-area: gpu; border-color: oklch(0.68 0.18 300 / 0.7); color: oklch(0.78 0.16 300); }
.die-layer .blocks .sram { grid-area: sram; border-color: oklch(0.78 0.14 160 / 0.7); color: oklch(0.82 0.14 160); }
.die-layer .blocks .io { grid-area: io; border-color: oklch(0.75 0.17 55 / 0.7); color: oklch(0.82 0.14 55); }
.die-layer .blocks .fab { grid-area: fab; border-color: oklch(0.68 0.13 40 / 0.7); color: oklch(0.78 0.13 40); }

/* hot pulse on a block */
.die-layer .blocks .blk::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, currentColor 0%, transparent 40%);
  opacity: 0; animation: chipPulse 3.4s ease-in-out infinite;
}
.die-layer .blocks .cpu::after  { animation-delay: 0s; }
.die-layer .blocks .gpu::after  { animation-delay: 0.6s; }
.die-layer .blocks .sram::after { animation-delay: 1.2s; }
.die-layer .blocks .io::after   { animation-delay: 1.8s; }
.die-layer .blocks .fab::after  { animation-delay: 2.4s; }
@keyframes chipPulse {
  0%, 100% { opacity: 0; }
  20% { opacity: 0.18; }
  30% { opacity: 0; }
}

/* ───────── Bond wires (visible in xray) ───────── */
.bond-wires {
  position: absolute;
  left: 50%; top: 50%;
  width: 360px; height: 360px;
  pointer-events: none;
  opacity: 0; transition: opacity 0.5s, transform 0.6s cubic-bezier(0.2,0.9,0.3,1);
  transform-style: preserve-3d;
}
.bond-wires.on { opacity: 1; }
.bond-wires svg { width: 100%; height: 100%; overflow: visible; }

/* ───────── Substrate slab (under die) ───────── */
.substrate {
  position: absolute;
  left: 50%; top: 50%;
  width: 320px; height: 320px;
  background:
    repeating-linear-gradient(0deg, oklch(0.32 0.07 60) 0 2px, oklch(0.22 0.05 60) 2px 4px);
  border: 1px solid oklch(0.45 0.1 60);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
  transform-style: preserve-3d;
}

/* ───────── Hotspot pins on die (callouts) ───────── */
.hot-pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: oklch(0.78 0.14 160);
  box-shadow: 0 0 0 2px var(--ink), 0 0 14px oklch(0.78 0.14 160 / 0.8);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%) translateZ(2px);
  animation: hotPulse 2.2s ease-in-out infinite;
  z-index: 8;
}
.hot-pin::before {
  content: ""; position: absolute; inset: -8px;
  border: 1px solid oklch(0.78 0.14 160 / 0.5); border-radius: 50%;
  animation: hotRing 2.2s ease-out infinite;
}
@keyframes hotPulse {
  0%, 100% { transform: translate(-50%, -50%) translateZ(2px) scale(1); }
  50% { transform: translate(-50%, -50%) translateZ(2px) scale(1.3); }
}
@keyframes hotRing {
  0% { opacity: 1; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(2.2); }
}
.hot-pin.cpu { background: oklch(0.72 0.14 240); box-shadow: 0 0 0 2px var(--ink), 0 0 14px oklch(0.72 0.14 240 / 0.8); }
.hot-pin.cpu::before { border-color: oklch(0.72 0.14 240 / 0.5); }
.hot-pin.gpu { background: oklch(0.68 0.18 300); box-shadow: 0 0 0 2px var(--ink), 0 0 14px oklch(0.68 0.18 300 / 0.8); }
.hot-pin.gpu::before { border-color: oklch(0.68 0.18 300 / 0.5); }
.hot-pin.io { background: oklch(0.75 0.17 55); box-shadow: 0 0 0 2px var(--ink), 0 0 14px oklch(0.75 0.17 55 / 0.8); }
.hot-pin.io::before { border-color: oklch(0.75 0.17 55 / 0.5); }

/* ───────── Side panel (controls + readouts) ───────── */
.chip-panel {
  display: flex; flex-direction: column; gap: 24px;
  padding: 28px;
  border: 1px solid var(--rule);
  background:
    linear-gradient(180deg, oklch(0.18 0.015 250 / 0.6), oklch(0.14 0.012 250 / 0.6));
  backdrop-filter: blur(6px);
}
.chip-panel h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 10px;
}
.chip-panel h4::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

/* Mode buttons */
.chip-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.chip-mode-btn {
  padding: 14px 12px;
  border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  background: oklch(0.1 0.01 250);
  text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  transition: all 0.2s;
}
.chip-mode-btn:hover { border-color: var(--silicon); color: var(--paper); }
.chip-mode-btn.active {
  background: oklch(0.2 0.06 245);
  border-color: var(--silicon);
  color: var(--silicon);
}
.chip-mode-btn .label { font-size: 11px; letter-spacing: 0.18em; }
.chip-mode-btn .sub { font-size: 9px; color: var(--ink-4); letter-spacing: 0.1em; }
.chip-mode-btn.active .sub { color: var(--paper-2); }

/* Readouts */
.chip-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chip-read {
  padding: 12px 14px; border: 1px solid var(--rule);
  background: oklch(0.1 0.01 250);
}
.chip-read .k { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; }
.chip-read .v { font-family: var(--display); font-size: 22px; color: var(--paper); margin-top: 6px; letter-spacing: -0.01em; font-feature-settings: "tnum"; }
.chip-read .u { font-family: var(--mono); font-size: 10px; color: var(--silicon); letter-spacing: 0.08em; margin-left: 4px; }

/* Slider rows */
.chip-slider { display: flex; flex-direction: column; gap: 8px; }
.chip-slider .row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.chip-slider .row b { color: var(--silicon); font-weight: 400; font-feature-settings: "tnum"; }
.chip-slider input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 2px; background: var(--ink-3); width: 100%;
}
.chip-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--silicon); border: 2px solid var(--ink); cursor: pointer;
  box-shadow: 0 0 12px oklch(0.72 0.14 240 / 0.6);
}
.chip-slider input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--silicon); border: 2px solid var(--ink); cursor: pointer;
}

/* Hotspot info card */
.chip-hotspot-card {
  padding: 14px; border: 1px solid var(--rule);
  background: oklch(0.08 0.01 250);
  font-family: var(--mono); font-size: 11px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 110px;
}
.chip-hotspot-card .hs-tag {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--silicon);
}
.chip-hotspot-card .hs-name {
  font-family: var(--display); font-size: 18px; color: var(--paper);
  letter-spacing: -0.01em;
}
.chip-hotspot-card .hs-desc { color: var(--paper-2); font-family: var(--body); font-size: 12px; line-height: 1.5; letter-spacing: 0; }
.chip-hotspot-card .hs-stats { display: flex; gap: 16px; font-size: 9px; color: var(--muted); letter-spacing: 0.12em; }
.chip-hotspot-card .hs-stats span b { color: var(--paper); font-weight: 400; font-family: var(--display); font-size: 13px; display: block; }

/* Section header tweak inside chip section */
.chip-section .section-header { margin-bottom: 0; border-top-color: var(--silicon); }
.chip-section h2 em { font-family: var(--editorial); color: var(--silicon); font-style: italic; font-weight: 400; }

@media (max-width: 1100px) {
  .chip-explorer { grid-template-columns: 1fr; }
  .chip-3d { width: 280px; height: 280px; }
  .pkg .top, .pkg .bottom, .bga-grid { width: 280px; height: 280px; }
  .pkg .side-front, .pkg .side-back { width: 280px; top: 112px; }
  .pkg .side-left, .pkg .side-right { height: 280px; }
  .die-layer { width: 160px; height: 160px; }
  .substrate { width: 250px; height: 250px; }
}