/* Countdown that stands in for the book until the launch (kniha-launch.js). */
[data-launch="soon"] .book-loading,
[data-launch="soon"] .book-controls,
[data-launch="soon"] .book-hud,
[data-launch="soon"] .book-static,
[data-launch="soon"] .people { display: none; }
[data-launch="soon"] .book-fallback { display: none; }
/* On larger screens the book already waits behind the countdown, open, blurred and
   dimmed so the countdown reads; it sharpens at the launch. */
.book-canvas { transition: opacity .6s ease, filter 1.2s ease; }
[data-launch="soon"] .book-canvas { filter: blur(7px); pointer-events: none; }
[data-launch="soon"] .is-ready .book-canvas { opacity: .32; }

.launch-countdown {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  transition: opacity .6s ease;
}
.launch-countdown.is-done { opacity: 0; pointer-events: none; }
.launch-countdown-title { margin-top: 14px; font: 450 clamp(28px, 3.4vw, 46px)/1.15 var(--serif); letter-spacing: -.03em; }
/* Plain figures on the stage, set apart by gold colons rather than boxes. */
.launch-countdown-clock { display: flex; align-items: flex-start; margin-top: clamp(20px, 3vw, 34px); }
.launch-countdown-clock span { position: relative; display: grid; justify-items: center; gap: 8px; min-width: clamp(72px, 9vw, 128px); }
.launch-countdown-clock span + span::before { content: ':'; position: absolute; left: 0; top: 0; transform: translateX(-50%); color: #d5b35480; font: 450 clamp(30px, 4vw, 56px)/1 var(--serif); }
.launch-countdown-clock strong { color: var(--gold); font: 450 clamp(34px, 4.6vw, 64px)/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.launch-countdown-clock small { color: #aeb6c6; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.launch-countdown-note { max-width: 30em; margin-top: clamp(18px, 2.6vw, 30px); color: #cdd3df; font-size: clamp(14px, 1.1vw, 16px); }

@media (max-width: 560px) {
  .launch-countdown-clock span { min-width: 0; flex: 1; }
  .launch-countdown-clock { width: 100%; max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .launch-countdown, .book-canvas { transition: none; }
}