/* Topo da home: modelo recortado ao fundo (js/bss-hero-recortes.js).
   Camada entre a foto da loja (z 0) e o texto (z 20). Só transform e opacity se mexem.
   Layout fixo (sem CLS): a camada é absoluta e já existe no HTML. */
.hero-recortes {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease;
  /* Nada chega perto do texto: o lado esquerdo da camada some */
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 34%, #000 62%);
}
.hero-recortes.pronto { opacity: 1; }
/* Um fio de luz de ouro no chão, atrás do modelo */
.hero-recortes::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(52% 34% at 76% 90%, rgba(247, 181, 0, 0.11), transparent 72%);
}
.hr-fig {
  position: absolute; right: 3%; bottom: 7%; width: min(46vw, 620px); height: 76%;
  opacity: 0; transform: translate3d(36px, 0, 0);
  transition: opacity 2.2s cubic-bezier(0.4, 0, 0.2, 1), transform 9s cubic-bezier(0, 0, 0.2, 1);
  will-change: transform, opacity;
  /* O pé do modelo se dissolve no chão escuro */
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}
.hr-fig.on { opacity: 0.4; transform: translate3d(0, 0, 0); }
.hr-fig img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; user-select: none;
  /* Tom do fundo escuro e um fio de ouro na borda: o produto continua o real, só entra na paleta */
  filter: grayscale(0.5) brightness(0.72) contrast(1.08) drop-shadow(0 0 1px rgba(247, 181, 0, 0.55));
}

/* Celular: menos modelos (o JS corta em 3), menor e mais apagado, atrás dos botões */
@media (max-width: 767px) {
  .hero-recortes { -webkit-mask-image: none; mask-image: none; }
  .hr-fig { right: -8%; bottom: 4%; width: 80vw; height: 28%; transform: translate3d(20px, 0, 0); }
  .hr-fig.on { opacity: 0.3; }
}

/* Reduzir movimento: composição estática */
@media (prefers-reduced-motion: reduce) {
  .hero-recortes { transition: none; }
  .hr-fig { transition: none; transform: none; }
}
html[data-freeze] .hr-fig { transition: none; transform: none; }