/* ==========================================================================
   effects.css — motion (há motion real no projeto: pulso do selo, spinner do
   form, reveal sutil ao rolar). Discreto e funcional, sem bounce (DESIGN.md).
   prefers-reduced-motion zera tudo (INVARIANTE de acessibilidade).
   ========================================================================== */

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(var(--color-accent-rgb), 0); }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Reveal ao rolar. O estado escondido só vale quando o JS está ativo (html.js):
   sem JS, o conteúdo aparece normalmente (progressive enhancement). */
.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--motion-slow) var(--motion-ease-out),
              transform var(--motion-slow) var(--motion-ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .room-card__dot { animation: none; }
  .room-card, .room-card__photo, .btn, .btn__arrow,
  .lightbox, .lightbox__track, .lightbox__slide, .cta-bar, .site-header { transition: none; }
}