/* The landing page carries its own styles rather than the room's whole sheet.
   It needs a canvas, a wordmark and two hit targets; pulling in the tuner, the
   copy block, the product view and the A/B player to get them would mean this
   page paying for four components it does not render. The tokens below are
   copied deliberately and are the only duplication. */
:root{
  --mono:"DM Mono", ui-monospace, monospace;
  --grot:"Archivo", system-ui, sans-serif;
  --off:#050506;
  --signal:#C9C6C0;
  --dim:#6E6B66;
  --ash:#403D39;
  --phosphor:#DDE7EE;
  --cold:168, 200, 232;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:#000; color:var(--signal);
  font-family:var(--grot);
  overflow:hidden;
}

.room{ position:fixed; inset:0; background:var(--off); overflow:hidden; }
.gl{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:15; pointer-events:none;
  opacity:0; image-rendering:pixelated;
}
.gl[data-ready="true"]{ opacity:1; }
/* Black until the renderer has something to show, which is also just what a
   CRT does. */
.warmup{
  position:absolute; inset:0; z-index:17; background:#000;
  transition:opacity .5s ease;
}
[data-gl-ready="true"] .warmup,
[data-gl-failed="true"] .warmup{ opacity:0; pointer-events:none; }

.ui{ position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; }
.ident{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.2rem;
  background:linear-gradient(#000 0%, rgba(0,0,0,.78) 58%, transparent 100%);
}
.ident__mark{
  font-size:.82rem; letter-spacing:.42em; text-transform:uppercase;
  font-variation-settings:"wdth" 112,"wght" 600;
}
.ident__meta{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
}

/* ================================================================ THE CHOICE

   Two real buttons over the glass, so the menu the CRT draws is selectable
   with a keyboard, reachable by a screen reader and tappable on a phone. The
   drawing and the control are deliberately separate things: the picture gets
   the room's dither, scan and bloom, which no DOM element can, and the
   control gets focus and semantics, which no texture can.

   They are transparent ONLY once the renderer is up. With no WebGL there is
   no menu on the glass to point at, so they fall back to being the visible
   text they always were rather than leaving an empty room with two invisible
   rectangles in it. */
/* Positioned to sit ON the rows the CRT draws, not merely near them: the
   focus ring is the only thing a keyboard user has to go on once the labels
   are transparent, and a ring floating in the dark below the words reads as
   a rendering fault rather than as a cursor.

   The tops are DERIVED, not eyeballed — the first pass was measured off a
   screenshot and stopped being right the moment the camera moved. For the
   landing camera (0.78 m from the glass, 66 deg vertical field) the rows
   centre at 46.5% and 55.1% of viewport height:

       centre% = 50 - (row_world_y - eye_y) / (tan(fov/2) * distance) * 50

   Height only, and that is what makes a percentage safe here: perspective
   takes a VERTICAL field, so the aspect ratio moves what is visible left and
   right and leaves these two numbers alone. A phone and a desktop put the
   rows at the same fraction of their own height.

   The bands are taller than the words and adjacent, so there is no dead gap
   between them to click into. */
.pick{
  position:absolute; left:50%; transform:translateX(-50%);
  width:min(38vw, 15rem); height:6.4%;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:.9rem;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--signal);
}
.pick:focus-visible{ outline:1px solid var(--phosphor); outline-offset:4px; }
[data-gl-ready="true"] .pick{ color:transparent; }
/* Focus has to stay visible even when the label does not: the ring is the
   only thing telling a keyboard user which row the room is previewing. */
[data-gl-ready="true"] .pick:focus-visible{
  outline:1px solid rgba(var(--cold), .55);
  outline-offset:0;
}

.strip{
  margin-top:auto;
  padding:.7rem 1.2rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
  background:linear-gradient(transparent, #000 60%);
}

@media (prefers-reduced-motion: reduce){
  .warmup{ transition:none; }
}