/* ============================================================
   Pizzacake Industries — the site viewed THROUGH an oscilloscope
   Screen (left) holds the website + a waveform strip; physical
   controls sit to the right. Navigation = on-screen "settings".
   ============================================================ */

:root {
  --ui-zoom:   1;
  --bg:        #07090a;
  --chassis:   #15191a;
  --chassis-2: #0d1011;
  --ink:       #d8f5e3;
  --ink-dim:   #93ad9f;
  --ink-fade:  #61786c;
  --phos:      #36ff9a;
  --amber:     #ffb454;
  --line:      rgba(54, 255, 154, 0.16);
  --line-soft: rgba(54, 255, 154, 0.08);
  --glow:      0 0 18px rgba(54, 255, 154, 0.35);

  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r: 12px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(120% 120% at 50% -10%, #11181a, var(--bg) 65%);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--phos); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--phos); color: #04130b; padding: 10px 16px; border-radius: 0 0 8px 0;
  font-family: var(--mono); font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Bench + device shell ---------- */
.bench {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 1.5vw, 20px);
}
.scope-device {
  width: 100%;
  /* fill the window minus the bench padding on both sides */
  height: calc(100vh / var(--ui-zoom) - clamp(16px, 3vw, 40px));
  height: calc(100dvh / var(--ui-zoom) - clamp(16px, 3vw, 40px));
  display: flex; gap: clamp(12px, 1.6vw, 24px);
  padding: clamp(12px, 1.6vw, 22px);
  background: linear-gradient(160deg, var(--chassis), var(--chassis-2));
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 22px;
  box-shadow:
    0 50px 90px -40px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -2px 0 rgba(0,0,0,.5);
}

/* ============ SCREEN ============ */
.scope-screen {
  position: relative; flex: 1 1 auto; min-width: 0;
  border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(54,255,154,.05), transparent 60%),
    #050807;
  border: 1px solid rgba(54,255,154,.22);
  box-shadow: inset 0 0 60px rgba(0,0,0,.9), inset 0 0 14px rgba(54,255,154,.10);
}
.screen-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  /* faint graticule across the whole screen */
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ---- On-screen display (menu / settings) ---- */
.osd {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px clamp(14px, 2.4vw, 26px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(54,255,154,.05), transparent);
}
.osd-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-weight: 700; letter-spacing: .12em;
  color: var(--ink); font-size: .98rem; white-space: nowrap;
}
.brand-logo { height: 22px; width: auto; filter: drop-shadow(0 0 6px rgba(54,255,154,.25)); }
.osd-brand em { font-style: normal; color: var(--ink-fade); font-size: .72em; letter-spacing: .2em; margin-left: 4px; }

.osd-menu { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.osd-item {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em;
  color: var(--ink-dim); background: transparent; cursor: pointer;
  border: 1px solid transparent; border-radius: 6px; padding: 5px 10px;
  transition: color .14s, border-color .14s, background .14s, box-shadow .14s;
}
.osd-item:hover { color: var(--ink); border-color: var(--line); }
.osd-item[aria-current="page"] {
  color: #04130b; background: var(--phos); border-color: var(--phos);
  box-shadow: 0 0 14px rgba(54,255,154,.35); font-weight: 700;
}
.osd-status {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  color: var(--phos); white-space: nowrap; text-shadow: 0 0 8px rgba(54,255,154,.4);
}

/* ---- View area: the actual website content, scrolls internally ---- */
.view-area {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 44px);
  scrollbar-width: thin; scrollbar-color: var(--phos) transparent;
}
.view-area::-webkit-scrollbar { width: 9px; }
.view-area::-webkit-scrollbar-thumb { background: rgba(54,255,154,.3); border-radius: 6px; }
.view-area::-webkit-scrollbar-thumb:hover { background: rgba(54,255,154,.5); }

.view { max-width: 880px; margin: 0 auto; }
.view[hidden] { display: none; }
.view.anim { animation: viewIn .34s cubic-bezier(.2,.7,.2,1); }
@keyframes viewIn {
  0%   { opacity: 0; filter: brightness(2.4) blur(.6px); transform: translateY(8px) scaleY(.985); }
  28%  { opacity: 1; filter: brightness(1.5); }
  100% { opacity: 1; filter: none; transform: none; }
}

