/* Abertura da Harmovittal: aparece desde o primeiro instante, antes do app carregar.
   Só usa opacidade e deslocamento (animações que o celular faz sem travar). */
#boot {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: radial-gradient(90% 60% at 50% 42%, #4a1423 0%, #240b13 48%, #0f0f0f 100%);
  color: #f5ede3; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  opacity: 1; transition: opacity 550ms ease-in, visibility 550ms;
  -webkit-user-select: none; user-select: none; pointer-events: all;
}
html.no-boot #boot { display: none; }
#boot.out { opacity: 0; visibility: hidden; pointer-events: none; }
#boot .boot-logo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(76vw, 340px); }
#boot .boot-glow {
  position: absolute; left: 50%; top: 0; width: 120%; aspect-ratio: 1; transform: translate(-50%, -22%);
  background: radial-gradient(circle, rgba(201, 165, 90, 0.22) 0%, rgba(201, 165, 90, 0) 62%); opacity: 0;
}
#boot img { display: block; height: auto; pointer-events: none; -webkit-user-drag: none; }
#boot .boot-mark { position: relative; width: 62%; opacity: 0; transform: scale(0.94); }
#boot .boot-word { position: relative; width: 100%; opacity: 0; transform: translateY(10px); }
#boot .boot-tag { font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase; color: #d8b96f; opacity: 0; transform: translateY(6px); }

/* a animação só começa quando as imagens já estão prontas (classe "go", posta pelo boot.js) */
#boot.go .boot-glow { animation: bootFade 1800ms ease-out 100ms forwards; }
#boot.go .boot-mark { animation: bootIn 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 100ms forwards; }
#boot.go .boot-word { animation: bootUp 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) 650ms forwards; }
#boot.go .boot-tag { animation: bootUp 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 1250ms forwards; }
@keyframes bootFade { to { opacity: 1; } }
@keyframes bootIn { to { opacity: 1; transform: none; } }
@keyframes bootUp { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #boot .boot-glow, #boot .boot-mark, #boot .boot-word, #boot .boot-tag { opacity: 1; transform: none; animation: none !important; }
  #boot { transition-duration: 1ms; }
}