/* ==========================================================================
   ANIMATIONS — THG Móveis
   Scroll reveal, hero entrance, parallax, galeria, interações.
   ========================================================================== */

/* ---- SCROLL REVEAL ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-lento) var(--ease-saida),
    transform var(--dur-lento) var(--ease-saida);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="left"] {
  transform: translateX(-32px);
}
[data-reveal="left"].is-visible {
  transform: translateX(0);
}

[data-reveal="right"] {
  transform: translateX(32px);
}
[data-reveal="right"].is-visible {
  transform: translateX(0);
}

[data-reveal="scale"] {
  transform: scale(0.96);
}
[data-reveal="scale"].is-visible {
  transform: scale(1);
}

/* ---- STAGGER ---- */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-suave) var(--ease-saida),
    transform var(--dur-suave) var(--ease-saida);
}

[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-stagger].is-visible > *:nth-child(n+7) { transition-delay: 480ms; }

[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---- HERO ENTRANCE ---- */
.hero__container,
.hero__titulo,
.hero__subtitulo,
.hero__ctas {
  opacity: 0;
}

.hero__container {
  animation: fadeSurge 900ms var(--ease-saida) 100ms forwards;
}

.hero__titulo {
  animation: fadeSurge 720ms var(--ease-saida) 320ms forwards;
}

.hero__subtitulo {
  animation: fadeSurge 720ms var(--ease-saida) 480ms forwards;
}

.hero__ctas {
  animation: fadeSurge 720ms var(--ease-saida) 600ms forwards;
}

@keyframes fadeSurge {
  to {
    opacity: 1;
  }
}

/* ---- GALERIA TROCA ---- */
.galeria__principal img {
  transition: opacity var(--dur-padrao) var(--ease-suave);
}

.galeria__principal.is-trocando img {
  opacity: 0;
}

/* ---- DEPOIMENTOS TROCA ---- */
.dep-principal__card p {
  transition: opacity var(--dur-padrao) var(--ease-suave);
}

.dep-principal.is-trocando p {
  opacity: 0;
}

/* ---- PARALLAX ---- */
.hero__imagem-wrap img {
  will-change: transform;
}

/* ---- SCROLL REVEAL TEXT FILL ---- */
.reveal-text-wrap {
  --progress: 0;
  color: rgba(45, 31, 18, 0.15); /* Marrom bem clarinho inicial */
  position: relative;
  line-height: 1.2;
}

.reveal-word {
  position: relative;
  display: inline-block;
  color: inherit;
  transition: color 0.1s linear;
}

.reveal-word::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--cor-tinta); /* Marrom escuro final */
  width: calc(var(--word-progress) * 100%);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.reveal-img-inline {
  display: inline-block;
  vertical-align: baseline;
  width: 0; /* Começa sem largura para não deixar espaço */
  height: 1em;
  border-radius: var(--raio-xs, 4px);
  overflow: hidden;
  margin-inline: 0; /* Será animado no JS */
  opacity: 0;
  transform: scale(0.8);
  position: relative;
  top: 0.15em;
  transition: 
    opacity 0.6s var(--ease-suave), 
    transform 0.6s var(--ease-suave), 
    width 0.6s var(--ease-suave),
    margin-inline 0.6s var(--ease-suave);
}

.reveal-img-inline.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reveal-img-inline img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__imagem-wrap,
  .hero__titulo,
  .hero__subtitulo,
  .hero__ctas {
    opacity: 1;
    transform: none;
    animation: none;
  }
}