#Intro #LaunchButton{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
}
#Intro #LaunchButton #Right #State2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
#Intro.State3 #LaunchButton{
    display: none;
}
#Intro #LaunchButton #TextCursor{
    display: inline-block;
    animation: Intro_CursorBlink 1s linear infinite;
    margin-right: 15px;
    position: relative;
}
#Intro #LaunchButton.Activated #TextCursor{
    animation: .5s var(--ease-out) forwards Intro_CursorSwipe;
}
#Intro #LaunchButton.Activated #State1{
    animation: 1s var(--ease-out) forwards reverse Intro_TextOpacity;
}
#Intro #LaunchButton.Activated #State2{
    animation: .5s var(--ease-out) forwards Intro_TextOpacity .25s;
}
#Intro #LaunchButton.Activated{
    animation: Intro_ButtonSqueeze var(--jade-bounce) .75s forwards .25s;
}
#Intro #LaunchContent{
    width: 600px;
    height: 0px;
    overflow: hidden;
    position: absolute;
    z-index: 25;
    left: calc(50% - 300px);
    top: calc(50% - 0px);
    opacity: 0;
    background-color: rgb(var(--primary-color));
    border: 1px solid rgb(var(--secondary-color));
    box-shadow: 0px 0px 15px rgba(var(--primary-color), 1);
    border-radius: 25px;
    display: none;
}
#Intro.State2 #LaunchContent{
    display: block;
}
#Intro.State4 #LaunchContent{
    display: none;
}
#Intro .Emblem{
    width: 100px;
    height: 100px;
    margin-left: 25px;
    margin-top: 25px;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
    perspective: 200px;
    vertical-align: middle;
}
#Intro .Emblem div{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgb(var(--secondary-color));
    border-radius: 15px;
}
#Intro.State2 .Emblem div{
    animation: 
        Intro_EmblemElementAppear .75s var(--jade-bounce) forwards, 
        Intro_ElementGlow .5s linear forwards .25s, 
        Intro_EmblemElementAppear .75s var(--jade-bounce) 5s forwards reverse;
}
#Intro .Emblem #Loyalty{
    clip-path: polygon(47.5% 0%, 15% 45%, 47.5% 55%);
    --transformation: translateZ(-400px) rotate3d(-.5, -.5, -.25, 45deg) translateZ(-300px) rotate3d(0.5, 0.5, 0.5, 100deg);
}
#Intro .Emblem #Competence{
    clip-path: polygon(52.5% 0%, 85% 45%, 52.5% 55%);
    --transformation: translateZ(-500px) rotate3d(.5, -.5, -.25, 45deg) translateZ(-400px) rotate3d(0.5, 0.5, 0.5, 120deg);
}
#Intro .Emblem #Solace{
    clip-path: polygon(47.5% 65%, 15% 50%, 47.5% 100%);
    --transformation: translateZ(-600px) rotate3d(-.5, .5, -.25, 45deg) translateZ(-300px) rotate3d(0.5, 0.5, 0.5, 140deg);
}
#Intro .Emblem #Reason{
    clip-path: polygon(52.5% 65%, 85% 50%, 52.5% 100%);
    --transformation: translateZ(-400px) rotate3d(-.5, -.5, .25, 45deg) translateZ(-400px) rotate3d(0.5, 0.5, 0.5, 160deg);
}
#Intro .Emblem #Soul{
    rotate: -54.16deg;
    width: 55%;
    border-radius: 100px;
    height: 7%;
    top: 12%;
    left: -2px;
    --transformation: translateZ(-500px) rotate3d(.5, .5, -.25, 45deg) translateZ(-300px) rotate3d(0.5, 0.5, 0.5, 135deg);
}
#Intro .Emblem #Pride{
    rotate: -54.16deg;
    width: 55%;
    border-radius: 100px;
    height: 7%;
    bottom: 12%;
    right: -2px;
    --transformation: translateZ(-600px) rotate3d(-.5, .5, .25, 45deg) translateZ(-400px) rotate3d(0.5, 0.5, 0.5, 135deg);
}
#Intro #LaunchContent #Title{
    display: inline-block;
    font-size: 80px;
    margin-left: 40px;
    font-weight: 600;
    vertical-align: middle;
    perspective: 300px;
}
#Intro #LaunchContent #Title div{
    display: inline-block;
    margin-left: -15px;
    opacity: 0;
    background: none;
    --transformation: translateZ(-400px) rotate3d(-.5, -.5, -.25, 45deg) translateZ(-300px) rotate3d(0.5, 0.5, 0.5, 100deg);
}
#Intro.State2 #LaunchContent #Title div{
    animation:
        Intro_TextElementGlow .5s linear forwards calc(.05s * var(--index)), 
        Intro_TextAppear .75s var(--jade-bounce) forwards calc(.05s * var(--index)), 
        Intro_TextAppear .75s var(--jade-bounce) forwards reverse calc(5s + calc(.05s * var(--index)));
}
#Intro #LaunchContent #SubTitle{
    position: absolute;
    left: 170px;
    width: 330px;
    text-align: center;
    display: block;
    bottom: -30px;
    font-size: 25px;
}
#Intro.State2 #LaunchContent #SubTitle{
    animation: Intro_SubtitleAppear .75s var(--jade-bounce) forwards 2s, Intro_SubtitleAppear .75s var(--jade-bounce) forwards 5s reverse;
}
#Intro.State2 #LaunchContent #Title{
    animation: Intro_SubtitleSlide .75s var(--jade-bounce) forwards 2s, Intro_SubtitleSlide .75s var(--jade-bounce) forwards 5s reverse;
}
#Intro #LaunchContent #Cover{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 0px;
    background-color: rgb(var(--secondary-color));
}
#Intro.State2 #LaunchContent{
    animation: 
            Intro_ContentPopup var(--jade-bounce) .5s forwards .05s,
            Intro_Collapse var(--jade-bounce) .5s forwards 5.5s;
}