/* Splash — "scale-in then ride-up" concept · home page only.
 *
 * The splash element is HIDDEN BY DEFAULT (`display: none`). It
 * becomes visible only when an inline `<script>` at the top of
 * `<head>` adds `html.splash-active` after deciding the splash
 * should play this load. This way, even before JS modules run,
 * a navigation back to the home page (e.g. from /privacy) shows
 * NOTHING — not even a flash of the dark canvas — because the
 * CSS never lets the splash render in the first place.
 *
 *   0   – 280 ms   | dark canvas
 *   280 – 1180 ms  | logo scale-in (0.72 → 1.0) + un-rotate
 *                    (-8° → 0°) + opacity 0 → 1
 *   1180 – 2300 ms | logo held centered
 *   2300 – 3000 ms | the whole sheet rises (translateY -100%)
 *
 * Strict visual rules: no shadows, no backdrop-filter, no blur,
 * no halos. Mark size clamps to 180–280 px.
 *
 * Reduced motion: 520 ms opacity fade, no transforms.
 */

.qlean-splash {
  /* hidden by default — only the inline splash-gate in the home
   * page's <head> can flip `html.splash-active` and reveal it */
  display: none;
}

html.splash-active .qlean-splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--bg);
  display: grid;
  place-items: center;
  transform: translateY(0);
  transition: transform 700ms cubic-bezier(0.77, 0, 0.18, 1);
  will-change: transform;
}
html.splash-active .qlean-splash.is-done {
  transform: translateY(-100%);
}

html.splash-active .qlean-splash__mark {
  width: clamp(180px, 24vw, 280px);
  height: clamp(180px, 24vw, 280px);
  display: grid;
  place-items: center;
}

html.splash-active .qlean-splash__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.72) rotate(-8deg);
  animation: qs-settle 900ms cubic-bezier(0.22, 1, 0.36, 1) 280ms forwards;
}
@keyframes qs-settle {
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.splash-active .qlean-splash {
    transition: opacity 520ms var(--ease-out);
  }
  html.splash-active .qlean-splash.is-done {
    transform: none;
    opacity: 0;
    pointer-events: none;
  }
  html.splash-active .qlean-splash__mark img {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
