/* Logo em linha (abertura, primeira tela e rodapé): as letras são caminhos
   separados (--n) e o ponto final é um círculo à parte, para poder cair,
   quicar. A forma é sempre a do arquivo oficial. */

.logo { position: relative; display: block; margin: 0; line-height: 0; color: inherit; }
.logo__svg { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; }
.logo__l { transform-box: fill-box; transform-origin: 50% 100%; }
.logo__dot { position: absolute; border-radius: 50%; background: currentColor; }

/* Logo animado (primeira tela e rodapé): as letras sobem uma a uma; o
   ponto cai em laranja, quica e assume a cor do logo. */
.has-motion .logo--play .logo__l { opacity: 0; transform: translateY(28%); }
.has-motion .logo--play .logo__dot { opacity: 0; }
.has-motion .logo--play.is-played .logo__l { animation: logo-rise 0.9s var(--ease-out) calc(var(--n) * 70ms) both; }
.has-motion .logo--play.is-played .logo__dot { animation: logo-drop 1.4s cubic-bezier(0.3, 0, 0.3, 1) 0.62s both; }
@keyframes logo-rise {
  from { opacity: 0; transform: translateY(28%); }
  to { opacity: 1; transform: none; }
}
@keyframes logo-drop {
  0% { opacity: 0; transform: translateY(-520%); background: var(--sun); }
  12% { opacity: 1; }
  30% { transform: none; background: var(--sun); }
  38% { transform: scale(1.3, 0.72); }
  48% { transform: translateY(-60%) scale(0.92, 1.08); }
  58% { transform: none; }
  64% { transform: scale(1.08, 0.94); box-shadow: 0 0 18px color-mix(in srgb, var(--sun) 70%, transparent); background: var(--sun); }
  100% { opacity: 1; transform: none; box-shadow: none; background: currentColor; }
}