/**
 * Elegant Memorials - Scroll Animation Styles
 * Smooth fade-in and slide-up animations triggered on scroll
 */

/* Base animation class - elements start invisible */
.em-animate-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: none; /* Disable transition initially */
}

/* When element becomes visible, trigger the animation */
.em-animate-fade-up.em-visible {
  animation: emFadeInUp 0.8s ease-out forwards;
}

/* The actual animation */
@keyframes emFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional: Add subtle hover effects to columns */
.wp-block-column {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-column:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Prevent columns with borders from having hover effects (optional) */
.wp-block-column[style*="border-width"]:hover {
  box-shadow: 0 10px 30px rgba(154, 134, 107, 0.2); /* Elegant brown shadow */
}

/* Add smooth transitions to buttons */
.wp-block-button {
  transition: transform 0.2s ease;
}

.wp-block-button:hover {
  transform: scale(1.05);
}

/* Smooth scroll behavior for the entire page */
html {
  scroll-behavior: smooth;
}

/* Optional: Add a subtle parallax effect to the hero section */
.wp-block-cover {
  transition: transform 0.3s ease-out;
}

/* Reduce motion for users who prefer it (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .em-animate-fade-up,
  .wp-block-column,
  .wp-block-button,
  html {
    animation: none !important;
    transition: none !important;
  }
  
  .em-animate-fade-up {
    opacity: 1;
    transform: none;
  }
}

/* Mobile responsiveness - smaller animation distances */
@media (max-width: 768px) {
  @keyframes emFadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px); /* Less movement on mobile */
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .wp-block-column:hover {
    transform: none; /* Disable hover effects on mobile */
    box-shadow: none;
  }
}