/*
 * Small page animations (Home and Features), like the slide-ins of the old
 * Beaver Builder pages. motion.js marks the elements; nothing is hidden
 * unless motion.js has run, and nothing moves for visitors whose system asks
 * for reduced motion.
 */

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

  /* Elements that slide or fade in once, when they come into view. */
  .eepss-motion .eepss-reveal {
    opacity: 0;
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
    will-change: opacity, transform;
  }
  .eepss-motion .eepss-reveal-up    { transform: translateY(24px); }
  .eepss-motion .eepss-reveal-down  { transform: translateY(-40px); transition-duration: 1s; }
  .eepss-motion .eepss-reveal-left  { transform: translateX(-60px); }
  .eepss-motion .eepss-reveal-right { transform: translateX(60px); }
  .eepss-motion .eepss-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Home hero photo: a very slow zoom so the picture feels alive. */
  .home .eepss-hero {
    overflow: hidden;
  }
  .home .eepss-hero > .wp-block-cover__image-background {
    animation: eepss-hero-zoom 20s ease-out both;
    transform-origin: 50% 50%;
  }
  @keyframes eepss-hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.03); }
  }

  /* Buttons lift a little under the mouse (all pages). */
  .wp-block-button__link,
  .woocommerce a.button,
  .woocommerce button.button {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .wp-block-button__link:hover,
  .woocommerce a.button:hover,
  .woocommerce button.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}