@charset "utf-8";
/* CSS Document */

.stardust {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    opacity: 1;
    background: #020202;
}
.stardust:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}
.stardust .video {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.stardust .light {
    position: absolute;
    left: 50%;
    width: 50%;
    pointer-events: none;
    background-color: #FFF;
    border-radius: 100%;
    opacity: 0;
    mix-blend-mode: overlay;
    z-index: 9999;
}
.stardust .light.main {
    width: 120px;
    height: 120px;
    transform: translate(-30px,-30px);
    filter: blur(22px);
}
.stardust .light.follower.first {
    width: 240px;
    height: 240px;
    transform: translate(-80px,-80px);
    filter: blur(6px);
    transition: .15s linear;
}
.stardust .light.follower.second {
    width: 800px;
    height: 800px;
    transform: translate(-200px,-200px);
    filter: blur(10px);
    transition: .25s linear;
}
.stardust .light.follower.third {
    width: 900px;
    height: 900px;
    transform: translate(-300px,-300px);
    filter: blur(15px);
    transition: .55s linear;
}
.stardust .light.follower.fourth {
    width: 120px;
    height: 120px;
    transform: translate(-40px,-40px);
    filter: blur(4px);
    transition: .75s linear;
}
.stardust .light.follower.fifth {
    width: 90px;
    height: 90px;
    transform: translate(-30px,-30px);
    filter: blur(1px);
    transition: 1s linear;
}
.instance {
    z-index: 4;
}
.instance .tab {
    transition: 0.5s all;
}
.instance.s1 .tab {
    vertical-align: top;
}
.instance.s1 .inner {
    position: relative;
    transition: 0.5s all;
}
.instance.s1[data-active-step="1"] .inner {
    top: 40%;
}
.instance.s1[data-active-step="2"] .inner {
    top: 0;
}
.sfx .layer {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}
.sfx .layer.below {
    z-index: 1;
}
.sfx .layer.above {
    z-index: 3;
}
.sfx .fighters {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
}
.sfx .fighters .fighter {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: 0.7s all;
}
.sfx .fighters .fighter .hitarea {
    position: absolute;
}
.sfx .fighters .fighter.circle .hitarea {
    width: 31%;
    height: 48%;
    left: 34%;
    top: 47%;
}
.sfx .fighters .fighter.triangle .hitarea {
    width: 43%;
    height: 66%;
    left: 52%;
    top: 20%;
}
.sfx .fighters .fighter.square .hitarea {
    width: 38%;
    height: 67%;
    left: 56%;
    top: 20%;
}

@keyframes glitch-1 {
    0% {
        clip-path: inset(25% 100% 4% 0);
    }
    5.88235% {
        clip-path: inset(22% 100% 12% 0);
    }
    11.76471% {
        clip-path: inset(44% 100% 20% 0);
    }
    17.64706% {
        clip-path: inset(7% 100% 29% 0);
    }
    23.52941% {
        clip-path: inset(13% 100% 18% 0);
    }
    29.41176% {
        clip-path: inset(21% 100% 31% 0);
    }
    35.29412% {
        clip-path: inset(17% 100% 20% 0);
    }
    41.17647% {
        clip-path: inset(41% 100% 7% 0);
    }
    47.05882% {
        clip-path: inset(43% 100% 2% 0);
    }
    52.94118% {
        clip-path: inset(44% 100% 12% 0);
    }
    58.82353% {
        clip-path: inset(44% 100% 22% 0);
    }
    64.70588% {
        clip-path: inset(10% 100% 17% 0);
    }
    70.58824% {
        clip-path: inset(31% 100% 13% 0);
    }
    76.47059% {
        clip-path: inset(40% 100% 22% 0);
    }
    82.35294% {
        clip-path: inset(16% 100% 30% 0);
    }
    88.23529% {
        clip-path: inset(33% 100% 34% 0);
    }
    94.11765% {
        clip-path: inset(9% 100% 40% 0);
    }
    to {
        clip-path: inset(45% 100% 21% 0);
    }
}
@keyframes glitch-2 {
    0% {
        clip-path: inset(8% 100% 50% 0);
    }
    5.88235% {
        clip-path: inset(40% 100% 41% 0);
    }
    11.76471% {
        clip-path: inset(33% 100% 16% 0);
    }
    17.64706% {
        clip-path: inset(41% 100% 9% 0);
    }
    23.52941% {
        clip-path: inset(14% 100% 30% 0);
    }
    29.41176% {
        clip-path: inset(22% 100% 33% 0);
    }
    35.29412% {
        clip-path: inset(37% 100% 48% 0);
    }
    41.17647% {
        clip-path: inset(25% 100% 37% 0);
    }
    47.05882% {
        clip-path: inset(1% 100% 18% 0);
    }
    52.94118% {
        clip-path: inset(19% 100% 27% 0);
    }
    58.82353% {
        clip-path: inset(33% 100% 29% 0);
    }
    64.70588% {
        clip-path: inset(2% 100% 38% 0);
    }
    70.58824% {
        clip-path: inset(18% 100% 41% 0);
    }
    76.47059% {
        clip-path: inset(19% 100% 45% 0);
    }
    82.35294% {
        clip-path: inset(44% 100% 32% 0);
    }
    88.23529% {
        clip-path: inset(13% 100% 43% 0);
    }
    94.11765% {
        clip-path: inset(4% 100% 6% 0);
    }
    to {
        clip-path: inset(30% 100% 25% 0);
    }
}
.glitch {
    position: relative;
}
.glitch::before, .glitch::after {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-glitch);
    clip-path: inset(0 0 0 0);
    width: 100%;
}
.glitch::before {
    animation: glitch-2 3s 500 linear alternate-reverse;
    left: -2px;
    text-shadow: 1px 0 #00FF19, 2px 0 #F10090;
}
.glitch::after {
    animation: glitch-1 2s 500 linear alternate-reverse;
    left: 2px;
    text-shadow: 1px 0 #00FF19, -2px 0 #F10090;
}