/* ---------------------------------------------------------
   COOKEHOUSE — Animate
   Word-by-word reveal for paragraphs & headings
   Classes:
     - ch-animate           (generic container)
     - ch-animate-text      (for paragraphs, spans, etc.)
     - ch-animate-heading   (for headings h1–h6)
   Variants (add alongside one of the above):
     - ch-animate--fade      (fade + slide up)
     - ch-animate--scale     (scale in)
     - ch-animate--highlight (highlight sweep)
------------------------------------------------------------ */

/* Containers
   You can use any of these on Gutenberg blocks:
   - ch-animate
   - ch-animate-text
   - ch-animate-heading
*/
.ch-animate,
.ch-animate-text,
.ch-animate-heading {
    display: block;
    position: relative;
	width: 100%;
}

/* Base word styling */
.ch-animate-word {
    display: inline-block;
    white-space: pre-wrap;
    will-change: opacity, transform, background-color, background-position, color;
    opacity: 0;
    transform: translateY(0);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        background-color 0.4s ease,
        color 0.4s ease,
        background-position 0.5s ease;

    /* Stagger: --ch-stagger is a time; --ch-i is index (integer) */
    transition-delay: calc(var(--ch-stagger, 0.05s) * var(--ch-i, 0));
}

/* Active state - applied to container via JS */
.is-ch-animate-active .ch-animate-word {
    opacity: 1;
}

/* ---------------------------------------------------------
   Variant: Fade + Slide (default feel)
   Usage: Add class 'ch-animate--fade'
------------------------------------------------------------ */

.ch-animate--fade .ch-animate-word,
.ch-animate-text:not(.ch-animate--scale):not(.ch-animate--highlight) .ch-animate-word {
    opacity: 0;
    transform: translateY(8px);
}

.is-ch-animate-active.ch-animate--fade .ch-animate-word,
.is-ch-animate-active.ch-animate-text:not(.ch-animate--scale):not(.ch-animate--highlight) .ch-animate-word {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------------------------------
   Variant: Scale reveal
   Usage: Add class 'ch-animate--scale'
------------------------------------------------------------ */

.ch-animate--scale .ch-animate-word {
    opacity: 0;
    transform: scale(0.8);
}

.is-ch-animate-active.ch-animate--scale .ch-animate-word {
    opacity: 1;
    transform: scale(1);
}

/* ---------------------------------------------------------
   Variant: Highlight sweep
   Usage: Add class 'ch-animate--highlight'
   Notes:
   - Text is always visible; animation is the highlight background.
   - Customise colour via --ch-highlight-colour on the container.
------------------------------------------------------------ */

.ch-animate--highlight .ch-animate-word {
    opacity: 1; /* Text is visible even before active */
    background-image: linear-gradient(
        120deg,
        var(--ch-highlight-colour, #ffe082) 0%,
        var(--ch-highlight-colour, #ffe082) 100%
    );
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 100%;
}

.is-ch-animate-active.ch-animate--highlight .ch-animate-word {
    background-size: 100% 100%;
}

/* Slightly smoother look for headings */
h1.ch-animate-heading,
h2.ch-animate-heading,
h3.ch-animate-heading,
h4.ch-animate-heading,
h5.ch-animate-heading,
h6.ch-animate-heading {
    overflow: hidden;
}