/* Loading surface: flat mark first, three.js canvas fades over it when ready. */
.ldr { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-6) 0; }
.ldr-art { position: relative; width: var(--ldr-size, 132px); height: var(--ldr-size, 132px); }
.ldr-svg, .ldr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .5s var(--ease); }
.ldr-canvas { opacity: 0; }
.ldr.is-3d .ldr-svg { opacity: 0; }
.ldr.is-3d .ldr-canvas { opacity: 1; }
.ldr-label { margin: 0; }
/* All four bars share the centre line the 3D mark turns around. */
.ldr-bar { transform-origin: 96px 96px; animation: ldr-wave 2.4s var(--ease) infinite; }
.ldr-bar:nth-of-type(2) { animation-duration: 1.7s; animation-delay: -.4s; }
.ldr-bar:nth-of-type(3) { animation-duration: 2.1s; animation-delay: -1.1s; }
.ldr-bar:nth-of-type(4) { animation-duration: 1.5s; animation-delay: -.7s; }
@keyframes ldr-wave {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.2); }
}

/* Boot splash: the same mark on paper, removed once the first screen paints. */
.boot { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--paper); transition: opacity .28s var(--ease); }
.boot .ldr { padding: 0; }
.boot.is-gone { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .ldr-bar { animation: none; }
  .ldr-svg, .ldr-canvas, .boot { transition: none; }
}

.ldr-label { justify-content: center; text-align: center; }
.wait-hint { color: var(--ink-3); text-align: center; max-width: 34ch; margin: 0 auto var(--sp-4); }
.wait-heard { color: var(--ink-3); text-align: center; font-style: italic; max-width: 46ch; margin: var(--sp-5) auto 0; }
#wait-retry { display: block; margin: 0 auto; }