/* Motion Effects
   Animations that sit on top of any Page Blueprints layout.
   They only change opacity and transform. They never change layout, size or colour.
   Add after the layout's styles.css and any Lookbook preset.

   Requires motion.js, which adds the "js-motion" class to <html>.
   Without it, everything displays normally. */

/* Scroll reveal: elements marked .reveal fade and rise into place */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.js-motion .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hover lift on cards and product tiles */
.menu-item,
.price-card,
.coach-card,
.product,
.work-card,
.player,
.look {
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.menu-item:hover,
.price-card:hover,
.coach-card:hover,
.product:hover,
.work-card:hover,
.player:hover {
  transform: translateY(-3px);
}

/* Buttons: a small press response */
.btn {
  transition: transform 0.15s ease-out, background-color 0.2s ease-out, color 0.2s ease-out;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Hero: a gentle entrance on the first load */
.js-motion .hero h1,
.js-motion .hero-lead,
.js-motion .hero-actions,
.js-motion .hero-tag,
.js-motion .hero-label,
.js-motion .hero-kicker {
  animation: motion-rise 0.9s ease-out both;
}
.js-motion .hero-lead { animation-delay: 0.1s; }
.js-motion .hero-actions { animation-delay: 0.2s; }

@keyframes motion-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal,
  .js-motion .reveal.is-visible,
  .js-motion .hero h1,
  .js-motion .hero-lead,
  .js-motion .hero-actions,
  .js-motion .hero-tag,
  .js-motion .hero-label,
  .js-motion .hero-kicker {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .menu-item:hover,
  .price-card:hover,
  .coach-card:hover,
  .product:hover,
  .work-card:hover,
  .player:hover,
  .btn:hover,
  .btn:active {
    transform: none;
  }
}