/* ============================================================================
   vida.css — "Universo Boominho"
   Camada de arte sobre brand.css. Carrega DEPOIS do brand.css do helmet, mas o
   SiteNav injeta uma 2ª cópia do brand.css ainda mais tarde: TODA regra aqui
   que dispute com o brand.css vence por especificidade, nunca por ordem.

   Conceito: a home é um pequeno sistema solar. O Boominho é o centro; o mundo
   jurídico-tech (balança, planilha, engrenagem, documento conferido) orbita ao
   redor dele em raios, velocidades e direções diferentes. A ligadura ∞ do
   wordmark vira a linha do horizonte entre as seções. O jogo da casa
   (Hexapalavras) joga sozinho no painel, montando BOOMERS letra a letra.

   Contraste medido com `python tools/wcag.py` (valores nos comentários).
   Movimento: só transform/opacity. prefers-reduced-motion entrega a página
   inteira estática e COMPLETA (nada fica escondido esperando animação).
   ========================================================================== */

/* ==========================================================================
   1. O PALCO — hero vira cena
   ========================================================================== */

/* A coluna do mascote passa a ser uma pilha: mascote + controle de som.
   O `position: relative` já vem do brand.css; aqui só a direção e as medidas
   do palco, derivadas do width inline do próprio <img> (clamp 180–300px) e da
   proporção real do PNG (789×1020 → 1.2928). Com isso a órbita fica centrada
   no MASCOTE, não no meio da coluna, mesmo com o botão embaixo. */
html[data-fb-page="Home.dc"] main > section:first-of-type div[style*="flex: 0 1 320px"] {
  flex-direction: column;
  align-items: center;
  gap: 18px;
  --vida-mw: clamp(180px, 32vw, 300px);
  --vida-mh: calc(var(--vida-mw) * 1.2928);
  --vida-palco: calc(var(--vida-mh) * 0.92);
  --vida-chip: clamp(40px, 5.4vw, 50px);
}

/* A coluna de texto sobe de camada: se um ícone em órbita passar por trás do
   título, o texto continua por cima e legível. */
html[data-fb-page="Home.dc"] main > section:first-of-type div[style*="flex: 1 1 420px"] {
  position: relative;
  z-index: 2;
}

/* ---- Chão: o mascote deixa de flutuar no vazio e passa a ter apoio. ---- */
.vida-chao {
  position: absolute;
  left: 50%;
  top: calc(var(--vida-mh) - 10px);
  width: calc(var(--vida-mw) * 0.72);
  height: 20px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(40, 64, 110, .20) 0%,
    rgba(40, 64, 110, .10) 45%,
    rgba(40, 64, 110, 0) 72%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Órbitas ---- */
.vida-orbita {
  position: absolute;
  left: 50%;
  top: calc(var(--vida-mh) / 2);
  width: var(--vida-palco);
  height: var(--vida-palco);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   As órbitas são ELIPSES, não círculos, e por um motivo medido: o hero corta
   em `overflow: hidden` na borda da seção, e da coluna do mascote até esse
   corte sobram só ~200px — um círculo grande o bastante para escapar do
   mascote (semi-eixo ≥150px) já não caberia com três raios distintos. Elipses
   resolvem: o semi-eixo horizontal fica travado na faixa segura (153–164px) e
   a variação vai toda para o vertical (157 · 200 · 239px), onde sobra espaço.
   O efeito colateral é melhor que o plano original — três planos orbitais de
   inclinações diferentes, que se cruzam, em vez de três círculos concêntricos.
   -------------------------------------------------------------------------- */
.vida-anel-a, .vida-orb[data-anel="a"] { --dx: 86%; --dy: 88%;  --ex: .977; --iex: 1.023; }
.vida-anel-b, .vida-orb[data-anel="b"] { --dx: 90%; --dy: 112%; --ex: .804; --iex: 1.244; }
.vida-anel-c, .vida-orb[data-anel="c"] { --dx: 92%; --dy: 134%; --ex: .687; --iex: 1.457; }

/* Empilhado (a coluna do mascote desce para a sua própria linha), o teto
   vertical passa a ser o texto acima em vez da borda da seção: as elipses
   ficam mais redondas e mais baixas. */
@media (max-width: 900px) {
  .vida-anel-a, .vida-orb[data-anel="a"] { --dx: 84%;  --dy: 86%;  --ex: .977; --iex: 1.023; }
  .vida-anel-b, .vida-orb[data-anel="b"] { --dx: 92%;  --dy: 102%; --ex: .902; --iex: 1.109; }
  .vida-anel-c, .vida-orb[data-anel="c"] { --dx: 100%; --dy: 118%; --ex: .847; --iex: 1.180; }
}

/* Anéis: guia visual finíssima. 1px navy a 13% — puramente decorativo,
   nenhuma informação depende dele. */
.vida-anel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dx);
  height: var(--dy);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(40, 64, 110, .13);
  border-radius: 50%;
}

