/* ================================================================
   FOUR PILLARS — SUBTLE ANIMATION LAYER
   Three deliberate motion moments, no decorative flair.

   1. Pillar cards: staggered fade-up on results render
   2. Element balance bars: fill animation from 0% to final width
   3. Luck Pillars timeline: left-to-right reveal on scroll-in

   All animations honor prefers-reduced-motion. Users who've asked
   their OS for less motion get no animation at all.
   ================================================================ */


/* ── Motion tokens ──
   Single point of edit. Adjust here if anything feels too fast/slow. */
:root {
    --motion-fast:   180ms;
    --motion-normal: 420ms;
    --motion-slow:   720ms;
    --motion-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);  /* gentle ease-out */
    --motion-stagger: 90ms;
}


/* ════════════════════════════════════════════════════════════════
   1. PILLAR CARDS — staggered fade-up
   When the results section unhides, the four pillar cards rise
   into place one after another. The user feels the chart "being
   read" rather than appearing all at once.

   Implementation: cards start in a translated/transparent state
   and animate to their natural position. The stagger comes from
   :nth-child delays, so no JS needed beyond removing the [hidden]
   attribute on the parent.
   ════════════════════════════════════════════════════════════════ */

.fp-pillar-cards-grid > .fp-pillar-card,
.fp-pillars-grid > .fp-pillar {
    /* Starting state */
    opacity: 0;
    transform: translateY(10px);
    animation: fp-card-rise var(--motion-normal) var(--motion-ease) forwards;
}

.fp-pillar-cards-grid > .fp-pillar-card:nth-child(1),
.fp-pillars-grid > .fp-pillar:nth-child(1) { animation-delay: 0ms; }

.fp-pillar-cards-grid > .fp-pillar-card:nth-child(2),
.fp-pillars-grid > .fp-pillar:nth-child(2) { animation-delay: calc(var(--motion-stagger) * 1); }

.fp-pillar-cards-grid > .fp-pillar-card:nth-child(3),
.fp-pillars-grid > .fp-pillar:nth-child(3) { animation-delay: calc(var(--motion-stagger) * 2); }

.fp-pillar-cards-grid > .fp-pillar-card:nth-child(4),
.fp-pillars-grid > .fp-pillar:nth-child(4) { animation-delay: calc(var(--motion-stagger) * 3); }

@keyframes fp-card-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ════════════════════════════════════════════════════════════════
   2. ELEMENT BALANCE BARS — fill from 0% to final width
   The bars in the element balance section animate their width
   from 0 to the target percentage. Already partially in place via
   the elevation file's box-shadow glow; this layer adds the width
   animation itself.

   This requires either:
     (a) JS that sets data-target-width on each bar and then sets
         the width on next frame, OR
     (b) a CSS-only trick where the bar starts at width:0 and grows
         on a load delay.

   We use (b) for zero-JS approach. The bar transitions to its
   computed width over 0.7s, which is already in place via the
   `transition: width 0.7s` rule in the elevation file. We just
   need to make sure the bar STARTS at 0 width on initial render.

   The way this works: if the JS sets the bar width via JS after
   results render, the transition picks it up naturally. If the
   width is set inline in the rendered HTML (no transition trigger),
   we use a CSS animation instead.
   ════════════════════════════════════════════════════════════════ */

.fp-el-bar-fill {
    /* Transition handles JS-set widths. Already present in elevation
       file via `transition: width 0.7s cubic-bezier(...)`. We add
       a transform-origin for the keyframe approach below. */
    transform-origin: left center;
}

/* If the bar widths are inline-styled (not transitioned), this
   animation provides a fallback "stretch in from left" effect.
   It's idempotent with transitions: the transform animation runs
   regardless of how the width was set. */
.fp-el-row .fp-el-bar-fill {
    animation: fp-bar-stretch var(--motion-slow) var(--motion-ease) both;
}

