:root {
  color-scheme: dark;
  --red: #ff123d;
  --red-deep: #7b001c;
  --yellow: #ffe45c;
  --cyan: #27edff;
  --paper: #f7fbff;
  --muted: rgba(237, 244, 255, 0.72);
  --ink: #020006;
  --scroll: 0;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  width: 100%;
  background: var(--ink);
  font-family: Rajdhani, system-ui, sans-serif;
  scrollbar-width: thin;
  scrollbar-color: var(--red) #09020a;
  scroll-behavior: smooth;
}

body {
  min-height: 620vh;
  width: 100%;
  margin: 0;
  background: var(--ink);
  color: #fff;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

a {
  color: inherit;
  text-decoration: none;
}

#sequence,
.grade,
.scan {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
}

#sequence {
  z-index: 0;
  display: block;
  object-fit: cover;
  background: #050108;
}

.grade,
.scan {
  pointer-events: none;
}

.grade {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 42%, transparent 0 26%, rgba(0, 0, 0, 0.36) 62%, rgba(0, 0, 0, 0.84) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.05) 24%, rgba(0, 0, 0, 0.14) 62%, rgba(0, 0, 0, 0.88)),
    linear-gradient(90deg, rgba(255, 18, 61, 0.2), transparent 34%, transparent 68%, rgba(39, 237, 255, 0.12));
}

.scan {
  z-index: 2;
  opacity: 0.22;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 18, 61, 0.04) 0 1px, transparent 1px 19px);
}

.mobile-feed {
  display: none;
}

.mobile-archive {
  display: none;
}

.wanted-card__portrait {
  position: absolute;
  z-index: 1;
  left: 7px;
  top: 50%;
  width: 39%;
  height: 50%;
  overflow: hidden;
  display: block;
  object-fit: contain;
  object-position: center;
  border: 1px solid rgba(63, 255, 117, 0.48);
  background: rgba(3, 18, 9, 0.42);
  box-shadow:
    inset 0 0 18px rgba(63, 255, 117, 0.2),
    0 0 16px rgba(63, 255, 117, 0.22);
  transform: translateY(-50%);
  filter: contrast(1.08) saturate(0.9) brightness(0.88);
}

.wanted-card__bio {
  display: none;
}

.site-nav,
.pager,
.scrub {
  position: fixed;
  z-index: 5;
}

.site-nav {
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  font-family: Orbitron, Rajdhani, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--paper);
  text-shadow: 0 0 16px rgba(255, 18, 61, 0.62);
}

.brand__mark {
  width: 26px;
  aspect-ratio: 1;
  border: 1px solid var(--red);
  box-shadow: inset 0 0 18px rgba(255, 18, 61, 0.36), 0 0 18px rgba(255, 18, 61, 0.55);
  transform: rotate(30deg);
}

.site-nav nav {
  display: none;
}

.nav-cta {
  display: none;
  padding: 0.78rem 1.08rem;
  border: 1px solid var(--red);
  color: var(--red);
  box-shadow: inset 0 0 14px rgba(255, 18, 61, 0.18), 0 0 18px rgba(255, 18, 61, 0.34);
}

.menu {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
}

.menu span,
.menu::before,
.menu::after {
  display: block;
  width: 22px;
  height: 2px;
  margin-left: auto;
  background: #fff;
  box-shadow: 0 0 12px var(--red);
  content: "";
}

.menu span {
  margin-top: 6px;
  margin-bottom: 6px;
}

main {
  position: relative;
  z-index: 3;
  width: 100%;
}

.panel {
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 96px 0 84px;
  text-align: center;
  --panel-raw: 0;
  --panel-progress: 0;
  --panel-pass: 0;
  --fly-1: 0;
  --fly-2: 0;
  --fly-3: 0;
  --fly-4: 0;
}

.panel__copy {
  position: relative;
  width: 100%;
  max-width: 940px;
  padding-top: 0;
  overflow: visible;
  perspective: 1200px;
  transform-style: preserve-3d;
  transform:
    translateY(calc((1 - var(--panel-progress)) * 10vh - var(--panel-pass) * 16vh))
    scale(calc(0.72 + var(--panel-progress) * 0.32 + var(--panel-pass) * 0.14));
  opacity: clamp(0, calc(var(--panel-raw) * 6), calc(1 - var(--panel-pass) * 0.82));
  filter: blur(calc((1 - var(--panel-progress)) * 1.6px));
}

.panel__copy::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(780px, 84vw);
  height: 62vh;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 68%, rgba(255, 18, 61, 0.45), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255, 18, 61, 0.26) 38px 40px, transparent 40px 72px);
  filter: blur(0.8px) drop-shadow(0 0 22px rgba(255, 18, 61, 0.9));
  opacity: calc((1 - var(--panel-pass)) * var(--panel-progress) * 0.78);
  transform:
    translate(-50%, -50%)
    rotateX(68deg)
    translateY(calc((1 - var(--panel-progress)) * 32vh));
  transform-origin: center;
  content: "";
}

