/* ============================================================
   splash.css — Vinheta de abertura (antes da capa)
   Reconstrução do Figma "Splash" (Smart Animate 485:776 … 488:968).
   O overlay vive dentro de #book-page-frame → herda o --scale e o
   clip arredondado. Transições/duração/easing são aplicadas INLINE
   por fase em splash.js (cada transição do protótipo tem seu timing).
   ============================================================ */

#splash{
  position:absolute;inset:0;z-index:9999;
  background:#6A0584;                 /* fill do frame Splash no Figma */
  overflow:hidden;cursor:pointer;
}
#splash.sp-out{opacity:0;transition:opacity .6s cubic-bezier(.4,0,.2,1)}

/* Blocos coloridos = segmentos do selo (Vídeo/Jogo/História/Livro Digital). */
.sp-block{position:absolute;border-radius:5px;transform-origin:center center}

/* Selo TRANSMÍDIA: entra grande e dá zoom-out com impacto. */
.sp-selo{position:absolute;object-fit:contain;transform-origin:center center}

/* Texto EXCLUSIVIDADE (Nunito 700 / 18px, branco, centralizado). */
.sp-excl{
  position:absolute;color:#fff;
  font-family:var(--font-base,'Nunito',sans-serif);
  font-weight:700;font-size:18px;line-height:19.8px;
  text-align:center;letter-spacing:.5px;white-space:nowrap;
}

/* Logo Turminha Pimpompem. */
.sp-logo{position:absolute;object-fit:contain;transform-origin:center center}

/* "Toque para continuar" — só aparece se a splash terminar sem nenhum toque
   ter ocorrido ainda (garante o gesto do usuário antes da capa, necessário
   para o áudio tocar de verdade em navegadores mobile). Fica oculto o tempo
   todo para quem já tocou a tela em qualquer ponto da animação. */
.sp-tap-hint{
  position:absolute;left:50%;bottom:70px;
  transform:translateX(-50%) scale(.9);
  opacity:0;pointer-events:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.sp-tap-hint.sp-in{
  opacity:1;transform:translateX(-50%) scale(1);
  animation:spTapPulse 1.6s ease-in-out .5s infinite;
}
.sp-tap-hint span{
  display:inline-block;padding:10px 20px;border-radius:20px;
  background:rgba(255,255,255,.95);color:var(--c-roxo-txt,#730099);
  font-family:var(--font-base,'Nunito',sans-serif);font-weight:700;font-size:15px;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
@keyframes spTapPulse{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%    {transform:translateX(-50%) scale(1.045)}
}