/* Aurora Text Effect - Bricks Widget Styles */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");

.wml-aurora-text-effect {
    --clr-1: #00c2ff;
    --clr-2: #33ff8c;
    --clr-3: #ffc640;
    --clr-4: #e54cff;
    --blur: 1rem;
    --fs: clamp(3rem, 8vw, 7rem);
    --ls: clamp(-1.75px, -0.25vw, -3.5px);
}

@property --aurora-pos-1 {
    syntax: '<percentage> <percentage>';
    inherits: false;
    initial-value: 10% 10%;
}

@property --aurora-pos-2 {
    syntax: '<percentage> <percentage>';
    inherits: false;
    initial-value: 90% 10%;
}

@property --aurora-pos-3 {
    syntax: '<percentage> <percentage>';
    inherits: false;
    initial-value: 90% 90%;
}

@property --aurora-pos-4 {
    syntax: '<percentage> <percentage>';
    inherits: false;
    initial-value: 10% 90%;
}

.wml-aurora-text-effect {
    display: grid;
    place-items: center;
    color: #fff;
    overflow: hidden;
}

.wml-aurora-text-effect *,
.wml-aurora-text-effect *::before,
.wml-aurora-text-effect *::after {
    font-family: inherit;
    box-sizing: border-box;
}

.wml-aurora-text-effect .content {
    position: relative;
    width: 100%;
    text-align: center;
}

.wml-aurora-text-effect .aurora-svg {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.wml-aurora-text-effect .aurora-text-mask {
    fill: white;
    font-weight: 800;
    font-size: 100px;
    font-family: inherit;
}

.wml-aurora-text-effect .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    font-size: var(--fs);
    font-weight: 800;
    letter-spacing: var(--ls);
}

.wml-aurora-text-effect .aurora-blob {
    mix-blend-mode: overlay;
    transition: fill 0.3s ease;
}

.wml-aurora-text-effect .aurora-blob-1 {
    fill: var(--clr-1, #00c2ff);
    animation: wml-aurora-move-1 15s infinite alternate ease-in-out;
}

.wml-aurora-text-effect .aurora-blob-2 {
    fill: var(--clr-3, #ffc640);
    animation: wml-aurora-move-2 18s infinite alternate ease-in-out;
}

.wml-aurora-text-effect .aurora-blob-3 {
    fill: var(--clr-2, #33ff8c);
    animation: wml-aurora-move-3 12s infinite alternate ease-in-out;
}

.wml-aurora-text-effect .aurora-blob-4 {
    fill: var(--clr-4, #e54cff);
    animation: wml-aurora-move-4 22s infinite alternate ease-in-out;
}

@keyframes wml-aurora-move-1 {
    0% {
        cx: 10%;
        cy: 10%;
        r: 25%;
    }

    50% {
        cx: 50%;
        cy: 50%;
        r: 40%;
    }

    100% {
        cx: 90%;
        cy: 90%;
        r: 25%;
    }
}

@keyframes wml-aurora-move-2 {
    0% {
        cx: 90%;
        cy: 10%;
        r: 35%;
    }

    50% {
        cx: 40%;
        cy: 60%;
        r: 25%;
    }

    100% {
        cx: 10%;
        cy: 90%;
        r: 35%;
    }
}

@keyframes wml-aurora-move-3 {
    0% {
        cx: 10%;
        cy: 90%;
        r: 30%;
    }

    50% {
        cx: 60%;
        cy: 40%;
        r: 45%;
    }

    100% {
        cx: 90%;
        cy: 10%;
        r: 30%;
    }
}

@keyframes wml-aurora-move-4 {
    0% {
        cx: 90%;
        cy: 90%;
        r: 20%;
    }

    50% {
        cx: 30%;
        cy: 30%;
        r: 35%;
    }

    100% {
        cx: 20%;
        cy: 80%;
        r: 20%;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .wml-aurora-text-effect .aurora-text-mask {
        font-size: 80px;
    }
}