.panel h1,
.panel h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "Noto Sans SC", Orbitron, sans-serif;
  color: rgba(255, 28, 66, 0.96);
  -webkit-text-stroke: 0;
  text-shadow:
    -2px 0 4px rgba(255, 228, 92, 0.95),
    2px 0 4px rgba(255, 228, 92, 0.95),
    0 -2px 4px rgba(255, 228, 92, 0.9),
    0 2px 4px rgba(255, 228, 92, 0.9),
    0 0 14px rgba(255, 228, 92, 0.64),
    0 0 2px rgba(255, 238, 242, 0.92),
    0 0 10px var(--red),
    0 0 24px rgba(255, 18, 61, 0.98),
    0 0 52px rgba(255, 18, 61, 0.84),
    0 0 104px rgba(255, 18, 61, 0.56);
  filter: drop-shadow(0 0 16px rgba(255, 18, 61, 0.78));
  transform:
    translateY(calc((1 - var(--panel-progress)) * 10vh - var(--panel-pass) * 10vh))
    scale(calc(0.68 + var(--panel-progress) * 0.34 + var(--panel-pass) * 0.1))
    skewX(-9deg);
  transform-origin: center center;
  letter-spacing: 0;
  word-spacing: -0.16em;
  font-kerning: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.panel h1 {
  font-size: clamp(4.6rem, 24vw, 13.4rem);
  line-height: 0.82;
}

.panel h2 {
  font-size: clamp(4rem, 20vw, 11.4rem);
  line-height: 0.9;
}

.panel p {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 1.2rem auto 0;
  font-family: Orbitron, Rajdhani, sans-serif;
  font-size: clamp(0.82rem, 3.1vw, 1.18rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.55), 0 0 28px rgba(255, 18, 61, 0.48);
  transform:
    translateY(calc((1 - var(--panel-progress)) * 13vh - var(--panel-pass) * 15vh))
    translateZ(calc(-420px + var(--panel-progress) * 420px + var(--panel-pass) * 120px));
  opacity: clamp(0, calc((var(--panel-progress) - 0.22) * 4), calc(1 - var(--panel-pass) * 1.2));
}

.flyovers {
  position: absolute;
  inset: -30vh -20vw;
  z-index: 1;
  pointer-events: none;
  perspective: 900px;
  transform-style: preserve-3d;
}

.flyovers span {
  position: absolute;
  left: 50%;
  top: 48%;
  white-space: nowrap;
  font-family: "Noto Sans SC", Orbitron, sans-serif;
  font-size: clamp(3rem, 16vw, 10rem);
  line-height: 0.9;
  color: rgba(255, 28, 66, 0.9);
  -webkit-text-stroke: 0;
  text-shadow:
    -1.5px 0 3px rgba(255, 228, 92, 0.86),
    1.5px 0 3px rgba(255, 228, 92, 0.86),
    0 -1.5px 3px rgba(255, 228, 92, 0.82),
    0 1.5px 3px rgba(255, 228, 92, 0.82),
    0 0 12px rgba(255, 228, 92, 0.5),
    0 0 2px rgba(255, 235, 240, 0.72),
    0 0 9px rgba(255, 18, 61, 0.94),
    0 0 30px rgba(255, 18, 61, 0.78),
    0 0 76px rgba(255, 18, 61, 0.5);
  opacity: calc((1 - var(--fly)) * var(--fly) * 3.9);
  filter: blur(calc((1 - var(--fly)) * 1.4px + var(--fly) * 0.45px));
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--fly-start-x) + var(--fly) * var(--fly-travel-x)))
    translateY(calc(var(--fly-start-y) + var(--fly) * var(--fly-travel-y)))
    scale(calc(0.14 + var(--fly) * 2.92))
    rotateX(calc(24deg - var(--fly) * 16deg))
    skewX(-10deg)
    rotateZ(var(--fly-tilt));
  transform-origin: center;
  letter-spacing: 0;
  word-spacing: -0.18em;
  font-kerning: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.flyovers span:nth-child(1) {
  --fly: var(--fly-1);
  --fly-start-x: -54vw;
  --fly-start-y: -44vh;
  --fly-travel-x: 108vw;
  --fly-travel-y: 86vh;
  --fly-tilt: -7deg;
}

.flyovers span:nth-child(2) {
  --fly: var(--fly-2);
  --fly-start-x: 54vw;
  --fly-start-y: -40vh;
  --fly-travel-x: -110vw;
  --fly-travel-y: 84vh;
  --fly-tilt: 7deg;
}

.flyovers span:nth-child(3) {
  --fly: var(--fly-3);
  --fly-start-x: -58vw;
  --fly-start-y: 42vh;
  --fly-travel-x: 112vw;
  --fly-travel-y: -88vh;
  --fly-tilt: -10deg;
}

.flyovers span:nth-child(4) {
  --fly: var(--fly-4);
  --fly-start-x: 58vw;
  --fly-start-y: 42vh;
  --fly-travel-x: -112vw;
  --fly-travel-y: -88vh;
  --fly-tilt: 10deg;
}

.panel__copy > a,
.join-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 1.8rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--red);
  background: rgba(70, 0, 17, 0.26);
  color: var(--red);
  font-family: Orbitron, Rajdhani, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: inset 0 0 18px rgba(255, 18, 61, 0.18), 0 0 24px rgba(255, 18, 61, 0.42);
}

