/* ===== Rolagem suave e entradas ao rolar =====
 *
 * Skill de movimento do pacote THE-ARCTETURE · Site, do Igor: rolagem suave
 * (Lenis, scripts/rolagem.js) e entradas que tocam uma vez, cada tipo de
 * secao com o seu movimento. Regras da skill: so transform, opacity e
 * clip-path; chegada com cubic-bezier(0.16, 1, 0.3, 1); nada em loop.
 *
 * O estado inicial (escondido) so existe nos elementos que o rolagem.js
 * marca com data-rolar, e ele so marca o que esta fora da tela. Sem o
 * script, ou com "Reduzir animacoes", a pagina aparece completa.
 *
 * Usa as propriedades soltas translate e scale (e nao transform) para nao
 * brigar com o hover e as classes do Tailwind que ja mexem no transform.
 */

/* ---------- Lenis (o que a biblioteca pede) ---------- */
html.lenis,
html.lenis body {
  height: auto;
}

/* Com a rolagem suave ligada, o pulo nativo das ancoras fica imediato: quem
   anima e o Lenis (sem isso os dois animavam juntos). */
html.lenis {
  scroll-behavior: auto;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

:root {
  --chegada: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Entrada que ja existia (cards e banner) ----------
   Mesmo movimento de antes, com o pouso da skill: mais longo e
   desacelerando no fim. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-fade-up {
    transform: translateY(26px);
    transition:
      opacity 0.75s var(--chegada),
      transform 0.85s var(--chegada);
    transition-delay: var(--delay, 0s);
  }

  .reveal-fade-up.visible {
    transform: none;
  }
}

/* ---------- Entradas novas ----------
   As transicoes valem so durante a entrada (:not(.rl-fim)): depois o
   rolagem.js marca .rl-fim e cada peca volta para as transicoes dela (hover
   dos cards, dos botoes, dos links). */
:root [data-rolar] {
  --passo: 70ms;
}

/* Sobe um pouco: rodape, blocos do produto, combos. */
:root [data-rolar='subir']:not(.rl-fim) {
  transition-property: opacity, translate;
  transition-duration: 0.75s, 0.85s;
  transition-delay: calc(var(--i, 0) * var(--passo));
  transition-timing-function: var(--chegada);
}

:root [data-rolar='subir']:not(.rl-in) {
  opacity: 0;
  translate: 0 24px;
}

/* Chega de lado: depoimentos e os cartoes ao lado do produto. */
:root [data-rolar='lado'] {
  --passo: 80ms;
}

:root [data-rolar='lado']:not(.rl-fim) {
  transition-property: opacity, translate;
  transition-duration: 0.7s, 0.9s;
  transition-delay: calc(var(--i, 0) * var(--passo));
  transition-timing-function: var(--chegada);
}

:root [data-rolar='lado']:not(.rl-in) {
  opacity: 0;
  translate: 36px 0;
}

/* Titulo de secao: sobe de dentro de uma janela. A folga em cima e embaixo
   e para os acentos (e o "ç") nao serem cortados pela janela. */
:root [data-rolar='mascara']:not(.rl-fim) {
  overflow: hidden;
  padding-block: 0.14em 0.1em;
  margin-block: -0.14em -0.1em;
}

:root [data-rolar='mascara'] .rl-linha {
  display: inline-block;
  transition: translate 1s var(--chegada);
}

:root [data-rolar='mascara']:not(.rl-in) .rl-linha {
  translate: 0 110%;
}

/* Fotos das categorias populares: se revelam de baixo para cima e a imagem
   assenta. As outras transicoes do card (hover) continuam, sem atraso. */
:root [data-rolar='revelar'] {
  --passo: 45ms;
}

:root [data-rolar='revelar']:not(.rl-fim) {
  transition:
    clip-path 1.1s var(--chegada) calc(var(--i, 0) * var(--passo)),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

:root [data-rolar='revelar']:not(.rl-in) {
  clip-path: inset(100% 0 0 0);
}

:root [data-rolar='revelar']:not(.rl-fim) img {
  transition:
    scale 1.3s var(--chegada) calc(var(--i, 0) * var(--passo)),
    transform 0.5s ease-out;
}

:root [data-rolar='revelar']:not(.rl-in) img {
  scale: 1.15;
}

/* Cupom: a faixa abre do centro para as bordas e o conteudo chega depois. */
:root [data-rolar='faixa']:not(.rl-fim) {
  transition: clip-path 1.1s var(--chegada);
}

:root [data-rolar='faixa']:not(.rl-in) {
  clip-path: inset(0 50% 0 50%);
}

:root [data-rolar='faixa']:not(.rl-fim) > * {
  transition: opacity 0.6s ease 0.45s, translate 0.7s var(--chegada) 0.45s;
}

:root [data-rolar='faixa']:not(.rl-in) > * {
  opacity: 0;
  translate: 0 8px;
}

/* O recorte cortaria a sombra do hover: depois da entrada, sai. */
:root [data-rolar].rl-fim {
  clip-path: none;
}

/* Cabecalho de cada categoria: o traco na cor do tema cresce, o nome entra
   da esquerda, a linha fina se desenha ate a borda e o "Ver categoria"
   chega por ultimo. */
:root [data-rolar='cabeca'] .cat-cabeca-traco {
  transform-origin: 50% 100%;
}

:root [data-rolar='cabeca'] .cat-cabeca-linha {
  transform-origin: 0 50%;
}

:root [data-rolar='cabeca']:not(.rl-fim) .cat-cabeca-traco {
  transition: scale 0.6s var(--chegada);
}

:root [data-rolar='cabeca']:not(.rl-fim) .cat-cabeca-titulo,
:root [data-rolar='cabeca']:not(.rl-fim) .cat-cabeca-qtd {
  transition: opacity 0.6s ease 0.12s, translate 0.9s var(--chegada) 0.12s;
}

:root [data-rolar='cabeca']:not(.rl-fim) .cat-cabeca-qtd {
  transition-delay: 0.26s;
}

:root [data-rolar='cabeca']:not(.rl-fim) .cat-cabeca-linha {
  transition: scale 1.2s var(--chegada) 0.2s;
}

:root [data-rolar='cabeca']:not(.rl-fim) .cat-cabeca-ver {
  transition: opacity 0.6s ease 0.45s, translate 0.8s var(--chegada) 0.45s;
}

:root [data-rolar='cabeca']:not(.rl-in) .cat-cabeca-traco { scale: 1 0; }
:root [data-rolar='cabeca']:not(.rl-in) .cat-cabeca-titulo { opacity: 0; translate: -18px 0; }
:root [data-rolar='cabeca']:not(.rl-in) .cat-cabeca-qtd { opacity: 0; translate: -10px 0; }
:root [data-rolar='cabeca']:not(.rl-in) .cat-cabeca-linha { scale: 0 1; }
:root [data-rolar='cabeca']:not(.rl-in) .cat-cabeca-ver { opacity: 0; translate: 12px 0; }

/* Barras das avaliacoes do produto: crescem da esquerda, uma depois da
   outra. */
:root [data-rolar='barras'] {
  --passo: 90ms;
  transform-origin: 0 50%;
}

:root [data-rolar='barras']:not(.rl-fim) {
  transition: scale 1.1s var(--chegada) calc(var(--i, 0) * var(--passo) + 120ms);
}

:root [data-rolar='barras']:not(.rl-in) {
  scale: 0 1;
}

/* ---------- Menos movimento ----------
   "Reduzir animacoes" no painel ou no sistema: o rolagem.js mostra tudo
   pronto; aqui so tiramos as transicoes das pecas que entram (e nada mais,
   para nao mexer no que e transparente de proposito, como o hover). */
:root[data-menos-animacao='sim'] :is([data-rolar], [data-rolar] .rl-linha, [data-rolar='revelar'] img, [data-rolar='faixa'] > *, [data-rolar='cabeca'] > *) {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :is([data-rolar], [data-rolar] .rl-linha, [data-rolar='revelar'] img, [data-rolar='faixa'] > *, [data-rolar='cabeca'] > *) {
    transition: none !important;
  }
}