/* ═══════════════════════════════════════════════════════════
   04 — LOGO
   The dancing POPL wordmark. Position:fixed letters that
   the logo JS module drives every frame.
   Variants:
     .letter            white solid (default)
     .letter.accent     terracotta (the 'o' permanently)
     .letter.morph      hover state — outlined / "showing bones"
   Remove this + js/02-logo.js to remove the wordmark entirely.
   ═══════════════════════════════════════════════════════════ */

.logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10;
  /* keep children in a flat 2D space — no inherited 3D rotation */
  transform-style: flat;
  perspective: none;
}

.letter {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--fg);
  user-select: none;
  pointer-events: auto;
  /* base transform; JS overwrites left/top/font-size every frame.
     Strict 2D: translate only. NEVER add rotate, rotate3d, or any
     transform that could flip the glyph. */
  transform: translate(-50%, -50%);
  transform-style: flat;
  backface-visibility: visible;
  transition: color .35s var(--ease-out);
  will-change: left, top, font-size;
}

.letter.accent { color: var(--accent); }

/* hover transform — letter becomes its outlined self briefly
   (the "adaptive reuse" moment: showing its bones, then rebuilding) */
.letter.morph {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
  text-stroke: 1.5px var(--fg);
  transition:
    color .15s var(--ease-out),
    -webkit-text-stroke .15s var(--ease-out);
}
.letter.accent.morph {
  -webkit-text-stroke-color: var(--accent);
  text-stroke-color: var(--accent);
}

/* ─── docked lockup: "we are popl™" ─────────────────────
   Two small text bits that flank the animated letters when
   the wordmark is docked in the top-left corner. They fade
   in via the scroll module (.show class).                 */
.dock-prefix,
.dock-tm {
  position: fixed;
  z-index: 11;
  font-family: var(--font-display);
  color: var(--fg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease-out) .05s;
  user-select: none;
}
.dock-prefix.show,
.dock-tm.show { opacity: 1; pointer-events: auto; }

.dock-prefix {
  top: 18px;
  left: 32px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
}

.dock-tm {
  /* JS sets left in pixels once glyph widths are measured */
  top: 28px;
  left: 110px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
}