.animationBox
{
    position: absolute;
    left: 0;
    top: 0;
    width: 110%;
    height: 110%;
    pointer-events: none;
    z-index: 999;
    --lineHeight: 10px;
    --colorA: #fea900;
    --colorB: #0981b9;
}
.animationBox .animationBox--line
{
    position: absolute;
    width: 110%;
    height: var(--lineHeight);
    transition: left 300ms, right 300ms;
    transition-timing-function: ease-out, ease-out;
    border-radius: var(--lineHeight);
}
#bucapsol-bg
{
    position: absolute;
    z-index: -1;
    filter: saturate(0%) opacity(0.3)  drop-shadow(0 0 0 #ffffff00) drop-shadow(0 0 0 #ffffff00) drop-shadow(0 0 0 #ffffff00);
    rotate: 180deg;
    transition: filter 1000ms 500ms;
}
#hero-15.activated #bucapsol-bg
{
    filter: saturate(100%) opacity(1.0) drop-shadow(0 0 12px #f2f202) drop-shadow(0 100px 42px #f2f202) drop-shadow(0 0 200px #f2f202);
    rotate: 0deg;
}
#hero-15 .cloud
{
    position: absolute;
    z-index: -1;
    width: 25%;
    opacity: .3;
}
#hero-15 .cloud.cloud1
{
    left: 12.5%;
    bottom: 40%;
}
#hero-15 .cloud.cloud2
{
    bottom: 70%;
    left: 35%;
}
#hero-15 .cloud.cloud3
{
    left: 62.5%;
    bottom: 40%;
}
#hero-15.activated .cloud
{
    display: none;
}
#textring
{
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%) rotate(0);
    animation: rotate-textring 10s linear infinite;
    filter: brightness(0.5) contrast(1000);
}
@keyframes rotate-textring
{
    from
    {
        transform: translate(-50%, -50%) rotate(0);
    }
    to
    {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}