/* ==========================================================================
   animacoes.css — animações de entrada, profundidade 3D e movimento
   Regra de ouro: tudo aqui é desligado em prefers-reduced-motion.
   ========================================================================== */

/* ---------- Revelação no scroll (ativada por assets/js/revelar.js) ---------- */
/* Usa as propriedades "translate"/"scale" (e não "transform") para a revelação
   não anular o mini zoom que o cartão faz no hover. */
[data-revelar] {
  opacity: 0;
  translate: 0 28px;
  transition: opacity var(--transicao-lenta), translate var(--transicao-lenta), scale var(--transicao-lenta);
  transition-delay: var(--atraso, 0ms);
  will-change: opacity, translate;
}
/* O deslocamento lateral cabe dentro da margem do container (20px): com mais
   do que isso o bloco da direita passa da borda e cria rolagem horizontal. */
[data-revelar="esquerda"] { translate: -16px 0; }
[data-revelar="direita"]  { translate: 16px 0; }
/* No celular a entrada lateral empurra a página para os lados: vira vertical. */
@media (max-width: 900px) {
  [data-revelar="esquerda"], [data-revelar="direita"] { translate: 0 28px; }
}
[data-revelar="zoom"]     { translate: 0; scale: .92; }
[data-revelar].visivel    { opacity: 1; translate: none; scale: none; }

/* ---------- Herói 3D ---------- */
.heroi { position: relative; overflow: hidden; background: var(--grafite-900); color: #fff; isolation: isolate; }
.heroi__canvas { position: absolute; inset: 0; z-index: 0; }
/* A cena 3D foi desenhada para telas largas (os objetos ficam à direita do
   texto). Em tela estreita ela corta o conteúdo, então não é exibida — e o
   Three.js nem chega a ser baixado (ver o carregador no fim do index.html). */
@media (max-width: 1099px) { .heroi__canvas { display: none; } }
/* A cena fica só na metade direita: nenhuma peça passa por trás do texto.
   As bordas esmaecem para as peças não aparecerem "cortadas". */
@media (min-width: 1100px) {
  .heroi__canvas {
    inset: 0 0 0 auto; width: 44%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 92%, transparent 100%);
  }
}
.heroi__canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.heroi__brilho {
  position: absolute; z-index: 1; pointer-events: none; inset: 0;
  background:
    radial-gradient(60% 55% at 78% 30%, rgba(217,0,0,.30), transparent 62%),
    radial-gradient(70% 60% at 12% 82%, rgba(62,123,212,.22), transparent 66%);
}
.heroi__grade-fundo {
  position: absolute; inset: 0; z-index: 0; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%);
}

/* ---------- Keyframes ---------- */
@keyframes flutuar   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pulsar    { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes girar     { to { transform: rotate(360deg); } }
@keyframes descer    { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@keyframes deslizarX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes entrarBaixo { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }

.flutua { animation: flutuar 6s ease-in-out infinite; }
.entra  { animation: entrarBaixo 900ms cubic-bezier(.22,.61,.36,1) both; }
.entra--2 { animation-delay: 140ms; }
.entra--3 { animation-delay: 280ms; }
.entra--4 { animation-delay: 420ms; }

/* Seta de rolagem */
.rolar-indicador { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3; opacity: .7; }
.rolar-indicador span { display: block; animation: descer 2s ease-in-out infinite; }

/* Faixa de marcas em movimento contínuo */
.faixa { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.faixa__trilho { display: flex; gap: var(--e-7); width: max-content; animation: deslizarX 32s linear infinite; }
.faixa__item { font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--t-lg); color: var(--cinza-400); opacity: .75; white-space: nowrap; }

/* Barra de progresso de leitura (blog) */
.progresso-leitura { position: fixed; top: 0; left: 0; height: 3px; z-index: 200; background: var(--marca-500); width: 0; transition: width 90ms linear; }

/* ---------- Preferência por menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-revelar] { opacity: 1 !important; translate: none !important; scale: none !important; }
  .heroi__canvas { display: none; }
}