/* motion.css — Core-Web-Vitals-safe micro-motion for findexoticcarstorage.com
 *
 * Rules that keep this from hurting rankings:
 *  - animates only transform/opacity (GPU compositor, never triggers reflow)
 *  - no layout shift: transforms and box-shadow don't move surrounding content (CLS = 0)
 *  - fully disabled under prefers-reduced-motion (accessibility)
 *  - motion.js only reveals BELOW-the-fold elements, so the LCP/hero element
 *    is never hidden and Largest Contentful Paint is unaffected
 *  - if the JS never runs, nothing is hidden — all content stays visible
 */

@media (prefers-reduced-motion: no-preference) {

  /* Scroll reveal — gated on html.js so content is visible without JS */
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
  }
  html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
  }

  /* Hover micro-interactions — pure CSS, no JS, no layout shift */
  .city-card,
  .listing-card,
  .sponsor-card,
  .post-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .city-card:hover,
  .listing-card:hover,
  .sponsor-card:hover,
  .post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  }

  .nav-cta,
  button {
    transition: transform .18s ease, background .18s ease, opacity .18s ease;
  }
  .nav-cta:hover,
  button:hover {
    transform: translateY(-1px);
  }
}