/* ==========================================================================
   Efeitos: parallax dos fundos e animações de carregamento
   ========================================================================== */

.parallax {
  overflow: hidden;
  isolation: isolate;
}

/* Parallax do original (Wix): a foto fica fixa na janela, cobrindo a tela toda, e a seção
   mostra apenas a parte dela que passa por baixo. */
.parallax__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-media);
  clip-path: inset(0);
}

.parallax__media img {
  position: fixed;
  top: 0;
  left: 50%;
  width: max(100vw, 1698px); /* como no original, a foto nunca é menor que a tela de 1698px */
  height: 100vh;
  max-width: none;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: 50% 62%;
}

/* Entrada ao rolar --------------------------------------------------------
   Os mesmos efeitos do site original (Wix): o elemento desliza 60px na direção
   indicada em data-reveal (left, right, up, down) e aparece em fade, em 1200ms,
   quando entra na tela. data-reveal="fade" só aparece em fade. */
[data-reveal="left"] {
  --rx: -60px;
  --ry: 0px;
}

[data-reveal="right"] {
  --rx: 60px;
  --ry: 0px;
}

[data-reveal="up"] {
  --rx: 0px;
  --ry: 60px;
}

[data-reveal="down"] {
  --rx: 0px;
  --ry: -60px;
}

/* Sem JavaScript o conteúdo continua visível: só escondemos quando o script está ativo */
.js [data-reveal]:not(.is-revealed) {
  opacity: 0;
}

[data-reveal].is-revealed {
  animation: reveal-float 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) backwards;
}

[data-reveal="fade"].is-revealed {
  animation-name: reveal-fade;
}

@keyframes reveal-float {
  from {
    opacity: 0;
    transform: translate(var(--rx), var(--ry));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not(.is-revealed) {
    opacity: 1;
  }

  [data-reveal].is-revealed {
    animation: none;
  }
}