/* Cada orbe é uma caixa QUADRADA de lado --dy (o chip fica pendurado no topo,
   a --dy/2 do centro) achatada por scaleX(--ex): girar a caixa desenha o
   círculo, o scaleX transforma o círculo em elipse. O chip desfaz o achatamento
   com scaleX(--iex = 1/--ex) para não sair oval. */
.vida-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dy);
  height: var(--dy);
  transform: translate(-50%, -50%) scaleX(var(--ex, 1));
}
.vida-orb-gira {
  position: absolute;
  inset: 0;
  /* Ângulo de partida — vale também como estado estático (reduced-motion). */
  transform: rotate(var(--ang, 0deg));
}
.vida-chip {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--vida-chip);
  height: var(--vida-chip);
  margin: calc(var(--vida-chip) / -2) 0 0 calc(var(--vida-chip) / -2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  /* #7089b3 mede 3.55:1 sobre branco e 3.19:1 sobre #f0f3f9 — passa o mínimo
     de 3:1 de elemento de UI nos dois fundos que o hero tem. */
  border: 1px solid #7089b3;
  /* Sombra nítida e tingida de navy (DESIGN.md §1 revisado); a borda acima é
     quem carrega a fronteira — a sombra é só reforço. */
  box-shadow: 0 6px 14px -6px rgba(11, 18, 32, .34), 0 1px 2px rgba(11, 18, 32, .10);
  color: #28406e; /* traço dos ícones — 10.25:1 sobre o branco do chip */
  /* Desfaz a rotação E o achatamento do pai: o ícone anda na elipse mas fica
     sempre em pé e redondo. */
  transform: rotate(calc(var(--ang, 0deg) * -1)) scaleX(var(--iex, 1));
}
.vida-chip svg {
  width: 56%;
  height: 56%;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  /* Sentido horário (padrão) */
  .vida-orb-gira            { animation: vida-horario      var(--spin, 30s) linear infinite; }
  .vida-orb-gira .vida-chip { animation: vida-chip-horario var(--spin, 30s) linear infinite; }
  /* Sentido anti-horário */
  .vida-orb[data-sentido="anti"] .vida-orb-gira { animation-name: vida-anti-horario; }
  .vida-orb[data-sentido="anti"] .vida-chip     { animation-name: vida-chip-anti; }

  .vida-chao { animation: vida-chao 5s ease-in-out 1.8s infinite alternate; }
}

/* Os quatro keyframes partem SEMPRE do ângulo estático (var(--ang)), então o
   estado parado e o primeiro quadro da animação são o mesmo — nada salta ao
   ligar/desligar o movimento. */
