/**
 * GDS Animate Plugin Styles
 * Minimal base styles - customize in your theme for specific animations
 */

/* Hidden state - elements with gds-animate-block class start hidden */
.gds-animate-block {
  /* Add .gds-animate-visible class to trigger animations */
}

/* Media & Text Block - example animation (customize in theme) */
.wp-block-media-text.gds-animate-block {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.wp-block-media-text.gds-animate-visible {
  opacity: 1;
  transform: translateY(0);
}

.wp-block-media-text.gds-animate-visible .wp-block-media-text__media {
  animation: fadeInLeft 0.8s ease-out;
}

.wp-block-media-text.gds-animate-visible .wp-block-media-text__content {
  animation: fadeInRight 0.8s ease-out 0.2s both;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Query Loop Block - customize animations in your theme */
/* Example structure for theme:
 * .wp-block-query.gds-animate-block .your-child-selector { }
 * .wp-block-query.gds-animate-visible .your-child-selector { }
 */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .gds-animate-block,
  .wp-block-media-text.gds-animate-block {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wp-block-media-text.gds-animate-visible .wp-block-media-text__media,
  .wp-block-media-text.gds-animate-visible .wp-block-media-text__content {
    animation: none;
  }
}