/* Drawn by scripts/brand-assets.mjs. What a browser shows until the app is up, which then
   takes it away (ui/launch-curtain.web.tsx): the wave of ui/brand-loader.tsx, on the page's
   background of ui/theme.ts. */
#launch { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: #f7f3f3; transition: opacity 280ms cubic-bezier(0.23, 1, 0.32, 1); }
#launch.gone { opacity: 0; pointer-events: none; }
#launch > div { position: relative; width: 225.6px; aspect-ratio: 2.03522; }
#launch picture { position: absolute; inset: 0; }
#launch img { display: block; width: 100%; height: 100%; }
#launch i { position: absolute; aspect-ratio: 1; border-radius: 50%; animation: launch-hop 1400ms ease-in-out infinite; }
#launch i:nth-of-type(1) { left: 4.711%; top: 24.606%; width: 7.877%; background: #7E0819; animation-delay: 0ms; }
#launch i:nth-of-type(2) { left: 28.271%; top: 24.626%; width: 7.867%; background: #930E21; animation-delay: 140ms; }
#launch i:nth-of-type(3) { left: 50.712%; top: 24.616%; width: 7.867%; background: #B93D4F; animation-delay: 280ms; }
#launch i:nth-of-type(4) { left: 72.62%; top: 24.613%; width: 7.877%; background: #DD6E7D; animation-delay: 420ms; }
@keyframes launch-hop { 0%, 36%, 100% { transform: translateY(0) scale(1); } 18% { transform: translateY(-30%) scale(1.12); } }
@keyframes launch-glow { 0%, 36%, 100% { opacity: 1; } 18% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { #launch i { animation-name: launch-glow; } }
@media (prefers-color-scheme: dark) {
  #launch { background: #1c1416; }
  #launch i:nth-of-type(1) { background: #B93D4F; }
  #launch i:nth-of-type(2) { background: #C4566A; }
  #launch i:nth-of-type(3) { background: #DD6E7D; }
  #launch i:nth-of-type(4) { background: #EFA5B0; }
}