@keyframes vida-horario {
  from { transform: rotate(var(--ang, 0deg)); }
  to   { transform: rotate(calc(var(--ang, 0deg) + 360deg)); }
}
@keyframes vida-anti-horario {
  from { transform: rotate(var(--ang, 0deg)); }
  to   { transform: rotate(calc(var(--ang, 0deg) - 360deg)); }
}
@keyframes vida-chip-horario {
  from { transform: rotate(calc(var(--ang, 0deg) * -1)) scaleX(var(--iex, 1)); }
  to   { transform: rotate(calc(var(--ang, 0deg) * -1 - 360deg)) scaleX(var(--iex, 1)); }
}
@keyframes vida-chip-anti {
  from { transform: rotate(calc(var(--ang, 0deg) * -1)) scaleX(var(--iex, 1)); }
  to   { transform: rotate(calc(var(--ang, 0deg) * -1 + 360deg)) scaleX(var(--iex, 1)); }
}
/* Acompanha o fb-flutua do brand.css (5s, alternate, delay 1.8s): quando o
   Boominho sobe, a sombra encolhe e clareia. */
@keyframes vida-chao {
  0%   { transform: translateX(-50%) scaleX(1);   opacity: 1; }
  100% { transform: translateX(-50%) scaleX(.88); opacity: .62; }
}

/* ==========================================================================
   2. SOM DO BOOMINHO — opt-in estrito, padrão MUDO
   ========================================================================== */

.vida-som {
  /* Acima da órbita: um ícone que passa por baixo do controle some atrás dele,
     igual ao que passa atrás do mascote. Sem isto o chip pintaria POR CIMA do
     botão (elemento com z-index 0 vence caixa de bloco não posicionada). */
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #28406e; /* 10.25:1 sobre branco, 9.22:1 sobre #f0f3f9 */
  color: #28406e;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 2px 6px -2px rgba(11, 18, 32, .22);
}
.vida-som svg { flex: none; }
.vida-som:hover { background: #f0f3f9; }
/* O anel de foco do design system é um box-shadow (--focus-ring, branco+navy)
   — e a sombra de repouso acima o apagaria, já que ambas são `box-shadow` e
   este arquivo carrega depois. Aqui o anel volta, com (0,2,0) para vencer.
   Sem esta regra o botão fica sem foco visível: falha P0 do DESIGN.md §6. */
.vida-som:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.vida-som[aria-pressed="false"] .vida-som-onda { display: none; }
.vida-som[aria-pressed="true"]  .vida-som-corte { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* (0,2,0) de propósito: o brand.css declara `transition: transform` em
     `:is(a[class*="btn"], button, [role="button"])` (0,1,1) e mataria esta. */
  .vida-som[aria-pressed] {
    transition: background var(--dur-fast, 120ms) var(--ease-sharp, ease-out),
                transform var(--dur-fast, 120ms) var(--ease-out, ease-out);
  }
  .vida-som:active { transform: translateY(1px); }
}

/* ==========================================================================
   3. CARDS DE #servicos — cada frente ganha a sua cena do Boominho
   ========================================================================== */

/* Vinheta: gradiente radial branco no miolo — é ali que encosta o fundo
   branco do PNG, então não há costura visível — esmaecendo para navy
   clarinho só nos cantos. Sem borda: nenhuma linha abaixo de 3:1 entra
   neste projeto, e o card já tem a sua própria fronteira.
   `contain`, não `cover`: as cinco ilustrações têm enquadramentos bem
   diferentes (o Boominho da lousa ocupa ~49% da altura; o maestro, ~70%),
   e qualquer recorte fixo decapitaria uma delas. */
#servicos a[href] .vida-ilu {
  display: block;
  position: relative;
  aspect-ratio: 1.4;
  margin: 0 0 20px;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 34%,
    #ffffff 0%, #ffffff 58%, #f4f7fb 82%, #eaf0f8 100%);
}
/* --esc/--desl vêm do JS, medidos por `python tools/enquadrar_ilustracao.py`:
   cada PNG veio da geração com uma margem branca própria (o conteúdo ocupa de
   47% a 68% da altura, e o centroide de um deles está em 58%, não em 50%).
   Sem normalizar, o mesmo personagem apareceria em cinco tamanhos diferentes
   lado a lado. A escala leva todos a 80% da altura do painel e o translateY
   recentra. Regerou uma ilustração? Rode a ferramenta de novo. */
