/* Abertura do app: so o simbolo, ~1,6 s. Escondida por padrao; o JS inline do <head>
   poe html.splash-on (so se ainda nao vista na sessao). Sem JS, nunca aparece. */
#splash,
.splash {
  display: none;
}

html.splash-on {
  overflow: hidden;
}

html.splash-on #splash {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  opacity: 1;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Rede de seguranca so com CSS: aos 8 s some e deixa de receber toques, mesmo sem o JS. */
  animation: splash-cap 1ms linear 8s forwards;
}

html.splash-on #splash.splash-out {
  opacity: 0;
  pointer-events: none;
}

html.splash-on #splash svg {
  width: 96px;
  height: 96px;
  overflow: visible;
}

html.splash-on #splash .tile,
html.splash-on #splash .card,
html.splash-on #splash .ring,
html.splash-on #splash .dot {
  transform-box: fill-box;
  transform-origin: center;
}

html.splash-on #splash .card {
  transform-origin: center bottom;
}

html.splash-on #splash .tile { animation: splash-tile 450ms cubic-bezier(0.4, 0, 0.2, 1) both; }
html.splash-on #splash .card { animation: splash-card 350ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both; }
html.splash-on #splash .r1 { animation: splash-ring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) 450ms both; }
html.splash-on #splash .r2 { animation: splash-ring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) 520ms both; }
html.splash-on #splash .a {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: splash-draw 550ms cubic-bezier(0.4, 0, 0.2, 1) 650ms forwards;
}
html.splash-on #splash .dot { animation: splash-dot 350ms cubic-bezier(0.34, 1.56, 0.64, 1) 1150ms both; }

@keyframes splash-tile { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes splash-card { from { transform: translateY(22px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes splash-ring { from { transform: translateY(-26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes splash-draw { to { stroke-dashoffset: 0; } }
@keyframes splash-cap { to { opacity: 0; transform: scale(0); } }
@keyframes splash-dot{ from { transform: scale(0); } to { transform: scale(1); } }

/* Menos movimento: simbolo parado, sem animacao nem fade. */
@media (prefers-reduced-motion: reduce) {
  html.splash-on #splash,
  html.splash-on #splash .tile,
  html.splash-on #splash .card,
  html.splash-on #splash .ring,
  html.splash-on #splash .dot {
    animation: none;
    transition: none;
  }

  html.splash-on #splash .a {
    animation: none;
    stroke-dashoffset: 0;
  }
}