/**
 * Scroll Fade Up - Frontend Styles
 *
 * Initial state (opacity: 0, translateY: 60px) is set inline by PHP
 * to prevent flash of unstyled content. This CSS only handles:
 * 1. Completion state class
 * 2. Reduced motion preference (accessibility)
 * 3. No-JS fallback
 * 4. Print styles
 *
 * @package Stallman_Content_Kit
 * @since 1.0.0
 */

/* Completion state - applied by GSAP onComplete callback */
[data-scroll-fade-up="true"].is-scroll-faded-up {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* No-JS fallback: Show content if JavaScript is disabled */
/* Only use .no-js pattern - html:not(.js) doesn't work with themes that don't add .js class */
.no-js [data-scroll-fade-up="true"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Print styles: Ensure content is visible when printing */
@media print {
  [data-scroll-fade-up="true"] {
    opacity: 1 !important;
    transform: none !important;
  }
}