.fp-el-row:nth-child(1) .fp-el-bar-fill { animation-delay: 50ms; }
.fp-el-row:nth-child(2) .fp-el-bar-fill { animation-delay: 130ms; }
.fp-el-row:nth-child(3) .fp-el-bar-fill { animation-delay: 210ms; }
.fp-el-row:nth-child(4) .fp-el-bar-fill { animation-delay: 290ms; }
.fp-el-row:nth-child(5) .fp-el-bar-fill { animation-delay: 370ms; }

@keyframes fp-bar-stretch {
    from {
        transform: scaleX(0);
        opacity: 0.6;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}


/* ════════════════════════════════════════════════════════════════
   3. LUCK PILLARS TIMELINE — left-to-right reveal on scroll-in
   When the user scrolls the luck timeline into view, it animates
   in from the left edge. Each decade segment becomes visible as
   the reveal passes its position.

   Approach: a mask gradient that slides from full-opacity-left to
   full-opacity-right over ~1.2s. The mask is applied to the
   timeline container. Once revealed, it stays visible.

   IntersectionObserver trigger: when the timeline enters viewport,
   add the .fp-luck-timeline--revealed class to start the animation.
   The base state is "masked"; the revealed state is "unmasked."

   If you don't want to add the JS hook for IntersectionObserver,
   the animation will fire on page load instead (still looks fine,
   just less "in-context" than scroll-triggered).
   ════════════════════════════════════════════════════════════════ */

.fp-luck-timeline {
    /* Start with a leftward-revealing mask. The gradient stops
       move from "all-transparent-right" to "all-opaque" over the
       animation duration. */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 0%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 0%, transparent 100%);
    animation: fp-timeline-reveal 1200ms var(--motion-ease) 200ms forwards;
}

@keyframes fp-timeline-reveal {
    to {
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%, transparent 100%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 100%, transparent 100%, transparent 100%);
    }
}

/* If you want this to be scroll-triggered instead of load-triggered,
   change the animation rule above to only run when this class is
   present, and use a small IntersectionObserver in your JS:

   .fp-luck-timeline {
     mask-image: linear-gradient(90deg, #000 0%, transparent 0%);
     ... no animation by default
   }
   .fp-luck-timeline--revealed {
     animation: fp-timeline-reveal 1200ms var(--motion-ease) forwards;
   }

   Add a 4-line IntersectionObserver in JS that adds the class on
   first viewport entry. */


/* ════════════════════════════════════════════════════════════════
   POLISH MOTION
   Small additional motion moments that didn't deserve their own
   numbered section but cost nothing.
   ════════════════════════════════════════════════════════════════ */

/* CTA button: subtle lift on hover, already partially in elevation file.
   Make sure the lift uses the standard motion tokens. */
.fp-calculate-btn,
.fp-btn,
.fp-cta-card .fp-btn {
    transition: transform var(--motion-fast) var(--motion-ease),
                box-shadow var(--motion-fast) var(--motion-ease),
                border-color var(--motion-fast) var(--motion-ease);
}

/* Pillar card hover: soft glow rather than transform.
   Transforms on cards can fight the staggered entrance animation;
   border + box-shadow plays nicer. */
.fp-pillar-card {
    transition: border-color var(--motion-fast) var(--motion-ease),
                box-shadow var(--motion-fast) var(--motion-ease);
}

.fp-pillar-card:hover {
    border-color: rgba(232, 197, 71, 0.35);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}


/* Sticky nav pill: smoother active-state transition */
.fp-nav-pill {
    transition: color var(--motion-fast) var(--motion-ease),
                border-color var(--motion-fast) var(--motion-ease),
                background var(--motion-fast) var(--motion-ease);
}


/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION
   Users who've set prefers-reduced-motion get static rendering.
   No exceptions, no "reduced version" — just no animation.
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .fp-pillar-cards-grid > .fp-pillar-card,
    .fp-pillars-grid > .fp-pillar,
    .fp-el-row .fp-el-bar-fill,
    .fp-luck-timeline {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .fp-calculate-btn,
    .fp-btn,
    .fp-pillar-card,
    .fp-nav-pill {
        transition: none !important;
    }

    .fp-pillar-card:hover {
        transform: none !important;
    }
}