#servicos a[href] .vida-ilu img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain PURO, sem scale/desl (correção do dono, 2026-08-10): o painel é
     paisagem e as ilustrações são retrato — o zoom calibrado estourava a
     imagem para cima e o overflow cortava a cabeça do personagem. Contain
     nunca corta, em qualquer proporção; a margem lateral funde no fundo. */
  object-fit: contain;
  object-position: center;
  display: block;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #servicos a[href] .vida-ilu img {
    transition: transform 320ms var(--ease-out, cubic-bezier(.2, 0, 0, 1));
  }
  #servicos a[href]:hover .vida-ilu img {
    transform: scale(1.04);
  }
}

/* Sem a ilustração (arquivo ausente), o painel viraria uma faixa vazia — o
   onerror da <img> esconde o painel inteiro, e o card volta ao layout antigo
   sem buraco nenhum. */

/* ==========================================================================
   4. DIVISORES ∞ — a ligadura do wordmark vira a linha do horizonte
   --------------------------------------------------------------------------
   Duas curvas espelhadas que se CRUZAM (é o cruzamento que faz o ∞, não a
   ondinha), com um ponto navy sólido exatamente em cada cruzamento — o mesmo
   ponto azul do chip de eyebrow. O preenchimento é a cor da seção de baixo
   invadindo a de cima, então a troca de fundo acontece pela curva.
   Cruzamentos calculados, não estimados: as cúbicas se encontram em x=300 e
   x=900 (t=0.5), y=23 exatos.
   ========================================================================== */

html[data-fb-page="Home.dc"] main > section:nth-of-type(3),
html[data-fb-page="Home.dc"] main > section:nth-of-type(4),
html[data-fb-page="Home.dc"] main > section:nth-of-type(5),
html[data-fb-page="Home.dc"] main > section:nth-of-type(6) {
  position: relative;
  /* A reta de 1px inline cortaria a onda ao meio. A separação passa a ser a
     própria curva + a troca de fundo. */
  border-top-color: transparent !important;
}

html[data-fb-page="Home.dc"] main > section:nth-of-type(3)::before,
html[data-fb-page="Home.dc"] main > section:nth-of-type(4)::before,
html[data-fb-page="Home.dc"] main > section:nth-of-type(5)::before,
html[data-fb-page="Home.dc"] main > section:nth-of-type(6)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -48px;
  height: 48px;
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: 1200px 48px;
  pointer-events: none;
}

/* Seções de fundo navy-50 (#f0f3f9) invadindo a seção branca de cima. */
html[data-fb-page="Home.dc"] main > section:nth-of-type(3)::before,
html[data-fb-page="Home.dc"] main > section:nth-of-type(5)::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='48' viewBox='0 0 1200 48'><path d='M0 34C240 34 360 12 600 12S960 34 1200 34L1200 48 0 48Z' fill='%23f0f3f9'/><path d='M0 12C240 12 360 34 600 34S960 12 1200 12' fill='none' stroke='%2328406e' stroke-opacity='.20' stroke-width='2'/><path d='M0 34C240 34 360 12 600 12S960 34 1200 34' fill='none' stroke='%2328406e' stroke-opacity='.34' stroke-width='2'/><circle cx='300' cy='23' r='4.5' fill='%2328406e'/><circle cx='900' cy='23' r='4.5' fill='%2328406e'/></svg>");
}

/* Seções brancas invadindo a seção navy-50 de cima. */
html[data-fb-page="Home.dc"] main > section:nth-of-type(4)::before,
html[data-fb-page="Home.dc"] main > section:nth-of-type(6)::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='48' viewBox='0 0 1200 48'><path d='M0 34C240 34 360 12 600 12S960 34 1200 34L1200 48 0 48Z' fill='%23ffffff'/><path d='M0 12C240 12 360 34 600 34S960 12 1200 12' fill='none' stroke='%2328406e' stroke-opacity='.20' stroke-width='2'/><path d='M0 34C240 34 360 12 600 12S960 34 1200 34' fill='none' stroke='%2328406e' stroke-opacity='.34' stroke-width='2'/><circle cx='300' cy='23' r='4.5' fill='%2328406e'/><circle cx='900' cy='23' r='4.5' fill='%2328406e'/></svg>");
}

