/* ── processors-top: DOCC logo, CUTUPPER, PROCESSOR, ECHO/SPACE orbs ──────────
   Board is a size container, so 1cqw = 1% of the sheet's width. */

#logo .pt-logo,
#cutupper .pt-star,
#processor .pt-camera,
#orbs .pt-orb {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: none;
}

#logo svg,
#cutupper svg,
#processor svg {
  overflow: visible;
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */
#logo .pt-logo {
  width: 100%;
  height: 100%;
  transform: rotate(-2deg);
  transition: transform 0.2s;
}
#logo .pt-logo:hover {
  transform: rotate(1deg) scale(1.04);
}
#logo .pt-logo svg {
  width: 100%;
  height: 100%;
}
#logo .pt-ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pt-draw 0.8s ease-out forwards;
  animation-delay: calc(var(--i) * 0.16s + 0.15s);
}
#logo .pt-moon {
  fill: var(--processor);
  fill-opacity: 0.3;
  transform-box: fill-box;
  transform-origin: center;
}
#logo .pt-moon:last-child {
  fill: var(--sky);
}
@keyframes pt-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ── Annotation arrows ("← CUTUPPER") ─────────────────────────────────────── */
#cutupper .pt-tag,
#processor .pt-tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.3cqw;
  font-family: var(--font-marker);
  font-size: 1.05cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
#cutupper .pt-tag-arrow,
#processor .pt-tag-arrow {
  width: 2.4cqw;
  height: 1.2cqw;
  stroke: var(--processor);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#cutupper .pt-tag--cut {
  left: 6.6cqw;
  top: 0.4cqw;
  transform: rotate(-3deg);
}
#processor .pt-tag--proc {
  left: 6.2cqw;
  top: 2.8cqw;
  transform: rotate(2deg);
}

/* Small knobs laid out sideways so they fit under the drawings. */
#cutupper .knob,
#processor .knob {
  display: grid;
  grid-template: auto auto / auto auto;
  column-gap: 0.3cqw;
  align-items: center;
  justify-items: start;
}
#cutupper .knob svg,
#processor .knob svg {
  grid-row: span 2;
  width: 2.6cqw;
  height: 2.6cqw;
}

/* ── Cutupper star ────────────────────────────────────────────────────────── */
#cutupper .pt-star {
  position: absolute;
  left: 0;
  top: 0;
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 50%;
}
#cutupper .pt-star svg {
  width: 100%;
  height: 100%;
}
#cutupper .pt-star-spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
#cutupper .pt-star-body {
  fill: var(--paper);
}
#cutupper .pt-star-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
#cutupper .pt-star-line--ghost {
  stroke-width: 1.5;
  opacity: 0.45;
}
#cutupper .pt-spike {
  fill: var(--processor);
  opacity: 0;
  transition: opacity 0.12s;
}
#cutupper.is-on .pt-spike {
  opacity: 0.18;
}
#cutupper .pt-spike.is-lit {
  opacity: 0.95;
  transition: none;
}
#cutupper.is-on .pt-star-spin {
  animation: pt-spin 2.2s linear infinite;
}
#cutupper.is-armed .pt-star-spin {
  animation: pt-armed 0.5s ease-in-out infinite alternate;
}
#cutupper .pt-star:hover .pt-star-body {
  fill: var(--paper-2);
}
#cutupper .pt-star[aria-pressed='true'] {
  filter: drop-shadow(0 0 0.6cqw var(--processor));
}
@keyframes pt-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pt-armed {
  to {
    transform: scale(1.08) rotate(6deg);
  }
}

#cutupper .pt-cut-controls {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.5cqw;
}
#cutupper .pt-chip {
  font-size: 0.95cqw;
  padding: 0.15em 0.45em;
  min-width: 3.1cqw;
}

