/* ================================================================
   FOUR PILLARS — MOTION FIX
   Replaces the pillar-card and bar-stretch animations from
   four-pillars-motion.css with class-gated versions that fire
   every time results render, not just on page load.

   Load AFTER four-pillars-motion.css to override.

   The fix uses a JS-toggled class (.fp-results--animating) on the
   results wrapper. When the class is present, child elements animate.
   The class is added when results render, removed after animations
   complete. This pattern lets us re-trigger the animation on every
   recalculation.
   ================================================================ */


/* ── KILL the old keyframe animations from motion.css ──
   The old rules had `animation: fp-card-rise ... forwards` directly
   on the element, which fires on load. Override to none. */

.fp-pillar-cards-grid > .fp-pillar-card,
.fp-pillars-grid > .fp-pillar,
.fp-el-row .fp-el-bar-fill {
    animation: none !important;
    /* Default visible state — if JS never adds the animating class,
       things just appear normally rather than stay hidden. */
    opacity: 1;
    transform: none;
}


/* ── Pillar card entrance (gated by class on the container) ──
   When .fp-results--animating is on the results section, the four
   pillar cards start invisible and rise into place. We use CSS
   transitions rather than keyframes so the animation always reflects
   the current property values rather than a pre-baked timeline. */

.fp-results--animating .fp-pillar-cards-grid > .fp-pillar-card,
.fp-results--animating .fp-pillars-grid > .fp-pillar {
    /* Starting state — applied only when the class is present */
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* When the animating class is replaced with .fp-results--animated,
   the same cards transition to their final state. The two-class
   approach (add --animating, then on next frame replace with
   --animated) is what makes the transition fire reliably. */

.fp-results--animated .fp-pillar-cards-grid > .fp-pillar-card,
.fp-results--animated .fp-pillars-grid > .fp-pillar {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stagger via transition-delay so each card starts later than the last.
   Using transition-delay (not animation-delay) is what makes this fire
   on class toggle rather than only at element birth. */
.fp-results--animated .fp-pillar-cards-grid > .fp-pillar-card:nth-child(1),
.fp-results--animated .fp-pillars-grid > .fp-pillar:nth-child(1) {
    transition-delay: 0ms;
}
.fp-results--animated .fp-pillar-cards-grid > .fp-pillar-card:nth-child(2),
.fp-results--animated .fp-pillars-grid > .fp-pillar:nth-child(2) {
    transition-delay: 110ms;
}
.fp-results--animated .fp-pillar-cards-grid > .fp-pillar-card:nth-child(3),
.fp-results--animated .fp-pillars-grid > .fp-pillar:nth-child(3) {
    transition-delay: 220ms;
}
.fp-results--animated .fp-pillar-cards-grid > .fp-pillar-card:nth-child(4),
.fp-results--animated .fp-pillars-grid > .fp-pillar:nth-child(4) {
    transition-delay: 330ms;
}


/* ── Element balance bars (same pattern: class-gated, transition-based) ──
   The base CSS already has `transition: width 0.7s` on the bar fill.
   We use that existing transition by setting width to 0 in the
   "animating" state, then letting it transition to its computed
   width in the "animated" state.

   This relies on the renderer setting width via inline style. If the
   renderer uses width: 70%, our :not(.fp-results--animated) override
   sets it to 0%, then removing animating triggers the transition
   back to 70%.

   We're more conservative here and just leave the bars as they are —
   the base CSS has a width transition that should work if the JS
   sets widths after the element is in the DOM. If it doesn't, the
   bars just appear at final width, which is fine. */

/* Removed the scaleX keyframe approach — it was fighting the base
   transition. Bars now just transition their width naturally if
   the JS sets widths after first paint. */


/* ── Reduced motion guard ──
   If a user has prefers-reduced-motion set, the animating/animated
   classes do nothing — cards appear in final state immediately. */

@media (prefers-reduced-motion: reduce) {
    .fp-results--animating .fp-pillar-cards-grid > .fp-pillar-card,
    .fp-results--animating .fp-pillars-grid > .fp-pillar,
    .fp-results--animated .fp-pillar-cards-grid > .fp-pillar-card,
    .fp-results--animated .fp-pillars-grid > .fp-pillar {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}