/* ==========================================================================
   ANIMATIONS — animações de scroll, hover e keyframes globais
   Catálogo completo em docs/ANIMATIONS.md
   ========================================================================== */

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.85); }
}

/* --------------------------------------------------------------------------
   1. Blur-to-focus reveal (scroll) — aplicado a seções inteiras
   Controlado por js/scroll-reveal.js via IntersectionObserver
   -------------------------------------------------------------------------- */
.cinema-reveal {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter, transform;
}

.js-scroll-animate {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(28px);
}

.js-scroll-animate.revealed {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}


/* --------------------------------------------------------------------------
   3. Tilt 3D no hover — cards que reagem à posição do mouse
   Controlado por js/tilt.js, que define --tilt-x / --tilt-y inline
   -------------------------------------------------------------------------- */
.tilt-card {
  transform: perspective(900px)
    rotateX(var(--tilt-y, 0deg))
    rotateY(var(--tilt-x, 0deg))
    translateZ(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tilt-card:hover {
  transition: transform 0.08s linear;
}

/* --------------------------------------------------------------------------
   4. Parallax sutil no título do hero durante o scroll
   Controlado por js/parallax.js, que define --parallax-y inline
   -------------------------------------------------------------------------- */
.parallax-el {
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}

.sweep-title .char {
  display: inline-block;
  white-space: pre; /* preserva o espaço entre palavras */
}

/* Respeita usuários que pedem menos movimento */
@media (prefers-reduced-motion: reduce) {
  .js-scroll-animate,
  .stagger-item,
  .tilt-card,
  .parallax-el {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .dot {
    animation: none;
  }
}