/**
 * Parallax CSS for wrap-content, paragraph.bolder, section.main children, and wordpress-content elements
 */

.wrap-content.parallax-element,
.paragraph.bolder.parallax-element,
.section.main > *.parallax-element,
#wordpress-content.parallax-element,
#wordpress-content h2.parallax-element,
#wordpress-content .post-content.parallax-element {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: transform, opacity;
}

.wrap-content.parallax-element.parallax-active,
.paragraph.bolder.parallax-element.parallax-active,
.section.main > *.parallax-element.parallax-active,
#wordpress-content.parallax-element.parallax-active,
#wordpress-content h2.parallax-element.parallax-active,
#wordpress-content .post-content.parallax-element.parallax-active {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure smooth animations */
.wrap-content,
.paragraph.bolder,
.section.main > *,
#wordpress-content,
#wordpress-content h2,
#wordpress-content .post-content {
  position: relative;
}

/* Optional: Add subtle scale effect on hover */
.wrap-content.parallax-active,
.paragraph.bolder.parallax-active,
.section.main > *.parallax-active,
#wordpress-content.parallax-active,
#wordpress-content h2.parallax-active,
#wordpress-content .post-content.parallax-active {
  transition: opacity 0.8s ease-out, transform 0.3s ease-out;
}

/* Hover effect removed - no movement on hover */
/* .wrap-content.parallax-active:hover {
  transform: translateY(-5px);
} */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .wrap-content.parallax-element,
  .paragraph.bolder.parallax-element,
  .section.main > *.parallax-element,
  #wordpress-content.parallax-element,
  #wordpress-content h2.parallax-element,
  #wordpress-content .post-content.parallax-element {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .wrap-content.parallax-element.parallax-active,
  .paragraph.bolder.parallax-element.parallax-active,
  .section.main > *.parallax-element.parallax-active,
  #wordpress-content.parallax-element.parallax-active,
  #wordpress-content h2.parallax-active,
  #wordpress-content .post-content.parallax-active {
    transform: none;
  }
  
  .wrap-content.parallax-active:hover,
  .paragraph.bolder.parallax-active:hover,
  .section.main > *.parallax-active:hover,
  #wordpress-content.parallax-active:hover,
  #wordpress-content h2.parallax-active:hover,
  #wordpress-content .post-content.parallax-active:hover {
    transform: none;
  }
}