/* 3D scene layer (coordinator-owned). Canvas sits behind all content. */
.d-scene { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; display: block; }
main, footer { position: relative; z-index: 1; }




/* developer readout, bottom inline-start (the WhatsApp label owns inline-end) */
.d-hud { position: fixed; z-index: 5; right: 20px; /* physical: the hud is LTR, WhatsApp label sits bottom-left in RTL */ bottom: 18px; direction: ltr; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--paper-3); pointer-events: none; user-select: none; }
.d-hud__k { color: var(--signal); }
.d-hud__sec { color: var(--paper-2); min-width: 15ch; }
.d-hud__bar { width: 72px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.d-hud__bar i { position: absolute; inset: 0; background: var(--paper-2); transform-origin: left; transform: scaleX(0); }
.d-hud__xyz { font-variant-numeric: tabular-nums; min-width: 24ch; }
.d-hud { transition: opacity .3s var(--ease); }
.d-hud.is-off { opacity: 0; }
@media (max-width: 760px) { .d-hud { display: none; } }

/* 3D entrance for anything marked [data-reveal]: tilts up out of the page */
.has-scene [data-reveal] { transform: perspective(1100px) translate3d(0, 28px, -40px) rotateX(14deg); transform-origin: 50% 100%; }
.has-scene [data-reveal].is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .has-scene [data-reveal] { transform: none; } }