/* =============================================================================
   tetris-loader.css — the full-screen loading stage.

   The board itself is drawn on a canvas by /static/js/tetris-loader.js: a
   self-playing game whose piece sequence is played back against the loader's
   own percentage, so the last line clears exactly as the bar reaches 100.
   This file only lays out the stage, the readout and the bar.
   ============================================================================= */

.tl {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tl__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.tl--screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #07050c;
  color: #f0ebfa;
  display: grid;
  place-items: center;
}

/* The same violet bloom the site sits in, so the loader is the first frame of
   the page rather than a different screen in front of it. */
.tl--screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(70% 55% at 50% 108%, rgba(157, 78, 221, 0.3), transparent 70%);
}

.tl--screen__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

.tl--screen__pct {
  font: 600 clamp(64px, 12vw, 128px)/1 "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  letter-spacing: -0.02em;
  color: #c77dff;
  text-shadow: 0 0 28px rgba(157, 78, 221, 0.6), 0 0 70px rgba(157, 78, 221, 0.35);
}

.tl--screen__bar {
  width: min(340px, 60vw);
  height: 2px;
  background: currentColor;
  opacity: 0.18;
  margin: 16px auto 0;
}

.tl--screen__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #c77dff;
  box-shadow: 0 0 14px rgba(157, 78, 221, 0.9);
  opacity: 1;
}

.tl--screen.is-done {
  opacity: 0;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .tl--screen__overlay { display: none; }
  .tl--screen__pct, .tl--screen__bar { opacity: 1; }
}