/* ── Processor camera ─────────────────────────────────────────────────────── */
#processor {
  --lens: var(--processor);
}
#processor[data-lens='bandpass'] {
  --lens: var(--creator);
}
#processor[data-lens='highpass'] {
  --lens: var(--sky);
}
#processor .pt-camera {
  position: absolute;
  left: 0.3cqw;
  top: 0;
  width: 5.6cqw;
  height: 5.6cqw;
  transition: transform 0.08s;
}
#processor .pt-camera:hover {
  transform: rotate(-3deg) scale(1.04);
}
#processor .pt-camera:active {
  transform: scale(0.94);
}
#processor .pt-camera svg {
  width: 100%;
  height: 100%;
}
#processor .pt-cam-body {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
#processor .pt-cam-line,
#processor .pt-spiral {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#processor .pt-iris {
  fill: var(--lens);
  fill-opacity: 0.12;
  stroke: var(--ink);
  stroke-width: 3;
  transition: fill-opacity 0.3s;
}
#processor.is-on .pt-iris {
  fill-opacity: 0.55;
}
#processor .pt-cam-dot {
  fill: var(--lens);
  stroke: var(--ink);
  stroke-width: 2;
}
#processor .pt-flash {
  fill: var(--paper);
  opacity: 0;
  pointer-events: none;
}
#processor .pt-proc-controls {
  position: absolute;
  left: 0;
  top: 6.1cqw;
  display: flex;
  align-items: center;
  gap: 0.4cqw;
}
#processor .pt-readout {
  font-family: var(--font-hand);
  font-size: 1.1cqw;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ── Orbs (bubbles) ───────────────────────────────────────────────────────── */
#orbs .pt-orb {
  --amt: 0;
  --lvl: 0;
  --orb: var(--processor);
  position: absolute;
  width: 5.2cqw;
  height: 5.2cqw;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
  border: calc(var(--stroke) * 1.2) dashed var(--line);
  border-radius: 52% 48% 50% 50% / 48% 52% 48% 52%;
  scale: calc(0.82 + var(--amt) * 0.18 + var(--lvl) * 0.22);
  box-shadow: 0 0 calc(var(--lvl) * 2.5cqw) color-mix(in srgb, var(--orb) 70%, transparent);
  transition: scale 0.1s, border-color 0.2s;
  animation:
    pt-bob 4.5s ease-in-out infinite,
    pt-blob 7s ease-in-out infinite;
}
#orbs .pt-orb--echo {
  left: 1.2cqw;
  top: 0.4cqw;
}
#orbs .pt-orb--space {
  --orb: var(--sky);
  left: 8cqw;
  top: 1.6cqw;
  animation-delay: -2s, -3s;
}
#orbs .pt-orb[aria-pressed='true'] {
  border-style: solid;
}
#orbs .pt-orb-fill {
  position: absolute;
  inset: auto 0 0;
  height: calc(var(--amt) * 100%);
  background: color-mix(in srgb, var(--orb) 18%, transparent);
  border-top: 0.2cqw solid color-mix(in srgb, var(--orb) 40%, transparent);
  border-radius: 40% 60% 0 0 / 12% 12% 0 0;
  transition:
    height 0.1s,
    background 0.2s;
}
#orbs .pt-orb[aria-pressed='true'] .pt-orb-fill {
  background: color-mix(in srgb, var(--orb) calc(45% + var(--lvl) * 40%), transparent);
  border-top-color: var(--orb);
}
#orbs .pt-orb-shine {
  position: absolute;
  left: 18%;
  top: 14%;
  width: 38%;
  height: 38%;
  border: 0.22cqw solid transparent;
  border-top-color: var(--ink);
  border-radius: 50%;
  transform: rotate(-40deg);
  opacity: 0.7;
}
#orbs .pt-orb-name {
  position: relative;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.35cqw;
  line-height: 1;
}
@keyframes pt-bob {
  50% {
    translate: 0 -0.35cqw;
  }
}
@keyframes pt-blob {
  33% {
    border-radius: 46% 54% 48% 52% / 54% 46% 52% 48%;
  }
  66% {
    border-radius: 54% 46% 53% 47% / 47% 53% 46% 54%;
  }
}

/* ── Narrow screens: zones become 150px cards in a column ─────────────────── */
@media (max-width: 760px) {
  #cutupper .pt-star,
  #processor .pt-camera {
    width: 96px;
    height: 96px;
  }
  #cutupper .pt-tag,
  #processor .pt-tag {
    font-size: 13px;
    left: 104px;
  }
  #cutupper .pt-tag-arrow,
  #processor .pt-tag-arrow {
    width: 26px;
    height: 14px;
  }
  #processor .pt-proc-controls {
    top: 104px;
  }
  #cutupper .knob svg,
  #processor .knob svg {
    width: 34px;
    height: 34px;
  }
  #cutupper .pt-chip {
    font-size: 13px;
    min-width: 0;
  }
  #processor .pt-readout {
    font-size: 15px;
  }
  #orbs .pt-orb {
    width: 84px;
    height: 84px;
  }
  #orbs .pt-orb--echo {
    left: 4%;
    top: 12px;
  }
  #orbs .pt-orb--space {
    left: 52%;
    top: 36px;
  }
  #orbs .pt-orb-name {
    font-size: 20px;
  }
}