/* ==========================================================================
   Motion: scroll reveal and reduced-motion overrides (load last)
   ========================================================================== */

/* Elements marked with data-reveal fade in once main.js adds .is-revealed.
   The .js class on <html> keeps content visible when JavaScript is off. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s ease;
}

.js [data-reveal="1"].is-revealed {
  transition-delay: .08s;
}

.js [data-reveal="2"].is-revealed {
  transition-delay: .16s;
}

.js [data-reveal="3"].is-revealed {
  transition-delay: .24s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal],
  .js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .btn__icon,
  .card__media img,
  .whatsapp-fab {
    transition: none;
  }
}