/* ============================================================
   Mush: Categories — scroll-reveal + hover effects
   ------------------------------------------------------------
   Verified against the widget render() output (no assumed names):
     <section class="mush-section-row">
        <a class="mush-cat-card mush-cat-card--large|--flex">
           <span class="mush-cat-title">…</span>
           <div class="mush-cat-img-wrap"><img …></div>
        </a> …
     </section>

   Base layout/colours live in the plugin's mush-home.css (scoped under
   .mush-page). This file is enqueued AFTER mush-home.css, so equal-
   specificity rules here win — we only add motion/hover polish, no
   layout changes.

   The reveal uses the individual `translate` property (not `transform`)
   so it composes cleanly with the hover `transform: scale()` — the two
   never clobber each other.

   The hidden (pre-reveal) state is applied by JS via `.mush-cat-reveal`,
   so with JS disabled the cards stay fully visible (no hidden content).
   ============================================================ */

/* ── Reveal: hidden state (added by JS) ───────────────────── */
.mush-cat-card.mush-cat-reveal {
    opacity: 0;
    translate: 0 24px;
}

.mush-cat-card.mush-cat-reveal.is-revealed {
    opacity: 1;
    translate: 0 0;
}

/* Per-property transitions: opacity/translate carry the staggered
   reveal delay (var(--item-index) set by JS); transform/box-shadow run
   instantly for hover. Scoped with .mush-page to outrank the base
   `.mush-page .mush-cat-card { transition: transform .25s }` from
   mush-home.css while the reveal class is present. */
.mush-page .mush-cat-card.mush-cat-reveal {
    transition:
        opacity   0.45s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--item-index, 0) * 80ms),
        translate 0.45s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--item-index, 0) * 80ms),
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, translate, transform;
}

/* ── Hover / focus: scale + accent ring & glow ────────────── */
/* Baseline transition for the no-JS path (reveal class absent). */
.mush-page .mush-cat-card {
    transition:
        transform  0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.mush-page .mush-cat-card:hover,
.mush-page .mush-cat-card:focus-visible {
    transform: scale(1.03);
    box-shadow: 0 0 0 2px #CDE738, 0 0 18px 0 rgba(205, 231, 56, 0.18);
}

/* ── Title accent on hover (base #fff comes from mush-home.css) ── */
.mush-page .mush-cat-title {
    transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.mush-page .mush-cat-card:hover .mush-cat-title,
.mush-page .mush-cat-card:focus-visible .mush-cat-title {
    color: #CDE738;
}

/* ── Image zoom on hover (parent already has overflow:hidden) ── */
.mush-page .mush-cat-img-wrap img {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.mush-page .mush-cat-card:hover .mush-cat-img-wrap img,
.mush-page .mush-cat-card:focus-visible .mush-cat-img-wrap img {
    transform: scale(1.06);
}

/* ── Reduced motion: no reveal animation, no scale/zoom motion.
      Accent ring/glow + title colour (non-motion cues) are kept. ── */
@media (prefers-reduced-motion: reduce) {
    .mush-cat-card.mush-cat-reveal,
    .mush-cat-card.mush-cat-reveal.is-revealed {
        opacity: 1 !important;
        translate: none !important;
    }
    .mush-page .mush-cat-card.mush-cat-reveal,
    .mush-page .mush-cat-card {
        transition:
            box-shadow 0.25s ease,
            color 0.25s ease;
    }
    .mush-page .mush-cat-card:hover,
    .mush-page .mush-cat-card:focus-visible {
        transform: none;
    }
    .mush-page .mush-cat-card:hover .mush-cat-img-wrap img,
    .mush-page .mush-cat-card:focus-visible .mush-cat-img-wrap img {
        transform: none;
    }
}