/* Platform hero: a retro monitor loops through three anonymized scrapes (15s cycle). */
.platform-monitor {
  --crt-bg: #0c1812;
  --crt-fg: #a3f3c2;
  --crt-dim: #5a9a74;
  --crt-faint: rgb(163 243 194 / 14%);
  --crt-amber: #f2c078;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  margin: 0;
  padding: 40px 32px;
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 55%, transparent);
}
/* The casing is ASCII: 50 columns of 0.6em Geist Mono fill the width exactly, so
   --cw (one column) and --lh (one row) place the screen in the drawn bezel. */
.crt {
  --cw: calc(100cqw / 50);
  --lh: calc(var(--cw) / 0.6 * 1.25);
  position: relative;
  width: min(100%, 460px);
  container-type: inline-size;
}
.crt-frame {
  position: relative;
  margin: 0;
  color: var(--muted-foreground);
  font: 500 calc(var(--cw) / 0.6) / var(--lh) var(--mono);
  letter-spacing: 0;
  white-space: pre;
  overflow: visible;
}
.crt-globe {
  display: inline-block;
  width: 2ch;
  height: 1.1em;
  vertical-align: -0.2em;
  object-fit: contain;
}
.crt-power {
  color: var(--primary);
  font-weight: 700;
  animation: crt-blink 2.4s steps(2) infinite;
}
/* A dithered, hard-shadowed fill behind the casing rows: pixels, not gradients. */
.crt-fill {
  position: absolute;
  left: calc(var(--cw) * 0.5);
  top: calc(var(--lh) * 0.5);
  width: calc(var(--cw) * 49);
  height: calc(var(--lh) * 20);
  background:
    repeating-conic-gradient(rgb(40 44 41 / 7%) 0 25%, transparent 0 50%) 0 0 / 4px 4px,
    var(--card);
  box-shadow: 6px 6px 0 var(--border);
}
.crt-screen {
  position: absolute;
  left: calc(var(--cw) * 4);
  top: calc(var(--lh) * 2);
  width: calc(var(--cw) * 42);
  height: calc(var(--lh) * 15);
  display: grid;
  grid-template-rows: 64fr 26fr 10fr;
  overflow: hidden;
  container-type: inline-size;
  background: var(--crt-bg);
  box-shadow: inset 0 0 24px rgb(0 0 0 / 70%);
  color: var(--crt-fg);
  font-family: var(--mono);
  text-shadow: 0 0 4px rgb(163 243 194 / 40%);
}

/* Scenes stack in the first row and take turns. */
.crt-scene {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 3cqw;
  min-height: 0;
  padding: 4cqw 4.5cqw 0;
  font-size: 2.7cqw;
  opacity: 0;
  animation: crt-scene 15s linear infinite;
  animation-delay: var(--d);
}
.crt-bar {
  display: flex;
  align-items: center;
  gap: 2cqw;
  min-width: 0;
  padding: 1.2cqw 2cqw;
  border: 1px solid var(--crt-faint);
}
.crt-lights {
  display: flex;
  gap: 0.9cqw;
}
.crt-lights i {
  width: 1.4cqw;
  height: 1.4cqw;
  background: var(--crt-dim);
}
.crt-url {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.crt-body {
  display: grid;
  grid-template-columns: 50% minmax(0, 1fr);
  gap: 3.5cqw;
  min-height: 0;
}

/* Wireframe of the page being read, with its scan beam and field highlights. */
.crt-page {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--crt-faint);
}
.crt-page > * {
  position: absolute;
}
.crt-block,
.crt-avatar,
.crt-grid i {
  background: var(--crt-faint);
}
.crt-line,
.crt-stats i {
  height: 1.6cqw;
  background: rgb(163 243 194 / 28%);
}
.crt-title {
  background: rgb(163 243 194 / 55%);
}
.crt-price {
  background: var(--crt-fg);
}
.crt-hit {
  border: 2px dashed var(--crt-amber);
  opacity: 0;
  animation: crt-hit 15s linear infinite;
  animation-delay: calc(var(--d) + 0.6s + var(--h) * 0.9s);
}
.crt-beam {
  left: 0;
  right: 0;
  top: -12%;
  height: 12%;
  background: linear-gradient(180deg, transparent, rgb(163 243 194 / 35%), transparent);
  opacity: 0;
  animation: crt-beam 15s linear infinite;
  animation-delay: var(--d);
}

[data-scene='listing'] .crt-image {
  inset: 7% auto auto 6%;
  width: 40%;
  height: 52%;
}
[data-scene='listing'] .crt-title {
  inset: 10% auto auto 53%;
  width: 40%;
}
[data-scene='listing'] .crt-price {
  inset: 24% auto auto 53%;
  width: 20%;
}
[data-scene='listing'] .crt-line:not(.crt-title, .crt-price) {
  inset: 70% auto auto 6%;
  width: 86%;
}
[data-scene='listing'] .crt-line.crt-short {
  top: 82%;
  width: 56%;
}
[data-scene='listing'] .crt-hit[data-hit='0'] {
  inset: 5% auto auto 50%;
  width: 46%;
  height: 14%;
}
[data-scene='listing'] .crt-hit[data-hit='1'] {
  inset: 19% auto auto 50%;
  width: 26%;
  height: 14%;
}
[data-scene='listing'] .crt-hit[data-hit='2'] {
  inset: 4% auto auto 3%;
  width: 46%;
  height: 58%;
}

