/* SOFT ECOMMERCE - EFEITOS VISUAIS V1.0.1 */
#soft-tema-visual-layer,
#soft-tema-visual-preview-layer{
    overflow:hidden;
    pointer-events:none !important;
    user-select:none;
    contain:layout paint style;
}

#soft-tema-visual-layer{
    position:fixed;
    inset:0;
    z-index:40;
}

#soft-tema-visual-preview-layer{
    position:absolute;
    inset:0;
    z-index:1;
}

#soft-tema-visual-layer .soft-tv-particle,
#soft-tema-visual-preview-layer .soft-tv-particle{
    position:absolute;
    top:-12vh;
    left:0;
    opacity:.50;
    pointer-events:none !important;
    will-change:transform;
    animation-name:softTvFall;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

#soft-tema-visual-layer .soft-tv-sway,
#soft-tema-visual-preview-layer .soft-tv-sway{
    animation-name:softTvFallSway;
}

#soft-tema-visual-layer .soft-tv-balloon,
#soft-tema-visual-preview-layer .soft-tv-balloon{
    border-radius:50% 50% 46% 46%;
    width:18px;
    height:23px;
    opacity:.28;
    box-shadow:inset -4px -5px 0 rgba(0,0,0,.07);
}

#soft-tema-visual-layer .soft-tv-balloon::after,
#soft-tema-visual-preview-layer .soft-tv-balloon::after{
    content:"";
    position:absolute;
    width:1px;
    height:20px;
    left:50%;
    top:22px;
    background:currentColor;
    opacity:.35;
}

#soft-tema-visual-layer .soft-tv-confetti,
#soft-tema-visual-preview-layer .soft-tv-confetti{
    width:7px;
    height:13px;
    border-radius:2px;
    opacity:.38;
}

#soft-tema-visual-layer .soft-tv-token,
#soft-tema-visual-preview-layer .soft-tv-token{
    padding:3px 6px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.3px;
    opacity:.22;
    border:1px solid currentColor;
    background:rgba(255,255,255,.7);
}

#soft-tema-visual-layer .soft-tv-glyph,
#soft-tema-visual-preview-layer .soft-tv-glyph{
    font-weight:900;
    line-height:1;
    text-shadow:0 1px 1px rgba(255,255,255,.35);
}

/* ULTRA = mais quantidade + mais presença */
#soft-tema-visual-layer.soft-tv-ultra .soft-tv-particle,
#soft-tema-visual-preview-layer.soft-tv-ultra .soft-tv-particle{
    opacity:.68;
}

#soft-tema-visual-layer.soft-tv-ultra .soft-tv-confetti,
#soft-tema-visual-preview-layer.soft-tv-ultra .soft-tv-confetti{
    opacity:.72;
}

#soft-tema-visual-layer.soft-tv-ultra .soft-tv-balloon,
#soft-tema-visual-preview-layer.soft-tv-ultra .soft-tv-balloon{
    opacity:.50;
}

#soft-tema-visual-layer.soft-tv-ultra .soft-tv-token,
#soft-tema-visual-preview-layer.soft-tv-ultra .soft-tv-token{
    opacity:.42;
}

@keyframes softTvFall{
    from{
        transform:translate3d(0,-12vh,0) rotate(0deg)
    }
    to{
        transform:
            translate3d(var(--soft-tv-drift,0px),115vh,0)
            rotate(var(--soft-tv-rot,540deg))
    }
}

@keyframes softTvFallSway{
    0%{
        transform:translate3d(0,-12vh,0) rotate(0deg)
    }
    35%{
        transform:
            translate3d(var(--soft-tv-drift-a,22px),32vh,0)
            rotate(120deg)
    }
    70%{
        transform:
            translate3d(var(--soft-tv-drift-b,-18px),75vh,0)
            rotate(300deg)
    }
    100%{
        transform:
            translate3d(var(--soft-tv-drift,10px),115vh,0)
            rotate(var(--soft-tv-rot,540deg))
    }
}

@media (max-width:768px){
    #soft-tema-visual-layer .soft-tv-particle{
        opacity:.32;
    }

    #soft-tema-visual-layer.soft-tv-ultra .soft-tv-particle{
        opacity:.48;
    }
}

@media (prefers-reduced-motion: reduce){
    #soft-tema-visual-layer,
    #soft-tema-visual-preview-layer{
        display:none !important;
    }
}