/* The splash in front of the sign-in: the emblem and name fade in (splash.js, which says how a page uses it). */
html.splash-on { overflow: hidden; }
.splash {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  background: var(--bg, #101112); color: var(--text, #e9eae5); cursor: pointer;
  transition: opacity .35s ease;
}
.splash.is-gone { opacity: 0; }
.splash.is-gone-fast { opacity: 0; transition-duration: .15s; }
.splash-emblem {
  width: clamp(72px, 16vw, 112px); height: auto; margin-bottom: 8px;
  animation: splash-grow .7s cubic-bezier(.2, .7, .2, 1) both;
}
.splash-name {
  font-family: "Grid Central Modern", "Space Grotesk", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(22px, 5vw, 34px); letter-spacing: .14em;
  animation: splash-rise .55s ease .3s both;
}
.splash-label {
  font-family: "DM Mono", ui-monospace, monospace; font-size: clamp(11px, 2.4vw, 13px); letter-spacing: .32em;
  color: var(--muted, #9a9f98);
  animation: splash-rise .55s ease .55s both;
}
@keyframes splash-grow { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes splash-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash { transition: none; }
  .splash-emblem, .splash-name, .splash-label { animation: none; }
}