[data-scene='profile'] .crt-avatar {
  inset: 8% auto auto 6%;
  width: 22%;
  aspect-ratio: 1;
}
[data-scene='profile'] .crt-title {
  inset: 12% auto auto 34%;
  width: 40%;
}
[data-scene='profile'] .crt-stats {
  inset: 27% auto auto 34%;
  display: flex;
  gap: 4%;
  width: 58%;
}
[data-scene='profile'] .crt-stats i {
  flex: 1;
}
[data-scene='profile'] .crt-grid {
  inset: 48% 6% 6%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4%;
}
[data-scene='profile'] .crt-hit[data-hit='0'] {
  inset: 6% auto auto 31%;
  width: 46%;
  height: 14%;
}
[data-scene='profile'] .crt-hit[data-hit='1'] {
  inset: 21% auto auto 31%;
  width: 64%;
  height: 14%;
}
[data-scene='profile'] .crt-hit[data-hit='2'] {
  inset: 45% 3% 3%;
}

[data-scene='video'] .crt-player {
  inset: 6% 6% auto;
  height: 54%;
  display: grid;
  place-items: center;
}
[data-scene='video'] .crt-player i {
  width: 0;
  height: 0;
  border-block: 2.4cqw solid transparent;
  border-left: 4cqw solid rgb(163 243 194 / 60%);
}
[data-scene='video'] .crt-title {
  inset: 67% auto auto 6%;
  width: 70%;
}
[data-scene='video'] .crt-short {
  inset: 78% auto auto 6%;
  width: 36%;
}
[data-scene='video'] .crt-line:not(.crt-title, .crt-short) {
  inset: 88% auto auto 6%;
  width: 80%;
}
[data-scene='video'] .crt-hit[data-hit='0'] {
  inset: 3% 3% auto;
  height: 60%;
}
[data-scene='video'] .crt-hit[data-hit='1'] {
  inset: 63% auto auto 3%;
  width: 76%;
  height: 12%;
}
[data-scene='video'] .crt-hit[data-hit='2'] {
  inset: 75% auto auto 3%;
  width: 86%;
  height: 21%;
}

/* Extracted fields type out as JSON. */
.crt-json {
  margin: 0;
  overflow: hidden;
  font: inherit;
  line-height: 1.6;
  white-space: pre;
}
.crt-json > span {
  display: block;
}
.crt-brace {
  color: var(--crt-dim);
}
.crt-json-row {
  overflow: hidden;
  text-overflow: ellipsis;
  clip-path: inset(0 100% 0 0);
  animation: crt-type 15s linear infinite;
  animation-delay: calc(var(--d) + 1.2s + var(--i) * 0.4s);
}
.crt-key {
  color: var(--crt-dim);
}

/* Request log scrolls one row at a time; the track holds the log twice. */
.crt-log {
  overflow: hidden;
  margin: 2.5cqw 4.5cqw 0;
  padding-top: 1.5cqw;
  border-top: 1px dashed var(--crt-faint);
  font-size: 2.5cqw;
  line-height: 1.7;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 80%, transparent);
}
.crt-log-track {
  animation: crt-log 15s steps(9) infinite;
}
.crt-log-row {
  display: grid;
  grid-template-columns: 6ch minmax(0, 1fr) 4ch 10ch;
  gap: 1.5ch;
  white-space: nowrap;
}
.crt-log-row > * {
  overflow: hidden;
  text-overflow: ellipsis;
}
.crt-log-row b {
  font-weight: 500;
  color: var(--crt-dim);
}
.crt-log-row em {
  font-style: normal;
}
.crt-log-row[data-code='429'] em {
  color: var(--crt-amber);
  text-shadow: 0 0 6px rgb(242 192 120 / 50%);
}
.crt-status {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 0 4.5cqw;
  border-top: 1px solid var(--crt-faint);
  color: var(--crt-dim);
  font-size: 2.3cqw;
}
.crt-rec::before {
  content: '';
  display: inline-block;
  width: 1.4cqw;
  height: 1.4cqw;
  margin-right: 1.2cqw;
  background: var(--crt-fg);
  box-shadow: 0 0 6px var(--crt-fg);
  animation: crt-blink 1.2s steps(2) infinite;
}
.crt-cursor {
  margin-left: auto;
  color: var(--crt-fg);
  animation: crt-blink 1s steps(2) infinite;
}

/* Scanlines, glass glare and a faint flicker over the whole screen. */
.crt-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / 28%) 0 2px, transparent 2px 4px);
  animation: crt-flicker 4s steps(8) infinite;
}

@keyframes crt-scene {
  0%,
  31% {
    opacity: 1;
  }
  33.3%,
  100% {
    opacity: 0;
  }
}
@keyframes crt-beam {
  0% {
    top: -12%;
    opacity: 1;
  }
  16% {
    top: 100%;
    opacity: 1;
  }
  16.1%,
  100% {
    top: 100%;
    opacity: 0;
  }
}
@keyframes crt-hit {
  0% {
    opacity: 0;
  }
  1.5%,
  22% {
    opacity: 1;
  }
  24%,
  100% {
    opacity: 0.35;
  }
}
@keyframes crt-type {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  4%,
  30% {
    clip-path: inset(0 0 0 0);
  }
  30.1%,
  100% {
    clip-path: inset(0 100% 0 0);
  }
}
@keyframes crt-log {
  to {
    transform: translateY(-50%);
  }
}
@keyframes crt-blink {
  50% {
    opacity: 0;
  }
}
@keyframes crt-flicker {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.92;
  }
}

@media (max-width: 850px) {
  .platform-monitor {
    padding: 32px 16px;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

/* A still frame of the first scrape for visitors who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  .platform-monitor *,
  .platform-monitor *::before {
    animation: none !important;
  }
  .crt-scene[data-scene='listing'],
  [data-scene='listing'] .crt-hit {
    opacity: 1;
  }
  .crt-json-row {
    clip-path: none;
  }
  .crt-beam {
    display: none;
  }
}