/**
 * Digital Function — Animation Framework Base States
 * Version: 1.1.0
 *
 * Prevents FOUC (flash of unstyled content) on animated elements.
 * Elements start invisible until GSAP takes over.
 *
 * Drop this in: /hello-child/df-animate.css
 * Enqueue in functions.php (see README)
 */

/* ─── Entrance animation base states ─────────────────────────────────────── */
/* Hide elements before JS kicks in so they don't flash at full opacity       */
.anim-fade-up:not(.anim-stagger),
.anim-fade-down:not(.anim-stagger),
.anim-fade-left:not(.anim-stagger),
.anim-fade-right:not(.anim-stagger),
.anim-fade-in:not(.anim-stagger) {
  opacity: 0;
}

/* Direct children */
.anim-stagger > * {
    opacity: 0;
}

/* Elementor .e-con-inner wrapper — target actual cards */
.anim-stagger > .e-con-inner > * {
    opacity: 0;
}

/* ─── Kill Elementor transform transition on animated elements ───────────── */
/* Prevents Elementor's CSS transition from fighting GSAP                     */
.anim-fade-up,
.anim-fade-down,
.anim-fade-left,
.anim-fade-right,
.anim-stagger > .e-con-inner > *,
.anim-stagger > * {
    transition: background var(--background-transition, .3s),
                border var(--border-transition, .3s),
                box-shadow var(--border-transition, .3s) !important;
}

/* ─── Split text ──────────────────────────────────────────────────────────── */
/* Container stays visible, GSAP handles child opacity                        */
.anim-split-lines,
.anim-split-words,
.anim-split-chars {
  overflow: visible;
}

/* ─── Prevent layout shift during split ──────────────────────────────────── */
.anim-split-lines span,
.anim-split-words span {
  display: block;
}

/* ─── Respect reduced motion ─────────────────────────────────────────────── */
/* If GSAP doesn't run, elements should still be visible                      */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-fade-down,
  .anim-fade-left,
  .anim-fade-right,
  .anim-fade-in,
  .anim-stagger > *,
  .anim-stagger > .e-con-inner > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── Mobile — settle animations ─────────────────────────────────────────── */
/* Shorter distance, faster duration — handled in JS                          */
/* anim-no-mobile class skips animation entirely on mobile                    */
@media (max-width: 767px) {
  .anim-no-mobile {
    opacity: 1 !important;
    transform: none !important;
  }
}