body {
    margin: 0;
    padding: 0;

    background-image: url(../img/bg-ws.png);
    background-size: cover;

    overflow: hidden;
}

/* ========================================
   LUMI — BASE
   ======================================== */

#lumi-container {
    position: absolute;

    width: 200px;
    height: 200px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    z-index: 2;

    overflow: visible;
}


#lumi {
    display: block;

    width: 200px;
    height: 200px;

    user-select: none;
    pointer-events: none;

    position: relative;

    z-index: 2;
}


.lumi-idle {
    animation:
        lumi-float
        4s
        ease-in-out
        infinite;
}


@keyframes lumi-float {

    0% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-5px);
    }

    100% {
        transform:
            translateY(0);
    }
}


/* ========================================
   LUMI AURA
   ======================================== */

.lumi-aura {

    --aura-movement-scale: 1;
    --aura-movement-opacity: 0.48;

    position: absolute;

    left: 50%;
    top: 52%;

    width: 145px;
    height: 145px;

    transform:
        translate(-50%, -50%);

    pointer-events: none;

    z-index: 0;

    opacity:
        var(--aura-movement-opacity);

    animation:
        lumi-aura-breathe
        5.5s
        ease-in-out
        infinite;
}


/* ========================================
   AURA — NÚCLEO
   ======================================== */

.lumi-aura-core {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;

    transform:
        translate(-50%, -50%);

    border-radius:
        48% 52% 55% 45% /
        45% 48% 52% 55%;

    background:
        radial-gradient(
            ellipse at center,

            rgba(
                255,
                246,
                225,
                0.16
            ) 0%,

            rgba(
                255,
                235,
                195,
                0.07
            ) 42%,

            rgba(
                255,
                245,
                220,
                0.025
            ) 68%,

            rgba(
                255,
                245,
                220,
                0
            ) 100%
        );

    filter:
        blur(8px);

    animation:
        lumi-aura-wobble
        7s
        ease-in-out
        infinite;
}


/* ========================================
   AURA — BRILHO INTERNO
   ======================================== */

.lumi-aura-glow {

    position: absolute;

    left: 50%;
    top: 48%;

    width: 92px;
    height: 105px;

    transform:
        translate(-50%, -50%);

    border-radius:
        50% 48% 53% 47%;

    background:
        radial-gradient(
            ellipse at center,

            rgba(
                255,
                252,
                240,
                0.12
            ) 0%,

            rgba(
                255,
                239,
                205,
                0.045
            ) 45%,

            rgba(
                255,
                245,
                220,
                0
            ) 100%
        );

    filter:
        blur(10px);

    animation:
        lumi-aura-glow
        4.2s
        ease-in-out
        infinite;
}


/* ========================================
   AURA — RESPIRAÇÃO
   ======================================== */

@keyframes lumi-aura-breathe {

    0% {

        transform:
            translate(-50%, -50%)
            scale(
                calc(
                    0.94 *
                    var(--aura-movement-scale)
                )
            );
    }

    50% {

        transform:
            translate(-50%, -50%)
            scale(
                calc(
                    1.04 *
                    var(--aura-movement-scale)
                )
            );
    }

    100% {

        transform:
            translate(-50%, -50%)
            scale(
                calc(
                    0.94 *
                    var(--aura-movement-scale)
                )
            );
    }
}


/* ========================================
   AURA — OSCILAÇÃO
   ======================================== */

@keyframes lumi-aura-wobble {

    0% {

        border-radius:
            48% 52% 55% 45% /
            45% 48% 52% 55%;
    }

    50% {

        border-radius:
            52% 48% 47% 53% /
            50% 45% 55% 50%;
    }

    100% {

        border-radius:
            48% 52% 55% 45% /
            45% 48% 52% 55%;
    }
}


/* ========================================
   AURA — BRILHO
   ======================================== */

@keyframes lumi-aura-glow {

    0% {

        transform:
            translate(-50%, -50%)
            scale(0.92);

        opacity: 0.45;
    }

    50% {

        transform:
            translate(-50%, -50%)
            scale(1.08);

        opacity: 0.8;
    }

    100% {

        transform:
            translate(-50%, -50%)
            scale(0.92);

        opacity: 0.45;
    }
}


/* ========================================
   PARTÍCULAS DA AURA
   ======================================== */

.lumi-particle {

    position: absolute;

    border-radius: 50%;

    background: var(--particle-color, rgba(255, 245, 220, 0.78));

    pointer-events: none;

    z-index: 1;

    box-shadow: 0 0 5px var(--particle-glow, rgba(255, 239, 200, 0.45));

    animation:
        lumi-particle-float
        ease-out
        var(--particle-life, 1s)
        forwards;
}


/* ========================================
   PARTÍCULAS — MOVIMENTO
   ======================================== */

@keyframes lumi-particle-float {

    0% {

        opacity: 0;

        transform:
            translate(
                0,
                3px
            )
            scale(0.35);
    }

    18% {

        opacity: var(--particle-opacity, 0.68);

        transform:
            translate(
                calc(
                    var(--particle-drift) *
                    0.12
                ),
                0
            )
            scale(1);
    }

    55% {

        opacity: calc(var(--particle-opacity, 0.68) * 0.62);

        transform:
            translate(
                calc(
                    var(--particle-drift) *
                    0.55
                ),
                -8px
            )
            scale(0.78);
    }

    100% {

        opacity: 0;

        transform:
            translate(
                var(--particle-drift),
                -19px
            )
            scale(0.15);
    }
}