* {
    box-sizing: border-box
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: none;
}

.palco-externo {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: none;
}

.palco-fundo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background: radial-gradient(
        elipseat center,
        rgba(225, 216, 255, 0.35) 0%,
        rgba(245, 232, 255, 0.15) 40%,
        transparent 75%
    );
}

.aura {
    position: absolute;
    pointer-events: none;
    width: 43%;
    height: 42%;
    border-radius: 50%;
    background: #ebd8ff;
    filter: blur(42px);
    opacity: .18
}

.aura-1 {
    top: 23%;
    left: 3.5%
}

.aura-2 {
    top: 7%;
    right: -6%;
    background: #e6d3ff;
    opacity: .28
}

.brilho {
    position: absolute;
    color: #c39bea;
    animation: piscar 3s ease-in-out infinite;
    user-select: none;
    line-height: 1;
    font-family: 'Segoe UI Symbol', Arial, sans-serif
}

.brilho-1 {
    top: 18%;
    left: 13%;
    font-size: 17px;
    animation-delay: -1s
}

.brilho-2 {
    top: 35%;
    right: 17%;
    font-size: 29px;
    animation-delay: -2.1s
}

.brilho-3 {
    top: 65%;
    left: 20%;
    font-size: 13px;
    animation-delay: -.4s
}

.brilho-4 {
    top: 12%;
    right: 32%;
    font-size: 21px;
    animation-delay: -2.7s
}

.reflexo-fundo {
    position: absolute;
    left: 50%;
    bottom: 2.6%;
    width: 26%;
    height: 2.7%;
    border-radius: 50%;
    transform: translateX(-50%);
    background: #b573e7;
    filter: blur(18px);
    opacity: .11
}

@keyframes piscar {

    0%,
    100% {
        opacity: .12;
        transform: scale(.8)
    }

    50% {
        opacity: .75;
        transform: scale(1.25)
    }
}

canvas {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: fill;
    touch-action: pan-y
}

.controles-ocultos {
    display: none
}

@media(prefers-reduced-motion:reduce) {
    .brilho {
        animation: none;
        opacity: .24
    }
}

/* Fundo transparente, sem cortes visíveis */
.palco-externo,
.palco-fundo {
    background: transparent !important;
}

/* Luz lilás desaparecendo suavemente */
.aura {
    background: radial-gradient(
        ellipse at center,
        rgba(235, 216, 255, 0.35) 0%,
        rgba(235, 216, 255, 0.15) 35%,
        rgba(235, 216, 255, 0) 75%
    );

    filter: none;
    opacity: 1;
}

/* Aura esquerda */
.aura-1 {
    left: 12%;
    top: 24%;
    width: 42%;
    height: 42%;
}

/* Aura direita */
.aura-2 {
    right: 12%;
    top: 12%;
    width: 42%;
    height: 42%;
}