/* A ABERTURA: o que a pessoa ve enquanto o JavaScript da vitrine ainda esta
   chegando (2026-09-28).

   Sem isto, o `index.html` entrega uma `<div>` vazia e a tela fica branca ate o
   pacote de 645 KB (147 KB comprimido) chegar e rodar. Medido pelo Lucas com a
   rede em "Slow 4G": um tempo longo de tela branca.

   **Por que um arquivo a parte, e nao o `tema.css`:** no dev o Vite so injeta o
   CSS do Tailwind quando o JS roda, que e justamente o que ainda nao chegou. E
   o CSP (`style-src 'self'`) proibe `<style>` e `style=""` inline. Um arquivo
   de `public/` e `'self'`, carrega igual no dev e na producao, e e minusculo.

   **As cores estao escritas, e isso e copia:** a fonte da verdade e o
   `src/estilos/tema.css` (`--nu-fundo`, `--nu-texto`, `--nu-marca`,
   `--nu-atencao`, nos dois ambientes). O ambiente sai do `data-ambiente` que o
   script inline do `index.html` poe no `html` antes de qualquer pintura.

   O React substitui tudo isto quando monta. */

html[data-ambiente="produto"] {
  --abertura-fundo: #f8f5f2;
  --abertura-texto: #1f1d19;
  --abertura-orbita: #29588e;
  --abertura-no: #ae4829;
}

html[data-ambiente="galeria"] {
  --abertura-fundo: #141210;
  --abertura-texto: #f4f3f0;
  --abertura-orbita: #6e9bcf;
  --abertura-no: #d96c45;
}

html {
  background-color: var(--abertura-fundo);
}

/* O preflight do Tailwind zera isto tambem; aqui vale antes dele chegar. */
body {
  margin: 0;
}

.abertura {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--abertura-texto);
}

.abertura svg {
  overflow: visible;
}

.abertura-orbita {
  fill: none;
  stroke: var(--abertura-orbita);
  stroke-width: 3;
}

.abertura-no,
.abertura-haste {
  fill: var(--abertura-no);
}

/* O no em orbita. **CSS, e nao SMIL**: o Chrome so liga o relogio do SMIL no
   evento `load`, e a abertura existe justamente antes dele. Com SMIL ela ficava
   parada, com o no no canto do `N` (achado do Lucas em 2026-09-28).

   Copia do bloco `O NO EM ORBITA` do `src/estilos/tema.css`, com outro prefixo:
   la esta a conta de onde saem os 48 pontos. */

@keyframes abertura-no {
  0% { transform: translate(55.88px, 16.51px); }
  2.0833% { transform: translate(56.48px, 20.02px); }
  4.1667% { transform: translate(55.79px, 23.52px); }
  6.25% { transform: translate(54.27px, 26.76px); }
  8.3333% { transform: translate(52.24px, 29.71px); }
  10.4167% { transform: translate(49.87px, 32.39px); }
  12.5% { transform: translate(47.26px, 34.84px); }
  14.5833% { transform: translate(44.47px, 37.08px); }
  16.6667% { transform: translate(41.54px, 39.15px); }
  18.75% { transform: translate(38.51px, 41.04px); }
  20.8333% { transform: translate(35.37px, 42.77px); }
  22.9167% { transform: translate(32.16px, 44.34px); }
  25% { transform: translate(28.86px, 45.77px); }
  27.0833% { transform: translate(25.51px, 47.03px); }
  29.1667% { transform: translate(22.11px, 48.13px); }
  31.25% { transform: translate(18.64px, 49.06px); }
  33.3333% { transform: translate(15.15px, 49.81px); }
  35.4167% { transform: translate(11.61px, 50.36px); }
  37.5% { transform: translate(8.04px, 50.68px); }
  39.5833% { transform: translate(4.46px, 50.73px); }
  41.6667% { transform: translate(0.90px, 50.45px); }
  43.75% { transform: translate(-2.61px, 49.74px); }
  45.8333% { transform: translate(-5.95px, 48.46px); }
  47.9167% { transform: translate(-8.88px, 46.42px); }
  50% { transform: translate(-10.88px, 43.48px); }
  52.0833% { transform: translate(-11.48px, 39.98px); }
  54.1667% { transform: translate(-10.79px, 36.48px); }
  56.25% { transform: translate(-9.27px, 33.24px); }
  58.3333% { transform: translate(-7.24px, 30.29px); }
  60.4167% { transform: translate(-4.87px, 27.61px); }
  62.5% { transform: translate(-2.26px, 25.16px); }
  64.5833% { transform: translate(0.53px, 22.92px); }
  66.6667% { transform: translate(3.46px, 20.85px); }
  68.75% { transform: translate(6.49px, 18.96px); }
  70.8333% { transform: translate(9.63px, 17.23px); }
  72.9167% { transform: translate(12.84px, 15.66px); }
  75% { transform: translate(16.14px, 14.23px); }
  77.0833% { transform: translate(19.49px, 12.97px); }
  79.1667% { transform: translate(22.89px, 11.87px); }
  81.25% { transform: translate(26.36px, 10.94px); }
  83.3333% { transform: translate(29.85px, 10.19px); }
  85.4167% { transform: translate(33.39px, 9.64px); }
  87.5% { transform: translate(36.96px, 9.32px); }
  89.5833% { transform: translate(40.54px, 9.27px); }
  91.6667% { transform: translate(44.10px, 9.55px); }
  93.75% { transform: translate(47.61px, 10.26px); }
  95.8333% { transform: translate(50.95px, 11.54px); }
  97.9167% { transform: translate(53.88px, 13.58px); }
  100% { transform: translate(55.88px, 16.51px); }
}

@keyframes abertura-vao {
  from {
    stroke-dashoffset: 96.22;
  }
  to {
    stroke-dashoffset: -3.78;
  }
}

.abertura-no {
  transform: translate(55.88px, 16.51px);
  animation: abertura-no 1.8s linear infinite;
}

.abertura-orbita {
  animation: abertura-vao 1.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .abertura-no,
  .abertura-orbita {
    animation: none;
  }
}