/* ---- Waveform strip: bottom quarter, always present ---- */
.wave-strip {
  position: relative; flex: 0 0 24%; min-height: 88px;
  border-top: 1px solid var(--line);
  background: radial-gradient(120% 140% at 50% 100%, rgba(54,255,154,.06), transparent 70%), #040605;
}
.wave-strip canvas { display: block; width: 100%; height: 100%; }
.wave-osd { position: absolute; inset: 0; pointer-events: none; }
.wave-osd span {
  position: absolute; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em;
  color: rgba(54,255,154,.7); text-shadow: 0 0 6px rgba(54,255,154,.5);
}
.wave-osd .tl { top: 7px; left: 12px; }
.wave-osd .tr { top: 7px; right: 12px; }
.wave-osd .bl { bottom: 7px; left: 12px; }

/* ---- CRT flourishes ---- */
.scanline {
  /* extends 102px (a multiple of the 3px stripe period) above the screen and rolls
     down via transform, so the animation stays on the compositor — animating
     background-position repaints the whole screen on the main thread every frame */
  position: absolute; left: 0; right: 0; top: -102px; bottom: 0;
  pointer-events: none; mix-blend-mode: overlay; opacity: .5;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  animation: roll 7s linear infinite;
  will-change: transform;
}
@keyframes roll { from { transform: translateY(0); } to { transform: translateY(102px); } }
.vignette {
  position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  box-shadow: inset 0 0 120px rgba(0,0,0,.55);
}

