/* Gláucia Granado Estética — animações e interações.
   Os estados escondidos só valem com .js no <html>: sem JavaScript, tudo aparece. */

:root {
  --anim-dur: .9s;
  --anim-curva: cubic-bezier(.22, .61, .36, 1);
  --anim-passo: 90ms;
}

/* Aparição no scroll: entra ao descer, sai ao deixar a tela */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity var(--anim-dur) var(--anim-curva), transform var(--anim-dur) var(--anim-curva);
  transition-delay: calc(var(--i, 0) * var(--anim-passo));
}
.js [data-reveal][data-saida="cima"] { transform: translate3d(0, -36px, 0); }
.js [data-reveal="esquerda"] { transform: translate3d(-48px, 0, 0); }
.js [data-reveal="direita"] { transform: translate3d(48px, 0, 0); }
.js [data-reveal="zoom"] { transform: scale(.94); }
.js [data-reveal].visivel { opacity: 1; transform: none; }
.js [data-reveal]:not(.visivel) { transition-duration: .5s; transition-delay: 0s; }

/* Arco: a foto se revela de baixo para cima, com um leve recuo de zoom */
.js [data-reveal="arco"] { transform: none; clip-path: inset(100% 0 0 0); transition-property: opacity, clip-path; transition-duration: 1.2s; }
.js [data-reveal="arco"] img { transform: scale(1.14); transition: transform 1.6s var(--anim-curva); }
.js [data-reveal="arco"].visivel { clip-path: inset(0 0 0 0); }
.js [data-reveal="arco"].visivel img { transform: scale(1); }
.js .abertura__foto::before { opacity: 0; transform: translate3d(-12px, 12px, 0); transition: opacity 1.2s var(--anim-curva) .5s, transform 1.4s var(--anim-curva) .5s; }
.js .abertura__foto:has(.gg-arco.visivel)::before { opacity: 1; transform: none; }

/* Textos-chave: palavra por palavra */
.js [data-texto] .palavra { display: inline-block; opacity: 0; transform: translate3d(0, .45em, 0); filter: blur(6px); transition: opacity .8s var(--anim-curva), transform .8s var(--anim-curva), filter .8s var(--anim-curva); transition-delay: calc(var(--p, 0) * 55ms + 120ms); }
.js [data-texto].visivel .palavra { opacity: 1; transform: none; filter: blur(0); }
.js [data-texto]:not(.visivel) .palavra { transition-duration: .4s; transition-delay: 0s; }
/* a palavra de destaque chega por último e "acende" de dusk para argila */
.js [data-texto] .palavra--destaque em { display: inline-block; color: var(--dusk); transform: scale(.9) rotate(-2deg); transform-origin: left bottom; transition: color 1s var(--anim-curva), transform 1s var(--anim-curva); transition-delay: inherit; }
.js [data-texto].visivel .palavra--destaque em { color: var(--argila); transform: none; }

/* Frase da marca: as palavras vão "acendendo" como numa leitura */
.js [data-texto="leitura"] .palavra { opacity: .18; transform: none; filter: none; transition: opacity .6s ease; transition-delay: calc(var(--p, 0) * 70ms + 200ms); }
.js [data-texto="leitura"].visivel .palavra { opacity: 1; }

/* Botões e cards: resposta ao toque/hover */
.gg-btn { transition: background-color .2s ease, color .2s ease, transform .3s var(--anim-curva); }
.gg-btn:hover { transform: translateY(-2px); }
.card-proc { transition: transform .5s var(--anim-curva), box-shadow .5s var(--anim-curva); }
.card-proc:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(85, 77, 58, .14); }
.card-proc .gg-proc__icone { transition: transform .6s var(--anim-curva); }
.card-proc:hover .gg-proc__icone { transform: scale(1.08) rotate(-4deg); }
.js .card-proc.visivel:hover { transform: translateY(-6px); }

/* Topo: linha some no início da página */
.topo { transition: border-color .4s ease; }
.topo:not(.rolou) { border-bottom-color: transparent; }

/* Carrosséis: rolagem lateral com encaixe */
.carrossel__trilho, .depoimentos__grade { scrollbar-width: none; }
.carrossel__trilho::-webkit-scrollbar, .depoimentos__grade::-webkit-scrollbar { display: none; }
.carrossel__trilho { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50%); }
.par { scroll-snap-align: start; flex-basis: calc((min(100vw, 1200px) - 64px - 24px) / 2); }
.pontos i { transition: width .4s var(--anim-curva), background-color .4s ease; cursor: pointer; }
/* no desktop aparecem dois pares por vez: só as setas */
#resultados .pontos { display: none; }
#resultados .carrossel__controles { justify-content: flex-end; }

/* Menu do celular */
.topo__nav-cta { display: none; }
@media (max-width: 760px) {
  .par { flex-basis: 86%; }
  .carrossel__trilho { padding-right: 20px; }
  .depoimentos__grade { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin: -16px -20px 0 0; padding: 16px 20px 24px 0; }
  .depoimentos__grade .gg-card { scroll-snap-align: start; }

  .topo__nav { position: fixed; inset: 68px 0 0 0; z-index: 20; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) 20px; background: var(--linho); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .35s ease, transform .45s var(--anim-curva), visibility 0s linear .45s; }
  .topo__nav a { font-size: 30px; line-height: 52px; font-weight: 300; border-bottom: 1px solid rgba(85, 77, 58, .12); }
  .topo__nav .topo__nav-cta { display: inline-flex; margin-top: var(--space-6); border: 0; font-size: 16px; line-height: 20px; font-weight: 500; color: var(--on-argila); }
  #resultados .pontos { display: flex; }
  .menu-aberto .topo__nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .menu-aberto { overflow: hidden; }
}

/* Quem prefere menos movimento vê tudo parado */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal] img, .js [data-texto] .palavra, .js [data-texto] .palavra--destaque em, .js .abertura__foto::before { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; color: inherit; transition: none !important; }
  .js [data-texto] .palavra--destaque em { color: var(--argila); }
  .carrossel__trilho, .depoimentos__grade { scroll-behavior: auto; }
}