/* =====================================================
   MOTION — reveal + hover for every card
   assets/css/motion.css
 
   Single source of truth. Loads LAST (after responsive.css),
   so nothing else should define card hover or reveal.
 
   Feel: subtle editorial — slow, soft easing, small distances.
   Tune everything from the variables below.
===================================================== */
 
:root {
    --motion-ease:   cubic-bezier(0.22, 1, 0.36, 1); /* soft ease-out */
    --motion-reveal: 0.8s;    /* scroll-in fade/rise          */
    --motion-hover:  0.45s;   /* card lift, border, shadow    */
    --motion-image:  0.9s;    /* image zoom / settle          */
    --motion-step:   90ms;    /* delay between cards in a row */
    --motion-lift:   -4px;    /* how far a card rises on hover */
    --motion-zoom:   1.04;    /* image zoom on hover          */
}
 
 
/* ── 1. Base transitions (cards that never animate in) ── */
 
.blog-card,
.program-card,
.testimonial-card,
.how-step,
.industry-item,
:where(.about-pillars) .pillar {
    transition:
        transform    var(--motion-hover) var(--motion-ease),
        box-shadow   var(--motion-hover) var(--motion-ease),
        border-color var(--motion-hover) var(--motion-ease);
}
 
:is(.program-card__media, .insight-media, .testimonial-avatar) img {
    transition:
        scale   var(--motion-image) var(--motion-ease),
        opacity 0.5s ease;
}
 
 
/* ── 2. Scroll reveal ─────────────────────────────── */
 
/* Before: hidden, slightly lower */
.animate-section,
.animate-card {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity   var(--motion-reveal) var(--motion-ease),
        transform var(--motion-reveal) var(--motion-ease);
    transition-delay: calc(var(--stagger, 0) * var(--motion-step));
}
 
/* Card content follows the card a beat later */
.animate-card > :not(.program-card__media) {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity   var(--motion-reveal) var(--motion-ease),
        transform var(--motion-reveal) var(--motion-ease);
    transition-delay: calc(var(--stagger, 0) * var(--motion-step) + 150ms);
}
 
/* Card image settles from a slight zoom */
.animate-card :is(.program-card__media, .insight-media, .testimonial-avatar) img {
    scale: 1.06;
}
 
/* After: in place */
.animate-section.is-visible,
.animate-card.is-visible,
.animate-card.is-visible > * {
    opacity: 1;
    transform: none;
}
 
.animate-card.is-visible :is(.program-card__media, .insight-media, .testimonial-avatar) img {
    scale: 1;
}
 
/* Settled: reveal finished — hover responds instantly,
   with no leftover stagger delay */
.animate-card.is-settled,
.animate-card.is-settled > * {
    transition-delay: 0s;
}
 
.animate-card.is-settled {
    transition:
        transform    var(--motion-hover) var(--motion-ease),
        box-shadow   var(--motion-hover) var(--motion-ease),
        border-color var(--motion-hover) var(--motion-ease);
}
 
 
/* ── 3. Hover — container ─────────────────────────── */
 
/* Keyboard focus gets the same highlight, without the lift */
:is(.blog-card, .program-card, .testimonial-card, .how-step, .industry-item, :where(.about-pillars) .pillar):focus-within {
    border-color: var(--section-accent, var(--color-accent));
}
 
/* Lift only on real mouse hover — avoids "sticky" hover on phones */
@media (hover: hover) and (pointer: fine) {
 
    :is(.blog-card, .program-card, .testimonial-card, .how-step, .industry-item, :where(.about-pillars) .pillar):hover {
        transform: translateY(var(--motion-lift));
        border-color: var(--section-accent, var(--color-accent));
        box-shadow: 0 16px 32px -14px var(--card-shadow-color, rgba(200, 122, 62, 0.25));
    }
 
    /* ── 4. Hover — image ── */
 
    :is(.program-card, .insight, .testimonial-card):hover
        :is(.program-card__media, .insight-media, .testimonial-avatar) img {
        scale: var(--motion-zoom);
    }
 
    /* ── 5. Hover — text ── */
 
    :where(.about-pillars) .pillar:hover h3 {
        color: var(--section-accent, var(--color-accent));
    }
}
 
