/* ------------------------------------------------------------------
   Diagonal background reveal for .frame-lightBG / .frame-darkBG
   Requires: the background in site.css (lines ~525 / ~537) is moved
   into the custom property --frame-bg (see notes).
   Hidden start state only applies when JS is running (html.js-reveal),
   so without JS the backgrounds show normally.
   ------------------------------------------------------------------ */

.frame-lightBG,
.frame-darkBG
{
    position: relative;
    isolation: isolate;          /* keeps ::before z-index:-1 inside the frame */
}

.frame-lightBG::before,
.frame-darkBG::before
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--frame-bg);
    pointer-events: none;
}

html.js-reveal .frame-lightBG::before,
html.js-reveal .frame-darkBG::before
{
    transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

/* lightBG: top left -> bottom right */
html.js-reveal .frame-lightBG::before
{
    clip-path: polygon(0 0, 0 0, 0 0);
}
html.js-reveal .frame-lightBG.is-revealed::before
{
    clip-path: polygon(0 0, 200% 0, 0 200%);
}

/* darkBG: bottom left -> top right */
html.js-reveal .frame-darkBG::before
{
    /*clip-path: polygon(0 100%, 0 100%, 0 100%);*/
    clip-path: polygon(0 0, 0 0, 0 0);
}
html.js-reveal .frame-darkBG.is-revealed::before
{
    /*clip-path: polygon(0 100%, 0 -100%, 200% 100%);*/
    clip-path: polygon(0 0, 200% 0, 0 200%);
}

/* darkBG usually sets light text – fade it in with the background
   so it isn't invisible on white before the reveal */
html.js-reveal .frame-darkBG > *
{
    /*opacity: 0;*/
    transition: opacity 0.4s ease 0.5s;
}
html.js-reveal .frame-darkBG.is-revealed > *
{
    opacity: 1;
}

@media (prefers-reduced-motion: reduce)
{
    html.js-reveal .frame-lightBG::before,
    html.js-reveal .frame-darkBG::before,
    html.js-reveal .frame-darkBG > * {
        transition: none;
        clip-path: none;
        opacity: 1;
    }
}