/* FlatEffects Pro CSS */

.flateffects-reveal-text {
    --fe-duration: 1.5s;
    --fe-color: inherit;
    --fe-bg-color: transparent;
    /* transparent default */
    --fe-delay: 0s;

    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.1s;
    background-color: var(--fe-bg-color);
}

.flateffects-reveal-text.is-visible {
    opacity: 1;
}

.flateffects-reveal-text .fe-content {
    color: var(--fe-color);
    position: relative;
    z-index: 5;
}



/* Fallback for very old browsers could be just using initial color, but color-mix is well supported in modern Chrome/Safari/FF */

/* Standard Animated Effects */
.flateffects-reveal-text.fade-in.is-visible,
.flateffects-reveal-text.slide-up.is-visible,
.flateffects-reveal-text.reveal-box.is-visible,
.flateffects-reveal-text.sunrise.is-visible,
.flateffects-reveal-text.sunset.is-visible {
    /* Base visibility shared */
}


/* Fade In */
.flateffects-reveal-text.fade-in {
    transition: opacity var(--fe-duration) ease-out;
}

/* Slide Up (Standard) */
.flateffects-reveal-text.slide-up .fe-content {
    transform: translateY(100%);
    transition: transform var(--fe-duration) cubic-bezier(0.25, 1, 0.5, 1);
}

.flateffects-reveal-text.slide-up.is-visible .fe-content {
    transform: translateY(0);
}

/* Reveal Box */
.flateffects-reveal-text.reveal-box .fe-reveal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use custom box color or fallback to text color (currentColor) */
    background-color: var(--fe-box-color, var(--fe-color, currentColor));
    transform: scaleX(0);
    transform-origin: left;
    z-index: 10;
}

.flateffects-reveal-text.reveal-box.is-visible .fe-reveal-overlay {
    animation: fe-reveal-box var(--fe-duration) cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.flateffects-reveal-text.reveal-box .fe-content {
    opacity: 0;
}

.flateffects-reveal-text.reveal-box.is-visible .fe-content {
    animation: fe-fade-in 0.1s linear forwards;
    animation-delay: calc(var(--fe-duration) * 0.5);
}

/* Sunrise: Slide Up with Easing */
.flateffects-reveal-text.sunrise .fe-content {
    transform: translateY(100%);
    transition: transform var(--fe-duration) cubic-bezier(0.23, 1, 0.32, 1);
    /* Ease out quart */
}

.flateffects-reveal-text.sunrise.is-visible .fe-content {
    transform: translateY(0);
}

/* Sunset: Slide Down */
.flateffects-reveal-text.sunset .fe-content {
    transform: translateY(-100%);
    transition: transform var(--fe-duration) cubic-bezier(0.23, 1, 0.32, 1);
}

.flateffects-reveal-text.sunset.is-visible .fe-content {
    transform: translateY(0);
}


/* Keyframes */
@keyframes fe-reveal-box {
    0% {
        transform: scaleX(0);
        transform-origin: left;
    }

    50% {
        transform: scaleX(1);
        transform-origin: left;
    }

    51% {
        transform: scaleX(1);
        transform-origin: right;
    }

    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}

@keyframes fe-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Infinite Text Scroller */
.flateffects-infinite-scroller {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 1rem 0;
}

.fe-scroller-inner {
    display: flex;
    width: max-content;
    animation: fe-marquee var(--fe-scroller-speed, 20s) linear infinite;
}

.flateffects-infinite-scroller.direction-right .fe-scroller-inner {
    animation-direction: reverse;
}

.fe-scroller-content {
    display: flex;
    align-items: center;
    padding-right: 2rem;
    /* Gap between repetitions */
}

@keyframes fe-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Assumes we cloned once */
    }
}

/* Text Scroll Reveal (Overlay Method) */
.flateffects-text-scroll-reveal {
    display: block;
    width: 100%;
}

.fe-scroll-reveal-container {
    position: relative;
    isolation: isolate;
    /* Create new stacking context */
    display: block;
}

/* Base Layer: Default use Opacity (works well in Light/Dark columns) */
.flateffects-text-scroll-reveal .fe-base-layer {
    position: relative;
    z-index: 1;
    opacity: var(--fe-base-opacity, 0.2) !important;
    transition: opacity 0.3s;
}

/* Ensure children in base layer inherit the parent's opacity/color naturally if no base color is set */
.flateffects-text-scroll-reveal .fe-base-layer * {
    color: inherit !important;
}

/* Base Layer: Force color ONLY if set, with high specificity */
.flateffects-text-scroll-reveal.has-base-color .fe-base-layer,
.flateffects-text-scroll-reveal.has-base-color .fe-base-layer * {
    color: var(--fe-base-color) !important;
    opacity: 1 !important;
    /* Switch from opacity-based to color-based */
}

.flateffects-text-scroll-reveal .fe-highlight-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    color: var(--fe-highlight-color, inherit);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* Ensure all nested elements in highlight layer inherit the highlight color, override everything */
.flateffects-text-scroll-reveal.has-highlight-color .fe-highlight-layer,
.flateffects-text-scroll-reveal.has-highlight-color .fe-highlight-layer * {
    color: var(--fe-highlight-color) !important;
}

/* Fallback for highlight layer if no specific color is set (inherits main text color) */
.flateffects-text-scroll-reveal:not(.has-highlight-color) .fe-highlight-layer,
.flateffects-text-scroll-reveal:not(.has-highlight-color) .fe-highlight-layer * {
    color: inherit !important;
}

/* Character Reveal Support */
.fe-highlight-layer .fe-char {
    opacity: 0;
    transition: opacity 0.1s;
}

.fe-highlight-layer .fe-char.is-active {
    opacity: 1;
}

/* Base layer transparency fix: ensure elements inside also become transparent */
.fe-base-layer,
.fe-base-layer * {
    color: inherit !important;
}

/* Word Flight */
.flateffects-reveal-text.word-flight .fe-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

.flateffects-reveal-text.word-flight.is-visible .fe-word {
    opacity: 1;
    transform: translateY(0);
}

/* Numeric Spinner */
/* Numeric Spinner (Odometer Style) */
.flateffects-numeric-spinner {
    display: inline-block;
    line-height: 1;
    /* Tight line height for strips */
}

.fe-odometer {
    display: inline-flex;
    overflow: hidden;
}

.fe-spinner-mask {
    display: inline-block;
    height: 1em;
    /* Shows exactly one digit */
    line-height: 1em;
    overflow: hidden;
    position: relative;
    vertical-align: top;
}

.fe-spinner-strip {
    display: block;
    transform: translateY(0);
    will-change: transform;
    /* Transition is set in JS */
}

.fe-digit {
    display: block;
    height: 1em;
    line-height: 1em;
    text-align: center;
}