/* ═══════════════════════════════════════════════════════════════════
   JB·DEV — CRACKTRO VOID QUEUE
   World: emissive black void; one bitmap face (Silkscreen) at two
   sizes; four dust neutrals ash→ivory; one signal amber. Rank is
   depth: brightness step + letterspacing + drift rate. No rules,
   boxes or dividers. Overlap allowed; enclosure never.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --void: #050505;
  --dust-0: #f2efe6; /* ivory — front plane */
  --dust-1: #b9b6ac;
  --dust-2: #7d7b74;
  --dust-3: #4a4944;
  --amber: #e8a33d;
  --f-bit: "Silkscreen", ui-monospace, monospace;
  /* the world commits to two sizes: display + one text size */
  --display: clamp(1.5rem, 5.2vw, 3.4rem);
  --text: .75rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--dust-0);
  font-family: var(--f-bit);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amber); color: var(--void); }

[hidden] { display: none !important; }

.void {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── drifting dust fields (three depths, rear-only motion) ──────── */
.dust {
  position: fixed;
  inset: -100px;
  pointer-events: none;
  background-repeat: repeat;
}
.dust--far {
  background-image: radial-gradient(circle, var(--dust-3) 1px, transparent 1.4px);
  background-size: 90px 70px;
  animation: drift 90s linear infinite;
}
.dust--mid {
  background-image: radial-gradient(circle, var(--dust-3) 1px, transparent 1.5px);
  background-size: 140px 110px;
  background-position: 30px 40px;
  animation: drift 55s linear infinite;
}
.dust--near {
  background-image: radial-gradient(circle, var(--dust-2) 1.2px, transparent 1.7px);
  background-size: 220px 170px;
  background-position: 80px 20px;
  animation: drift 32s linear infinite;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-160px, 90px, 0); }
}

/* ── top strip: no enclosure, just baselines ────────────────────── */
.void__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem clamp(1.2rem, 4vw, 3rem);
  position: relative;
  z-index: 2;
}
.void__board {
  font-size: var(--text);
  letter-spacing: .5em;
  color: var(--dust-2);
}
.void__lang {
  background: none;
  border: 0;
  font-family: var(--f-bit);
  font-size: var(--text);
  letter-spacing: .3em;
  color: var(--dust-2);
  cursor: pointer;
  padding: .3rem .2rem;
}
.void__lang-sep { margin: 0 .35rem; color: var(--dust-3); }
html[lang="es"] .void__lang-opt:first-child,
html[lang="en"] .void__lang-opt:last-child {
  color: var(--amber);
  text-shadow: 0 0 10px rgba(232, 163, 61, .5);
}
.void__lang:hover, .void__lang:focus-visible { color: var(--dust-1); }
.void__lang:focus-visible { outline: 1px solid var(--amber); outline-offset: 4px; }

/* ── main queue ───────────────────────────────────────────────────
   mobile-first: content flows naturally and the page scrolls when it
   needs to; margin-block:auto keeps the centered title-screen feel
   whenever everything still fits one viewport */
.void__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  padding: 2rem 1.2rem 2.5rem;
  margin-block: auto;
  position: relative;
  z-index: 2;
}

