/* Paip Food — boot splash (camada do browser). Movimento + estilos não críticos.
   O estilo crítico do primeiro paint está inline no <head> do index.html. */

@keyframes paipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes paipShadow {
  0%, 100% { transform: scaleX(1); opacity: 0.16; }
  50% { transform: scaleX(0.72); opacity: 0.08; }
}

.paip-splash__float {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.paip-splash__logo {
  animation: paipFloat 2.8s ease-in-out infinite;
  will-change: transform;
}

.paip-splash__shadow {
  display: block;
  width: 104px;
  height: 12px;
  border-radius: 50%;
  background: #5A2412;
  filter: blur(6px);
  opacity: 0.16;
  animation: paipShadow 2.8s ease-in-out infinite;
  will-change: transform, opacity;
}

/* ---- Saída ---- */
.paip-splash--dismissing {
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* ---- Movimento reduzido ---- */
@media (prefers-reduced-motion: reduce) {
  .paip-splash__logo,
  .paip-splash__shadow { animation: none; }
}

/* ---- Modo escuro do dispositivo ----
   O splash é a única etapa da cadeia de abertura que roda antes do app e aceita
   media query, então ele acompanha o dispositivo. O fundo é o `background` do
   DSOrangeColorScheme.dark() — o mesmo da meta `theme-color` escura do index.html. */
@media (prefers-color-scheme: dark) {
  #paip-splash { background: #0C0A09; }
  .paip-splash__shadow { background: #000000; opacity: 0.5; }
}