/* ==========================================================================
   5. HEXAPALAVRAS VIVO — o painel do jogo joga sozinho
   --------------------------------------------------------------------------
   Sete hexágonos (clip-path) com as letras de BOOMERS, centro = B (a letra
   obrigatória do jogo). O loop acende B·O·O·M·E·R, respira, encontra o S e
   fecha BOOMERS. Só `opacity` anima: cada hexágono tem a camada apagada e a
   camada acesa empilhadas, e o que muda é a opacidade da de cima.
   Contraste medido CONTRA O FUNDO COMPOSTO (10% branco sobre o gradiente do
   painel — é o que renderiza): letra apagada #b9d6fd = 7.78:1 (topo) a 9.68:1
   (base); letra acesa #061F55 sobre o ciano #25A8FF = 6.09:1 (19-25px bold);
   selo #9fd2ff sobre a pílula ciana = 7.47-9.15:1.
   ========================================================================== */

/* O SVG estático J-O-G-O do export sai de cena — o tabuleiro vivo ocupa o
   mesmo slot do flex. Caminho exato (section > div > painel > svg): um
   `section:nth-of-type(4) svg` genérico apagaria também o ícone de check que
   eu injeto dentro do selo. */
/* !important porque o `display: block` do SVG é inline no export.
   Gate `.vida-tab-pronta` (posta pelo JS SÓ após montar o tabuleiro com
   sucesso): sem JS, com erro ou carregamento lento, o SVG original fica no
   lugar — nunca um buraco vazio (P0 da curadoria). */
html.vida-tab-pronta[data-fb-page="Home.dc"] main > section:nth-of-type(4) > div > div > svg {
  display: none !important;
}

.vida-tab {
  flex: none;
  width: clamp(214px, 27vw, 266px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
  --hw: clamp(48px, 6.6vw, 62px);
  --hh: calc(var(--hw) * 1.1547);
  --gx: calc(var(--hw) * 1.06);
  --gy: calc(var(--hh) * 0.795);
}

.vida-favo {
  position: relative;
  width: calc(var(--hw) * 3.12);
  height: calc(var(--hh) * 2.59);
}

.vida-hex {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hw);
  height: var(--hh);
  transform: translate(-50%, -50%) translate(var(--x, 0px), var(--y, 0px));
}
/* Favo pointy-top: vizinhos laterais a ±gx, diagonais a (±gx/2, ±gy). */
.vida-hex.p0 { --x: 0px;                     --y: 0px; }
.vida-hex.p1 { --x: var(--gx);               --y: 0px; }
.vida-hex.p2 { --x: calc(var(--gx) * -1);    --y: 0px; }
.vida-hex.p3 { --x: calc(var(--gx) / 2);     --y: calc(var(--gy) * -1); }
.vida-hex.p4 { --x: calc(var(--gx) / -2);    --y: calc(var(--gy) * -1); }
.vida-hex.p5 { --x: calc(var(--gx) / 2);     --y: var(--gy); }
.vida-hex.p6 { --x: calc(var(--gx) / -2);    --y: var(--gy); }

.vida-hex > span {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.5vw, 25px);
  line-height: 1;
  letter-spacing: 0;
}
/* Contorno (camada de trás, 2px maior) */
.vida-hex::before {
  content: "";
  position: absolute;
  inset: -2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255, 255, 255, .34);
}
.vida-hex-off {
  inset: 0;
  background: rgba(255, 255, 255, .10);
  color: #b9d6fd;
}
.vida-hex-on {
  inset: -2px;
  background: #25A8FF;
  color: #061F55;
  opacity: 0;
}
/* Centro = letra obrigatória: anel ciano mesmo apagado. */
.vida-hex-centro::before { background: rgba(57, 217, 242, .58); }