.join-button {
  position: fixed;
  left: 50%;
  top: calc(108svh - var(--join-progress, 0) * 58svh);
  transform: translateX(-50%) translateY(-50%) scale(calc(0.9 + var(--join-progress, 0) * 0.1));
  opacity: clamp(0, calc((var(--join-progress, 0) - 0.08) * 3.5), 1);
}

.panel--join {
  align-content: center;
  gap: 28px;
}

.feature-strip {
  width: min(1050px, 100%);
  justify-self: start;
  display: grid;
  gap: 16px;
}

.feature-strip article {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  min-height: 108px;
  text-align: left;
}

.feature-icon {
  flex: 0 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  aspect-ratio: 1;
  color: var(--red);
  font-family: "Noto Sans SC", Orbitron, sans-serif;
  font-size: 4.85rem;
  line-height: 1;
  text-shadow:
    0 0 4px rgba(255, 228, 92, 0.9),
    0 0 16px rgba(255, 18, 61, 0.95),
    0 0 34px rgba(255, 18, 61, 0.64);
  filter: drop-shadow(0 0 10px rgba(255, 18, 61, 0.72));
}

.feature-icon--ankh {
  font-size: 5.25rem;
}

.feature-icon--skull {
  font-size: 4.45rem;
}

.feature-icon--circuit::before,
.feature-icon--circuit::after {
  position: absolute;
  content: "";
}

.feature-icon--circuit::before {
  inset: 10px;
  background:
    linear-gradient(var(--cyan), var(--cyan)) 0 50% / 100% 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 50% 0 / 2px 100% no-repeat,
    radial-gradient(circle, var(--yellow) 0 3px, transparent 3.5px) 0 0 / 50% 50%,
    radial-gradient(circle, var(--red) 0 3px, transparent 3.5px) 100% 100% / 50% 50%;
  clip-path: polygon(0 38%, 38% 38%, 38% 0, 62% 0, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0 62%);
  filter: drop-shadow(0 0 8px rgba(39, 237, 255, 0.9));
}

.feature-icon--circuit::after {
  width: 20px;
  aspect-ratio: 1;
  border: 2px solid var(--red);
  box-shadow: 0 0 14px rgba(255, 18, 61, 0.85), inset 0 0 8px rgba(255, 18, 61, 0.4);
  transform: rotate(45deg);
}

.feature-text {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}

.feature-strip h3 {
  margin: 0;
  color: var(--red);
  font-family: Orbitron, Rajdhani, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.feature-strip em {
  display: block;
  margin-top: 0.12rem;
  color: rgba(255, 214, 107, 0.92);
  font-family: "Noto Sans SC", Orbitron, sans-serif;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 214, 107, 0.64), 0 0 22px rgba(255, 18, 61, 0.4);
}

.feature-strip p {
  margin: 0.22rem 0 0;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.pager {
  top: 50%;
  right: max(14px, env(safe-area-inset-right));
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translateY(-50%);
  font-family: Orbitron, Rajdhani, sans-serif;
}

.pager strong {
  color: #fff;
  font-size: 0.84rem;
  text-shadow: 0 0 12px var(--red);
}

.pager span {
  width: 2px;
  height: 54px;
  background: linear-gradient(var(--red) calc(var(--scroll) * 100%), rgba(255, 255, 255, 0.5) 0);
  box-shadow: 0 0 12px var(--red);
}

.pager i,
.pager b {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.48);
}

.pager i {
  background: var(--red);
  box-shadow: 0 0 12px var(--red);
}

.scrub {
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  font-family: Orbitron, Rajdhani, sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.74);
  text-shadow: 0 0 14px rgba(255, 18, 61, 0.64);
}

.progress {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}

.progress span,
.progress i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
}

