/* global.css - shell web do Kairos.
   Carregado via inject-head.mjs (pos-build). Controla o fundo da pagina,
   a moldura de telefone no desktop, as safe areas em modo standalone
   e o splash de arranque. Nao estiliza componentes React - so o shell. */

/* Fundo da pagina: quase preto com um brilho radial sutil no topo.
   Hex espelham os tokens de src/design/tokens.ts (CSS puro nao importa TS):
   #050505 = brand.glassDeep · #181818 = color.canvas. */
body {
  background: #050505; /* brand.glassDeep */
  background-image: radial-gradient(120% 60% at 50% 0%, #181818 0%, #050505 70%); /* color.canvas -> brand.glassDeep */
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Desktop: moldura de telefone centrada. O app fica confinado a 430px
   e o resto da janela mostra o fundo #050505. */
@media (min-width: 520px) {
  #root {
    max-width: 430px;
    min-height: 100dvh;
    margin: 0 auto;
    border-left: 1px solid #303030; /* color.hairline */
    border-right: 1px solid #303030; /* color.hairline */
  }
}

/* PWA instalada (standalone): trata as safe areas do iPhone.
   O fundo do root volta ao canvas do app para as areas de inset
   nao aparecerem como faixas pretas. */
@media (display-mode: standalone) {
  #root {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background: #181818; /* color.canvas */
  }
}

/* Splash de arranque: cobre tudo ate o React montar.
   O markup e injetado pelo inject-head.mjs; o script inline
   adiciona .done quando o #root ganhar filhos. */
#kairos-splash {
  position: fixed;
  inset: 0;
  background: #080808; /* brand.glass */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease;
}

#kairos-splash.done {
  opacity: 0;
  pointer-events: none;
}

#kairos-splash img {
  width: 40%;
  max-width: 240px;
  height: auto;
  animation: kairos_idle_float 4s ease-in-out infinite;
}

@keyframes kairos_idle_float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #kairos-splash {
    transition: none;
  }
  #kairos-splash img {
    animation: none;
  }
}