/* ==========================================================================
   Vida

   Superfície metálica no herói, entrada por rolagem e profundidade no cartão.
   Ver o cabeçalho de assets/js/hero-metal.js para o diagnóstico que originou
   esta camada.

   Tudo aqui é opcional por construção: sem WebGL, sem JavaScript ou com
   `prefers-reduced-motion`, a página continua exatamente utilizável.
   ========================================================================== */

/* `!important` por medição, não por chute: o tema pai fixa `position: relative`
   em canvas com especificidade maior. Sem isto o canvas entra no fluxo, ocupa
   1914px de altura e empurra todo o conteúdo do herói para 2000px abaixo da
   dobra — foi o que aconteceu na primeira tentativa. */
.home .rg-hero > canvas.rg-metal,
.rg-metal {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 0;
  pointer-events: none;
  margin: 0 !important;
}

/* O herói vira o palco: o conteúdo passa a flutuar sobre o metal. */
.home .rg-hero { overflow: hidden; }
.home .rg-hero > .rg-wrap { position: relative; z-index: 2; }

/* O brilho radial antigo sai quando o metal entra — dois brilhos brigam. */
.home .rg-hero:has(.rg-metal)::before { display: none; }

/* --------------------------------------------------------------------------
   Entrada por rolagem
   -------------------------------------------------------------------------- */

.rg-entra {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1),
              transform .62s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.rg-entra.rg-entrou {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Cartões vizinhos entram em cascata curta — 40 ms basta para o olho ler
   como sequência sem parecer lento. */
.rg-momento:nth-child(2), .rg-servico:nth-child(2) { transition-delay: .04s; }
.rg-momento:nth-child(3), .rg-servico:nth-child(3) { transition-delay: .08s; }
.rg-momento:nth-child(4) { transition-delay: .12s; }
.rg-momento:nth-child(5) { transition-delay: .16s; }
.rg-momento:nth-child(6) { transition-delay: .20s; }

/* --------------------------------------------------------------------------
   Profundidade no cartão
   -------------------------------------------------------------------------- */

.home .rg-momento,
.home .rg-servico {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .16s ease-out, background-color .16s ease, border-color .16s ease;
}

/* O brilho que segue o ponteiro. `--bx`/`--by` vêm do JavaScript. */
.home .rg-momento::after,
.home .rg-servico::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  background: radial-gradient(
    360px circle at var(--bx, 50%) var(--by, 50%),
    rgba(178, 187, 192, 0.10),
    transparent 62%
  );
}
.home .rg-momento:hover::after,
.home .rg-servico:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rg-entra { opacity: 1; transform: none; transition: none; }
  .home .rg-momento, .home .rg-servico { transition: none; }
}

/* --------------------------------------------------------------------------
   Véu de legibilidade

   O metal é animado: o brilho passa por baixo do texto e muda a cada quadro.
   O teste de contraste do projeto lê cor computada de CSS — ele NÃO enxerga
   pixel de canvas. Ou seja: se um veio claro passar sob o título, nenhum teste
   automático acusa, e a falha só aparece para quem estiver olhando naquele
   instante.

   Por isso a legibilidade não é deixada por conta da sorte: um véu escuro
   suave entre o metal e o conteúdo garante o piso de contraste em qualquer
   quadro da animação. É gradiente, custa zero.
   -------------------------------------------------------------------------- */
.home .rg-hero:has(.rg-metal)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 58% at 50% 46%, rgba(8, 10, 11, 0.86), rgba(8, 10, 11, 0.52) 62%, transparent 88%),
    linear-gradient(to bottom, rgba(8,10,11,0.35), transparent 30%, transparent 70%, rgba(8,10,11,0.45));
}