/* Testimonial slider: no lift — it fights the swipe gesture */
.testimonials-slider .testimonial-card:hover {
    transform: none;
}
 
 
/* ── 5b. Title underline sweep (programs + insights) ── */
 
.program-card__body :is(h2, h3, h4) a,
.insight-title a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    padding-block-end: 2px;
    transition:
        background-size var(--motion-hover) var(--motion-ease),
        color           var(--motion-hover) var(--motion-ease);
}
 
:is(.program-card, .insight):hover .program-card__body :is(h2, h3, h4) a,
:is(.program-card, .insight):hover .insight-title a,
.program-card__body :is(h2, h3, h4) a:focus-visible,
.insight-title a:focus-visible {
    color: var(--section-accent, var(--color-accent));
    background-size: 100% 1px;
}
 
 
/* ── 6. Reduced motion — show everything, move nothing ── */
 
@media (prefers-reduced-motion: reduce) {
 
    .animate-section,
    .animate-card,
    .animate-card > :not(.program-card__media) {
        opacity: 1;
        transform: none;
        transition: none;
    }
 
    .animate-card :is(.program-card__media, .insight-media, .testimonial-avatar) img,
    :is(.program-card, .insight, .testimonial-card):hover
        :is(.program-card__media, .insight-media, .testimonial-avatar) img {
        scale: 1;
        transition: none;
    }
 
    :is(.blog-card, .program-card, .testimonial-card, .how-step, .industry-item, :where(.about-pillars) .pillar):hover {
        transform: none;
    }
}

/* ── 7. Section 02 — comparison rows ─────────────── */

.compare-cell {
    transition:
        background-color var(--motion-hover) var(--motion-ease),
        box-shadow       var(--motion-hover) var(--motion-ease),
        color            var(--motion-hover) var(--motion-ease);
}

.compare-cell .compare-text {
    transition: transform var(--motion-hover) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {

    .compare-row:hover .compare-cell {
        background-color: color-mix(in srgb, var(--section-accent, #C87A3E) 7%, transparent);
    }

    /* Accent bar on the row's left edge */
    .compare-row:hover .compare-cell--old {
        box-shadow: inset 2px 0 0 var(--section-accent, var(--color-accent));
        color: var(--section-fg-muted);
    }

    .compare-row:hover .compare-cell--new .compare-text {
        transform: translateX(4px);
    }
}


/* ── 8. Section 03 — image / slideshow ──────────── */

.wwa-frame > img {
    transition:
        opacity 1.2s ease,
        scale   var(--motion-image) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
    .wwa-media--image .wwa-frame:hover img,
    .wwa-media--slideshow .wwa-frame:hover img {
        scale: var(--motion-zoom);
    }
}


/* ── 9. Section 04 — difference cells ───────────── */

.difference-item {
    position: relative;
    transition: background-color var(--motion-hover) var(--motion-ease);
}

/* Accent line that draws across the top edge */
.difference-item::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 0;
    block-size: 2px;
    background: var(--section-accent, var(--color-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-hover) var(--motion-ease);
}

.difference-number,
.difference-body {
    transition:
        transform var(--motion-hover) var(--motion-ease),
        color     var(--motion-hover) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {

    .difference-item:hover {
        background-color: color-mix(in srgb, var(--section-accent, #C87A3E) 6%, transparent);
    }

    .difference-item:hover::before {
        transform: scaleX(1);
    }

    .difference-item:hover .difference-number {
        transform: translateX(4px);
    }

    .difference-item:hover .difference-body {
        color: var(--section-fg);
    }
}


/* ── 10. Reduced motion — keep colour, drop movement ── */

@media (prefers-reduced-motion: reduce) {

    .compare-row:hover .compare-cell--new .compare-text,
    .difference-item:hover .difference-number {
        transform: none;
    }

    .wwa-media--image .wwa-frame:hover img,
    .wwa-media--slideshow .wwa-frame:hover img {
        scale: 1;
    }

    .wwa-frame > img {
        transition: none;
    }
}