/* ==========================================================================
   Hero — mosaico cinematográfico de vídeos
   Camadas: 1) fundo escuro  2) mosaico  3) overlay  4) conteúdo
   Só transform e opacity são animados; nada aqui provoca reflow.
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#0b0a0c;               /* Camada 1 */
  isolation:isolate;
}

/* --------------------------------------------------------------- Camada 2 */

.hero-mosaic{
  position:absolute;
  inset:-10%;                        /* sangra para os cartões saírem da tela */
  z-index:0;
  pointer-events:none;
  /* parallax do ponteiro, alimentado pelo hero.js */
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  will-change:transform;
}

.hm-card{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  aspect-ratio:9/16;
  border-radius:20px;
  overflow:hidden;
  /* a rotação fica no elemento externo; a deriva anima o interno */
  transform:rotate(var(--r,0deg)) translate3d(0,0,0);
  box-shadow:0 28px 64px rgba(0,0,0,.55),0 4px 16px rgba(0,0,0,.4);
  backface-visibility:hidden;
  opacity:0;
  animation:hmEnter .9s cubic-bezier(.2,.7,.3,1) var(--enter,0s) forwards;
}

.hm-inner{
  position:absolute;
  inset:0;
  transform:translate3d(0,0,0);
  will-change:transform;
  animation:hmDrift var(--dur,26s) ease-in-out var(--delay,0s) infinite alternate;
}

.hm-card video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* --b é reduzido pelo hero.js quando o vídeo está claro demais */
  filter:brightness(var(--b,.82)) contrast(1.03) saturate(1.05);
  transition:filter 1s ease;
}

@keyframes hmEnter{
  from{opacity:0;transform:rotate(var(--r,0deg)) translate3d(0,26px,0) scale(.97)}
  to  {opacity:1;transform:rotate(var(--r,0deg)) translate3d(0,0,0) scale(1)}
}

/* deriva lenta: cada cartão recebe deslocamento, escala e duração próprios */
@keyframes hmDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(var(--dx,0),var(--dy,-2.2%),0) scale(var(--s,1.045))}
}

/* --------------------------------------------------------------- Camada 3 */

.hero-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.55));
}

/* reforço lateral: o texto vive à esquerda e precisa de mais contraste ali */
.hero-scrim::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.1) 64%,rgba(0,0,0,.3) 100%),
    linear-gradient(180deg,rgba(11,10,12,.55) 0%,rgba(11,10,12,0) 24%,rgba(11,10,12,0) 62%,rgba(11,10,12,.92) 100%);
}

/* --------------------------------------------------------------- Camada 4 */

.hero-content{position:relative;z-index:2}

/* ------------------------------------------------------------ preferências */

@media (prefers-reduced-motion:reduce){
  .hm-card{animation:none;opacity:1}
  .hm-inner{animation:none}
  .hero-mosaic{transform:none}
}