/* ==========================================================================
   Efeitos: parallax do hero e animações de entrada
   ========================================================================== */

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

.parallax__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-bg);
  will-change: transform;
}

.parallax__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Entrada ao rolar: o elemento aparece em fade (e desliza 60px na direção
   indicada em data-reveal: left, right, up, down) quando entra na tela. */
[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 1000ms 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;
  }
}