@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans.ttf") format("truetype");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --phosphor: #94ff9e;
  --phosphor-dim: #4d9957;
  --phosphor-dead: #294d2e;
  --phosphor-soon: #3d7045;
  --glass: #030805;
  --bone: #e6d9bb;
  --glow: 0 0 2px rgba(148, 255, 158, 0.9), 0 0 10px rgba(148, 255, 158, 0.45);
  --glow-strong: 0 0 2px #d8ffdc, 0 0 8px rgba(148, 255, 158, 0.9), 0 0 22px rgba(148, 255, 158, 0.5);
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --scan-gap: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #000;
  color: var(--phosphor);
}

body {
  font-family: var(--mono);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 0 auto;
  padding: clamp(28px, 7vh, 72px) 16px clamp(100px, 14vh, 170px);
  background:
    linear-gradient(to bottom, transparent 70%, #000 100%),
    radial-gradient(ellipse 90% 75% at 50% 38%, #0b1d10 0%, var(--glass) 70%, #000 100%);
  text-shadow: var(--glow);
}

.tube { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; }

.screen::before,
.screen::after,
.screen > .grain,
.screen > .hum,
.screen > .fade {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* scanlines */
.screen::before {
  top: calc(var(--scan-gap) * -1);
  background: repeating-linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.26) calc(var(--scan-gap) / 2), transparent var(--scan-gap));
  background-size: 100% var(--scan-gap);
  animation: scan-drift 1.5s linear infinite;
}
.screen > .hum { z-index: 2; }
.screen > .fade {
  top: auto;
  height: clamp(100px, 14vh, 170px);
  z-index: 3;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 85%);
}
.screen::after {
  background: radial-gradient(ellipse 100% 90% at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
}
.screen > .hum { background: #000; opacity: 0; }
.screen > .grain {
  inset: -50%;
  opacity: 0.06;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 1 0 0 0 0 0.65 0 0 0 1.6 -0.4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.4s steps(4) infinite;
}

@keyframes scan-drift { to { transform: translateY(var(--scan-gap)); } }
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-7%, 4%); }
  50% { transform: translate(5%, -6%); }
  75% { transform: translate(-3%, -8%); }
}

