/* Splash de carregamento do Pata Royale (js/splash.js): cobre a janela inteira desde o primeiro quadro, antes dos módulos,
   e some quando a primeira tela fica pronta. Céu azul com raios girando atrás do logo, barra com o pato correndo na ponta. */
.splash { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; overflow: hidden; cursor: none;
  background: radial-gradient(circle at 50% 40%, #a6e4ff 0%, #5cbcf2 34%, #2d8ee8 68%, #1b5fae 100%);
  transition: opacity .45s ease, visibility .45s; user-select: none; -webkit-user-select: none;
  animation: sp-desiste .45s ease 20s forwards; /* se js/splash.js nem rodar, o splash não prende a página */ }
.splash.saindo { opacity: 0; visibility: hidden; pointer-events: none; }

.sp-raios { position: absolute; left: 50%; top: 40%; width: 260vmax; height: 260vmax; translate: -50% -50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,255,255,.16) 0deg 8deg, rgba(255,255,255,0) 8deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 10%, transparent 42%); mask-image: radial-gradient(circle, #000 0 10%, transparent 42%);
  animation: sp-gira 60s linear infinite; }

.sp-conteudo { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vmin, 28px); padding: 16px; }
/* backwards, não both: com o fim da animação preso, o scale da saída não pegaria */
.sp-marca { animation: sp-entra .75s cubic-bezier(.34, 1.56, .64, 1) backwards; transition: transform .45s ease; }
.splash.saindo .sp-marca { transform: scale(1.08); }
.sp-logo { display: block; height: min(54vh, 72vw, 560px); width: auto; animation: sp-flutua 2.8s ease-in-out .75s infinite alternate;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.25)); }

.sp-barra { position: relative; width: min(440px, 78vw); height: 30px; border: 4px solid var(--ink); border-radius: 999px; background: #fff;
  box-shadow: 0 5px 0 rgba(0,0,0,.28); animation: sp-aparece .4s ease .3s both; }
.sp-cheio { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); min-width: 22px; border-radius: 999px;
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 12px, #ffb21f 12px 24px) 0 0 / 34px 34px;
  box-shadow: inset 0 -5px 0 rgba(184, 88, 14, .35); animation: sp-listras .7s linear infinite; transition: width .12s linear; }
.sp-pato { position: absolute; left: calc(var(--p, 0) * 100%); top: -26px; width: 48px; height: 48px; translate: -50% 0; animation: sp-pula .36s ease-in-out infinite alternate; transition: left .12s linear; }

.sp-texto { margin: 0; display: flex; gap: .5em; align-items: baseline; font-family: var(--display); font-weight: 700; font-size: clamp(17px, 2.8vmin, 24px);
  color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; animation: sp-aparece .4s ease .3s both; }
.sp-texto b { font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }

/* a mão do jogo também no splash (o #cursor de common.js só existe depois que os módulos carregam) */
.sp-mao { position: fixed; left: 0; top: 0; width: 32px; height: 32px; pointer-events: none; }

@keyframes sp-gira { to { rotate: 360deg; } }
@keyframes sp-desiste { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes sp-entra { from { opacity: 0; transform: scale(.45) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes sp-flutua { from { transform: translateY(0) rotate(-1.2deg); } to { transform: translateY(-8px) rotate(1.2deg); } }
@keyframes sp-aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sp-listras { to { background-position: 34px 0; } }
@keyframes sp-pula { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-5px) rotate(4deg); } }

@media (prefers-reduced-motion: reduce) {
  .sp-raios, .sp-logo, .sp-cheio, .sp-pato { animation: none; }
  .sp-marca { animation-name: sp-aparece; }
  .splash.saindo .sp-marca { transform: none; }
}