/* First-visit splash. Only shown while <html> has .splash-on (see splash-gate.js). */

.splash { display: none; }

.splash-on body { overflow: hidden; }

.splash-on .splash {
  --d: 220px;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  background: #000;
  will-change: opacity;
  /* Failsafe: if the script never runs, the splash clears itself. */
  animation: splash-failsafe 0.3s ease 3.5s forwards;
}

.splash__dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.splash__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.splash__hint {
  position: absolute;
  right: 28px;
  bottom: 22px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4a484d;
}

@keyframes splash-failsafe {
  to { opacity: 0; visibility: hidden; }
}