/* hk-reveal.css — Scroll-reveal system (spec 2026-05-05).
 *
 * Three motion classes (.hk-reveal, .hk-reveal--clip, .hk-reveal--card)
 * + per-scope descendant selectors that ADD reveal semantics to existing
 * markup without modifying it.
 *
 * Source-of-truth pairing: this file's selectors MUST match the
 * REVEAL_SELECTOR list in hk-reveal.js. Both files reference each other.
 *
 * All hidden states are gated behind html.hk-reveal-on (set inline by
 * header.php's pre-paint script) so a non-JS visitor or a JS-failed page
 * still gets visible content.
 */

/* === Three motion classes ============================================== */

/* Variant B — body text default (fade + 16px translateY rise) */
html.hk-reveal-on .hk-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--hk-motion-reveal) var(--hk-ease-out-cubic),
                transform var(--hk-motion-reveal) var(--hk-ease-out-cubic);
    will-change: opacity, transform;
}
html.hk-reveal-on .hk-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variant D — clip-wipe from below + small rise (headings, featured imgs, blockquotes) */
html.hk-reveal-on .hk-reveal--clip {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(8px);
    transition: opacity calc(var(--hk-motion-reveal-clip) * 0.6) ease,
                clip-path var(--hk-motion-reveal-clip) var(--hk-ease-out-cubic),
                transform var(--hk-motion-reveal-clip) var(--hk-ease-out-cubic);
    will-change: clip-path, transform, opacity;
}
html.hk-reveal-on .hk-reveal--clip.is-visible {
    opacity: 1;
    clip-path: inset(0);
    transform: translateY(0);
}

/* Card B — fade + 24px up + scale 0.96 */
html.hk-reveal-on .hk-reveal--card {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    transition: opacity var(--hk-motion-reveal-card) var(--hk-ease-out-cubic),
                transform var(--hk-motion-reveal-card) var(--hk-ease-out-cubic);
    will-change: opacity, transform;
}
html.hk-reveal-on .hk-reveal--card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* === Instant-visible (above-the-fold, no animation) ===================== */

html.hk-reveal-on .hk-reveal.is-visible-instant,
html.hk-reveal-on .hk-reveal--clip.is-visible-instant,
html.hk-reveal-on .hk-reveal--card.is-visible-instant {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
}

/* === LCP / FOUC carve-out =============================================== */

/* Featured images and any other element with this attribute paint instantly. */
html.hk-reveal-on [data-hk-no-reveal],
html.hk-reveal-on [data-hk-no-reveal] .hk-reveal,
html.hk-reveal-on [data-hk-no-reveal] .hk-reveal--clip,
html.hk-reveal-on [data-hk-no-reveal] .hk-reveal--card {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
}

/* === will-change cleanup (set by JS via .is-revealed after transition) === */

html.hk-reveal-on .hk-reveal.is-revealed,
html.hk-reveal-on .hk-reveal--clip.is-revealed,
html.hk-reveal-on .hk-reveal--card.is-revealed {
    will-change: auto;
}

/* === Reduced-motion short-circuit ====================================== */

@media (prefers-reduced-motion: reduce) {
    html.hk-reveal-on .hk-reveal,
    html.hk-reveal-on .hk-reveal--clip,
    html.hk-reveal-on .hk-reveal--card {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
        will-change: auto;
    }
}

/* === Hero exclusion (homepage hero choreography is owned by hakim-fx.js)
   Scope this narrowly to .hk-reveal* descendants only. A blanket
   `.hk-hero *` selector here wiped `transform: translate(-50%, -50%)` on
   .hk-hero__logo-wrapper (de-centered the logo) and the inline translateY
   set by hakim-fx.js on text-strip / logo-title / motto-words. */

html.hk-reveal-on .hk-hero .hk-reveal,
html.hk-reveal-on .hk-hero .hk-reveal--clip,
html.hk-reveal-on .hk-hero .hk-reveal--card {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
}

