/*
 * V53 / ASIC CONTROL SURFACE
 * A code-native 2.5D chip field. The canvas is lazy and all product meaning
 * remains in semantic HTML.
 */

.chip-section {
  min-height: 175vh;
  align-items: start;
  background:
    radial-gradient(circle at 73% 53%, rgba(143,207,219,.055), transparent 30rem),
    radial-gradient(circle at 82% 64%, rgba(231,199,125,.045), transparent 26rem),
    #040606;
}

.chip-section::before {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 49.94%, rgba(231,199,125,.045) 50%, transparent 50.06%),
    linear-gradient(transparent 0 49.94%, rgba(143,207,219,.035) 50%, transparent 50.06%);
  background-size: 8vw 8vw;
  content: "";
  opacity: .45;
}

.chip-section canvas {
  position: sticky;
  z-index: -2;
  top: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.16,1,.3,1);
}

.chip-section.is-chip-ready canvas { opacity: 1; }

.chip-v53-qa-poster {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: fill;
}

.chip-scrim {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  background:
    linear-gradient(90deg, #040606 0 25%, rgba(4,6,6,.86) 38%, rgba(4,6,6,.18) 67%, rgba(4,6,6,.46) 100%),
    linear-gradient(180deg, rgba(4,6,6,.52), transparent 34%, rgba(4,6,6,.18) 72%, #040606);
}

.chip-copy {
  position: sticky;
  z-index: 3;
  top: 0;
  min-height: 100vh;
  padding-top: clamp(110px,15vh,170px);
  pointer-events: none;
}

.chip-copy > * { pointer-events: auto; }
.chip-copy h2 { max-width: 640px; font-size: clamp(62px,7.1vw,116px); letter-spacing: -.055em; }
.chip-copy > p:not(.eyebrow) { max-width: 500px; color: rgba(211,207,196,.54); font-size: 14px; }

.control-parameters {
  width: min(580px,47vw);
  max-width: none;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  margin-top: 38px;
  background: rgba(231,199,125,.09);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

.control-parameters button {
  min-height: 70px;
  border: 1px solid transparent;
  padding: 14px 16px;
  background: rgba(6,9,9,.76);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    color .35s ease,
    background .35s ease,
    border-color .35s ease,
    transform .35s cubic-bezier(.16,1,.3,1);
}

.control-parameters button:hover { color: rgba(245,233,205,.82); transform: translateY(-2px); }
.control-parameters button:focus-visible { outline: 2px solid rgba(159,217,230,.72); outline-offset: 3px; }
.control-parameters button.is-active {
  border-color: rgba(231,199,125,.38);
  background:
    linear-gradient(135deg,rgba(231,199,125,.14),rgba(159,217,230,.05)),
    rgba(8,11,11,.88);
  box-shadow: inset 0 0 28px rgba(231,199,125,.04);
}

.control-parameters button b { font-size: 11px; }
.control-parameters button span { color: rgba(212,208,198,.55); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.control-parameters button.is-active span { color: rgba(245,232,201,.78); }

.chip-next {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 27px;
  border-bottom: 1px solid rgba(231,199,125,.22);
  padding: 0 0 9px;
  color: rgba(236,220,182,.68);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
}
.chip-next b { color: var(--gold); transition: transform .3s ease; }
.chip-next:hover b { transform: translateX(5px); }

.chip-v53-readout {
  position: sticky;
  z-index: 4;
  top: calc(100vh - 138px);
  display: grid;
  width: 240px;
  gap: 6px;
  margin: 0 4vw 0 auto;
  border-top: 1px solid rgba(231,199,125,.24);
  padding-top: 14px;
  pointer-events: none;
}

.chip-v53-readout > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(207,203,193,.34);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .18em;
}
.chip-v53-readout > span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9ed7df;
  box-shadow: 0 0 13px rgba(158,215,223,.66);
}
.chip-v53-readout > b {
  color: rgba(238,218,173,.84);
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.035em;
}
.chip-v53-readout > small {
  color: rgba(153,211,222,.38);
  font-size: 6px;
  letter-spacing: .14em;
}

.chip-instruction {
  position: sticky;
  z-index: 4;
  top: calc(100vh - 38px);
  width: max-content;
  margin: 0 30px 0 auto;
  color: rgba(198,193,181,.28);
}

@media (max-width: 980px) {
  .chip-copy h2 { max-width: 560px; font-size: clamp(56px,8vw,86px); }
  .control-parameters { width: min(540px,58vw); }
}

@media (max-width: 760px) {
  .chip-section { min-height: 160vh; }
  .chip-section::before { background-size: 22vw 22vw; }
  .chip-section canvas { top: 0; }
  .chip-scrim {
    background:
      linear-gradient(180deg,#040606 0 30%,rgba(4,6,6,.72) 40%,rgba(4,6,6,.1) 65%,#040606 100%);
  }
  .chip-copy {
    padding: 96px 18px 0;
  }
  .chip-copy h2 {
    max-width: 92%;
    font-size: clamp(48px,14vw,66px);
  }
  .chip-copy > p:not(.eyebrow) { max-width: 94%; font-size: 13px; }
  .control-parameters {
    position: absolute;
    right: 18px;
    bottom: 68px;
    left: 18px;
    width: auto;
    grid-template-columns: repeat(3,1fr);
    margin: 0;
  }
  .control-parameters button {
    min-height: 55px;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 9px 10px;
  }
  .control-parameters button b { font-size: 9px; }
  .control-parameters button span { font-size: 6px; }
  .chip-next { position: absolute; bottom: 24px; left: 18px; margin: 0; }
  .chip-v53-readout {
    top: calc(100vh - 200px);
    width: 176px;
    margin-right: 18px;
  }
  .chip-v53-readout > b { font-size: 17px; }
  .chip-v53-readout > small { white-space: normal; }
  .chip-instruction { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chip-section canvas,
  .control-parameters button { transition: none; }
}