/* ============ CONTROL PANEL (right) ============ */
.controls {
  flex: 0 0 clamp(168px, 16vw, 210px);
  display: flex; flex-direction: column; align-items: stretch; gap: clamp(14px, 2.2vh, 26px);
  padding: 14px 12px;
  background: linear-gradient(180deg, #1b201f, #111514);
  border: 1px solid rgba(255,255,255,.05); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -3px 8px rgba(0,0,0,.5);
}
.ctl-plate { text-align: center; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.plate-logo { display: block; width: 64px; margin: 2px auto 8px; }
.plate-line { display: block; font-family: var(--mono); font-weight: 700; letter-spacing: .16em; color: var(--ink); font-size: .92rem; }
.plate-sub { display: block; font-family: var(--mono); font-size: .54rem; letter-spacing: .26em; color: var(--ink-fade); margin-top: 4px; }

.ctl-group { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Channel knob + arc labels */
.knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.knob-dial { position: relative; width: 150px; height: 150px; }
.knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; cursor: grab;
  background: radial-gradient(circle at 35% 30%, #2c382f, #0e140e 70%);
  border: 1px solid rgba(54,255,154,.3);
  box-shadow: 0 6px 14px rgba(0,0,0,.6), inset 0 2px 4px rgba(255,255,255,.06), inset 0 -6px 12px rgba(0,0,0,.6);
  touch-action: none;
}
.knob:active { cursor: grabbing; }
.knob-pointer {
  position: absolute; left: 50%; top: 7px; width: 3px; height: 25px; margin-left: -1.5px;
  background: var(--phos); border-radius: 2px; transform-origin: 50% 31px;
  box-shadow: 0 0 8px var(--phos);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.ch {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-80px) rotate(calc(-1 * var(--a)));
  font-family: var(--mono); font-size: .55rem; letter-spacing: .05em;
  background: transparent; border: 1px solid transparent; color: var(--ink-fade);
  padding: 3px 5px; border-radius: 5px; cursor: pointer; white-space: nowrap;
  transition: color .14s, border-color .14s, background .14s;
}
.ch:hover { color: var(--ink); }
.ch[aria-pressed="true"] {
  color: var(--phos); border-color: var(--line); background: rgba(54,255,154,.08);
  text-shadow: 0 0 8px rgba(54,255,154,.5);
}
.knob-label { font-family: var(--mono); font-size: .6rem; letter-spacing: .26em; color: var(--ink-fade); }

/* Run / stop */
.ctl-run { gap: 8px; }
.run-btn {
  width: 100%; font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; font-weight: 700;
  color: var(--amber); background: #140f06; border: 1px solid rgba(255,180,84,.35);
  border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: box-shadow .15s, transform .1s;
}
.run-btn:hover { box-shadow: 0 0 12px rgba(255,180,84,.3); }
.run-btn:active { transform: translateY(1px); }
.run-btn[aria-pressed="true"] { color: var(--phos); border-color: rgba(54,255,154,.4); background: #06120b; }
.control-tag { font-family: var(--mono); font-size: .55rem; letter-spacing: .12em; color: var(--ink-fade); text-align: center; }

/* Functional zoom / persistence knobs + power LED */
.ctl-knobs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin-top: auto; }
.mini-knob { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.mk-dot {
  position: relative; width: 42px; height: 42px; border-radius: 50%; cursor: grab; touch-action: none;
  background: radial-gradient(circle at 35% 30%, #2a322d, #0c100e 72%);
  border: 1px solid rgba(54,255,154,.25);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.05), 0 3px 6px rgba(0,0,0,.5);
}
.mk-dot:active { cursor: grabbing; }
.mk-ind {
  position: absolute; left: 50%; top: 5px; width: 2.5px; height: 13px; margin-left: -1.25px;
  background: var(--phos); border-radius: 2px; transform-origin: 50% 16px; box-shadow: 0 0 6px var(--phos);
}
.mk-label { display: flex; flex-direction: column; align-items: center; line-height: 1.2;
  font-family: var(--mono); font-size: .5rem; letter-spacing: .12em; color: var(--ink-fade); }
.mk-label em { font-style: normal; color: var(--phos); font-size: .64rem; letter-spacing: .03em; margin-top: 2px; }
.ctl-foot { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--mono); font-size: .56rem; letter-spacing: .18em; color: var(--ink-fade); }
.led { width: 9px; height: 9px; border-radius: 50%; background: var(--phos); box-shadow: 0 0 10px var(--phos); }

/* ============ CONTENT (inside the screen) ============ */
.eyebrow { font-family: var(--mono); color: var(--phos); font-size: .8rem; letter-spacing: .12em; margin: 0 0 16px; }
.view h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 18px; }
.hl { color: var(--phos); text-shadow: var(--glow); }
.lead { font-size: clamp(1rem, 1.4vw, 1.16rem); color: var(--ink-dim); max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 18px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .86rem; letter-spacing: .03em; font-weight: 600;
  text-decoration: none; padding: 11px 20px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s, color .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--phos); color: #04130b; border-color: var(--phos); }
.btn-primary:hover { box-shadow: var(--glow); }
.btn-ghost:hover { border-color: var(--phos); color: var(--phos); }

.view h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -.01em; }
.panel-sub { color: var(--ink-dim); max-width: 60ch; font-size: 1.04rem; margin-bottom: 30px; }

.cards { display: grid; gap: 20px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card {
  background: linear-gradient(180deg, rgba(20,28,22,.9), rgba(10,15,12,.9));
  border: 1px solid var(--line); border-radius: var(--r); padding: 24px;
  position: relative; transition: transform .14s ease, border-color .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); border-color: rgba(54,255,154,.32); box-shadow: 0 24px 40px -28px rgba(0,0,0,.9); }
.card h3 { font-size: 1.22rem; }
.card-lead { color: var(--ink-dim); margin-top: -2px; }
.spec-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
.spec-list li { position: relative; padding-left: 22px; font-size: .95rem; }
.spec-list li::before { content: "\25B8"; position: absolute; left: 0; top: 0; color: var(--phos); font-size: .8rem; line-height: 1.7; }

.strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 22px; padding: 16px 20px; border: 1px dashed var(--line); border-radius: var(--r);
  background: rgba(54,255,154,.03);
}
.strip p { margin: 0; color: var(--ink-dim); }
.strip strong { color: var(--ink); }

.linkcard p { color: var(--ink-dim); }
.linkcard .btn { margin-top: 18px; }
.bio .role { font-family: var(--mono); font-size: .82rem; color: var(--amber); letter-spacing: .03em; margin-top: -4px; }
.bio p:not(.role) { color: var(--ink-dim); }
.email { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: .9rem; color: var(--phos); text-decoration: none; border-bottom: 1px dashed rgba(54,255,154,.4); padding-bottom: 2px; }
.email:hover { text-shadow: var(--glow); }
.trace-pill { position: absolute; top: 18px; right: 18px; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line); }
.trace-pill.ch1 { color: var(--phos); }
.trace-pill.ch2 { color: var(--amber); border-color: rgba(255,180,84,.35); }

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: linear-gradient(180deg, rgba(20,28,22,.9), rgba(10,15,12,.9));
  border: 1px solid var(--line); border-radius: var(--r); padding: 22px;
  transition: transform .14s ease, border-color .15s ease;
}
a.contact-card:hover { transform: translateY(-3px); border-color: rgba(54,255,154,.32); }
.contact-k { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--ink-fade); text-transform: uppercase; }
.contact-v { font-size: 1.08rem; color: var(--phos); font-family: var(--mono); }
.contact-card.static .contact-v { color: var(--ink); }
.contact-note { font-size: .85rem; color: var(--ink-fade); }
.copyright { margin-top: 30px; font-family: var(--mono); font-size: .76rem; color: var(--ink-fade); }