.progress span {
  width: 0;
  background: linear-gradient(90deg, var(--red), #ff92a8);
}

.progress i {
  width: calc(var(--scroll) * 100%);
  background: linear-gradient(90deg, rgba(39, 237, 255, 0.08), var(--cyan));
  mix-blend-mode: screen;
}

@media (max-width: 759px) {
  :root {
    --mobile-frame-height: calc(100vw * 9 / 16);
    --mobile-lower-top: calc(var(--mobile-frame-height) + 58px);
    --mobile-lower-bottom: calc(44px + env(safe-area-inset-bottom));
    --mobile-lower-height: calc(100svh - var(--mobile-lower-top) - var(--mobile-lower-bottom));
    --mobile-half-lower: calc(var(--mobile-lower-height) / 2);
  }

  .panel {
    align-items: start;
    min-height: 112svh;
    padding: 0;
  }

  .mobile-feed {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: calc(36px + env(safe-area-inset-bottom));
    z-index: 6;
    display: flex;
    align-items: center;
    height: clamp(34px, 9vw, 42px);
    padding: 0;
    overflow: hidden;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(255, 18, 61, 0.2), rgba(2, 0, 6, 0.86) 18%, rgba(2, 0, 6, 0.86) 82%, rgba(39, 237, 255, 0.16)),
      rgba(2, 0, 6, 0.72);
    border-block: 1px solid rgba(63, 255, 117, 0.24);
    box-shadow:
      0 -8px 28px rgba(0, 0, 0, 0.34),
      inset 0 0 18px rgba(63, 255, 117, 0.08);
  }

  .mobile-feed::before,
  .mobile-feed::after {
    content: none;
  }

  .mobile-feed__row {
    display: flex;
    width: max-content;
    gap: 0;
    font-family: VT323, "Noto Sans SC", monospace;
    font-size: clamp(1rem, 4.3vw, 1.22rem);
    font-weight: 400;
    line-height: 1;
    color: #3fff75;
    text-transform: uppercase;
    letter-spacing: 0;
    text-shadow:
      0 0 4px rgba(214, 255, 99, 0.95),
      0 0 12px rgba(63, 255, 117, 0.92),
      0 0 28px rgba(63, 255, 117, 0.7);
    animation:
      mobileFeedSlide 140s linear infinite,
      mobileFeedPulse 2.8s ease-in-out infinite;
    will-change: transform;
  }

  .mobile-feed__row span {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: clamp(34px, 9vw, 42px);
    padding: 0 1.1rem;
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
  }

  .mobile-feed__row span::after {
    margin-left: 1.1rem;
    color: #d6ff63;
    content: "//";
  }

  .mobile-archive {
    position: fixed;
    top: var(--mobile-lower-top);
    right: max(12px, env(safe-area-inset-right));
    height: var(--mobile-half-lower);
    z-index: 3;
    display: grid;
    width: calc(50vw - max(12px, env(safe-area-inset-right)));
    overflow: hidden;
    pointer-events: none;
  }

  .mobile-archive__track {
    display: grid;
    width: 100%;
  }

  .wanted-card {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto min-content;
    align-items: start;
    column-gap: 0.36rem;
    width: 100%;
    min-height: 0;
    padding: 0.26rem 0.34rem;
    overflow: hidden;
    text-align: center;
    color: #ffd66b;
    background:
      linear-gradient(135deg, rgba(38, 9, 13, 0.78), rgba(5, 1, 8, 0.62));
    border: 0;
    box-shadow:
      inset 0 0 22px rgba(255, 18, 61, 0.18),
      0 0 22px rgba(255, 18, 61, 0.22);
    clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    animation: wantedCardFade 72s ease-in-out infinite;
  }

  .wanted-card::before {
    content: none;
  }

  .wanted-card__portrait {
    position: static;
    grid-column: 1;
    grid-row: 4 / 6;
    width: 100%;
    height: auto;
    max-height: none;
    align-self: end;
    object-fit: contain;
    object-position: center center;
    outline: 1px solid rgba(63, 255, 117, 0.88);
    outline-offset: -1px;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow:
      inset 0 0 12px rgba(63, 255, 117, 0.36),
      0 0 10px rgba(63, 255, 117, 0.58),
      0 0 20px rgba(63, 255, 117, 0.28);
    filter: contrast(1.08) saturate(0.9) brightness(0.88);
    transform: none;
  }

  .wanted-card__bio {
    grid-column: 1;
    grid-row: 6 / 8;
    align-self: stretch;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.04rem 0.22rem;
    margin: 0;
    padding: 0.1rem 0 0;
    min-width: 0;
    color: #3fff75;
    font-family: VT323, monospace;
    font-size: clamp(0.44rem, 2.1vw, 0.58rem);
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(63, 255, 117, 0.68);
    border: 0;
    box-shadow: none;
    background: rgba(3, 18, 9, 0.42);
  }

  .wanted-card__bio dt,
  .wanted-card__bio dd {
    margin: 0;
    min-width: 0;
  }

  .wanted-card__bio dt {
    color: rgba(255, 214, 107, 0.88);
  }

  .wanted-card__bio dd {
    color: #3fff75;
    text-align: right;
  }

  .wanted-card strong,
  .wanted-card em,
  .wanted-card h3,
  .wanted-card span,
  .wanted-card p,
  .wanted-card small {
    position: relative;
    z-index: 1;
  }

  .wanted-card strong,
  .wanted-card em {
    grid-column: 1 / -1;
  }

  .wanted-card span,
  .wanted-card h3 {
    grid-column: 1 / -1;
  }

  .wanted-card p,
  .wanted-card small {
    grid-column: 2;
  }

  .wanted-card strong { grid-row: 1; }
  .wanted-card em { grid-row: 2; }
  .wanted-card span { grid-row: 3; }
  .wanted-card h3 { grid-row: 4; }
  .wanted-card p { grid-row: 5; }
  .wanted-card small { grid-row: 6; }

  .wanted-card strong {
    display: block;
    color: var(--red);
    font-family: Orbitron, Rajdhani, sans-serif;
    font-size: clamp(0.62rem, 3vw, 0.84rem);
    font-weight: 900;
    align-self: center;
    line-height: 0.86;
    text-shadow: 0 0 12px rgba(255, 18, 61, 0.85), 0 0 28px rgba(255, 18, 61, 0.5);
  }

  .wanted-card em {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 0.02rem;
    margin-bottom: 0.12rem;
    color: rgba(255, 214, 107, 0.9);
    font-family: "Noto Sans SC", Orbitron, sans-serif;
    font-size: clamp(0.54rem, 2.65vw, 0.72rem);
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 12px rgba(255, 214, 107, 0.62), 0 0 20px rgba(255, 18, 61, 0.42);
  }

  .wanted-card span {
    display: block;
    align-self: end;
    margin-top: 0;
    color: #3fff75;
    font-family: VT323, "Noto Sans SC", monospace;
    font-size: clamp(0.5rem, 2.45vw, 0.68rem);
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(63, 255, 117, 0.7);
  }

  .wanted-card h3 {
    margin: 0.05rem 0 0;
    color: var(--paper);
    font-family: Orbitron, Rajdhani, sans-serif;
    font-size: clamp(0.56rem, 2.7vw, 0.74rem);
    text-transform: uppercase;
  }

  .wanted-card p {
    align-self: center;
    margin: 0.08rem 0 0;
    font-family: Rajdhani, system-ui, sans-serif;
    font-size: clamp(0.46rem, 2.25vw, 0.6rem);
    font-weight: 700;
    line-height: 1.18;
    color: rgba(247, 251, 255, 0.78);
  }

  .wanted-card small {
    display: block;
    align-self: start;
    margin-top: 0.08rem;
    color: rgba(255, 214, 107, 0.86);
    font-family: VT323, monospace;
    font-size: clamp(0.5rem, 2.35vw, 0.64rem);
    text-transform: uppercase;
  }

  .wanted-card small::after {
    display: block;
    width: clamp(28px, 13vw, 48px);
    aspect-ratio: 1.55;
    margin: 0.06rem auto 0;
    opacity: 0.72;
    background:
      radial-gradient(ellipse at 50% 50%, transparent 0 17%, rgba(63, 255, 117, 0.8) 18% 20%, transparent 21% 35%, rgba(63, 255, 117, 0.7) 36% 38%, transparent 39% 55%, rgba(63, 255, 117, 0.62) 56% 58%, transparent 59%),
      conic-gradient(from -90deg at 50% 50%, rgba(63, 255, 117, 0.92) 0 1.5deg, transparent 1.5deg 28deg, rgba(63, 255, 117, 0.82) 28deg 29.5deg, transparent 29.5deg 58deg, rgba(63, 255, 117, 0.82) 58deg 59.5deg, transparent 59.5deg 88deg, rgba(63, 255, 117, 0.92) 88deg 91.5deg, transparent 91.5deg 118deg, rgba(63, 255, 117, 0.82) 118deg 119.5deg, transparent 119.5deg 148deg, rgba(63, 255, 117, 0.82) 148deg 149.5deg, transparent 149.5deg 178deg, rgba(63, 255, 117, 0.92) 178deg 181.5deg, transparent 181.5deg 208deg, rgba(63, 255, 117, 0.82) 208deg 209.5deg, transparent 209.5deg 238deg, rgba(63, 255, 117, 0.82) 238deg 239.5deg, transparent 239.5deg 268deg, rgba(63, 255, 117, 0.92) 268deg 271.5deg, transparent 271.5deg 298deg, rgba(63, 255, 117, 0.82) 298deg 299.5deg, transparent 299.5deg 328deg, rgba(63, 255, 117, 0.82) 328deg 329.5deg, transparent 329.5deg 360deg);
    clip-path: ellipse(48% 42% at 50% 50%);
    filter: drop-shadow(0 0 4px rgba(63, 255, 117, 0.9)) drop-shadow(0 0 10px rgba(63, 255, 117, 0.45));
    content: "";
  }

  .panel__copy {
    position: fixed;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 100vw;
    min-height: var(--mobile-frame-height);
    height: var(--mobile-frame-height);
    max-width: none;
    z-index: 4;
    perspective: none;
    transform: none;
    opacity: 1;
    filter: none;
    overflow: hidden;
    pointer-events: none;
  }

  .flyovers {
    display: block;
    visibility: visible;
    inset: -12vw -28vw;
    z-index: 1;
    perspective: 760px;
  }

  .flyovers span {
    top: 50%;
    font-size: clamp(2.45rem, 18vw, 5.2rem);
    opacity: calc((1 - var(--fly)) * var(--fly) * 3.25);
    filter: blur(calc((1 - var(--fly)) * 1px + var(--fly) * 0.35px));
    transform:
      translate(-50%, -50%)
      translateX(calc(var(--fly-start-x) + var(--fly) * var(--fly-travel-x)))
      translateY(calc(var(--fly-start-y) + var(--fly) * var(--fly-travel-y)))
      scale(calc(0.18 + var(--fly) * 2.28))
      rotateX(calc(22deg - var(--fly) * 14deg))
      skewX(-10deg)
      rotateZ(var(--fly-tilt));
  }

  .flyovers span:nth-child(1) {
    --fly-start-x: -58vw;
    --fly-start-y: -28vw;
    --fly-travel-x: 116vw;
    --fly-travel-y: 56vw;
  }

  .flyovers span:nth-child(2) {
    --fly-start-x: 58vw;
    --fly-start-y: -26vw;
    --fly-travel-x: -116vw;
    --fly-travel-y: 54vw;
  }

  .flyovers span:nth-child(3) {
    --fly-start-x: -60vw;
    --fly-start-y: 27vw;
    --fly-travel-x: 120vw;
    --fly-travel-y: -56vw;
  }

  .flyovers span:nth-child(4) {
    --fly-start-x: 60vw;
    --fly-start-y: 27vw;
    --fly-travel-x: -120vw;
    --fly-travel-y: -56vw;
  }

  .panel h1,
  .panel h2 {
    width: 100vw;
    max-width: 100vw;
    font-size: clamp(3.2rem, 20vw, 5.6rem);
    line-height: 0.86;
    white-space: nowrap;
    opacity: min(
      clamp(0, calc(var(--panel-raw) * 8), 1),
      clamp(0, calc(1 - var(--panel-pass) * 4), 1)
    );
    transform:
      scale(calc(0.08 + var(--panel-progress) * 0.98 + var(--panel-pass) * 0.08))
      skewX(-9deg);
    transform-origin: center center;
  }

  .panel p {
    position: absolute;
    left: 50%;
    top: calc(50% + clamp(2rem, 9vw, 3rem));
    display: block;
    width: min(86vw, 420px);
    max-width: none;
    margin: 0;
    font-size: clamp(0.52rem, 2.55vw, 0.72rem);
    line-height: 1.22;
    letter-spacing: 0.16em;
    text-align: center;
    transform:
      translateX(-50%)
      translateY(calc((1 - var(--panel-progress)) * 12px - var(--panel-pass) * 16px));
    opacity: min(
      clamp(0, calc((var(--panel-progress) - 0.24) * 5), 1),
      clamp(0, calc(1 - var(--panel-pass) * 4), 1)
    );
  }

  .panel__copy > a {
    display: none;
  }

  .feature-strip {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    top: calc(var(--mobile-lower-top) - 24px);
    width: calc(50vw - max(12px, env(safe-area-inset-left)));
    height: calc(var(--mobile-half-lower) + 24px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    margin-right: auto;
    justify-self: start;
    align-self: start;
    gap: clamp(4px, 1.4vw, 8px);
    opacity: clamp(0, calc((var(--join-progress, 0) - 0.14) * 5), 1);
    transform: translateY(calc((1 - var(--join-progress, 0)) * 14px));
    will-change: transform, opacity;
  }

  .feature-strip article {
    flex: 0 0 calc((100% - clamp(8px, 2.8vw, 16px)) / 3);
    min-height: 0;
    gap: clamp(5px, 1.5vw, 8px);
    align-items: center;
    opacity: clamp(0, calc((var(--join-progress, 0) - var(--feature-depth)) * 9), 1);
    transform: translateY(calc((1 - var(--join-progress, 0) + var(--feature-depth)) * 42px));
    will-change: transform, opacity;
  }

  .feature-strip article:nth-child(1) {
    --feature-depth: 0;
  }

  .feature-strip article:nth-child(2) {
    --feature-depth: 0.12;
  }

  .feature-strip article:nth-child(3) {
    --feature-depth: 0.24;
  }

  .feature-icon {
    width: clamp(34px, 11vw, 48px);
    font-size: clamp(1.8rem, 7vw, 2.45rem);
  }

  .feature-icon--ankh {
    font-size: clamp(2rem, 7.7vw, 2.7rem);
  }

  .feature-icon--skull {
    font-size: clamp(1.65rem, 6.4vw, 2.25rem);
  }

  .feature-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 30px;
  }

  .feature-strip h3 {
    font-size: clamp(0.78rem, 3.9vw, 1.04rem);
    line-height: 0.94;
  }

  .feature-strip em {
    margin-top: 0.08rem;
    font-size: clamp(0.58rem, 2.95vw, 0.8rem);
    line-height: 1;
  }

  .join-button {
    left: 50%;
    top: clamp(
      calc(var(--mobile-lower-top) + 54px),
      calc(var(--mobile-lower-top) + var(--mobile-half-lower) + var(--mobile-half-lower) * 0.42),
      calc(100svh - 86px - env(safe-area-inset-bottom))
    );
    z-index: 7;
    max-width: calc(100vw - 28px);
    min-height: 46px;
    margin-top: 0;
    padding: 0.78rem 1.08rem;
    font-size: clamp(0.62rem, 3vw, 0.78rem);
    white-space: nowrap;
    pointer-events: auto;
    transform:
      translateX(-50%)
      translateY(calc(-50% + (1 - var(--join-progress, 0)) * 16px))
      scale(calc(0.92 + var(--join-progress, 0) * 0.08));
    opacity: clamp(0, calc((var(--join-progress, 0) - 0.16) * 5), 1);
  }
}

