/* ==========================================================
   Aurora Text — FlatEffects Pro
   Technique: Animated gradient + background-clip: text
   
   The outer wrapper gets the animated gradient.
   The text element inherits this background and clips it to text.
   No rectangle visible — works on any page background.
   ========================================================== */

.flateffects-aurora-text-wrap {
    display: inline-block;
    /* shrink to text width — no rectangle */
}

/* Container: animated gradient, no visible background outside text */
.flateffects-aurora-text {
    display: block;
    background-size: 300% 300%;
    animation: fe-aurora-shift var(--fe-aurora-speed, 12s) ease-in-out infinite;
    /* background-clip: text clips the gradient to the text shape */
    -webkit-background-clip: text;
    background-clip: text;
    /* color: transparent makes the text "window" into the gradient */
    color: transparent;
    margin: 0;
    padding: 0;
}

/* Force all child text elements to also be transparent
   so the gradient from the parent shows through */
.flateffects-aurora-text h1,
.flateffects-aurora-text h2,
.flateffects-aurora-text h3,
.flateffects-aurora-text h4,
.flateffects-aurora-text h5,
.flateffects-aurora-text h6,
.flateffects-aurora-text p,
.flateffects-aurora-text span,
.flateffects-aurora-text div:not(.fe-aurora) {
    color: transparent !important;
    background: transparent !important;
    margin: 0;
    padding: 0;
}

/* Hide the blob elements — not needed with gradient technique */
.fe-aurora {
    display: none;
}

/* Gradient shift animation */
@keyframes fe-aurora-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}