/* ══════════════════════════════════════════════════════════════════
   Cinematic FX · transiciones cinematográficas + parallax al hacer scroll
   Modular y autocontenido. Quitar = borrar enlaces en index.
   - Reveal-on-scroll con profundidad y stagger (entrada de secciones)
   - Parallax de fondos por background-position (sin romper layout)
   Solo presentación. Respeta prefers-reduced-motion. Fail-safe en JS.
   ══════════════════════════════════════════════════════════════════ */

/* ── Reveal: estado inicial (lo añade JS; si JS falla, nada se oculta) ── */
.cine {
  opacity: 0;
  transform: translateY(46px) scale(0.975);
  filter: blur(5px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 0.84, 0.24, 1),
    transform 1s cubic-bezier(0.16, 0.84, 0.24, 1),
    filter 0.85s ease;
  transition-delay: calc(var(--cine-i, 0) * 75ms);
  will-change: opacity, transform;
}
/* Tarjetas: entran con más profundidad (parallax) */
.cine.cine-card {
  transform: translateY(64px) scale(0.93);
}
/* Variante lateral (alterna en rejillas para sensación 3D) */
.cine.cine-left  { transform: translateY(40px) translateX(-38px) scale(0.95) rotate(-1deg); }
.cine.cine-right { transform: translateY(40px) translateX(38px)  scale(0.95) rotate(1deg); }

.cine.cine-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Limpia will-change tras revelar (perf) */
.cine.cine-done { will-change: auto; }

/* ── Parallax: el motor (JS) escribe background-position-y o transform ── */
.cine-px { will-change: background-position, transform; }

@media (prefers-reduced-motion: reduce) {
  .cine, .cine.cine-card, .cine.cine-left, .cine.cine-right {
    opacity: 1 !important; transform: none !important; filter: none !important;
    transition: none !important;
  }
}