/*
 * Resolve v1.7.2
 * Text focus-reveal animation for CMS-friendly front-end use.
 *
 * Add a Resolve class, such as `resolve-headings` or `resolve-metaview`, to a
 * container. Resolve will animate supported text inside it on first entry.
 */

.resolve,
.resolve-headings,
.resolve-text,
.resolve-metaview,
.resolve-metaview-text {
    --resolve-duration: 1.2;
    --resolve-stagger: 0.024;
    --resolve-stagger-random: 0.012;
    --resolve-blur: 10;
    --resolve-opacity: 0.25;
    --resolve-opacity-wave: 0.3;
    --resolve-blur-wave: 0.5;
    --resolve-mode: chars;
    --resolve-y: 0;
    --resolve-container-y: 0;
    --resolve-container-opacity: 1;
    --resolve-container-duration: 0;
    --resolve-ease: power3.out;
    --resolve-delay: 0;
    --resolve-line-stagger: 0;
    --resolve-threshold: 0.35;
    --resolve-root-margin: 0px 0px -10% 0px;
}

.resolve-text {
    --resolve-duration: 1.2;
    --resolve-stagger: 0.024;
    --resolve-stagger-random: 0.012;
    --resolve-blur: 10;
    --resolve-opacity: 0.25;
    --resolve-opacity-wave: 0.3;
    --resolve-blur-wave: 0.5;
}

.resolve-headings {
    --resolve-duration: 1.05;
    --resolve-stagger: 0.004;
    --resolve-stagger-random: 0.003;
    --resolve-blur: 7;
    --resolve-opacity: 0.38;
    --resolve-opacity-wave: 0.06;
    --resolve-blur-wave: 0.08;
}

/*
 * A close match for Metaview's report reveal: whole words start equally
 * blurred and low, then settle upward in a tight left-to-right sequence.
 */
.resolve-metaview {
    --resolve-mode: words;
    --resolve-duration: 0.78;
    --resolve-stagger: 0.035;
    --resolve-stagger-random: 0;
    --resolve-blur: 18;
    --resolve-opacity: 0;
    --resolve-opacity-wave: 0;
    --resolve-blur-wave: 0;
    --resolve-y: 0;
    --resolve-container-y: 32;
    --resolve-container-opacity: 0;
    --resolve-container-duration: 0.75;
    --resolve-ease: power3.out;
}

/* A gentler version for paragraph copy. */
.resolve-metaview-text {
    --resolve-mode: words;
    --resolve-duration: 0.64;
    --resolve-stagger: 0.028;
    --resolve-stagger-random: 0;
    --resolve-blur: 8;
    --resolve-opacity: 0;
    --resolve-opacity-wave: 0;
    --resolve-blur-wave: 0;
    --resolve-y: 0;
    --resolve-ease: power3.out;
    --resolve-delay: 0.18;
    --resolve-line-stagger: 0.12;
}

/*
 * Resolve adds .resolve-js in the document head, before the body is parsed.
 * Keep modules hidden only until their GSAP start state has been prepared.
 * Without JavaScript the root class is never added, so content stays visible.
 */
html.resolve-js .resolve:not([data-resolve-primed="true"]):not([data-resolve-processed="true"]),
html.resolve-js .resolve-headings:not([data-resolve-primed="true"]):not([data-resolve-processed="true"]),
html.resolve-js .resolve-text:not([data-resolve-primed="true"]):not([data-resolve-processed="true"]),
html.resolve-js .resolve-metaview:not([data-resolve-primed="true"]):not([data-resolve-processed="true"]),
html.resolve-js .resolve-metaview-text:not([data-resolve-primed="true"]):not([data-resolve-processed="true"]) {
    opacity: 0;
}

.resolve .resolve-char,
.resolve-headings .resolve-char,
.resolve-text .resolve-char,
.resolve-metaview .resolve-char,
.resolve-metaview-text .resolve-char {
    display: inline-block;
    will-change: filter, opacity, transform;
}

.resolve .resolve-word,
.resolve-headings .resolve-word,
.resolve-text .resolve-word,
.resolve-metaview .resolve-word,
.resolve-metaview-text .resolve-word {
    display: inline-block;
    white-space: nowrap;
}

.resolve [data-resolve-ready="true"],
.resolve-headings [data-resolve-ready="true"],
.resolve-text [data-resolve-ready="true"],
.resolve-metaview [data-resolve-ready="true"],
.resolve-metaview-text [data-resolve-ready="true"] {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .resolve .resolve-char,
    .resolve .resolve-word,
    .resolve-headings .resolve-char,
    .resolve-headings .resolve-word,
    .resolve-text .resolve-char,
    .resolve-text .resolve-word,
    .resolve-metaview .resolve-char,
    .resolve-metaview .resolve-word,
    .resolve-metaview-text .resolve-char,
    .resolve-metaview-text .resolve-word {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}
