body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-size: 20px;
}

@keyframes com-visibility {
    from { visibility: visible; }
    to { visibility: hidden; }
}

@keyframes com-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

:root {
    --s2-delay: 12s;
    --s3-delay: 40s;
    --s4-delay: 67s;
    --s5-delay: 88s;
    --s6-delay: 120s;
    --s7-delay: 134s;
}

@keyframes s1-typing {
    from { width: 0rem }
    to { width: 15rem }
}

@keyframes s1-fadein {
    from { opacity: 0; bottom: 2rem; }
    to { opacity: 100%; bottom: 0; }
}

.s1-wrapper, .s2-wrapper, .s3-wrapper, .s4-wrapper, .s5-wrapper, .s6-wrapper, .s7-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    visibility: hidden;
}

.s1-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #ff7700;
    animation: 12s linear 0s 1 both com-visibility;
    z-index: 10;
}

.s1-title-box {
    width: 11.5rem;
    border: 2px solid #0000a0;
    overflow: visible;
    padding: 0.5rem;
    background-color: #ffffff;
    margin: 0 0 1rem 0;
}

.s1-typewriter {
    display: flex;
    flex-flow: row wrap;
    overflow: hidden;
    height: 2rem;
    width: 15rem;
    margin: 0;
    letter-spacing: 0.5rem;
    font-size: 2rem;
    font-family: monospace;
    animation: 3.5s linear s1-typing;
}

.s1-text {
    position: relative;
    margin-top: 1rem;
    animation-duration: 1.3s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-name: s1-fadein;
    opacity: 0;
}

.s1-hups {
    position: relative;
    bottom: 205px;
    left: 160px;
    font-size: 0.8rem;
    text-align: right;
    visibility: hidden;
    animation: 0.4s step-end 3.8s 1 forwards com-visibility;
}

.s1-text1 { animation-delay: 4s; }
.s1-text2 { animation-delay: 5s; }
.s1-text3 { animation-delay: 6s; }
.s1-text4 { animation-delay: 7s; }

@keyframes s2-sway-h {
    0% { margin-left: 0; }
    25% { margin-left: 20vw; }
    50% { margin-left: 0; }
    75% { margin-left: -20vw; }
    100% { margin-left: 0; }
}

@keyframes s2-sway-v {
    0% { margin-top: 0; }
    25% { margin-top: 20vw; }
    50% { margin-top: 0; }
    75% { margin-top: -20vw; }
    100% { margin-top: 0; }
}

@keyframes s2-sway-v {
    0% { margin-top: 0; }
    25% { margin-top: 35vh; }
    50% { margin-top: 0; }
    75% { margin-top: -25vh; }
    100% { margin-top: 0; }
}

@keyframes s2-rotate-3d {
    from { transform: rotate3D(0,0.5,1,0deg); }
    to { transform: rotate3D(0,0.5,1,360deg); }
}

@keyframes s2-pulsecube {
    from { transform: scale(1); }
    to { transform: scale(2.2); }
}

