/* Entry splash — black screen, logo scales up in the middle, then clears.
   Pure CSS on purpose: it paints with the stylesheet, so there is never a flash
   of page content before the splash covers it. A JS overlay would always lose
   that race. Total runtime 1.85s; the overlay is unclickable from the start of
   its fade and gone entirely by the end. */

@media (prefers-reduced-motion: no-preference) {
  html[data-splash="play"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: #000;
    animation: rlSplashVeil 1.85s cubic-bezier(.16, 1, .3, 1) forwards;
    pointer-events: none;
  }

  html[data-splash="play"] body::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    width: min(336px, 80vw);
    height: min(109px, 26vw);
    margin: 0;
    background: url('assets/logos/logo-horizontal-white-clean.png') center / contain no-repeat;
    animation: rlSplashMark 1.85s cubic-bezier(.16, 1, .3, 1) forwards;
    pointer-events: none;
  }

  @keyframes rlSplashVeil {
    0%, 74% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
  }

  @keyframes rlSplashMark {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
    22% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); visibility: hidden; }
  }
}