/**
 * Section Reveal
 *
 * Replaces transition.css. Scroll-triggered clip-path reveals keyed
 * directly on the raw [data-section_reveal] schema value — the plugin no
 * longer remaps preset names to transition.css's `in:wipe:right`-style
 * strings, so the selectors below match the schema options verbatim:
 * wipe-right, wipe-left, wipe-up, wipe-down, circle-center,
 * circle-bottom-right, polygon-opposing-corners.
 *
 * Mechanism (see assets/js/section-reveal.js):
 * - On load, JS adds `js-reveal` to <html>. Only then are unrevealed
 *   sections hidden — with JS absent (or before it runs), sections stay
 *   visible, so the effect degrades to "no animation" rather than
 *   "content never appears".
 * - An IntersectionObserver adds `.is-revealed` whenever a section enters the
 *   viewport and removes it once the section is fully clear, so the keyframe
 *   below plays every time the band is scrolled to — not only the first.
 *
 * @package Plexa_AI_Theme
 * Schema: section_reveal
 */

/* No-JS-safe hide: only hide once JS confirms it can reveal again.
   This is the ONLY place opacity belongs. It used to appear in all seven
   keyframes as well, animating 0 -> 1 across the same 0.9s as the clip-path,
   and a crossfade that long overwhelms the geometry underneath it: a
   wipe-right and a wipe-up both read as "a fade". Rick, 2026-09-15: "the
   techniques do not match their name." They did match — you could not see them.
   The instant `.is-revealed` lands this rule stops matching, so opacity is
   already 1 on the animation's first frame and the clip-path does all the
   work. */
html.js-reveal [data-section-reveal]:not(.is-revealed) {
    opacity: 0;
}

[data-section-reveal].is-revealed {
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(.2, .7, .2, 1);
    animation-fill-mode: both;
}

/* ==========================================================================
   Wipes — inset() clip-path sliding in from one edge
   ========================================================================== */

[data-section-reveal="wipe-right"].is-revealed {
    animation-name: plexa-reveal-wipe-right;
}
[data-section-reveal="wipe-left"].is-revealed {
    animation-name: plexa-reveal-wipe-left;
}
[data-section-reveal="wipe-up"].is-revealed {
    animation-name: plexa-reveal-wipe-up;
}
[data-section-reveal="wipe-down"].is-revealed {
    animation-name: plexa-reveal-wipe-down;
}

@keyframes plexa-reveal-wipe-right {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes plexa-reveal-wipe-left {
    from {
        clip-path: inset(0 0 0 100%);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes plexa-reveal-wipe-up {
    from {
        clip-path: inset(100% 0 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes plexa-reveal-wipe-down {
    from {
        clip-path: inset(0 0 100% 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* ==========================================================================
   Circles — circle() clip-path expanding from a point
   ========================================================================== */

[data-section-reveal="circle-center"].is-revealed {
    animation-name: plexa-reveal-circle-center;
}
[data-section-reveal="circle-bottom-right"].is-revealed {
    animation-name: plexa-reveal-circle-bottom-right;
}

@keyframes plexa-reveal-circle-center {
    from {
        clip-path: circle(0% at center);
    }
    to {
        clip-path: circle(75% at center);
    }
}

@keyframes plexa-reveal-circle-bottom-right {
    from {
        clip-path: circle(0% at 100% 100%);
    }
    to {
        clip-path: circle(150% at 100% 100%);
    }
}

/* ==========================================================================
   Polygon — two opposing corners growing to fill the box
   ========================================================================== */

[data-section-reveal="polygon-opposing-corners"].is-revealed {
    animation-name: plexa-reveal-polygon-opposing-corners;
}

@keyframes plexa-reveal-polygon-opposing-corners {
    from {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* ==========================================================================
   Reduced motion — show content, skip the animation
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html.js-reveal [data-section-reveal]:not(.is-revealed) {
        opacity: 1;
    }
    [data-section-reveal].is-revealed {
        animation: none !important;
        clip-path: none !important;
        opacity: 1 !important;
    }
}