/* ==========================================================================
   8xy — interface layer
   What floats over the render: the placeholder message, a minimal HUD, the
   sound toggle, the skip control and the custom cursor.
   ========================================================================== */

.ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.ui > * { pointer-events: auto; }

/* ── HUD ─────────────────────────────────────────────────────────────────── */
/* Fixed, not absolute — once the Home page beneath it scrolls, the sound
   toggle must stay pinned to the viewport corner rather than scrolling away. */

.hud {
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  pointer-events: none;
}
.hud.is-visible { opacity: 1; }
.hud > * { pointer-events: auto; }

.hud__corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.hud__corner--tr { top: var(--gutter); right: var(--gutter); align-items: flex-end; }

/* ── Sound control ──────────────────────────────────────────────────────── */

.ctl {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--tx-2);
  transition: color 0.35s var(--ease);
}
.ctl:hover { color: var(--tx-0); }
.ctl__label { font-size: 0.52rem; letter-spacing: 0.3em; }
.ctl__bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.ctl__bars i {
  display: block;
  width: 2px;
  background: currentColor;
  height: 3px;
}
/* Bars only dance while sound is on; muted collapses them to a flat line. */
.ctl[data-on="true"] .ctl__bars i { animation: eq 1.1s ease-in-out infinite; }
.ctl[data-on="true"] .ctl__bars i:nth-child(2) { animation-delay: 0.18s; }
.ctl[data-on="true"] .ctl__bars i:nth-child(3) { animation-delay: 0.36s; }
.ctl[data-on="true"] .ctl__bars i:nth-child(4) { animation-delay: 0.09s; }
.ctl[data-on="false"] { color: var(--tx-3); }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }

/* ── Skip ───────────────────────────────────────────────────────────────── */

.skip {
  position: fixed;
  bottom: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--tx-3);
  font-size: 0.54rem;
  letter-spacing: 0.28em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--ease) 1.2s, color 0.3s var(--ease);
}
.skip.is-visible { opacity: 1; pointer-events: auto; }
.skip:hover { color: var(--tx-0); }
.skip__esc {
  border: 1px solid var(--hair);
  padding: 0.2rem 0.4rem;
  font-size: 0.5rem;
}

/* The pointer itself is the comet cursor in js/site/cursor.js — shared with
   every other page — rather than a ring tied to this file's chrome. */