@keyframes s2-rainbow {
    0% { background-color: #ffffff; }
    20% { background-color: #ff0000; }
    40% { background-color: #00ff00; }
    60% { background-color: #0000ff; }
    80% { background-color: #ff7700; }
    100% { background-color: #ffffff; }
}

@keyframes s2-background {
    from { background-color: #000000; }
    to { background-color: transparent; }
}

@keyframes s2-rot-x {
    from { left: -100px }
    to { left: 100px; }
}

@keyframes s2-rot-y {
    from { top: 100px; }
    to { top: -100px; }
}

.s2-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation:
        28s linear var(--s2-delay) 1 forwards com-visibility,
        30s step-end var(--s2-delay) 1 both s2-background,
        14.5s linear calc(var(--s4-delay) + 6.5s) 1 forwards com-visibility,
        2.5s cubic-bezier(.37,0,.63,1) calc(var(--s4-delay) - 1.25s) 9 alternate-reverse s2-rot-x,
        2.5s cubic-bezier(.37,0,.63,1) var(--s4-delay) 9 alternate s2-rot-y;
    z-index: 30;
}

.s2-cubescale {
    z-index: 10;
    width: 200px;
    height: 200px;
    animation: 2s cubic-bezier(.45,.05,.55,.95) 31.5s 5 alternate s2-pulsecube;
}

.s2-cube {
    width: 200px;
    height: 200px;
    animation:
        1.5s linear calc(var(--s2-delay) + 4.5s) 3 normal s2-sway-h,
        1.5s linear calc(var(--s2-delay) + 9s) 3 normal s2-sway-v,
        1.5s linear calc(var(--s2-delay) + 13.5s) 3 normal com-rotate,
        1.5s linear calc(var(--s2-delay) + 18s) 6 normal s2-rotate-3d,
        2s linear calc(var(--s4-delay) + 6.5s) 8 normal s2-rotate-3d;
    transform-style: preserve-3d;
}

.s2-square {
    width: 100%;
    height: 100%;
    border: 4px solid #000000;
    background-color: #ffffff;
    position: absolute;
    backface-visibility: visible;
    animation:
        5s linear calc(var(--s2-delay) + 13.5s) 3 normal s2-rainbow,
        0s linear calc(var(--s4-delay)) 3 normal forwards s2-background;
}

.s2-front { transform: translateZ(100px); }
.s2-back { transform: translateZ(-100px); }
.s2-top { transform: rotateX(90deg) translateZ(100px); }
.s2-bottom { transform: rotateX(90deg) translateZ(-100px); }
.s2-left { transform: rotateY(90deg) translateZ(100px); }
.s2-right { transform: rotateY(90deg) translateZ(-100px); }

.s2-text {
    position: relative;
    bottom: 50vh;
    visibility: hidden;
    animation: 4.5s linear calc(var(--s2-delay) + var(--d)) 1 normal forwards com-visibility;
    font-size: 2rem;
    color: #ffffff;
}

@keyframes s3-node1 {
    0% {
        transform: translateX(50%) rotate(43deg);
        width: 50%;
        height: 50%;
    }
    25% {
        transform: translateX(90%) rotate(43deg);
    }
    40% {
        width: 87%;
        height: 87%;
    }
    50% {
        transform: translateX(90%) rotate(-43deg);
        width: 87%;
        height: 87%;
    }
    75% {
        transform: translateX(90%) rotate(43deg);
        width: 87%;
        height: 87%;
    }
    100% {
        transform: translateX(80%) rotate(-55deg);
        width: 135%;
        height: 135%;
    }
}

@keyframes s3-node2 {
    from {
        transform: translateX(80%) rotate(-55deg);
        width: 135%;
        height: 135%;
    }
    to {
        transform: translateX(80%) rotate(55deg);
        width: 135%;
        height: 135%;
    }
}

@keyframes s3-scale {
    from {
        transform: scale(1);
    }
    to { transform: scale(3); }
}

@keyframes s3-root {
    0% { width: 150px; height: 150px; top: 0vh; left: -30vw; }
    35% { top: -25vh }
    70% { width: 150px; height: 150px; left: 6vw; }
    100% { width: 0.5px; height: 0.5px; top: 0; left: 0; }
}

.s3-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-image: radial-gradient(#ff90ff, #e060e0);
    border: 1.5vw solid #5020a0;
    outline: 0.5vw solid #0a091d;
    animation: 27s linear var(--s3-delay) 1 forwards com-visibility;
    z-index: 40;
}

.s3-root {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.5px;
    height: 0.5px;
    background-color: #0a091d;
    border-radius: 50%;
    animation: 18s ease-in-out var(--s3-delay) 1 both s3-root;
}

.s3-rooter {
    position: relative;
    animation: 6s cubic-bezier(1,0,1,1) calc(var(--s3-delay) + 24s) 1 normal s3-scale;
}

.s3-root2 {
    transform: rotate(120deg);
}

.s3-root3 {
    transform: rotate(240deg);
}

.s3-node {
    position: relative;
    background-color: #0a091d;
    box-sizing: border-box;
    border-radius: 50%;
    animation:  
        18s ease-in-out var(--s3-delay) 1 normal s3-node1,
        6s ease-in-out calc(var(--s3-delay) + 18s) 2 forwards alternate s3-node2;
}

@keyframes s4-zoom {
    from {
        width: 2px;
        height: 2px;
        z-index: 1;
        background: rgba(255,0,0,0.25);
    }
    to {
        width: 1920px;
        height: 1920px;
        z-index: 100;
        background: rgba(0,0,0,0);
        margin-left: 0;
    }
}

@keyframes s4-stripes {
    from { background-position-x: -32px; }
    to { background-position-x: 0px; }
}

.s4-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 2vw;
    background-color: #ff7700;
    animation: 21s linear var(--s4-delay) 1 forwards com-visibility;
    z-index: 20;
}

.s4-box {
    background-image: repeating-linear-gradient(45deg, #ffa500, #ffa500 10px, #202020 10px, #202020 22px);
    position: absolute;
    width: 120vw;
    height: 3vw;
    z-index: 1000;
}

.s4-box-up {
    top: 0;
    left: 0;
    animation: 0.5s linear 70s 40 normal s4-stripes;
    border-bottom: 4px solid #202020;
}

.s4-box-down {
    bottom: 0;
    left: 0;
    animation: 0.5s linear 70s 40 reverse s4-stripes;
    border-top: 4px solid #202020;
}


.s4-tunnel {
    position: absolute;
    border-radius: 50%;
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(.8,.0,1,1);
    animation-iteration-count: 7;
    animation-direction: normal, normal;
    animation-name: s4-zoom;
    border: 2px solid #000000;
    outline: 80px solid #ff7700;
    
}
.s4-tunnel-1 { margin: 0px 0 0 200px; animation-delay: calc(var(--s4-delay) - 10s); }
.s4-tunnel-2 { margin: 117.56px 0 0 161.80px; animation-delay: calc(var(--s4-delay) - 9.5s); }
.s4-tunnel-3 { margin: 190.21px 0 0 61.80px; animation-delay: calc(var(--s4-delay) - 9s); }
.s4-tunnel-4 { margin: 190.21px 0 0 -61.80px; animation-delay: calc(var(--s4-delay) - 8.5s); }
.s4-tunnel-5 { margin: 117.56px 0 0 -161.80px; animation-delay: calc(var(--s4-delay) - 8s); }
.s4-tunnel-6 { margin: 0px 0 0 -200px; animation-delay: calc(var(--s4-delay) - 7.5s); }
.s4-tunnel-7 { margin: -117.56px 0 0 -161.80px; animation-delay: calc(var(--s4-delay) - 7s); }
.s4-tunnel-8 { margin: -190.21px 0 0 -61.80px; animation-delay: calc(var(--s4-delay) - 6.5s); }
.s4-tunnel-9 { margin: -190.21px 0 0 61.80px; animation-delay: calc(var(--s4-delay) - 6s); }
.s4-tunnel-10 { margin: -117.56px 0 0 161.80px; animation-delay: calc(var(--s4-delay) - 5.5s); }

@keyframes s5-move-left {
    from { left: -10vw; }
    to { left: 50vw; }
}

@keyframes s5-move-x {
    from { transform: translateX(0px); }
    to { transform: translateX(1px); }
}

@keyframes s5-move-right {
    from { left: 50vw; }
    to { left: 110vw; }
}

@keyframes s5-move-y {
    from { top: 20vh; }
    to { top: 80vh; }
}

@keyframes s5-move-middle {
    to { top: 50vh; }
}

.s5-wrapper {
    background-image: radial-gradient(at 90vw 20vh, #32534b, #02130b);
    animation: 32s linear var(--s5-delay) 1 forwards com-visibility;
    z-index: 50;
}

.s5-ball-wrapper {
    position: absolute;
    top: 20vh;
    left: -10vw;
    animation:
        2s ease-in calc(var(--s5-delay) + var(--d)) 1 normal forwards s5-move-left,
        2s cubic-bezier(0.5,950,0.5,-950) calc(var(--s5-delay) + 2s + var(--d)) 2 normal s5-move-x,
        1s cubic-bezier(.37,0,.63,1) calc(var(--s5-delay) + 2s + var(--d)) 6 alternate s5-move-y,
        1.3s linear calc(var(--s5-delay) + 6s + var(--d)) 1 normal forwards s5-move-right,
        1.3s linear calc(var(--s5-delay) + 9.7s + var(--d2)) 1 reverse forwards s5-move-right,
        1s cubic-bezier(0.5,950,0.5,-950) calc(var(--s5-delay) + 11s + var(--d2)) 5 reverse s5-move-x,
        1s cubic-bezier(.37,0,.63,1) calc(var(--s5-delay) + 11s + var(--d2)) 5 alternate forwards s5-move-y,
        1.3s linear calc(var(--s5-delay) + 16s + var(--d2)) 1 reverse forwards s5-move-left,
        0s linear calc(var(--s5-delay) + 18.5s + var(--d)) 1 normal forwards s5-move-middle,
        1.3s linear calc(var(--s5-delay) + 18.7s + var(--d)) 1 normal forwards s5-move-left,
        5s linear calc(var(--s5-delay) + 20s + var(--d)) 2 normal com-rotate;
}

.s5-ball-wrapper-2 {
    animation: 2s cubic-bezier(0.5,1200,0.5,-1200) calc(var(--s5-delay) + 20s + var(--d)) 5 normal s5-move-x;
}

.s5-ball {
    box-sizing: border-box;
    background-image: radial-gradient(rgba(255,255,255,0.75), transparent 15%), radial-gradient(#00a090 5%, #001010 65%);
    background-size: 150px 150px;
    background-position: -10px -25px, 0px -30px;
    border-radius: 50%;
    margin: -60px 0 0 -60px;
    height: 120px;
    width: 120px;
    animation: 5s linear calc(var(--s5-delay) + 20s + var(--d)) 2 reverse com-rotate;
}

@keyframes s6-wave {
    from { height: 10vh; }
    to { height: 40vh; }
}

@keyframes s6-fwave {
    from { top: 88vh; }
    to { top: 58vh; }
}

@keyframes s6-frotate {
    from { transform: rotate(33deg); }
    to { transform: rotate(-33deg); }
}

@keyframes s6-fdown {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(-90deg); }
    95% { transform: rotate(-90deg); top: 120vh;}
    100% { transform: rotate(0deg); top: 120vh;}
}

@keyframes s6-fmove {
    from { left: 130vw; }
    to { left: 40vw; }
}

.s6-wrapper {
    display: flex;
    justify-content: center;
    align-items: end;
    box-sizing: border-box;
    flex-wrap: nowrap;
    background-image: linear-gradient(#b0d7ff 0%, #10a7ff 28%, #10a7ff 80%, #2020ff 97%);
    animation: 14s linear var(--s6-delay) 1 forwards com-visibility;
}

.s6-bar {
    box-sizing: border-box;
    background-color: #000095;
    height: 40vh;
    width: 5vw;
    border: 1px solid #10a7ff;
    animation:
        1.5s cubic-bezier(.37,0,.63,1) calc(var(--s6-delay) - 4s + var(--d)) 8 alternate s6-wave,
        0.35s cubic-bezier(.37,0,.63,1) calc(var(--s6-delay) + 5.5s + var(--d)) 24 alternate s6-wave;
}

.s6-farjan {
    position: absolute;
    font-size: 2rem;
    font-weight: bold;
    color: #ffffff;
    border-bottom: 4px solid #ff0000;
    animation:
        1.25s cubic-bezier(.37,0,.63,1) calc(var(--s6-delay) + 0s) 14 alternate s6-fwave,
        1.25s cubic-bezier(.37,0,.63,1) calc(var(--s6-delay) + 0.725s) 14 alternate s6-frotate,
        10s linear calc(var(--s6-delay) - 2s) both 1 normal s6-fmove,
        2s linear calc(var(--s6-delay) + 8s) forwards 1 normal s6-fdown;
    white-space: nowrap;
}

@keyframes s7-rotate-2 {
    from { transform: translateY(80vh) rotate(0deg); }
    to { transform: translateY(80vh) rotate(-360deg); }
}

@keyframes s7-rotate-2n {
    from { transform: rotate(0deg) translateY(-80vh); }
    to { transform: rotate(360deg) translateY(-80vh); }
}

@keyframes s7-rotate-3 {
    from { transform: translateY(80vh) rotate(0deg); }
    to { transform: translateY(80vh) rotate(360deg); }
}

@keyframes s7-rotate-3n {
    from { transform: rotate(0deg) translateY(-80vh); }
    to { transform: rotate(-360deg) translateY(-80vh); }
}

@keyframes s7-text-end {
    to { visibility: visible; }
}

.s7-wrapper {
    animation: 20.5s linear var(--s7-delay) 1 forwards com-visibility;
}

.s7-box {
    position: absolute;
    top: -30vh;
    left: -30vw;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #000000;
}

.s7-box-1 {
    filter: blur(2px);
    transform: scale(1.1);
    background-color: #ff5d00;
}

.s7-box-2 {
    background-color: #a0c0d0;
    color: #101010;
    animation-name: s7-rotate-2;
}

.s7-box-3 {
    background-image: linear-gradient(90deg, #ff5d00, #6000ff);
    color: #ffffff;
    text-shadow: 0 0 3px #202020;
    animation-name: s7-rotate-3;
}

.s7-backdrop {
    width: 160vw;
    height: 160vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.s7-backdrop-2 {
    animation-name: s7-rotate-2n;
    color: #00799b;
}

.s7-backdrop-3 {
    animation-name: s7-rotate-3n;
}

.s7-box-2, .s7-backdrop-2, .s7-box-3, .s7-backdrop-3 {
    transform-origin: 80vw -5vh;
    animation-timing-function: ease-in-out;
    animation-delay: calc(var(--s7-delay) - 1s);
    animation-iteration-count: 2;
    animation-direction: normal;
}

.s7-box-2, .s7-backdrop-2 {
    animation-duration: 12s;
}

.s7-box-3, .s7-backdrop-3 {
    animation-duration: 19s;
}

.s7-text, .s7-text-end {
    font-size: 3rem;
    line-height: 0;
    visibility: hidden;
}

.s7-text {
    animation: 1.5s linear calc(var(--s7-delay) + 1s + var(--d)) 1 normal forwards com-visibility;
}

.s7-text-end {
    animation: 6s linear calc(var(--s7-delay) + 1s + var(--d)) 1 normal com-visibility;
}