:root {
  --public-bg: #05070f;
  --public-ink: #eaf0fb;
}

html {
  background: var(--public-bg);
  overflow-x: hidden;
}

body.public-access-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: clamp(24px, 5vh, 52px) 0;
  overflow-x: hidden;
  background:
    linear-gradient(115deg, rgba(99, 102, 241, 0.05), transparent 34%),
    linear-gradient(245deg, rgba(34, 211, 238, 0.035), transparent 38%),
    var(--public-bg);
  color: var(--public-ink);
}

.public-access-page > .card {
  position: relative;
  z-index: 2;
}

.public-access-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.public-access-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(129, 140, 248, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 140, 248, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(1100px 700px at 50% 8%, #000 20%, transparent 78%);
  mask-image: radial-gradient(1100px 700px at 50% 8%, #000 20%, transparent 78%);
}

.public-access-numbers {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.public-access-column {
  position: absolute;
  top: 0;
  bottom: 0;
  width: max-content;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

.public-access-stream {
  display: flex;
  flex-direction: column;
  gap: 26px;
  animation: publicStreamUp var(--stream-duration, 92s) linear infinite;
  will-change: transform;
}

.public-access-stream span {
  color: #afc0ea;
  font: 500 11.5px/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0.075;
}

@keyframes publicStreamUp {
  to { transform: translate3d(0, -50%, 0); }
}

@media (max-width: 760px) {
  body.public-access-page {
    align-items: center;
    padding: 24px 0;
  }

  .public-access-stream span {
    opacity: 0.045;
  }

  .public-access-column:nth-child(2),
  .public-access-column:nth-child(3) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-access-stream {
    animation: none;
  }
}