.vida-palavra {
  display: flex;
  gap: 5px;
  align-items: flex-end;
}
.vida-slot {
  width: 21px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 3px solid rgba(255, 255, 255, .30);
}
.vida-slot i {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff; /* 15.7:1 sobre o topo do painel */
  opacity: 0;
}

.vida-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(37, 168, 255, .16);
  border: 1px solid rgba(37, 168, 255, .45);
  color: #9fd2ff; /* 7.47-9.15:1 sobre a pílula, conforme posição no gradiente */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px; /* era 15 — no piso; 16 satisfaz os dois contratos (P0 da curadoria) */
  line-height: 1.3;
  letter-spacing: 0;
  opacity: 0;
}
.vida-selo svg { flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .vida-hex-on, .vida-slot i, .vida-selo {
    animation-duration: 15s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
  }
  .s1 .vida-hex-on, .vida-slot.s1 i { animation-name: vida-s1; }
  .s2 .vida-hex-on, .vida-slot.s2 i { animation-name: vida-s2; }
  .s3 .vida-hex-on, .vida-slot.s3 i { animation-name: vida-s3; }
  .s4 .vida-hex-on, .vida-slot.s4 i { animation-name: vida-s4; }
  .s5 .vida-hex-on, .vida-slot.s5 i { animation-name: vida-s5; }
  .s6 .vida-hex-on, .vida-slot.s6 i { animation-name: vida-s6; }
  .s7 .vida-hex-on, .vida-slot.s7 i { animation-name: vida-s7; }
  .vida-selo { animation-name: vida-selo; }
}

/* Todos os passos partilham a MESMA duração e o MESMO ponto de apagar (88%→94%),
   então o ciclo nunca sai de sincronia — o que muda é só quando cada letra
   acende. Nada pisca: são 7 acendimentos em 15s. */
@keyframes vida-s1   { 0%, 4%  { opacity: 0 } 6%,  88% { opacity: 1 } 94%, 100% { opacity: 0 } }
@keyframes vida-s2   { 0%, 10% { opacity: 0 } 12%, 88% { opacity: 1 } 94%, 100% { opacity: 0 } }
@keyframes vida-s3   { 0%, 16% { opacity: 0 } 18%, 88% { opacity: 1 } 94%, 100% { opacity: 0 } }
@keyframes vida-s4   { 0%, 22% { opacity: 0 } 24%, 88% { opacity: 1 } 94%, 100% { opacity: 0 } }
@keyframes vida-s5   { 0%, 28% { opacity: 0 } 30%, 88% { opacity: 1 } 94%, 100% { opacity: 0 } }
@keyframes vida-s6   { 0%, 34% { opacity: 0 } 36%, 88% { opacity: 1 } 94%, 100% { opacity: 0 } }
@keyframes vida-s7   { 0%, 49% { opacity: 0 } 51%, 88% { opacity: 1 } 94%, 100% { opacity: 0 } }
@keyframes vida-selo { 0%, 56% { opacity: 0 } 58%, 88% { opacity: 1 } 94%, 100% { opacity: 0 } }

/* ==========================================================================
   6. SEM MOVIMENTO — a página estática tem que ser a página INTEIRA
   --------------------------------------------------------------------------
   Nada aqui é "a versão reduzida": as órbitas ficam paradas em ângulos
   distintos (o rotate(var(--ang)) do estado base já garante isso), o
   tabuleiro mostra BOOMERS COMPLETO com o selo, e a ilustração dos cards
   continua no lugar. Nenhuma informação depende de esperar a animação.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vida-hex-on, .vida-slot i, .vida-selo { opacity: 1; animation: none; }
  .vida-chao, .vida-orb-gira, .vida-chip { animation: none; }
}

/* ==========================================================================
   7. IMPRESSÃO — cena e controles saem; o conteúdo permanece
   ========================================================================== */
@media print {
  .vida-orbita, .vida-chao, .vida-som { display: none; }
  .vida-hex-on, .vida-slot i, .vida-selo { opacity: 1; animation: none; }
  html[data-fb-page="Home.dc"] main > section::before { display: none; }
}