/* Sistema de movimento reutilizável — scroll reveal, parallax e drag-scroll horizontal.
   Aplicar via atributos data-* no HTML de cada dobra (ver motion.js). */

[data-reveal] {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1), transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
/* variantes — entrada lateral (dois painéis "se encontrando") e pop (bounce leve, pra destaque) */
[data-reveal="left"] { transform: translateX(-64px); }
[data-reveal="right"] { transform: translateX(64px); }
[data-reveal="pop"] {
  transform: scale(0.82);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* parallax — deslocamento aplicado via JS (motion.js), só desktop + sem prefers-reduced-motion */
[data-parallax] { will-change: transform; }

[data-drag-scroll] {
  display: flex;
  gap: var(--drag-gap, 20px);
  overflow-x: auto;
  scroll-behavior: smooth;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
}
[data-drag-scroll]::-webkit-scrollbar { display: none; }
[data-drag-scroll].is-dragging { cursor: grabbing; scroll-behavior: auto; }
[data-drag-scroll] > * { flex: 0 0 auto; }
[data-drag-scroll] img, [data-drag-scroll] video { -webkit-user-drag: none; user-drag: none; }

/* mobile: os painéis laterais empilham, então a entrada lateral vira vertical — o translateX ±64px esticava a página e deixava a rolagem "arrastável" pro lado */
@media (max-width: 734px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(46px); }
  [data-reveal="left"].is-visible, [data-reveal="right"].is-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-parallax] { transform: none !important; }
  [data-drag-scroll] { scroll-behavior: auto; }
}