/* === Article body (single.php — .hk-article__content) ================== */

/* Variant B — body text */
html.hk-reveal-on .hk-article__content > p,
html.hk-reveal-on .hk-article__content > ul,
html.hk-reveal-on .hk-article__content > ol,
html.hk-reveal-on .hk-article__content > figure:not([data-hk-no-reveal]),
html.hk-reveal-on .hk-article__content > table {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--hk-motion-reveal) var(--hk-ease-out-cubic),
                transform var(--hk-motion-reveal) var(--hk-ease-out-cubic);
    will-change: opacity, transform;
}
html.hk-reveal-on .hk-article__content > p.is-visible,
html.hk-reveal-on .hk-article__content > ul.is-visible,
html.hk-reveal-on .hk-article__content > ol.is-visible,
html.hk-reveal-on .hk-article__content > figure.is-visible,
html.hk-reveal-on .hk-article__content > table.is-visible {
    opacity: 1;
    transform: translateY(0);
}
html.hk-reveal-on .hk-article__content > p.is-visible-instant,
html.hk-reveal-on .hk-article__content > ul.is-visible-instant,
html.hk-reveal-on .hk-article__content > ol.is-visible-instant,
html.hk-reveal-on .hk-article__content > figure.is-visible-instant,
html.hk-reveal-on .hk-article__content > table.is-visible-instant {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Variant D — headings, blockquotes, Quran, Hadith (clip-wipe + small rise) */
html.hk-reveal-on .hk-article__content > h2,
html.hk-reveal-on .hk-article__content > h3,
html.hk-reveal-on .hk-article__content > blockquote,
html.hk-reveal-on .hk-article__content > .hk-quran,
html.hk-reveal-on .hk-article__content > .hk-hadith {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(8px);
    transition: opacity calc(var(--hk-motion-reveal-clip) * 0.6) ease,
                clip-path var(--hk-motion-reveal-clip) var(--hk-ease-out-cubic),
                transform var(--hk-motion-reveal-clip) var(--hk-ease-out-cubic);
    will-change: clip-path, transform, opacity;
}
html.hk-reveal-on .hk-article__content > h2.is-visible,
html.hk-reveal-on .hk-article__content > h3.is-visible,
html.hk-reveal-on .hk-article__content > blockquote.is-visible,
html.hk-reveal-on .hk-article__content > .hk-quran.is-visible,
html.hk-reveal-on .hk-article__content > .hk-hadith.is-visible {
    opacity: 1;
    clip-path: inset(0);
    transform: translateY(0);
}
html.hk-reveal-on .hk-article__content > h2.is-visible-instant,
html.hk-reveal-on .hk-article__content > h3.is-visible-instant,
html.hk-reveal-on .hk-article__content > blockquote.is-visible-instant,
html.hk-reveal-on .hk-article__content > .hk-quran.is-visible-instant,
html.hk-reveal-on .hk-article__content > .hk-hadith.is-visible-instant {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
}

/* === Perspektive bodies (singular page + REST reader overlay) ========== */
/* Memory: feedback_pv_dual_wrappers — every Perspektive renders at both
   singular .hk-pv-body and overlay .pv-reader__body. Both selectors
   required so reveals work in either path. */

/* Variant B — body text in BOTH wrappers */
html.hk-reveal-on .hk-pv-body > p,
html.hk-reveal-on .hk-pv-body > ul,
html.hk-reveal-on .hk-pv-body > ol,
html.hk-reveal-on .hk-pv-body > figure:not([data-hk-no-reveal]),
html.hk-reveal-on .pv-reader__body > p,
html.hk-reveal-on .pv-reader__body > ul,
html.hk-reveal-on .pv-reader__body > ol,
html.hk-reveal-on .pv-reader__body > figure:not([data-hk-no-reveal]) {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--hk-motion-reveal) var(--hk-ease-out-cubic),
                transform var(--hk-motion-reveal) var(--hk-ease-out-cubic);
    will-change: opacity, transform;
}
html.hk-reveal-on .hk-pv-body > p.is-visible,
html.hk-reveal-on .hk-pv-body > ul.is-visible,
html.hk-reveal-on .hk-pv-body > ol.is-visible,
html.hk-reveal-on .hk-pv-body > figure.is-visible,
html.hk-reveal-on .pv-reader__body > p.is-visible,
html.hk-reveal-on .pv-reader__body > ul.is-visible,
html.hk-reveal-on .pv-reader__body > ol.is-visible,
html.hk-reveal-on .pv-reader__body > figure.is-visible {
    opacity: 1;
    transform: translateY(0);
}
html.hk-reveal-on .hk-pv-body > p.is-visible-instant,
html.hk-reveal-on .hk-pv-body > ul.is-visible-instant,
html.hk-reveal-on .hk-pv-body > ol.is-visible-instant,
html.hk-reveal-on .hk-pv-body > figure.is-visible-instant,
html.hk-reveal-on .pv-reader__body > p.is-visible-instant,
html.hk-reveal-on .pv-reader__body > ul.is-visible-instant,
html.hk-reveal-on .pv-reader__body > ol.is-visible-instant,
html.hk-reveal-on .pv-reader__body > figure.is-visible-instant {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Variant D — headings, blockquotes, Quran, Hadith in BOTH wrappers */
html.hk-reveal-on .hk-pv-body > h2,
html.hk-reveal-on .hk-pv-body > h3,
html.hk-reveal-on .hk-pv-body > blockquote,
html.hk-reveal-on .hk-pv-body > .hk-quran,
html.hk-reveal-on .hk-pv-body > .hk-hadith,
html.hk-reveal-on .pv-reader__body > h2,
html.hk-reveal-on .pv-reader__body > h3,
html.hk-reveal-on .pv-reader__body > blockquote,
html.hk-reveal-on .pv-reader__body > .hk-quran,
html.hk-reveal-on .pv-reader__body > .hk-hadith {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(8px);
    transition: opacity calc(var(--hk-motion-reveal-clip) * 0.6) ease,
                clip-path var(--hk-motion-reveal-clip) var(--hk-ease-out-cubic),
                transform var(--hk-motion-reveal-clip) var(--hk-ease-out-cubic);
    will-change: clip-path, transform, opacity;
}
html.hk-reveal-on .hk-pv-body > h2.is-visible,
html.hk-reveal-on .hk-pv-body > h3.is-visible,
html.hk-reveal-on .hk-pv-body > blockquote.is-visible,
html.hk-reveal-on .hk-pv-body > .hk-quran.is-visible,
html.hk-reveal-on .hk-pv-body > .hk-hadith.is-visible,
html.hk-reveal-on .pv-reader__body > h2.is-visible,
html.hk-reveal-on .pv-reader__body > h3.is-visible,
html.hk-reveal-on .pv-reader__body > blockquote.is-visible,
html.hk-reveal-on .pv-reader__body > .hk-quran.is-visible,
html.hk-reveal-on .pv-reader__body > .hk-hadith.is-visible {
    opacity: 1;
    clip-path: inset(0);
    transform: translateY(0);
}
html.hk-reveal-on .hk-pv-body > h2.is-visible-instant,
html.hk-reveal-on .hk-pv-body > h3.is-visible-instant,
html.hk-reveal-on .hk-pv-body > blockquote.is-visible-instant,
html.hk-reveal-on .hk-pv-body > .hk-quran.is-visible-instant,
html.hk-reveal-on .hk-pv-body > .hk-hadith.is-visible-instant,
html.hk-reveal-on .pv-reader__body > h2.is-visible-instant,
html.hk-reveal-on .pv-reader__body > h3.is-visible-instant,
html.hk-reveal-on .pv-reader__body > blockquote.is-visible-instant,
html.hk-reveal-on .pv-reader__body > .hk-quran.is-visible-instant,
html.hk-reveal-on .pv-reader__body > .hk-hadith.is-visible-instant {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
}