/* pixelation (.px-on is set in site.js) */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.px-on :is(.seal, .title, .no-signal span, .item .ico, .item .label, .view-title) {
  filter: url(#px) drop-shadow(0 0 1.5px rgba(148, 255, 158, 0.7)) drop-shadow(0 0 7px rgba(148, 255, 158, 0.3));
  text-shadow: none;
}
.px-on :is(.item .ico, .item .label) { filter: url(#px); }
.px-on .item:is(:hover, :focus-visible) :is(.ico, .label) {
  filter: url(#px) drop-shadow(0 0 1px rgba(148, 255, 158, 0.55)) drop-shadow(0 0 4px rgba(148, 255, 158, 0.2));
}
.px-on .hero .seal { filter: url(#px-soft) drop-shadow(0 0 5px rgba(148, 255, 158, 0.3)); }

/* glitch */
.px-on .glitch { filter: url(#tear); }
.px-on .seal.glitch { filter: url(#tear) drop-shadow(0 0 6px rgba(148, 255, 158, 0.35)); }
.px-on :is(.title, .no-signal span, .item .ico, .item .label, .view-title).glitch {
  filter: url(#tear) drop-shadow(0 0 1.5px rgba(148, 255, 158, 0.7)) drop-shadow(0 0 7px rgba(148, 255, 158, 0.3));
}

.view {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.view[hidden] { display: none; }

.seal {
  width: clamp(170px, 24vw, 260px);
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 0 6px rgba(148, 255, 158, 0.35));
}

.title {
  font-family: var(--sans);
  font-weight: 700;
  margin: 18px 0 6px;
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-shadow: var(--glow-strong);
}
.title span { display: block; }
.title span:first-child { font-size: clamp(44px, 10vw, 88px); }
.title span:last-child { font-size: clamp(22px, 5vw, 44px); letter-spacing: 0.34em; margin-right: -0.34em; }

.hero { display: flex; flex-direction: column; align-items: center; }

.tagline {
  margin: 10px 0 28px;
  font-size: 14px;
  color: var(--phosphor-dim);
  letter-spacing: 0.04em;
}
.tagline span { display: block; }

.deck {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
}

.trailer {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--phosphor-dead);
  background: #010402;
  overflow: hidden;
}
.trailer iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.no-signal {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  background: repeating-linear-gradient(to bottom, rgba(148, 255, 158, 0.035) 0 2px, transparent 2px 6px);
}
.no-signal span {
  font: 700 clamp(20px, 3.4vw, 30px) var(--sans);
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  animation: blink 1.6s steps(1) infinite;
}
.no-signal small {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--phosphor-dim);
}
@keyframes blink { 50% { opacity: 0.35; } }

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  font: 600 clamp(18px, 2.4vw, 22px) var(--sans);
  letter-spacing: 0.14em;
  color: var(--phosphor-dim);
  text-shadow: none;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transform-origin: left center;
  transition: transform 0.12s ease-out, color 0.12s;
}
.item::before {
  content: ">";
  position: absolute;
  left: -10px;
  opacity: 0;
}
.item:hover,
.item:focus-visible {
  color: var(--phosphor);
  transform: scale(1.04);
  outline: none;
  text-shadow: var(--glow-strong);
}
.item:hover::before,
.item:focus-visible::before { opacity: 1; }

.item .ico {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: currentColor;
}
.item .state {
  margin-left: 6px;
  font: 500 11px var(--mono);
  letter-spacing: 0.1em;
  color: var(--phosphor-dim);
}
.item.is-soon { cursor: default; color: var(--phosphor-soon); text-shadow: none; }
.item.is-soon:hover,
.item.is-soon:focus-visible,
.item.is-soon.asked { transform: none; color: var(--phosphor-dim); }
.item.is-soon .state { opacity: 0; transition: opacity 0.15s; }
.item.is-soon:hover .state,
.item.is-soon:focus-visible .state,
.item.is-soon.asked .state { opacity: 1; }

.view-title {
  font: 700 clamp(28px, 6vw, 44px) var(--sans);
  letter-spacing: 0.2em;
  margin: 0 0 10px;
  text-shadow: var(--glow-strong);
}

.note {
  font-size: 13px;
  color: var(--phosphor-dim);
  max-width: 46ch;
  margin: 0 0 22px;
  line-height: 1.6;
}
.note a, .site-footer a { color: inherit; }

.form {
  width: 100%;
  max-width: 520px;
  display: grid;
  gap: 14px;
  text-align: left;
}
.form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--phosphor-dim);
}
.form input,
.form select,
.form textarea {
  font: 15px/1.5 var(--mono);
  color: var(--phosphor);
  background: rgba(148, 255, 158, 0.04);
  border: 1px solid var(--phosphor-dead);
  border-radius: 2px;
  padding: 8px 10px;
  text-shadow: var(--glow);
  caret-color: var(--phosphor);
  width: 100%;
}
.form select { color-scheme: dark; cursor: pointer; }
.form select option { background: #031006; color: var(--phosphor); }
@supports (appearance: base-select) {
  .form select,
  .form select::picker(select) { appearance: base-select; }
  .form select { display: flex; align-items: center; justify-content: space-between; }
  .form select::picker-icon { color: var(--phosphor-dim); }
  .form select::picker(select) {
    margin-top: 2px;
    padding: 4px 0;
    background: #031006;
    border: 1px solid var(--phosphor-dim);
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(148, 255, 158, 0.15);
  }
  .form select option {
    padding: 6px 10px;
    background: none;
    color: var(--phosphor-dim);
    font: 15px/1.5 var(--mono);
  }
  .form select option::checkmark { display: none; }
  .form select option:is(:hover, :focus, :checked) {
    background: rgba(148, 255, 158, 0.12);
    color: var(--phosphor);
    outline: none;
  }
}
.form [hidden] { display: none; }
.form textarea { resize: vertical; min-height: 110px; }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--phosphor-dim);
  box-shadow: 0 0 0 1px var(--phosphor-dim), 0 0 12px rgba(148, 255, 158, 0.2);
}
.form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-actions { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.form-actions .item { justify-content: center; transform-origin: center; }
.form-status { min-height: 1.4em; margin: 0; text-align: center; font-size: 13px; }
.form-status a { color: var(--phosphor); }

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: clamp(-90px, -10vh, -50px);
  padding: 0 16px 44px;
  text-align: center;
  font: 13px/1.6 var(--sans);
  letter-spacing: 0.04em;
  color: #a39c8c;
  text-shadow: none;
}
.site-footer img { width: 220px; height: auto; display: block; margin: 0 auto 10px; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--bone); }

@media (max-width: 760px) {
  .deck { grid-template-columns: minmax(0, 1fr); }
  .deck nav { justify-self: center; width: min(100%, 340px); }
}

@media (max-width: 560px) {
  .site-footer img { width: 180px; }
}

/* phones on their side */
@media (max-height: 500px) and (orientation: landscape) {
  .screen { padding-top: 20px; }
  .seal { width: 96px; }
  .title { margin-top: 10px; }
  .title span:first-child { font-size: 52px; }
  .title span:last-child { font-size: 26px; }
  .tagline { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen > .grain, .screen::before, .no-signal span { animation: none; }
  .item { transition: none; }
}