@keyframes mobileFeedSlide {
  from {
    transform: translateX(102vw);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes mobileFeedPulse {
  0%,
  100% {
    opacity: 0.78;
    filter: brightness(0.92) saturate(1);
    text-shadow:
      0 0 3px rgba(214, 255, 99, 0.75),
      0 0 10px rgba(63, 255, 117, 0.72),
      0 0 22px rgba(63, 255, 117, 0.48);
  }

  50% {
    opacity: 1;
    filter: brightness(1.32) saturate(1.35);
    text-shadow:
      0 0 5px rgba(214, 255, 99, 1),
      0 0 16px rgba(63, 255, 117, 1),
      0 0 36px rgba(63, 255, 117, 0.88);
  }
}

.wanted-card:nth-child(1) { animation-delay: 0s; }
.wanted-card:nth-child(2) { animation-delay: 6s; }
.wanted-card:nth-child(3) { animation-delay: 12s; }
.wanted-card:nth-child(4) { animation-delay: 18s; }
.wanted-card:nth-child(5) { animation-delay: 24s; }
.wanted-card:nth-child(6) { animation-delay: 30s; }
.wanted-card:nth-child(7) { animation-delay: 36s; }
.wanted-card:nth-child(8) { animation-delay: 42s; }
.wanted-card:nth-child(9) { animation-delay: 48s; }
.wanted-card:nth-child(10) { animation-delay: 54s; }
.wanted-card:nth-child(11) { animation-delay: 60s; }
.wanted-card:nth-child(12) { animation-delay: 66s; }

@keyframes wantedCardFade {
  0%,
  6% {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  9%,
  16% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  19%,
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
}

@media (min-width: 760px) {
  :root {
    --desktop-edge: clamp(34px, 4vw, 72px);
    --desktop-midline: 45svh;
    --desktop-bottom-safe: clamp(108px, 13vh, 142px);
    --desktop-half-height: calc(55svh - var(--desktop-bottom-safe));
  }

  .site-nav {
    left: var(--desktop-edge);
    right: var(--desktop-edge);
    grid-template-columns: 1fr auto auto auto;
  }

  .site-nav nav {
    display: flex;
    gap: clamp(22px, 3vw, 46px);
    color: rgba(255, 255, 255, 0.92);
  }

  .site-nav nav a:first-child {
    color: var(--red);
  }

  .nav-cta {
    display: inline-flex;
  }

  .panel {
    padding-inline: clamp(42px, 6vw, 96px);
  }

  .panel h1 {
    font-size: clamp(7rem, 13vw, 14rem);
  }

  .panel h2 {
    font-size: clamp(6rem, 12vw, 12.5rem);
  }

  .feature-strip {
    position: fixed;
    left: var(--desktop-edge);
    top: var(--desktop-midline);
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(50vw - var(--desktop-edge));
    height: var(--desktop-half-height);
    gap: clamp(10px, 1.3vh, 16px);
    overflow: hidden;
    opacity: clamp(0, calc((var(--join-progress, 0) - 0.14) * 5), 1);
    transform: translateY(calc((1 - var(--join-progress, 0)) * 18px));
    will-change: transform, opacity;
  }

  .feature-strip article {
    flex: 0 0 calc((100% - clamp(20px, 2.6vh, 32px)) / 3);
    min-height: 0;
    gap: clamp(14px, 1.6vw, 22px);
    opacity: clamp(0, calc((var(--join-progress, 0) - var(--feature-depth)) * 9), 1);
    transform: translateY(calc((1 - var(--join-progress, 0) + var(--feature-depth)) * 76px));
    will-change: transform, opacity;
  }

  .feature-strip h3 {
    font-size: clamp(1.55rem, 2.85vw, 2.55rem);
    line-height: 0.95;
  }

  .feature-strip em {
    margin-top: 0.22rem;
    font-size: clamp(1.08rem, 2vw, 1.62rem);
  }

  .feature-strip article:nth-child(1) {
    --feature-depth: 0;
  }

  .feature-strip article:nth-child(2) {
    --feature-depth: 0.12;
  }

  .feature-strip article:nth-child(3) {
    --feature-depth: 0.24;
  }

  .feature-icon {
    width: clamp(64px, 6vw, 92px);
    font-size: clamp(3rem, 4.9vw, 4.7rem);
  }

  .feature-icon--ankh {
    font-size: clamp(3.3rem, 5.4vw, 5.1rem);
  }

  .feature-icon--skull {
    font-size: clamp(2.8rem, 4.5vw, 4.3rem);
  }

  .join-button {
    top: calc(var(--desktop-midline) - 46px);
    z-index: 7;
    min-width: clamp(280px, 28vw, 440px);
    min-height: clamp(60px, 7vh, 76px);
    margin-top: 0;
    padding: clamp(1rem, 1.5vh, 1.25rem) clamp(1.8rem, 3vw, 3rem);
    font-size: clamp(1.02rem, 1.3vw, 1.42rem);
    border-width: 2px;
    background:
      linear-gradient(90deg, rgba(255, 18, 61, 0.16), rgba(70, 0, 17, 0.4), rgba(39, 237, 255, 0.08));
    box-shadow:
      inset 0 0 24px rgba(255, 18, 61, 0.26),
      0 0 30px rgba(255, 18, 61, 0.55),
      0 0 54px rgba(39, 237, 255, 0.14);
    pointer-events: auto;
    transform:
      translateX(-50%)
      translateY(calc(-50% + (1 - var(--join-progress, 0)) * 18vh))
      scale(calc(0.92 + var(--join-progress, 0) * 0.08));
    opacity: clamp(0, calc((var(--join-progress, 0) - 0.16) * 5), 1);
  }

  .mobile-feed {
    position: fixed;
    left: var(--desktop-edge);
    right: var(--desktop-edge);
    bottom: calc(42px + env(safe-area-inset-bottom));
    z-index: 6;
    display: flex;
    align-items: center;
    height: clamp(38px, 4.5vh, 48px);
    overflow: hidden;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(255, 18, 61, 0.22), rgba(2, 0, 6, 0.82) 16%, rgba(2, 0, 6, 0.82) 84%, rgba(39, 237, 255, 0.16)),
      rgba(2, 0, 6, 0.7);
    border-block: 1px solid rgba(63, 255, 117, 0.24);
    box-shadow:
      0 -10px 34px rgba(0, 0, 0, 0.32),
      inset 0 0 20px rgba(63, 255, 117, 0.08);
  }

  .mobile-feed__row {
    display: flex;
    width: max-content;
    font-family: VT323, "Noto Sans SC", monospace;
    font-size: clamp(1.08rem, 1.22vw, 1.42rem);
    font-weight: 400;
    line-height: 1;
    color: #3fff75;
    text-transform: uppercase;
    text-shadow:
      0 0 4px rgba(214, 255, 99, 0.95),
      0 0 12px rgba(63, 255, 117, 0.92),
      0 0 28px rgba(63, 255, 117, 0.7);
    animation:
      mobileFeedSlide 170s linear infinite,
      mobileFeedPulse 2.8s ease-in-out infinite;
    will-change: transform;
  }

  .mobile-feed__row span {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: clamp(38px, 4.5vh, 48px);
    padding: 0 1.25rem;
    white-space: nowrap;
  }

  .mobile-feed__row span::after {
    margin-left: 1.25rem;
    color: #d6ff63;
    content: "//";
  }

  .mobile-archive {
    position: fixed;
    top: var(--desktop-midline);
    right: var(--desktop-edge);
    bottom: auto;
    z-index: 3;
    display: grid;
    width: calc(50vw - var(--desktop-edge));
    height: var(--desktop-half-height);
    overflow: hidden;
    pointer-events: none;
  }

  .mobile-archive__track {
    display: grid;
    width: 100%;
  }

  .wanted-card {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 37% minmax(0, 1fr);
    align-items: center;
    column-gap: 0.86rem;
    width: 100%;
    min-height: 0;
    padding: 0.72rem 0.88rem;
    overflow: hidden;
    text-align: right;
    color: #ffd66b;
    background:
      linear-gradient(135deg, rgba(38, 9, 13, 0.72), rgba(5, 1, 8, 0.58)),
      repeating-linear-gradient(0deg, rgba(255, 214, 107, 0.07) 0 1px, transparent 1px 7px);
    border: 1px solid rgba(255, 214, 107, 0.36);
    box-shadow:
      inset 0 0 24px rgba(255, 18, 61, 0.16),
      0 0 24px rgba(255, 18, 61, 0.18);
    clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    animation: wantedCardFade 72s ease-in-out infinite;
  }

  .wanted-card::before {
    content: none;
  }

  .wanted-card__portrait {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 6;
    width: 100%;
    height: 100%;
    max-height: none;
    align-self: stretch;
    object-fit: cover;
    transform: none;
  }

  .wanted-card strong,
  .wanted-card em,
  .wanted-card h3,
  .wanted-card span,
  .wanted-card p,
  .wanted-card small {
    grid-column: 2;
    position: relative;
    z-index: 2;
  }

  .wanted-card strong {
    display: block;
    color: var(--red);
    font-family: Orbitron, Rajdhani, sans-serif;
    font-size: clamp(1.35rem, 2.1vw, 2.05rem);
    font-weight: 900;
    line-height: 0.92;
    text-shadow: 0 0 12px rgba(255, 18, 61, 0.85), 0 0 28px rgba(255, 18, 61, 0.5);
  }

  .wanted-card em {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 0.08rem;
    color: rgba(255, 214, 107, 0.9);
    font-family: "Noto Sans SC", Orbitron, sans-serif;
    font-size: clamp(1.05rem, 1.58vw, 1.45rem);
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 12px rgba(255, 214, 107, 0.62), 0 0 20px rgba(255, 18, 61, 0.42);
  }

  .wanted-card span {
    display: block;
    margin-top: 0.25rem;
    color: #3fff75;
    font-family: VT323, "Noto Sans SC", monospace;
    font-size: clamp(1.08rem, 1.55vw, 1.45rem);
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(63, 255, 117, 0.7);
  }

  .wanted-card h3 {
    margin: 0.08rem 0 0;
    color: var(--paper);
    font-family: Orbitron, Rajdhani, sans-serif;
    font-size: clamp(1.12rem, 1.42vw, 1.38rem);
    text-transform: uppercase;
  }

  .wanted-card p {
    margin: 0.24rem 0 0;
    font-family: Rajdhani, system-ui, sans-serif;
    font-size: clamp(0.94rem, 1.18vw, 1.08rem);
    font-weight: 700;
    line-height: 1.18;
    color: rgba(247, 251, 255, 0.78);
  }

  .wanted-card small {
    display: block;
    margin-top: 0.28rem;
    color: rgba(255, 214, 107, 0.86);
    font-family: VT323, monospace;
    font-size: clamp(1rem, 1.28vw, 1.22rem);
    text-transform: uppercase;
  }

  .scrub {
    left: clamp(34px, 4vw, 72px);
    right: clamp(34px, 4vw, 72px);
  }
}

@media (max-width: 430px) {
  .brand {
    font-size: 0.68rem;
  }

  .panel p {
    letter-spacing: 0.12em;
  }

  .pager {
    right: 9px;
  }
}