.void__name {
  font-size: var(--display);
  letter-spacing: .06em;
  color: var(--dust-0);
  text-shadow: 0 0 24px rgba(242, 239, 230, .28);
  display: flex;
  align-items: center;
  gap: .5em;
}
.void__caret {
  width: .45em;
  height: 1.05em;
  background: var(--amber);
  box-shadow: 0 0 14px rgba(232, 163, 61, .8);
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.void__role {
  font-size: var(--text);
  letter-spacing: .3em;
  color: var(--dust-1);
}

/* the queue: each line one depth step back — dimmer, wider tracked */
.queue {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin-top: 1rem;
}
.queue__item { font-size: var(--text); }
.queue__item--d1 { color: var(--dust-1); letter-spacing: .3em; }
.queue__item--d2 { color: var(--dust-2); letter-spacing: .3em; }
.queue__item--d3 { color: var(--dust-3); letter-spacing: .3em; }
.queue__item--d4 { color: var(--dust-3); letter-spacing: .3em; }

.void__line { max-width: 60ch; }
.void__line--d2 { color: var(--dust-2); letter-spacing: .28em; font-size: var(--text); }
.void__line--d3 { color: var(--dust-3); letter-spacing: .28em; font-size: var(--text); }

/* contact: front plane again, amber on probe */
.void__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem 2.6rem;
  margin-top: 1.2rem;
}
.void__link {
  color: var(--dust-1);
  text-decoration: none;
  font-size: var(--text);
  letter-spacing: .24em;
  padding: .4rem .2rem;
  transition: color .2s, text-shadow .2s;
}
.void__link:hover, .void__link:focus-visible {
  color: var(--amber);
  text-shadow: 0 0 12px rgba(232, 163, 61, .6);
}
.void__link:focus-visible { outline: 1px solid var(--amber); outline-offset: 4px; }

/* ── the probe form: fields ride baselines, focus is the amber signal ── */
.probe {
  width: min(34rem, 100%);
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.probe__title {
  font-size: var(--text);
  letter-spacing: .42em;
  color: var(--dust-2);
}
.probe__fields {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.probe__label {
  font-size: var(--text);
  letter-spacing: .3em;
  color: var(--dust-3);
  display: block;
  text-align: left;
  margin-bottom: .3rem;
  cursor: text;
}
.probe__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dust-3);
  color: var(--dust-1);
  font-family: var(--f-bit);
  font-size: var(--text);
  letter-spacing: .14em;
  padding: .5rem .1rem .45rem;
  caret-color: var(--amber);
  transition: border-color .2s, box-shadow .2s;
}
.probe__input::placeholder { color: var(--dust-3); }
.probe__input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 10px 16px -14px rgba(232, 163, 61, .55);
}
.probe__input--message { resize: vertical; min-height: 3rem; }

/* honeypot: off-screen but present in the DOM */
.probe__hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.probe__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.probe__send {
  background: none;
  border: 0;
  color: var(--dust-1);
  font-family: var(--f-bit);
  font-size: var(--text);
  letter-spacing: .42em;
  padding: .4rem .2rem;
  cursor: pointer;
  transition: color .2s, text-shadow .2s;
}
.probe__send:hover, .probe__send:focus-visible {
  color: var(--amber);
  text-shadow: 0 0 12px rgba(232, 163, 61, .6);
}
.probe__send:focus-visible { outline: 1px solid var(--amber); outline-offset: 4px; }
.probe__send[disabled] {
  color: var(--dust-3);
  text-shadow: none;
  cursor: wait;
}
.probe__status {
  font-size: var(--text);
  letter-spacing: .24em;
  min-height: 1.4em;
  color: var(--dust-1);
}
.probe__status--ok {
  color: var(--amber);
  text-shadow: 0 0 10px rgba(232, 163, 61, .5);
}
.probe__status--err { color: var(--dust-1); }

.void__foot {
  padding: 1.2rem;
  text-align: center;
  font-size: var(--text);
  letter-spacing: .4em;
  color: var(--dust-3);
  position: relative;
  z-index: 2;
}

/* mobile-first: the base above carries the narrow-shed tracking;
   wider screens recover the full letterspacing depth ladder
   (brightness steps stay intact at every width) */
@media (min-width: 641px) {
  .void__name { letter-spacing: .12em; }
  .void__role { letter-spacing: .42em; }
  .queue__item--d2 { letter-spacing: .4em; }
  .queue__item--d3 { letter-spacing: .5em; }
  .queue__item--d4 { letter-spacing: .6em; }
  .void__line--d3 { letter-spacing: .36em; }
  .void__link { letter-spacing: .34em; }
}

@media (prefers-reduced-motion: reduce) {
  .dust { animation: none; }
  .void__caret { animation: none; }
}