/* Cenas das aberturas: um motor de partículas douradas (cenas.js) com uma forma por página.
   .cena segue as mesmas regras de .cena-vaga (servico.css); a imagem de fallback fica por baixo do canvas
   e some quando a primeira renderização acontece. */
.cena { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
/* páginas sem servico.css (Cases) também usam a grade da abertura */
.abertura-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; width: 100%; }
@media (min-width: 861px) { .abertura:has(.cena) { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; } }
@media (max-width: 860px) { .cena { aspect-ratio: 16 / 10; order: -1; } }
/* computador: a cena é o fundo da abertura inteira e o texto fica por cima dela, à esquerda.
   A forma se desloca para a direita (cenas.js) e um degradê escuro atrás do texto mantém a leitura. */
@media (min-width: 861px) {
  .abertura:has(.cena) { position: relative; overflow: hidden; }
  .abertura-grid:has(> .cena) { grid-template-columns: minmax(0, 1fr); }
  .abertura-grid:has(> .cena) > :not(.cena) { position: relative; z-index: 1; max-width: 560px; }
  .abertura-grid > .cena { position: absolute; inset: 0; aspect-ratio: auto; z-index: 0; }
  .abertura-grid > .cena::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,0) 58%); }
}
.cena-fallback, .cena-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cena-fallback { object-fit: cover; transition: opacity 1.2s var(--grow); }
.cena-canvas { opacity: 0; transition: opacity 1.2s var(--grow); }
.cena.viva .cena-canvas { opacity: 1; }
.cena.viva .cena-fallback { opacity: 0; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* rodapé "Próxima semente": partículas atrás do título da próxima página */
.proxima:has(.proxima-canvas) { position: relative; overflow: hidden; }
.proxima-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.2s var(--grow); pointer-events: none; }
.proxima.viva .proxima-canvas { opacity: .7; }
.proxima:has(.proxima-canvas) > a { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) { .cena-fallback, .cena-canvas, .proxima-canvas { transition: none; } }