/* ---- Saved captures: bottom-strip filmstrip + main-view stage ---- */
.wave-mode { position: absolute; inset: 0; }
.wave-mode[hidden] { display: none; }

.captures-strip { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px clamp(10px, 2vw, 18px) 10px; }
.captures-strip[hidden] { display: none; }
.cap-strip-label { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; color: var(--ink-fade); margin-bottom: 6px; }
.cap-strip-label em { font-style: normal; color: var(--phos); text-shadow: 0 0 8px rgba(54,255,154,.4); }

.filmstrip {
  display: flex; gap: 8px; flex: 1 1 auto; min-height: 0;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: var(--phos) transparent;
}
.filmstrip::-webkit-scrollbar { height: 7px; }
.filmstrip::-webkit-scrollbar-thumb { background: rgba(54,255,154,.3); border-radius: 6px; }
.thumb {
  position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 4 / 3;
  padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: #040605; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .62; transition: opacity .15s; }
.thumb:hover .thumb-img { opacity: 1; }
.thumb.active { border-color: var(--phos); box-shadow: 0 0 0 1px var(--phos), 0 0 12px rgba(54,255,154,.3); }
.thumb.active .thumb-img { opacity: 1; }
.thumb-tab {
  position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: .5rem; letter-spacing: .06em;
  color: var(--phos); background: rgba(0,0,0,.6); padding: 1px 5px; border-bottom-right-radius: 5px;
}

.view-projects .panel-sub { margin-bottom: 22px; }
.capture-stage { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(18px, 3vw, 30px); align-items: start; }
.capture-figure { margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #040605; box-shadow: inset 0 0 30px rgba(0,0,0,.6); }
.capture-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.capture-ref {
  display: inline-block; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--phos);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; margin-bottom: 14px;
}
.capture-info h3 { font-size: 1.4rem; }
.capture-meta { font-family: var(--mono); font-size: .92rem; color: var(--amber); margin: 0 0 10px; }
.capture-note { color: var(--ink-dim); }

/* ============ LARGE / HIGH-DPI SCREENS ============ */
/* Big monitors leave the UI looking tiny at 100%; approximate the ~125-150%
   browser-zoom look automatically once the CSS viewport is that wide.
   Viewport-unit lengths are scaled by zoom too, so anything sized in vh/dvh
   must divide by --ui-zoom to keep filling the window exactly. */
@media (min-width: 1700px) { :root { --ui-zoom: 1.25; } }
@media (min-width: 2100px) { :root { --ui-zoom: 1.5; } }
body { zoom: var(--ui-zoom); }

/* ============ RESPONSIVE ============ */
@media (max-width: 920px) {
  .scope-device { flex-direction: column; height: auto; padding: 8px; }
  /* fill the viewport: 100dvh minus bench (6px) + device (8px) padding each side */
  .scope-screen { height: calc(100vh - 28px); height: calc(100dvh - 28px); min-height: 480px; }
  .controls { display: none; } /* too clunky on mobile; navigate via the on-screen menu */
  .cards.two, .contact-grid, .capture-stage { grid-template-columns: 1fr; }
  .bench { padding: 6px; }
  .view-area { padding: 16px 14px; }
  .osd { padding: 10px 12px; }
  /* shorter waveform strip (60% of desktop) so content gets more of the screen */
  .wave-strip { flex-basis: 14.4%; min-height: 53px; }
  .osd-status { display: none; } /* breadcrumb is redundant with the menu here */
}
@media (max-width: 560px) {
  .bench { padding: 4px; }
  .scope-screen { height: calc(100vh - 24px); height: calc(100dvh - 24px); }
  .osd-brand em { display: none; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .scanline { display: none; }
  .knob-pointer { transition: none; }
  .view.anim { animation: none; }
  .btn:hover, .card:hover, a.contact-card:hover { transform: none; }
}