HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<head>
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@200;500&display=swap&text=THEOASIinwhchYUNGWDR" rel="stylesheet" />
</head>
<body>
<div class="frame">
<div class="scene">
<div class="building-1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<div></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="mooving-part-1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="mooving-part-2">
<div></div>
<div></div>
<div></div>
</div>
<div class="rocks">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="Ro">
<div class="Ro_1">
<div class="Ro__legl"></div>
<div class="Ro__legr"></div>
<div class="Ro__dress"><div></div></div>
<div class="Ro__head"></div>
</div>
<div class="Ro_2">
<div class="Ro__legl"></div>
<div class="Ro__legr"></div>
<div class="Ro__dress"><div></div></div>
<div class="Ro__head"></div>
</div>
<div class="Ro_3">
<div class="Ro__legl"></div>
<div class="Ro__legr"></div>
<div class="Ro__dress"><div></div></div>
<div class="Ro__head"></div>
</div>
<div class="Ro_4">
<div class="Ro__legl"></div>
<div class="Ro__legr"></div>
<div class="Ro__dress"><div></div></div>
<div class="Ro__head"></div>
</div>
</div>
<div class="Girl">
<div class="Girl_1">
<div class="Girl__legl"></div>
<div class="Girl__legr"></div>
<div class="Girl__dress"></div>
<div class="Girl__head"></div>
</div>
<div class="Girl_2">
<div class="Girl__legl"></div>
<div class="Girl__legr"></div>
<div class="Girl__dress"></div>
<div class="Girl__head"></div>
</div>
<div class="Girl_3">
<div class="Girl__legl"></div>
<div class="Girl__legr"></div>
<div class="Girl__dress"></div>
<div class="Girl__head"></div>
</div>
<div class="Girl_4">
<div class="Girl__legr"></div>
<div class="Girl__legl"></div>
<div class="Girl__dress"></div>
<div class="Girl__head"></div>
</div>
</div>
</div>
<div class="building-2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="mooving-part-1">
<div></div>
<div></div>
<div></div>
</div>
<div class="mooving-part-2"></div>
<div class="mooving-part-3">
<div></div>
</div>
<div class="mooving-part-4">
<div></div>
<div></div>
<div></div>
</div>
<div class="mooving-part-5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
<div class="cloud4"></div>
</div>
<div class="mooving-part-6">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
<div class="cloud4"></div>
</div>
<div class="mooving-bridge">
<div class="mooving-bridge-cloud">
<div></div>
</div>
<div class="mooving-bridge-part1">
<div></div>
</div>
<div class="mooving-bridge-part2">
<div></div>
</div>
<div class="mooving-bridge-part3">
<div></div>
<div></div>
</div>
<div class="mooving-bridge-part4">
<div></div>
<div></div>
</div>
<div class="mooving-bridge-part5">
<div></div>
<div></div>
</div>
<div class="mooving-bridge-part6">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="rocks">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="Ro">
<div class="Ro__armr"></div>
<div class="Ro_1">
<div class="Ro__legl"></div>
<div class="Ro__legr"></div>
<div class="Ro__dress"><div></div></div>
<div class="Ro__head"></div>
</div>
<div class="Ro_2">
<div class="Ro__legl"></div>
<div class="Ro__legr"></div>
<div class="Ro__dress"><div></div></div>
<div class="Ro__head"></div>
</div>
<div class="Ro_3">
<div class="Ro__legl"></div>
<div class="Ro__legr"></div>
<div class="Ro__dress"><div></div></div>
<div class="Ro__head"></div>
</div>
<div class="Ro_4">
<div class="Ro__legl"></div>
<div class="Ro__legr"></div>
<div class="Ro__dress"><div></div></div>
<div class="Ro__head"></div>
</div>
<div class="Ro__arml"></div>
</div>
<div class="Girl">
<div class="Girl_1">
<div class="Girl__legl"></div>
<div class="Girl__legr"></div>
<div class="Girl__dress"></div>
<div class="Girl__head"></div>
</div>
<div class="Girl_2">
<div class="Girl__legl"></div>
<div class="Girl__legr"></div>
<div class="Girl__dress"></div>
<div class="Girl__head"></div>
</div>
<div class="Girl_3">
<div class="Girl__legl"></div>
<div class="Girl__legr"></div>
<div class="Girl__dress"></div>
<div class="Girl__head"></div>
</div>
<div class="Girl_4">
<div class="Girl__legr"></div>
<div class="Girl__legl"></div>
<div class="Girl__dress"></div>
<div class="Girl__head"></div>
</div>
<div class="Girl__arml"></div>
</div>
<div class="building-3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="mooving-part-1">
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="mooving-part-2">
<div></div>
<div></div>
<div></div>
</div>
<div class="mooving-part-3">
<div></div>
<div></div>
</div>
<div class="mooving-part-4"></div>
</div>
</div>
</div>
<div class="cover">
<h1>The Oasis</h1>
<h3>in which</h3>
<h2>Young Eyes See New Wonders</h2>
<div class="cover__button"></div>
</div>
</div>
</body>
@use postcss-nested;
html, body {
height: 100vh; width: 100vw;
min-height: 60vw;
padding: 0; margin: 0;
background: black;
--animation: 90s infinite;
}
body::after {
content: '';
position: absolute;
display: block;
top: 0; left: 50%;
width: 454px; height: 798px;
transform: translateX(-50%);
animation: frame var(--animation) ease;
}
.frame {
position: relative;
width: 454px; height: 798px;
margin: auto;
background: #3D2E36;
overflow: hidden;
}
.scene {
position: relative;
font-size: 4px;
perspective: 100000px;
animation: scene var(--animation) linear;
& *, & *:before, & *:after {
content: '';
position: absolute;
transform-style: preserve-3d;
transform-origin: 0 0 0;
}
}
.cover {
position: absolute;
width: 100%; height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
mix-blend-mode: hard-light;
font-family: "Prompt", sans-serif;
color: white;
z-index: 999;
animation: cover var(--animation) ease;
&::before {
content: "│││";
width: 296px; height: 48px;
border-bottom: 2px solid white;
font-size: 22px;
text-align: center;
letter-spacing: -15px;
line-height: 16px;
}
h1 {
margin: 40px 0 26px;
font-size: 58px;
font-weight: 500;
text-transform: uppercase;
line-height: 67px;
}
h2 {
width: 296px;
margin: 36px 0 84px;
font-weight: 200;
font-size: 21px;
text-transform: uppercase;
text-align: center;
line-height: 24px;
letter-spacing: -1px;
}
h3 {
width: 296px;
margin: 0;
font-weight: 200;
font-size: 15px;
line-height: 6px;
text-align: center;
background: linear-gradient(0deg, white, white) 0px 2px / 105px 2px no-repeat, linear-gradient(0deg, white, white) 191px 2px / 105px 2px no-repeat;
}
.cover__button {
position: relative;
width: 42px; height: 42px;
border-radius: 99em;
box-shadow: inset 0 0 0 4px white;
transform-origin: center center;
animation: coverButton var(--animation) ease;
&::before {
content: '';
position: absolute;
top: -4px; left: -4px;
width: 50px; height: 50px;
border-radius: 99em;
box-shadow: 0 0 0 2px white;
}
&::after {
content: '';
position: absolute;
top: -4px; left: -4px;
width: 50px; height: 50px;
border-radius: 999em;
box-shadow: 0 0 0 1px white;
transform-origin: center center;
animation: coverButtonShadow var(--animation) ease;
}
}
}
.building-1 {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(25em, 176em) rotateX(55deg) rotateZ(-45deg);
transform-style: preserve-3d;
--left-default-light: #FF676A;
--left-default-dark: #E34848;
--left-accent-light: #FFD4A3;
--left-accent-dark: #EDB88C;
--top-default-light: #FF8D7F;
--top-default-dark: #F36E5A;
--top-accent-light: #FFF8F5;
--top-accent-dark: #FCD3D7;
--right-default-light: #904872;
--right-default-dark: #6F305B;
--right-accent-light: #E6A79C;
--right-accent-dark: #C88884;
--left-window-inner: #461336;
--left-window-v: #66274C;
--right-window-v: #973B5D;
--right-window-inner: #742849;
--left-window-h: #9B3C4D;
--right-window-h: #A14C6D;
&::before {
width: 100%; height: 39em;
background: var(--right-default-light);
transform: translateY(15em) rotateX(-90deg);
}
& > div:nth-child(1) {
height: 8em; width: 1em;
background: var(--top-default-light);
transform: translateY(-8em) translateZ(8em);
&::before {
width: 62em; height: 23em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 1.5em/2em 3.5em repeat-y, var(--left-default-light);
clip-path: polygon(0em 0em, 62em 0em, 62em 23em, 23em 23em, 23em 8em, 15em 8em, 15em 0em, 7em 0em, 7em 8em, 0em 8em);
transform: rotateY(90deg) translateX(-15em);
}
&::after {
width: 8em; height: 8em;
background: var(--left-default-light);
transform: translateX(1em) rotateY(-90deg);
}
}
& > div:nth-child(2) {
height: 62em; width: 15em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 2em/3em 2em repeat-x, var(--right-default-light);
transform: translate(15em, -39em) translateZ(-47em) rotateX(-90deg);
transform-origin: bottom left;
&::before {
height: 23em; width: 15em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.75em 2em/3em 2em repeat-x, var(--right-default-light);
clip-path: polygon(0em 0em, 15em 0em, 15em 23em, 0em 23em, 0em 15em, 1em 15em, 1em 7em, 0em 7em);
transform: translate(-15em, -8em) translateZ(-23em);
}
&::after {
height: 70em; width: 23em;
background: linear-gradient(var(--left-default-dark), var(--left-default-dark)) 1.5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 8.5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 12em 10em/1.5em 2em no-repeat, var(--left-default-light);
clip-path: polygon(0em 8em, 0em 70em, 23em 70em, 23em 0em, 22em 0em, 22em 1em, 21em 1em, 21em 2em, 20em 2em, 20em 3em, 19em 3em, 19em 4em, 18em 4em, 18em 5em, 17em 5em, 17em 6em, 16em 6em, 16em 7em, 15em 7em, 15em 8em);
transform: translateY(-8em) rotateY(90deg);
}
}
& > div:nth-child(3) {
height: 8em; width: 95em;
background: linear-gradient(var(--top-default-dark), var(--top-default-dark)) 0em 1em/95em 0.3em no-repeat, linear-gradient(var(--top-default-dark), var(--top-default-dark)) 0em 7em/95em 0.3em no-repeat, var(--top-default-light);
transform: translateY(-8em) translateZ(23em);
&::before {
height: 15em; width: 15em;
background: var(--top-default-light);
clip-path: polygon(0em 0em, 8em 0em, 8em 4em, 9.2em 5.9em, 11.3em 7em, 15em 7em, 15em 15em, 0em 15em);
transform: translate(15em, 16em) translateZ(-8em);
}
&::after {
height: 30em; width: 72em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 2em/3em 2em repeat-x, var(--right-default-light);
clip-path: polygon(0em 0em, 72em 0em, 72em 28em, 46em 28em, 46em 18em, 45em 15em, 44em 13em, 43em 11.7em, 42em 10.6em, 41em 9.8em, 40em 9.1em, 39em 8.6em, 37em 8em, 35em 8em, 31em 8.3em, 30em 8.5em, 29em 8.9em, 27em 10.1em, 26em 11.1em, 25em 12.3em, 24em 13.7em, 23.4em 15.5em, 23em 30em, 0em 30em);
transform: translate(23em, 8em) rotateX(-90deg);
}
}
& > div:nth-child(4) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateX(15em) translateZ(23em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(5) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(15em, 3em) translateZ(20em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(6) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(15em, 6em) translateZ(17em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg);
}
}
& > div:nth-child(7) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(15em, 1em) translateZ(22em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
}
& > div:nth-child(8) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(15em, 4em) translateZ(19em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-4em) translateZ(-4em);
}
}
& > div:nth-child(9) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(15em, 7em) translateZ(16em) rotateX(90deg);
&::before {
width: 6em; height: 3em;
background: var(--right-default-light);
transform: translate(-14em, 7em) translateZ(8em);
}
&::after {
width: 6em; height: 3em;
background: var(--left-default-light);
transform: translate(-14em, 7em) translateZ(8em) rotateY(-90deg);
}
}
& > div:nth-child(10) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(1em, -7em) translateZ(26em);
&::before {
width: 22.9em; height: 24em;
background: var(--top-default-light);
clip-path: polygon(0em 0em, 23em 0em, 23em 16.3em, 12em 16.3em, 12em 16.3em, 12em 16.3em, 13em 15.6em, 14em 15em, 15em 13em, 15em 11em, 14em 9.3em, 13em 8.6em, 12em 7.8em, 0em 7.8em);
transform: translate(67.9em, 7.3em) translateZ(-25.9em);
}
&::after {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translate(82em, 15.4em) translateZ(-35em);
}
}
& > div:nth-child(11) {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translate(82em, 8.4em) translateZ(-10em);
&::before {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(-1em) translateZ(-1em);
}
&::after {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(-2em) translateZ(-2em);
}
}
& > div:nth-child(12) {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translate(79em, 8.4em) translateZ(-13em);
&::before {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(-1em) translateZ(-1em);
}
&::after {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(-2em) translateZ(-2em);
}
}
& > div:nth-child(13) {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translate(82em, 8.3em) translateZ(-10.0em) rotateY(90deg);
&::before {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translateX(-1em) translateZ(1em);
}
&::after {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translateX(-2em) translateZ(2em);
}
}
& > div:nth-child(14) {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translate(81em, 8.3em) translateZ(-12em) rotateY(-90deg);
&::before {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translateX(-1em) translateZ(1em);
}
&::after {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translateX(-2em) translateZ(2em);
}
}
& > div:nth-child(15) {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translate(78em, 8.3em) translateZ(-15em) rotateY(-90deg);
&::before {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translateX(-1em) translateZ(1em);
}
&::after {
width: 80em; height: 56em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 80em 0em, 80em 8em, 75em 8em, 67em 8.2em, 67em 16.1em, 51em 16.1em, 51em 24.1em, 50em 24.1em, 50em 25.1em, 49em 25.1em, 49em 26.1em, 48em 26.1em, 48em 27.1em, 47em 27.1em, 47em 28.1em, 46em 28.1em, 46em 29.1em, 45em 29.1em, 45em 30.1em, 44em 30.1em, 44em 31.1em, 43em 31.1em, 43em 32.1em, 42em 32.1em, 42em 33em, 41em 33em, 41em 34em, 40em 34em, 40em 35em, 39em 35em, 39em 36em, 38em 36em, 38em 37em, 37em 37em, 37em 38em, 36em 38em, 36em 39em, 35em 39em, 35em 55.1em, 0em 55.1em);
transform: translate(-52em, -16.4em) translateZ(9em);
}
}
& > div:nth-child(16) {
width: 8em; height: 8em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 5px var(--top-default-light), inset 0 0 0 7px var(--top-default-dark);
transform: translate(69em, 8em) translateZ(-16em);
&::before {
width: 16em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(14.4em) translateY(1em) translateZ(8.5em);
}
&::after {
width: 22em; height: 19.5em;
background: linear-gradient(90deg, var(--right-default-light) 50%, var(--left-default-light));
transform: translateY(0em) translateZ(-3.5em) rotateX(90deg);
}
}
& > div:nth-child(17) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 16em) translateZ(-17em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(18) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 19em) translateZ(-20em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(19) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 22em) translateZ(-23em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(20) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 25em) translateZ(-26em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(21) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 28em) translateZ(-29em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(22) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 16em) translateZ(-17em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
}
& > div:nth-child(23) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 19em) translateZ(-20em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
}
& > div:nth-child(24) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 22em) translateZ(-23em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
}
& > div:nth-child(25) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 25em) translateZ(-26em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
}
& > div:nth-child(26) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 28em) translateZ(-29em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
}
& > div:nth-child(27) {
width: 8em; height: 16em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 5px var(--top-default-light), inset 0 0 0 7px var(--top-default-dark);
transform: translate(69em, 31em) translateZ(-32em);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg);
}
&::after {
width: 19.5em; height: 16em;
background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 16em 2.5em/2em 3em repeat-y, var(--left-default-light);
transform: translateX(8em) rotateY(-90deg);
}
}
& > div:nth-child(28) {
width: 31.2em; height: 24em;
background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 29.4em 1.6em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 27.7em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 25.9em 1.6em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 24.2em 3em/1.7em 3em repeat-y, var(--left-default-light);
transform: translateX(92em) translateZ(-0.2em) rotateY(-90deg);
&::before {
width: 86em; height: 47em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 47em, 56em 47em, 56em 46em, 57em 46em, 57em 45em, 58em 45em, 58em 44em, 59em 44em, 59em 43em, 60em 43em, 60em 42em, 61em 42em, 61em 41em, 62em 41em, 62em 40em, 63em 40em, 63em 24em, 90em 24em, 90em 0em);
transform: translate(-71em, 16em) translateZ(-32em) rotateX(90deg);
}
&::after {
width: 54.5em; height: 24em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 24em, 35em 24em, 35em 16em, 54.5em 16em, 54.5em 0em);
transform: translate(-67em, 47em) translateZ(-1em) rotateX(90deg);
}
}
& > div:nth-child(29) {
width: 16em; height: 16em;
background: conic-gradient(var(--top-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--top-default-dark) 180deg, var(--top-default-dark) 270deg, transparent 270deg) 0em 0em/4em 4em repeat, var(--top-default-light);
transform: translate(77em, 31em) translateZ(-12.5em);
&::before {
width: 12em; height: 12em;
background: var(--top-default-light);
transform: translate(2em, 2em) translateZ(4em);
}
&::after {
width: 4em; height: 12em;
background: var(--left-default-light);
transform: translate(2em, 2em) rotateY(-90deg);
}
}
& > div:nth-child(30) {
width: 12em; height: 4em;
background: var(--right-default-light);
transform: translate(79em, 45em) translateZ(-12.5em) rotateX(90deg);
&::before {
width: 26em; height: 1em;
background: var(--right-default-light);
transform: translate(12em, 35.5em) translateZ(20em);
}
&::after {
width: 26em; height: 1em;
background: var(--left-default-light);
transform: translate(12em, 35.5em) translateZ(46em) rotateY(90deg);
}
}
& > div:nth-child(31) {
width: 26em; height: 26em;
background: var(--top-default-light);
transform: translate(91em, -1em) translateZ(24em);
&::before {
width: 24em; height: 7em;
background: var(--right-default-light);
transform: translate(1em, 25em) translateZ(0em) rotateX(90deg);
}
&::after {
width: 20em; height: 6em;
background: var(--right-default-light);
transform: translate(3em, 23em) translateZ(5em) rotateX(90deg);
}
}
& > div:nth-child(32) {
width: 24em; height: 24em;
background: var(--top-default-light);
transform: translateX(92em) translateZ(31em);
&::before {
width: 24em; height: 24em;
background: var(--top-default-light);
transform: translateZ(3em);
}
&::after {
width: 20em; height: 20em;
background: var(--top-default-light);
transform: translate(2em, 2em) translateZ(4em);
}
}
& > div:nth-child(33) {
width: 4em; height: 20em;
background: var(--left-default-light);
transform: translate(94em, 2em) translateZ(31em) rotateY(-90deg);
&::before {
width: 1em; height: 24em;
background: var(--left-default-light);
transform: translate(2em, -2em) translateZ(2em);
}
&::after {
width: 1em; height: 24em;
background: var(--right-default-light);
transform: translate(2em, 22em) translateZ(-22em) rotateX(90deg);
}
}
& > div:nth-child(34) {
width: 65em; height: 2em;
background: var(--left-default-dark);
transform: translate(3em, -5em) translateZ(9em) rotateY(-90deg);
&::before {
width: 65em; height: 4em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
transform: translate(1em, -1em) translateZ(1em);
}
&::after {
width: 65em; height: 4em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
transform: translate(1em, 3em) translateZ(1em) rotateX(-90deg);
}
}
& > div:nth-child(35) {
width: 2em; height: 65em;
background: linear-gradient(180deg, var(--right-default-dark) 96%, transparent 0%);
transform: translate(3em, -3em) translateZ(10em) rotateX(90deg);
&::before {
width: 1em; height: 65em;
background: var(--right-default-light);
transform: translateX(-1em) translateZ(2em);
}
&::after {
width: 1em; height: 65em;
background: var(--left-default-light);
transform: translateX(2em) rotateY(90deg);
}
}
& > div:nth-child(36) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(87em, -7em) translateZ(26em);
&::before {
width: 6em; height: 3em;
background: var(--right-default-light);
transform: translateY(6em) translateZ(-3em) rotateX(90deg);
}
&::after {
width: 3em; height: 6em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
}
& > div:nth-child(37) {
width: 27em; height: 2em;
background: var(--left-default-dark);
transform: translate(89em, -5em) translateZ(26em) rotateY(-90deg);
&::before {
width: 27em; height: 4em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
transform: translateY(-1em) translateZ(1em);
}
&::after {
width: 27em; height: 4em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
transform: translateY(3em) translateZ(1em) rotateX(-90deg);
}
}
& > div:nth-child(38) {
width: 2em; height: 27em;
background: var(--right-default-dark);
transform: translate(89em, -3em) translateZ(26em) rotateX(90deg);
&::before {
width: 1em; height: 27em;
background: var(--right-default-light);
transform: translateX(-1em) translateZ(2em);
}
&::after {
width: 1em; height: 27em;
background: var(--left-default-light);
transform: translateX(2em) rotateY(90deg);
}
}
& > div:nth-child(39) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(87em, -7em) translateZ(57em);
&::before {
width: 6em; height: 3em;
background: var(--right-default-light);
transform: translateY(6em) translateZ(-3em) rotateX(90deg);
}
&::after {
width: 3em; height: 6em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
}
& > div:nth-child(40) {
width: 6em; height: 40em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 3px var(--top-default-light), inset 0 0 0 5px var(--top-default-dark);
transform: translate(87em, -41em) translateZ(60em);
&::before {
width: 6em; height: 2em;
background: var(--right-default-light);
transform: translateY(40em) translateZ(-2em) rotateX(90deg);
}
&::after {
width: 2em; height: 40em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
}
& > div:nth-child(41) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(79em, -85em) translateZ(19em);
&::before {
width: 6em; height: 3em;
background: var(--right-default-light);
transform: translateY(6em) translateZ(-3em) rotateX(90deg);
}
&::after {
width: 3em; height: 6em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
}
& > div:nth-child(42) {
width: 53em; height: 6em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 3px var(--top-default-light), inset 0 0 0 5px var(--top-default-dark);
transform: translate(79em, -85em) translateZ(22em);
&::before {
width: 53em; height: 2em;
background: var(--right-default-light);
transform: translateY(6em) translateZ(-2em) rotateX(90deg);
}
&::after {
width: 2em; height: 6em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
}
& > div:nth-child(43) {
transform: translateY(15em) translateZ(55em);
&::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(18em, 8em) translateZ(-50em) rotateX(-90deg);
}
&::after {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(26em, 8em) translateZ(-50em) rotateX(-90deg);
}
}
& > div:nth-child(44) {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(11em, 15em) translateZ(-6em) rotateX(-90deg);
&::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(-8em);
}
&::after {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(69em, 20em) translateZ(32em);
}
}
& > div:nth-child(45) {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(88em, 47em) translateZ(-27em) rotateX(-90deg);
&::before {
width: 2.5em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(30em, -35em) translateZ(-31em);
}
&::after {
width: 2.5em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(15em, -35em) translateZ(-31em);
}
}
& > div:nth-child(46) {
width: 2.5em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(110.5em, 16em) translateZ(8em) rotateX(-90deg);
&::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--left-window-v);
border-left: 3px solid #A42037;
border-bottom: 3px solid var(--left-window-h);
border-radius: 2em 2em 0 0;
transform: translate(-111em, 14em) translateZ(-6em) rotateY(-90deg);
}
&::after {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--left-window-v);
border-left: 3px solid #A42037;
border-bottom: 3px solid var(--left-window-h);
border-radius: 2em 2em 0 0;
transform: translate(-111em, 14em) translateZ(-14em) rotateY(-90deg);
}
}
& > div:nth-child(47) {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translate(68em, 34em) translateZ(-37em) rotateY(90deg);
&::before {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translateY(6em);
}
&::after {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translateY(-8em);
}
}
& > div:nth-child(48) {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translate(91em, 14em) translateZ(17em) rotateY(90deg);
&::before {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translateY(-8em);
}
&::after {
border-top: 5em solid transparent;
border-bottom: 5em solid transparent;
border-right: 10em solid var(--left-accent-light);
transform: translate(17.1em, 19.2em) translateZ(-5.9em) rotateY(30deg);
}
}
& > div:nth-child(49) {
width: 18em; height: 18em;
background: var(--top-accent-light);
transform: translate(95em, 3em) translateZ(36em);
&::before {
border-right: 5em solid transparent;
border-left: 5em solid transparent;
border-bottom: 10em solid var(--right-accent-light);
transform: translate(-15em, 36em) translateZ(-36em) rotateX(-60deg);
}
&::after {
width: 1em; height: 18em;
background: var(--left-accent-light);
transform: rotateY(90deg);
}
}
& > div:nth-child(50) {
width: 15em; height: 15em;
transform: translate(96em, 4em) translateZ(36em);
&::before {
border-bottom: 8em solid transparent;
border-top: 8em solid transparent;
border-left: 16em solid var(--left-accent-light);
transform: rotateY(-60deg);
}
&::after {
border-right: 8em solid transparent;
border-left: 8em solid transparent;
border-top: 16em solid var(--right-accent-light);
transform: translate(0em, 16em) rotateX(120deg);
}
}
& > div:nth-child(51) {
width: 18em; height: 1em;
background: var(--right-accent-light);
transform: translate(95em, 21em) translateZ(36em) rotateX(-90deg);
}
& > div:nth-child(52) {
width: 3em; height: 3em;
transform: translate(103em, 10em) translateZ(53em);
&::before {
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
border-top: 3em solid var(--left-accent-light);
transform: rotateZ(90deg) rotateX(-240deg);
}
&::after {
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
border-top: 3em solid var(--right-accent-light);
transform: translateY(3em) rotateX(120deg);
}
& > div:nth-child(1) {
&::before {
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
border-top: 3em solid var(--left-accent-dark);
transform: rotateZ(90deg) rotateX(-120deg);
}
&::after {
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
border-top: 3em solid var(--right-accent-dark);
transform: translateY(3em) rotateX(240deg);
}
}
}
& > div:nth-child(53) {
width: 65em; height: 2em;
background: var(--left-default-dark);
transform: translate(85.7em, -88em) translateZ(-53em) rotateY(-90deg);
&::before {
width: 65em; height: 4.4em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 0em 1.1em, 65em 1.1em, 65em 3.1em, 0em 3.1em, 0em 4.1em, 65em 4.1em, 65em 0em);
transform: translateY(-0.8em) translateZ(1.23em);
}
&::after {
width: 65em; height: 4.5em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 1.1em, 65em 1.1em, 65em 3.0em, 0em 3.0em, 0em 4.0em, 65em 4.1em, 65em 0em);
transform: translateY(3em) translateZ(1em) rotateX(-90deg);
}
}
& > div:nth-child(54) {
width: 1em; height: 65em;
background: var(--right-default-dark);
transform: translate(81.7em, -80.9em) translateZ(-49em) rotateX(90deg);
&::before {
width: 0.9em; height: 65em;
background: var(--right-default-light);
transform: translateX(-2em) translateZ(2em);
}
&::after {
width: 1.1em; height: 65em;
background: var(--left-default-light);
transform: translateX(1em) rotateY(90deg);
}
}
& > div:nth-child(55) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(87em, -46em) translateZ(75em);
&::before {
width: 6em; height: 15em;
background: var(--right-default-light);
transform: translateY(6em) rotateX(-90deg);
}
&::after {
width: 15em; height: 6em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 15em 0em, 15em 1em, 4em 1em, 3em 1.2em, 2em 1.7em, 1em 2.8em, 1em 3.6em, 2em 4.7em, 3em 5em, 15em 5em, 15em 6em, 0em 6em);
transform: rotateY(90deg);
}
}
& > div:nth-child(56) {
width: 4em; height: 4em;
background: var(--top-default-light);
transform: translate(88em, -45em) translateZ(76em);
&::before {
width: 1em; height: 4em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
&::after {
width: 4em; height: 1em;
background: var(--right-default-light);
transform: translateY(4em) rotateX(-90deg);
}
}
& > div:nth-child(57) {
width: 4em; height: 14em;
background: linear-gradient(90deg, #6C507C, #2B2258);
transform: translate(87em, -45em) translateZ(74em) rotateX(-90deg);
&::before {
border-bottom: 1em solid transparent;
border-top: 1em solid transparent;
border-left: 2em solid var(--left-accent-light);
transform: translate(2em, -2em) translateZ(1em) rotateX(90deg) rotateY(-60deg);
}
&::after {
border-right: 1em solid transparent;
border-left: 1em solid transparent;
border-top: 2em solid var(--right-accent-light);
transform: translate(2em, -2em) translateZ(3em) rotateX(-150deg);
}
}
& > .mooving-part-1 {
width: 8em; height: 24em;
background: var(--top-accent-light);
box-shadow: inset 0 0 0 3px var(--top-accent-light), inset 0 0 0 5px var(--top-accent-dark);
transform: translate(71em, -52em) translateZ(23em);
animation: b1Mp1 var(--animation) linear;
&::before {
width: 16em; height: 24em;
background: linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 9em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 10.8em 1.5em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 12.6em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 14.3em 1.5em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 16.1em 3em/1.7em 3em repeat-y, var(--left-accent-light);
clip-path: polygon(0em 0em, 0em 24em, 8em 24em, 8em 0em, 9em 0em, 9em 24em, 17em 24em, 17em 0em);
transform: rotateY(90deg);
}
&::after {
width: 8em; height: 24em;
background: var(--top-accent-dark);
transform: translateZ(-9em);
}
& > div:nth-child(1) {
width: 2em; height: 2em;
background: var(--right-accent-dark);
transform: translateY(7em) translateZ(-17em) rotateX(-90deg);
&::before {
width: 24em; height: 2em;
background: var(--left-accent-light);
clip-path: polygon(0em 0em, 0em 2em, 8em 2em, 8em 0em, 9em 0em, 9em 2em, 16em 2em, 16em 0em, 17em 0em, 17em 2em, 26em 2em, 26em 0em);
transform: translateZ(17em) rotateY(90deg);
}
&::after {
width: 2em; height: 2em;
background: var(--right-accent-dark);
transform: translateZ(8em);
}
}
& > div:nth-child(2) {
width: 8em; height: 2em;
background: var(--right-accent-light);
transform: translateY(24em) translateZ(-17em) rotateX(-90deg);
&::before {
width: 8em; height: 16em;
background: linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 9em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 1.5em 10.6em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 12.1em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 1.5em 13.6em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 15.1em/3em 1.5em repeat-x, var(--right-accent-light);
clip-path: polygon(0em 0em, 0em 8em, 8em 8em, 8em 9em, 0em 9em, 0em 16em, 8em 16em, 8em 0em);
transform: translateY(-17em);
}
&::after {
width: 8em; height: 24em;
background: var(--top-accent-dark);
transform: rotateX(-90deg);
}
}
& > div:nth-child(3) {
width: 8em; height: 4em;
background: var(--right-accent-light);
transform: translate(-1em, 6em) translateZ(-2em) rotateX(-90deg);
animation: b1Mp1RightPart var(--animation) ease;
&::before {
width: 8em; height: 4em;
background: var(--top-accent-light);
transform: rotateX(-90deg);
animation: b1Mp1TopPart var(--animation) ease;
}
&::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--left-accent-light);
background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
transform: rotateY(90deg);
animation: b1Mp1LeftPart var(--animation) ease;
}
}
& > div:nth-child(4) {
width: 8em; height: 4em;
background: var(--right-accent-light);
transform: translate(-1em, 14em) translateZ(-2em) rotateX(-90deg);
animation: b1Mp1RightPart var(--animation) ease;
&::before {
width: 8em; height: 4em;
background: var(--top-accent-light);
transform: rotateX(-90deg);
animation: b1Mp1TopPart var(--animation) ease;
}
&::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--left-accent-light);
background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
transform: rotateY(90deg);
animation: b1Mp1LeftPart var(--animation) ease;
}
}
& > div:nth-child(5) {
width: 8em; height: 4em;
background: var(--right-accent-light);
transform: translate(-1em, 22em) translateZ(-2em) rotateX(-90deg);
animation: b1Mp1RightPart var(--animation) ease;
&::before {
width: 8em; height: 4em;
background: var(--top-accent-light);
transform: rotateX(-90deg);
animation: b1Mp1TopPart var(--animation) ease;
}
&::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--left-accent-light);
background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
transform: rotateY(90deg);
animation: b1Mp1LeftPart var(--animation) ease;
}
}
}
& > .mooving-part-2 {
width: 24em; height: 8em;
background: var(--top-accent-light);
box-shadow: inset 0 3px var(--top-accent-light), inset 0 -3px var(--top-accent-light), inset 0 4px var(--top-accent-dark), inset 0 -4px var(--top-accent-dark);
transform: translate(30em, 15em) translateZ(-18em);
animation: b1Mp2 var(--animation) linear;
&::before {
width: 24em; height: 62em;
background: linear-gradient(0deg, transparent 63%, var(--right-accent-light) 63%, var(--right-accent-light) 88%, transparent 0%), conic-gradient(var(--right-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-accent-dark) 180deg, var(--right-accent-dark) 270deg, transparent 270deg) 0em 0em/3em 3em repeat, var(--right-accent-light);
transform: translateY(8em) rotateX(-90deg);
}
& > div:nth-child(1) {
width: 4em; height: 1em;
background: var(--top-accent-light);
transform: translate(10em, 8em) translateZ(-6em);
animation: b1Mp2TopPart var(--animation) ease;
&::before {
width: 4em; height: 1em;
background: var(--left-accent-light);
transform: rotateY(90deg);
animation: b1Mp2LeftPart var(--animation) ease;
}
&::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--right-accent-light);
background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
transform: translateY(1em) rotateX(-90deg);
animation: b1Mp2RightPart var(--animation) ease;
}
}
& > div:nth-child(2) {
width: 4em; height: 1em;
background: var(--top-accent-light);
transform: translate(10em, 8em) translateZ(-13.5em);
animation: b1Mp2TopPart var(--animation) ease;
&::before {
width: 4em; height: 1em;
background: var(--left-accent-light);
transform: rotateY(90deg);
animation: b1Mp2LeftPart var(--animation) ease;
}
&::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--right-accent-light);
background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
transform: translateY(1em) rotateX(-90deg);
animation: b1Mp2RightPart var(--animation) ease;
}
}
& > div:nth-child(3) {
width: 4em; height: 1em;
background: var(--top-accent-light);
transform: translate(10em, 8em) translateZ(-21em);
animation: b1Mp2TopPart var(--animation) ease;
&::before {
width: 4em; height: 1em;
background: var(--left-accent-light);
transform: rotateY(90deg);
animation: b1Mp2LeftPart var(--animation) ease;
}
&::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--right-accent-light);
background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
transform: translateY(1em) rotateX(-90deg);
animation: b1Mp2RightPart var(--animation) ease;
}
}
}
& > .rocks {
&::before {
width: 10em; height: 10em;
background: linear-gradient(45deg, #42313C 50%, transparent 0%);
transform: translateY(-8em) translateZ(-31em) rotateX(-45deg) rotateY(-190deg);
}
&::after {
width: 10em; height: 10em;
background: linear-gradient(-134deg, #2E222F 51%, transparent 0%);
transform: translateY(-8em) translateZ(-30em) rotateX(-23deg) rotateY(-233deg) rotateZ(-14deg);
}
& > div:nth-child(1) {
width: 6em; height: 8em;
background: #604854;
transform: translateY(-2em) translateZ(-32em) rotateX(-3deg) rotateY(160deg) rotateZ(-2deg);
&::before {
width: 7em; height: 9em;
background: linear-gradient(195deg, transparent 19%, #553E4A 0%, #553E4A 92%, transparent 0%);
transform: translateX(6em) rotateY(-41deg);
}
&::after {
width: 11em; height: 8em;
background: linear-gradient(41deg, #453344 76%, transparent 0%);
transform: translateY(8em) rotateX(76deg);
}
}
& > div:nth-child(2) {
width: 7em; height: 7em;
background: linear-gradient(215deg, #473444 70%, transparent 0%);
transform: translate(-7em, 10em) translateZ(-32em) rotateX(-20deg) rotateZ(10deg);
&::before {
width: 10em; height: 6em;
background: linear-gradient(195deg, #3B2735 70%, transparent 0%);
transform: rotateY(90deg);
}
&::after {
width: 7.7em; height: 10em;
background: linear-gradient(7deg, #2C2230 91%, transparent 0%);
transform: translateY(3.4em) rotateX(-75deg) rotateY(-27deg);
}
}
& > div:nth-child(3) {
width: 19em; height: 14em;
background: linear-gradient(145deg, #44313C 46%, transparent 0%);
transform: translate(15em, 15em) translateZ(-38em) rotateX(-47deg) rotateY(180deg);
&::before {
width: 6em; height: 19em;
background: linear-gradient(113deg, transparent 7%, #684D5A 8%, #684D5A 55%, transparent 0%);
transform: translate(-40em, 10em) translateZ(-2em) rotateX(-46deg);
}
&::after {
width: 10em; height: 7em;
background: linear-gradient(175deg, #623D4C 50%, transparent 0%);
transform: translate(-34em, 10em) translateZ(-2em) rotateX(-53deg) rotateY(-70deg);
}
}
& > div:nth-child(4) {
width: 16.2em; height: 11em;
background: linear-gradient(123deg, #573F4B 70%, transparent 0%);
transform: translate(49em, 26em) translateZ(-44em) rotateX(-30deg) rotateY(-8deg) rotateZ(48deg);
&::before {
width: 11em; height: 13em;
background: linear-gradient(136deg, #3F2A31 53%, transparent 0%), linear-gradient(141deg, #3F2A31 57%, transparent 0%);
transform: translateX(16.2em) rotateX(-20deg) rotateY(-60deg) rotateZ(52deg);
}
&::after {
width: 4em; height: 17em;
background: linear-gradient(78deg, transparent 31%, #5A4551 31%, #5A4551 44%, transparent 0%), linear-gradient(72deg, transparent 23%, #5A4551 23%, #5A4551 38%, transparent 0%);
transform: translate(19em, 11em) translateZ(11em) rotateY(40deg) rotateZ(58deg);
}
}
& > div:nth-child(5) {
width: 5em; height: 9em;
background: linear-gradient(143deg, #4F3945 57%, transparent 0%) 0em 6em / 5em 3em no-repeat, linear-gradient(125deg, #4F3945 30%, transparent 0%), linear-gradient(76deg, #4F3945 65%, transparent 0%) 0em 0em / 6em 6em no-repeat;
transform: translate(46em, 55.5em) translateZ(-39em) rotateX(-62deg) rotateY(-20deg) rotateZ(86deg);
}
& > div:nth-child(6) {
width: 35em; height: 34em;
background: #3d2f36;
transform: translate(20em, 23em) translateZ(-47em) rotateX(-90deg);
}
}
}
.building-2 {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(15em, -78em) rotateX(55deg) rotateZ(-45deg);
transform-style: preserve-3d;
animation: secondBuilding var(--animation);
--left-default-light: #F94B68;
--left-default-dark: #E23A53;
--left-accent-light: #FFD4A2;
--left-accent-dark: #F1C097;
--top-default-light: #FE817C;
--top-default-dark: #FF6D68;
--top-accent-light: #ffefdc;
--top-accent-dark: #f9d1c1;
--right-default-light: #AC2F5A;
--right-default-dark: #9E1945;
--right-accent-light: #C18D90;
--right-accent-dark: #B57578;
--left-window-inner: #6F082D;
--left-window-v: #BF3B5B;
--left-window-h: #D0556E;
--right-window-inner: #720A30;
--right-window-v: #9B294A;
--right-window-h: #B64F71;
&::before {
width: 100%; height: 19em;
background: var(--right-default-light);
transform: translateY(15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
&::after {
width: 330em; height: 301em;
background: radial-gradient(#a7a2a7, transparent 73%) 128em 133em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 128em 270em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 8em 150em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 38em 230em/60em 16em no-repeat, radial-gradient(#ada6ad, transparent 73%) 138em 210em/80em 22em no-repeat, linear-gradient(26deg, #3D2E36 40%, #3D2E36 100%) 248em 0em/58em 70em no-repeat, linear-gradient(26deg, #3D2E36 40%, #3D2E36 100%) 0em 0em/160em 140em no-repeat, linear-gradient(26deg, #979298 40%, #c2b0b2 100%);
transform: translate(142em, -150em) translateZ(-160em) rotateX(90deg) rotateY(90deg) rotateZ(0deg);
}
& > div:nth-child(1) {
width: 19em; height: 15em;
background: var(--left-default-light);
transform: rotateY(90deg);
&::before {
width: 46em; height: 7em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 0.8em/2em 3.5em repeat-y, var(--left-default-light);
transform: translate(-46em, 8em) translateZ(15em);
}
&::after {
width: 62em; height: 54em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 1.4em/2em 3.5em repeat-y, var(--left-default-light);
clip-path: polygon(0em 0em, 62em 0em, 62em 33em, 9em 33em, 9em 38em, 62em 38em, 62em 54em, 0em 54em);
transform: translate(-68em, -24em) translateZ(31em);
}
}
& > div:nth-child(2) {
width: 25em; height: 7em;
background: var(--top-default-light);
box-shadow: inset -10.6em 0em var(--top-default-light), inset 0em 0em 0em 1.1em var(--top-default-light), inset 0em 0em 0em 1.5em var(--top-default-dark), inset -11em 0em var(--top-default-dark);
transform: translate(15em, 8em) translateZ(46em);
&::before {
width: 16em; height: 65em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 1.4em/3em 2em repeat-x, var(--right-default-light);
transform: translateY(7em) rotateX(-90deg);
}
&::after {
width: 8em; height: 54em;
background: var(--top-default-light);
transform: translate(16em, -32em) translateZ(22em);
}
}
& > div:nth-child(3) {
width: 8em; height: 53.4em;
background: var(--right-default-light);
transform: translate(31em, 30em) translateZ(68em) rotateX(-90deg);
&::before {
width: 15em; height: 48em;
background: conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--right-default-light);
box-shadow: inset 0 16em var(--right-default-light), inset 0 -15.5em var(--right-default-light);
clip-path: polygon(0em 0em, 3em 0em, 3em 2em, 5em 2em, 5em 0em, 10em 0em, 10em 2em, 12em 2em, 12em 0em, 15em 0em, 15em 48em, 0em 48em);
transform: translate(-15em, 13em) translateZ(-30em);
}
&::after {
width: 15em; height: 48em;
background: conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--left-default-light);
box-shadow: inset 0 16em var(--left-default-light), inset 0 -15.5em var(--left-default-light);
clip-path: polygon(0em 0em, 3em 0em, 3em 2em, 5em 2em, 5em 0em, 10em 0em, 10em 2em, 12em 2em, 12em 0em, 15em 0em, 15em 48em, 0em 48em);
transform: translate(-15em, 13em) translateZ(-30em) rotateY(90deg);
}
}
& > div:nth-child(4) {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(16em, -15em) translateZ(53em);
&::before {
width: 15em; height: 15em;
background: var(--top-default-light);
clip-path: polygon(3em 0em, 15em 0em, 15em 15em, 0em 15em, 0em 0em, 3em 0em, 3em 1em, 1em 1em, 1em 3em, 0em 3em, 0em 5em, 1em 5em, 1em 10em, 0em 10em, 0em 12em, 1em 12em, 1em 14em, 3em 14em, 3em 15em, 5em 15em, 5em 14em, 10em 14em, 10em 15em, 12em 15em, 12em 14em, 14em 14em, 14em 12em, 15em 12em, 15em 10em, 14em 10em, 14em 5em, 15em 5em, 15em 3em, 14em 3em, 14em 1em, 12em 1em, 12em 0em, 10em 0em, 10em 1em, 5em 1em, 5em 0em);
transform: translateZ(2em);
}
&::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateY(3em) rotateX(90deg);
}
}
& > div:nth-child(5) {
width: 1em; height: 2em;
background: var(--right-default-light);
box-shadow: 14em 0em var(--right-default-light);
transform: translate(15em, -4em) translateZ(54em) rotateX(90deg);
&::before {
width: 1em; height: 2em;
background: var(--left-default-light);
box-shadow: -14em 0em var(--left-default-light);
transform: translateX(5em) translateZ(-4em) rotateY(90deg);
}
&::after {
width: 1em; height: 2em;
background: var(--left-default-light);
transform: translateX(12em) translateZ(-4em) rotateY(90deg);
}
}
& > div:nth-child(6) {
width: 13em; height: 13em;
transform: translate(17em, -14em) translateZ(53em);
&::before {
width: 13.5em; height: 13em;
background: var(--top-accent-light);
clip-path: polygon(0em 0em, 13.5em 6.5em, 0em 13em);
transform: rotateY(-61deg);
}
&::after {
bottom: 0;
height: 13.5em; width: 13em;
background: var(--top-accent-dark);
clip-path: polygon(0em 13.5em, 6.5em 0em, 13em 13.5em);
transform-origin: bottom center;
transform: rotateX(-61deg);
}
}
& > div:nth-child(7) {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(3em, 15em) translateZ(-4em) rotateX(-90deg);
&::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(7em);
}
&::after {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--left-window-inner);
border-left: 3px solid var(--left-window-v);
border-bottom: 3px solid var(--left-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(-3em) translateZ(-5em) rotateY(-90deg);
}
}
& > div:nth-child(8) {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-left: 3px solid var(--left-window-h);
border-top: 3px solid var(--left-window-v);
border-radius: 0 2em 2em 0;
transform: translateY(2em) translateZ(-11em) rotateY(-90deg);
&::before {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(52em, -9em) translateZ(-16em);
}
&::after {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(52em, -16em) translateZ(-16em);
}
}
& > div:nth-child(9) {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(19em) translateZ(48em) rotateX(-90deg);
&::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(7em);
}
&::after {
width: 3em; height: 2em;
background: var(--right-default-light);
box-shadow: 7em 0em var(--right-default-light), 2em 0em var(--right-default-light);
transform: translate(11em, -7em) translateZ(-10em) rotateY(-90deg);
}
}
& > div:nth-child(10) {
width: 6em; height: 13em;
background: linear-gradient(90deg, #B83C63 10%, #792249 10%, #541538 100%);
transform: translate(31em, 9em) translateZ(59em) rotateX(-90deg);
&::before {
width: 26em; height: 30em;
background: var(--top-default-light);
clip-path: polygon(0em 0em, 15em 0em, 15em 16em, 26em 16em, 26em 19em, 15em 30em, 8em 30em, 8em 7em, 0em 7em);
transform: translateY(44em) translateZ(21em) rotateX(90deg);
}
&::after {
width: 7em; height: 25em;
background: var(--right-default-light);
transform: translate(8em, 44em) translateZ(51em);
}
}
& > div:nth-child(11) {
width: 7em; height: 20em;
background: var(--right-default-light);
transform: translate(32em, 37em) translateZ(15em) rotateX(-90deg);
&::before {
width: 23em; height: 25em;
background: var(--left-default-light);
transform: translateX(7em) rotateY(-90deg);
}
&::after {
width: 45em; height: 61em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 8em 0em, 8em 1em, 9em 1em, 9em 2em, 10em 2em, 10em 3em, 11em 3em, 11em 4em, 12em 4em, 12em 5em, 13em 5em, 13em 6em, 14em 6em, 14em 7em, 23em 7em, 23em 8em, 24em 8em, 24em 9em, 25em 9em, 25em 10em, 26em 10em, 26em 11em, 27em 11em, 27em 12em, 28em 12em, 28em 13em, 29em 13em, 29em 14em, 30em 14em, 30em 15em, 31em 15em, 31em 16em, 32em 16em, 32em 17em, 33em 17em, 33em 18em, 34em 18em, 34em 19em, 35em 19em, 35em 20em, 36em 20em, 36em 21em, 37em 21em, 37em 22em, 45em 28em, 45em 61em, 22em 61em, 22em 23em, 16em 23em, 16em 61em, 0em 61em);
transform: translate(14em, -38em) translateZ(-7em) rotateY(-90deg);
}
}
& > div:nth-child(12) {
width: 11em; height: 11em;
transform: translate(2em, 2em);
&::before {
width: 11em; height: 11em;
box-sizing: border-box;
border-bottom: 5.5em solid transparent;
border-top: 5.5em solid transparent;
border-left: 11em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
&::after {
width: 11em; height: 11em;
box-sizing: border-box;
border-left: 5.5em solid transparent;
border-right: 5.5em solid transparent;
border-bottom: 11em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(13) {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(23em, 40em) translateZ(8em);
&::before {
width: 15em; height: 25em;
background: linear-gradient(180deg, transparent 24%, var(--right-default-light) 0%), conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 1.5em 0em/3em 3em repeat, var(--right-default-light);
transform: translateY(15em) rotateX(-90deg);
}
&::after {
width: 25em; height: 15em;
background: linear-gradient(90deg, transparent 24%, var(--left-default-light) 0%), conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 1.5em 0em/3em 3em repeat, var(--left-default-light);
transform: rotateY(90deg);
}
}
& > div:nth-child(14) {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(23em, 42em) translateZ(-7em) rotateY(-90deg);
&::before {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(-1em, 7em);
}
&::after {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--right-window-inner);
border-bottom: 3px solid var(--right-window-v);
border-left: 3px solid var(--right-window-h);
border-radius: 0 2em 2em 0;
transform: translateY(13em) translateZ(-3em) rotateX(-90deg);
}
}
& > div:nth-child(15) {
width: 13em; height: 13em;
transform: translate(24em, 41em) translateZ(8em);
&::before {
border-top: 6.5em solid transparent;
border-bottom: 6.5em solid transparent;
border-left: 13em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
&::after {
border-right: 6.5em solid transparent;
border-left: 6.5em solid transparent;
border-bottom: 13em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(16) {
width: 7em; height: 8em;
background: var(--right-default-light);
transform: translate(-45em, 83em) translateZ(-50em) rotateX(-90deg);
&::before {
width: 14em; height: 14em;
clip-path: polygon(0em 0em, 0em 14em, 14em 14em, 14em 7em, 7em 7em, 7em 0em);
background-image: linear-gradient(312deg, var(--top-default-light) 2.7em, transparent 0em) -1.5em -1.5em/7em 7em, linear-gradient(132deg, var(--top-default-light) 2.7em, transparent 0em) 1.9em 1.5em/7em 7em, linear-gradient(312deg, var(--top-default-dark) 3.4em, transparent 0em) -1em -1em/7em 7em, linear-gradient(132deg, var(--top-default-dark) 3.4em, transparent 0em) 1.4em 1em/7em 7em;
background-color: var(--top-default-light);
transform: rotateX(-90deg);
}
&::after {
width: 14em; height: 8em;
background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--left-default-light);
transform: rotateY(90deg);
}
}
& > div:nth-child(17) {
width: 6em; height: 6em;
transform: translate(-30em, 69em) translateZ(-35em);
&::before {
border-top: 3em solid transparent;
border-bottom: 3em solid transparent;
border-left: 6em solid var(--left-accent-light);
transform: rotateY(-60deg);
}
&::after {
border-right: 3em solid transparent;
border-left: 3em solid transparent;
border-bottom: 6em solid var(--right-accent-light);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(18) {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(-31em, 71em) translateZ(-46em) rotateY(-90deg);
z-index: 1;
&::before {
width: 20em; height: 8em;
background: var(--right-default-dark);
transform: translate(-5em, -27em) rotateX(-90deg);
}
&::after {
width: 22em; height: 14em;
background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 18em 0em/2em 2em repeat-y, var(--left-default-light);
transform: translate(-19em, 9em) translateZ(-14em);
}
}
& > div:nth-child(19) {
width: 8em; height: 16em;
background: var(--top-default-light);
box-shadow: inset 0em 7.5em 0 1.7em var(--top-default-light), inset 0em 0em 0 1.7em var(--top-default-light), inset 0em 0em 0 2em var(--top-default-dark), inset 0em 7.5em 0 2em var(--top-default-dark);
transform: translate(46em, 22em) translateZ(53em);
&::before {
width: 8em; height: 9em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 1.7em var(--top-default-light), inset 0 0 0 2em var(--top-default-dark);
transform: translateY(22em) translateZ(-7em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(21em) translateZ(-6em);
}
}
& > div:nth-child(20) {
width: 15.3em; height: 22em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.2em 2em/2.5em 2em repeat-x, var(--right-default-light);
transform: translate(-17.3em, 95em) translateZ(-42em) rotateX(-90deg);
&::before {
width: 15.3em; height: 14em;
background: var(--top-default-light);
transform: rotateX(-90deg);
}
&::after {
width: 15em; height: 34em;
background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0em 1.5em/2em 2em repeat-x, var(--left-default-light);
transform: translate(23.3em, -15em) rotateY(90deg);
}
}
& > div:nth-child(21) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 38em) translateZ(52em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(22) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 41em) translateZ(49em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateZ(1em) rotateX(-90deg);
}
}
& > div:nth-child(23) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 38em) translateZ(53em) rotateX(-90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(24) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 42em) translateZ(49em) rotateX(-90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(25) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 53em) translateZ(46em) rotateX(-90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(26) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 56em) translateZ(43em) rotateX(-90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(27) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 59em) translateZ(40em) rotateX(-90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(28) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 62em) translateZ(37em) rotateX(-90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(29) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 65em) translateZ(34em) rotateX(-90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(30) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 53em) translateZ(45em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(31) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 56em) translateZ(42em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(32) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 59em) translateZ(39em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(33) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 62em) translateZ(36em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(34) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 65em) translateZ(33em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translateY(-10em) translateZ(-5em) rotateY(-90deg);
}
}
& > div:nth-child(35) {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(46em, 41em) translateZ(27em) rotateY(-90deg);
&::before {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(-1em, -8em);
}
&::after {
width: 15em; height: 6em;
background: linear-gradient(0deg, #3e212f, transparent), linear-gradient(90deg, #6d324c 10%, transparent 0%) -2em 0em/6em 3em repeat-x, linear-gradient(90deg, #733a55 10%, #814364 0%) 0em 0em/1em 6em repeat-x;
transform: translate(-12.8em, 4.3em) translateZ(0em) rotateX(-90deg);
animation: b2Door1 var(--animation);
}
}
& > div:nth-child(36) {
width: 19em; height: 16em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 15em 1.8em/2em 3.5em repeat-y, var(--left-default-light);
transform: translate(40em, -9em) translateZ(57em) rotateY(-90deg);
&::before {
width: 19em; height: 16em;
background: linear-gradient(var(--right-default-dark) 50%, transparent 0%) 15em 1.8em/2em 3.5em repeat-y, var(--right-default-light);
transform: translateY(16em) rotateX(-90deg);
}
&::after {
width: 16em; height: 16em;
background: conic-gradient(var(--top-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--top-default-dark) 180deg, var(--top-default-dark) 270deg, transparent 270deg) 0em 0em/4em 4em repeat, var(--top-default-light);
transform: translateX(19em) rotateY(90deg);;
}
}
& > div:nth-child(37) {
width: 16em; height: 12em;
background: var(--left-default-light);
transform: translate(41em, -7em) translateZ(62em) rotateY(-90deg);
&::before {
width: 16em; height: 12em;
background: var(--right-default-light);
transform: translateY(12em) rotateX(-90deg);
}
&::after {
width: 12em; height: 12em;
background: var(--top-default-light);
transform: translateX(16em) rotateY(90deg);
}
}
& > div:nth-child(38) {
width: 8em; height: 8em;
transform: translate(43em, -5em) translateZ(78em);
&::before {
box-sizing: border-box;
border-bottom: 4em solid transparent;
border-top: 4em solid transparent;
border-left: 8em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
&::after {
box-sizing: border-box;
border-left: 4em solid transparent;
border-right: 4em solid transparent;
border-bottom: 8em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(39) {
width: 16em; height: 8em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
transform: translate(39em, -24em) translateZ(75em);
&::before {
width: 16em; height: 21em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.9em 1.8em/3.5em 2em repeat-x, var(--right-default-light);
transform: translateY(8em)rotateX(-90deg);
}
&::after {
width: 38em; height: 15em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 16.4em 2.7em/2em 3.5em repeat-y, var(--left-default-light);
clip-path: polygon(0em 0em, 0em 7em, 15em 7em, 15em 15em, 38em 15em, 38em 0em);
transform: translateY(-7em) translateZ(15em) rotateY(90deg);
}
}
& > div:nth-child(40) {
width: 7em; height: 7em;
background: var(--top-default-light);
transform: translate(39em, -31em) translateZ(90em);
&::before {
width: 7em; height: 15em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 7em 0em, 7em 15em, 6em 15em, 6em 3em, 1em 3em, 1em 15em, 0em 15em);
transform: translateY(7em) rotateX(-90deg);
}
&::after {
width: 18em; height: 6em;
background: linear-gradient(0deg, #FF6081 8%, #BB3C54 8%, #852146);
transform: translate(6em, 1em) translateZ(-3em) rotateY(90deg);
}
}
& > div:nth-child(41) {
width: 5em; height: 5em;
background: var(--top-default-light);
transform: translate(40em, -30em) translateZ(91em);
&::before {
width: 5em; height: 2em;
background: var(--right-default-light);
transform: translateY(5em) rotateX(-90deg);
}
&::after {
width: 2em; height: 5em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
}
& > div:nth-child(42) {
width: 4em; height: 4em;
transform: translate(40.5em, -29.5em) translateZ(91em);
&::before {
box-sizing: border-box;
border-bottom: 2em solid transparent;
border-top: 2em solid transparent;
border-left: 4em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
&::after {
box-sizing: border-box;
border-left: 2em solid transparent;
border-right: 2em solid transparent;
border-bottom: 4em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(43) {
width: 6em; height: 2em;
background: var(--left-window-inner);
border-top: 0.5em solid var(--left-window-v);
border-left: 0.5em solid var(--left-window-h);
border-radius: 0 2em 2em 0;
box-sizing: border-box;
transform: translate(39em, -29em) translateZ(76em) rotateY(-90deg);
&::before {
width: 33em; height: 16em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 13em 2.7em/2em 3.5em repeat-y, var(--left-default-light);
transform: translate(-37.5em, 49.5em) translateZ(-50em);
}
&::after {
width: 48em; height: 16em;
background: linear-gradient(var(--right-default-dark) 50%, transparent 0%) 28em -0.5em/2em 3.5em repeat-y, var(--right-default-light);
transform: translate(-52.5em, 65.5em) translateZ(-66em) rotateX(90deg);
}
}
& > div:nth-child(44) {
width: 18em; height: 18em;
background: var(--top-default-light);
transform: translate(88em, 20em) translateZ(73em);
&::before {
width: 18em; height: 1em;
background: var(--right-default-light);
transform: translateY(18em) rotateX(-90deg);
}
&::after {
width: 1em; height: 18em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
}
& > div:nth-child(45) {
width: 18em; height: 18em;
background: var(--top-default-light);
transform: translate(88em, 20em) translateZ(75em);
&::before {
width: 18em; height: 1em;
background: var(--right-default-light);
transform: translateY(18em) rotateX(-90deg);
}
&::after {
width: 1em; height: 18em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
}
& > div:nth-child(46) {
width: 16em; height: 16em;
background: var(--top-default-light);
transform: translate(89em, 21em) translateZ(76em);
&::before {
width: 14em; height: 14em;
background: var(--top-default-light);
transform: translate(1em, 1em) translateZ(1em);
}
&::after {
width: 1em; height: 14em;
background: var(--left-default-light);
transform: translate(1em, 1em) rotateY(-90deg);
}
}
& > div:nth-child(47) {
width: 14em; height: 1em;
background: var(--right-default-light);
transform: translate(90em, 36em) translateZ(77em) rotateX(-90deg);
&::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(2em, 7em) translateZ(1em);
}
&::after {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(10em, 7em) translateZ(1em);
}
}
& > div:nth-child(48) {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(89em, 32em) translateZ(64em) rotateY(-90deg);
&::before {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(-1em, -9em);
}
&::after {
width: 33em; height: 8em;
background: var(--right-default-light);
transform: translate(-72.6em, 42.2em) translateZ(43em) rotateX(-90deg);
}
}
& > div:nth-child(49) {
width: 12em; height: 12em;
transform: translate(91em, 23em) translateZ(77em);
&::before {
border-top: 6em solid transparent;
border-bottom: 6em solid transparent;
border-left: 12em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
&::after {
border-right: 6em solid transparent;
border-left: 6em solid transparent;
border-bottom: 12em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(50) {
width: 8em; height: 23em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 1.7em var(--top-default-light), inset 0 0 0 2em var(--top-default-dark);
transform: translate(-31em, 38em) translateZ(-21em);
&::before {
width: 8em; height: 29em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--right-default-light);
transform: translateY(23em) rotateX(-90deg);
}
&::after {
width: 23em; height: 29em;
clip-path: polygon(0em 0em, 0em 29em, 7em 29em, 7em 9em, 15em 9em, 15em 29em, 23em 29em, 23em 0em);
background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--left-default-light);
transform: rotateX(-90deg) rotateY(-90deg);
}
}
& > div:nth-child(51) {
width: 8em; height: 8em;
background: var(--top-default-light);
transform: translate(-31em, 68em) translateZ(-35em);
&::before {
width: 16em; height: 23em;
clip-path: polygon(8em 0em, 8em 15em, 0em 15em, 0em 23em, 16em 23em, 16em 0em);
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--right-default-light);
transform: translate(-8em, 8em) rotateX(-90deg);
}
&::after {
width: 8em; height: 17em;
background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--left-default-light);
transform: rotateX(-90deg) rotateY(-90deg);
}
}
& > div:nth-child(52) {
width: 10em; height: 10em;
transform: translate(-15em, 83em) translateZ(-42em);
&::before {
border-top: 5em solid transparent;
border-bottom: 5em solid transparent;
border-left: 10em solid var(--left-accent-light);
transform: rotateY(-60deg);
}
&::after {
border-right: 5em solid transparent;
border-left: 5em solid transparent;
border-bottom: 10em solid var(--right-accent-light);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(53) {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(6em, 80em) translateZ(-27em);
&::before {
width: 15em; height: 34em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1em 1.5em/2.5em 2em repeat-x, var(--right-default-light);
transform: translateY(15em) rotateX(-90deg);
}
&::after {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translateY(3em) translateZ(-19em) rotateY(-90deg);
}
}
& > div:nth-child(54) {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(6em, 90em) translateZ(-46em) rotateY(-90deg);
&::before {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--right-window-inner);
border-bottom: 3px solid var(--right-window-v);
border-left: 3px solid var(--right-window-h);
border-radius: 0 2em 2em 0;
transform: translateY(5em) translateZ(-2em) rotateX(-90deg);
}
&::after {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--right-window-inner);
border-bottom: 3px solid var(--right-window-v);
border-left: 3px solid var(--right-window-h);
border-radius: 0 2em 2em 0;
transform: translateY(5em) translateZ(-8em) rotateX(-90deg);
}
}
& > div:nth-child(55) {
width: 11em; height: 11em;
transform: translate(8em, 82em) translateZ(-27em);
&::before {
border-top: 5.5em solid transparent;
border-bottom: 5.5em solid transparent;
border-left: 11em solid var(--left-accent-light);
transform: rotateY(-60deg);
}
&::after {
border-right: 5.5em solid transparent;
border-left: 5.5em solid transparent;
border-bottom: 11em solid var(--right-accent-light);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(56) {
width: 8em; height: 8em;
background: var(--top-default-light);
transform: translate(-9em, 109em) translateZ(-58em);
&::before {
width: 4em; height: 8em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
&::after {
width: 8em; height: 4em;
background: var(--right-default-light);
transform: translateY(8em) rotateX(-90deg);
}
}
& > div:nth-child(57) {
width: 2em; height: 3em;
background: var(--left-default-light);
box-shadow: 0em 5em var(--left-default-light), 0em 7em var(--left-default-light), 0em 12em var(--left-default-light), 0em 14em var(--left-default-light), 0em 19em var(--left-default-light);
transform: translate(109em, 67em) translateZ(31em) rotateY(-90deg);
&::before {
width: 11em; height: 22em;
clip-path: polygon(0em 0em, 10em 0em, 11em 2em, 11em 3em, 9em 6em, 8em 8em, 8em 22em, 0em 22em);
background: var(--top-default-light);
transform: translateZ(-1em) rotateY(-90deg);
}
&::after {
width: 1em; height: 3em;
background: var(--top-default-light);
box-shadow: 0em 5em var(--top-default-light), 0em 7em var(--top-default-light), 0em 12em var(--top-default-light), 0em 14em var(--top-default-light), 0em 19em var(--top-default-light);
transform: translateX(2em) translateZ(-1em) rotateY(-90deg);
}
}
& > div:nth-child(58) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 89em) translateZ(30em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(59) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 92em) translateZ(27em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(60) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 95em) translateZ(24em);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(-1em) rotateX(90deg);
}
}
& > div:nth-child(61) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 94em) translateZ(25em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(62) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 91em) translateZ(28em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 3em;
clip-path: polygon(0em 0em, 8em 0em, 8em 3em, 7em 3em, 7em 1em, 0em 1em);
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(63) {
width: 2em; height: 3em;
background: var(--left-default-light);
box-shadow: 0em 5em var(--left-default-light), 0em 7em var(--left-default-light), 0em 12em var(--left-default-light), 0em 14em var(--left-default-light), 0em 19em var(--left-default-light);
transform: translate(109em, 96em) translateZ(23em) rotateY(-90deg);
&::before {
width: 8em; height: 22em;
background: var(--top-default-light);
transform: translateZ(-1em) rotateY(-90deg);
}
&::after {
width: 1em; height: 3em;
background: var(--top-default-light);
box-shadow: 0em 5em var(--top-default-light), 0em 7em var(--top-default-light), 0em 12em var(--top-default-light), 0em 14em var(--top-default-light), 0em 19em var(--top-default-light);
transform: translateX(2em) translateZ(-1em) rotateY(-90deg);
}
}
& > div:nth-child(64) {
width: 2em; height: 3em;
background: var(--left-default-light);
box-shadow: 0em 5em var(--left-default-light), 0em 7em var(--left-default-light), 0em 12em var(--left-default-light), 0em 14em var(--left-default-light), 0em 19em var(--left-default-light);
transform: translate(109em, 118em) rotateY(-90deg);
&::before {
width: 8em; height: 22em;
background: var(--top-default-light);
transform: translateZ(-1em) rotateY(-90deg);
}
&::after {
width: 1em; height: 3em;
background: var(--top-default-light);
box-shadow: 0em 5em var(--top-default-light), 0em 7em var(--top-default-light), 0em 12em var(--top-default-light), 0em 14em var(--top-default-light), 0em 19em var(--top-default-light);
transform: translateX(2em) translateZ(-1em) rotateY(-90deg);
}
}
& > div:nth-child(65) {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translate(109em, 99em) translateZ(23em) rotateX(90deg);
&::before {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(-7em);
}
&::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(-14em);
}
}
& > div:nth-child(66) {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translate(109em, 70em) translateZ(31em) rotateX(90deg);
&::before {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(-7em);
}
&::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(-14em);
}
}
& > div:nth-child(67) {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translate(111em, 121em) translateZ(-2em) rotateX(90deg);
&::before {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(-7em);
}
&::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(-14em);
}
}
& > div:nth-child(68) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 140em) translateZ(-1em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(69) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 143em) translateZ(-4em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(70) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 146em) translateZ(-7em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(71) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 149em) translateZ(-10em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(72) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 152em) translateZ(-13em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(73) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 152em) translateZ(-13em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
}
& > div:nth-child(74) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 155em) translateZ(-16em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(4em) translateZ(4em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(5em) translateZ(5em);
}
}
& > div:nth-child(75) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 149em) translateZ(-10em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(76) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 146em) translateZ(-7em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(77) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 143em) translateZ(-4em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(78) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 140em) translateZ(-1em) rotateX(90deg);
&::before {
width: 8em; height: 25em;
clip-path: polygon(0em 0em, 8em 0em, 8em 1em, 2em 1em, 2em 2em, 6em 2em, 6em 1em, 6em 3em, 2em 3em, 2em 4em, 6em 4em, 6em 3em, 6em 5em, 2em 5em, 2em 6em, 6em 6em, 6em 5em, 6em 7em, 2em 7em, 2em 8em, 6em 8em, 6em 7em, 6em 9em, 2em 9em, 2em 10em, 6em 10em, 6em 9em, 6em 11em, 2em 11em, 2em 12em, 6em 12em, 6em 11em, 6em 13em, 2em 13em, 2em 14em, 6em 14em, 6em 13em, 6em 15em, 2em 15em, 2em 16em, 6em 16em, 6em 15em, 6em 17em, 2em 17em, 2em 18em, 6em 18em, 6em 17em, 6em 19em, 2em 19em, 2em 20em, 6em 20em, 6em 19em, 6em 21em, 2em 21em, 2em 22em, 6em 22em, 6em 21em, 6em 23em, 6em 1em, 8em 1em, 8em 25em, 7em 25em, 7em 23em, 0em 23em);
background: var(--right-default-light);
transform: translateY(1em) translateZ(22em);
}
&::after {
width: 1em; height: 23em;
background: var(--left-default-light);
transform: translate(6em, 1em) translateZ(22em) rotateY(-90deg);
}
}
& > div:nth-child(79) {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translate(104em, 116em) translateZ(1em);
&::before {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(2em);
}
&::after {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(4em);
}
}
& > div:nth-child(80) {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translate(104em, 116em) translateZ(7em);
&::before {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(2em);
}
&::after {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(4em);
}
}
& > div:nth-child(81) {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translate(104em, 116em) translateZ(13em);
&::before {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(2em);
}
&::after {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(4em);
}
}
& > div:nth-child(82) {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translate(104em, 116em) translateZ(19em);
&::before {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(2em);
}
&::after {
width: 86em; height: 102em;
clip-path: polygon(47em 112em, 47em 88em, 46em 88em, 46em 87em, 45em 87em, 45em 86em, 44em 86em, 44em 85em, 43em 85em, 43em 84em, 42em 84em, 42em 83em, 41em 83em, 41em 82em, 40em 82em, 40em 81em, 39em 81em, 39em 80em, 38em 80em, 38em 79em, 37em 79em, 37em 78em, 36em 78em, 36em 77em, 35em 77em, 35em 76em, 34em 76em, 34em 75em, 33em 75em, 33em 74em, 32em 74em, 32em 73em, 31em 73em, 31em 51em, 8em 51em, 8em 29em, 7em 29em, 7em 28em, 6em 28em, 6em 27em, 5em 27em, 5em 26em, 4em 26em, 4em 25em, 3em 25em, 3em 24em, 2em 24em, 2em 23em, 1em 23em, 1em 22em, 0em 22em, 0em 0em, 86em 0em, 86em 71em, 55em 71em, 55em 94em, 86em 94em, 86em 112em);
background: var(--left-default-light);
transform: translate(-2em, -49em) translateZ(12em) rotateY(90deg);
}
}
& > div:nth-child(83) {
width: 8em; height: 14em;
background: var(--top-default-light);
transform: translate(102em, 155em) translateZ(-16em);
&::before {
width: 8em; height: 39em;
background: var(--right-default-light);
transform: translateY(14em) rotateX(-90deg);
}
&::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translate(7em, -34em) translateZ(18em) rotateX(-90deg);
}
}
& > div:nth-child(84) {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translate(109em, 128em) translateZ(2em) rotateX(-90deg);
&::before {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(7em);
}
&::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(12em);
}
}
& > div:nth-child(85) {
width: 5em; height: 31em;
background: var(--right-default-dark);
transform: translate(102em, 138em) translateZ(-24em) rotateX(-90deg);
&::before {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--left-window-inner);
border-left: 3px solid var(--left-window-v);
border-bottom: 3px solid var(--left-window-h);
border-radius: 2em 2em 0 0;
transform: translateY(-13em) translateZ(-2em) rotateY(-90deg);
}
&::after {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--left-window-inner);
border-left: 3px solid var(--left-window-v);
border-bottom: 3px solid var(--left-window-h);
border-radius: 2em 2em 0 0;
transform: translateY(-3em) translateZ(26em) rotateY(-90deg);
}
}
& > .mooving-part-1 {
width: 8em; height: 15em;
background: var(--top-accent-light);
box-shadow: inset 0 0 0 1em var(--top-accent-light), inset 0 0 0 1.2em var(--top-accent-dark);
animation: b2Mp1 var(--animation) linear;
&::before {
width: 70em; height: 15em;
background: var(--left-accent-light);
transform: rotateY(90deg);
}
&::after {
width: 8em; height: 70em;
background: var(--right-accent-light);
transform: translateY(15em)rotateX(-90deg);
}
& > div:nth-child(1) {
width: 1em; height: 5em;
transform: translate(-1em, 5em) translateZ(-2em);
animation: b2Mp1TopPart var(--animation) ease;
&::before {
width: 1em; height: 5em;
transform: translateY(5em) rotateX(-90deg);
animation: b2Mp1RightPart var(--animation) ease;
}
&::after {
width: 5em; height: 5em;
box-sizing: border-box;
transform: rotateY(90deg);
animation: b2Mp1LeftPart var(--animation) ease;
}
}
& > div:nth-child(2) {
width: 1em; height: 5em;
transform: translate(-1em, 5em) translateZ(-10em);
animation: b2Mp1TopPart var(--animation) ease;
&::before {
width: 1em; height: 5em;
transform: translateY(5em) rotateX(-90deg);
animation: b2Mp1RightPart var(--animation) ease;
}
&::after {
width: 5em; height: 5em;
box-sizing: border-box;
transform: rotateY(90deg);
animation: b2Mp1LeftPart var(--animation) ease;
}
}
& > div:nth-child(3) {
width: 1em; height: 5em;
transform: translateX(-1em) translateY(5em) translateZ(-18em);
animation: b2Mp1TopPart var(--animation) ease;
&::before {
width: 1em; height: 5em;
transform: translateY(5em) rotateX(-90deg);
animation: b2Mp1RightPart var(--animation) ease;
}
&::after {
width: 5em; height: 5em;
box-sizing: border-box;
transform: rotateY(90deg);
animation: b2Mp1LeftPart var(--animation) ease;
}
}
}
& > .mooving-part-2 {
width: 17em; height: 7em;
background: var(--top-accent-light);
box-shadow: inset 0 0 0 1em var(--top-accent-light), inset 0 0 0 1.2em var(--top-accent-dark);
animation: b2Mp2 var(--animation) linear;
&::before {
width: 60em; height: 7em;
background: linear-gradient(90deg, transparent 22.5%, var(--left-accent-light) 0%), conic-gradient(var(--left-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-accent-dark) 180deg, var(--left-accent-dark) 270deg, transparent 270deg) 1.5em 0em/3em 3em repeat, var(--left-accent-light);
transform: rotateY(90deg);
}
&::after {
width: 17em; height: 60em;
background: linear-gradient(180deg, transparent 22.5%, var(--right-accent-light) 0%), conic-gradient(var(--right-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-accent-dark) 180deg, var(--right-accent-dark) 270deg, transparent 270deg) 0em 0em/3em 3em repeat, var(--right-accent-light);
transform: translateY(7em) rotateX(-90deg);
}
}
& > .mooving-part-3 {
width: 15em; height: 7em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
animation: b2Mp3 var(--animation) linear;
&::before {
width: 15em; height: 7em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
&::after {
width: 15em; height: 60em;
background: linear-gradient(90deg, transparent 50%, var(--right-default-dark) 0%) 1.5em 1.7em/3.3em 2.1em repeat-x, var(--right-default-light);
clip-path: polygon(0em 0em, 15em 0em, 15em 60em, 14em 60em, 14em 9em, 8em 9em, 8em 60em, 0em 60em);
transform: translateY(7em) rotateX(-90deg);
}
& > div {
width: 15em; height: 7em;
background: linear-gradient(0deg, #E75776 8%, var(--right-default-dark) 8%, #771B3E 100%);
transform: translateX(14em) translateZ(-7em) rotateY(90deg);
}
}
& > .mooving-part-4 {
width: 8em; height: 23em;
background: var(--top-accent-light);
box-shadow: inset 0 0 0 1em var(--top-accent-light), inset 0 0 0 1.2em var(--top-accent-dark);
animation: b2Mp4 var(--animation) linear;
&::before {
width: 7em; height: 23em;
background: var(--left-accent-light);
transform: rotateY(90deg);
}
&::after {
width: 8em; height: 7em;
background: var(--right-accent-light);
transform: translateY(23em) rotateX(-90deg);
}
& > div:nth-child(1) {
width: 1em; height: 5em;
transform: translate(-1em, 2em) translateZ(-1em);
animation: b2Mp4TopPart var(--animation) ease;
&::before {
width: 1em; height: 5em;
transform: translateY(5em) rotateX(-90deg);
animation: b2Mp4RightPart var(--animation) ease;
}
&::after {
width: 5em; height: 5em;
box-sizing: border-box;
transform: rotateY(90deg);
animation: b2Mp4LeftPart var(--animation) ease;
}
}
& > div:nth-child(2) {
width: 1em; height: 5em;
transform: translate(-1em, 9em) translateZ(-1em);
animation: b2Mp4TopPart var(--animation) ease;
&::before {
width: 1em; height: 5em;
transform: translateY(5em) rotateX(-90deg);
animation: b2Mp4RightPart var(--animation) ease;
}
&::after {
width: 5em; height: 5em;
box-sizing: border-box;
transform: rotateY(90deg);
animation: b2Mp4LeftPart var(--animation) ease;
}
}
& > div:nth-child(3) {
width: 1em; height: 5em;
transform: translate(-1em, 16em) translateZ(-1em);
animation: b2Mp4TopPart var(--animation) ease;
&::before {
width: 1em; height: 5em;
transform: translateY(5em) rotateX(-90deg);
animation: b2Mp4RightPart var(--animation) ease;
}
&::after {
width: 5em; height: 5em;
box-sizing: border-box;
transform: rotateY(90deg);
animation: b2Mp4LeftPart var(--animation) ease;
}
}
}
& > .mooving-part-5 {
width: 8em; height: 16em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
animation: b2Mp5 var(--animation) linear;
&::before {
width: 44em; height: 31em;
clip-path: polygon(0em 0em, 0em 9em, 1em 9em, 1em 10em, 2em 10em, 2em 11em, 3em 11em, 3em 12em, 4em 12em, 4em 13em, 5em 13em, 5em 14em, 6em 14em, 6em 15em, 7em 15em, 7em 16em, 8em 16em, 8em 31em, 44em 31em, 44em 0em);
background: var(--right-default-light);
transform: translate(8em, -15em) translateZ(8em) rotateY(90deg);
}
&::after {
width: 44em; height: 31em;
clip-path: polygon(0em 0em, 0em 9em, 1em 9em, 1em 10em, 2em 10em, 2em 11em, 3em 11em, 3em 12em, 4em 12em, 4em 13em, 5em 13em, 5em 14em, 6em 14em, 6em 15em, 7em 15em, 7em 16em, 8em 16em, 8em 31em, 44em 31em, 44em 0em);
background: var(--left-default-light);
transform: translateY(-15em) translateZ(8em) rotateY(90deg);
}
& > div:nth-child(1) {
width: 8em; height: 36em;
background: var(--right-default-light);
transform: translateY(16em) rotateX(-90deg);
&::before {
width: 23em; height: 9em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
transform: translateY(-8em) translateZ(-31em) rotateX(90deg);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(-7em) translateZ(-22em) rotateX(90deg);
}
}
& > div:nth-child(2) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(-5em) translateZ(6em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(3) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(-2em) translateZ(3em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(4) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(5) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(3em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
& > div:nth-child(6) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-5em) translateZ(6em) rotateX(90deg);
&::before {
width: 23em; height: 43em;
background: linear-gradient(90deg, #9F2F52 50%, transparent 0%) 0em 38em/4em 2.5em repeat-x, #B33E60;
transform: translateY(-41em) translateZ(1em);
}
}
& > div:nth-child(7) {
width: 44em; height: 9em;
background: var(--right-default-light);
transform: translate(23em, -15em) translateZ(8em) rotateY(90deg);
}
& > .cloud1 {
width: 8em; height: 36em;
transform: translate(0em, 16em) translateZ(0em) rotateX(-90deg);
overflow: hidden;
&::before {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-21em, 16em);
animation: b2Mp5Cloud1 var(--animation) linear;
}
&::after {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-12em, 17em);
animation: b2Mp5Cloud2 var(--animation) linear;
}
}
& > .cloud2 {
width: 36em; height: 31em;
transform: translate(0em, -15em) translateZ(0em) rotateY(90deg);
overflow: hidden;
&::before {
width: 60em; height: 60em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(6em, -30em);
animation: b2Mp5Cloud3 var(--animation) linear;
}
&::after {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(16em, 11em);
animation: b2Mp5Cloud4 var(--animation) linear;
}
}
& > .cloud3 {
width: 22em; height: 36em;
transform: translate(8em, 16em) translateZ(0em) rotateX(-90deg) rotateY(90deg);
overflow: hidden;
&::before {
width: 60em; height: 60em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-30em, 6em);
animation: b2Mp5Cloud5 var(--animation) linear;
}
&::after {
width: 70em; height: 70em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-13em, 1em);
animation: b2Mp5Cloud6 var(--animation) linear;
}
}
& > .cloud4 {
width: 15em; height: 44em;
transform: translate(8em, -6em) translateZ(8em) rotateX(-90deg);
overflow: hidden;
&::before {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-20em, 24em);
animation: b2Mp5Cloud7 var(--animation) linear;
}
&::after {
width: 60em; height: 60em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-15em, 14em);
animation: b2Mp5Cloud8 var(--animation) linear;
}
}
& > .cloud5 {
width: 9em; height: 44em;
transform: translate(23em, -6em) translateZ(8em) rotateX(-90deg) rotateY(90deg);
overflow: hidden;
&::before {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-20em, 24em);
animation: b2Mp5Cloud9 var(--animation) linear;
}
&::after {
width: 60em; height: 60em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-21em, 14em);
animation: b2Mp5Cloud10 var(--animation) linear;
}
}
}
& > .mooving-part-6 {
width: 8em; height: 32em;
background: var(--right-default-light);
transform: translate(69em, -1em) translateZ(83em) rotateX(-90deg);
animation: b2Mp6 var(--animation) linear;
&::before {
width: 8em; height: 45em;
clip-path: polygon(1em 0em, 1em 5em, 1em 6em, 0em 6em, 0em 6em, 1em 6em, 1em 45em, 8em 45em, 8em 0em);
background: linear-gradient(90deg, #FF778E 17%, #B04356 17%, #822745);
transform: rotateY(90deg) translate(7em, -21em) translateZ(7em);
}
&::after {
width: 9em; height: 40em;
clip-path: polygon(0em 8em, 0em 45em, 8em 45em, 8em 0em, 7em 0em, 7em 1em, 6em 1em, 6em 2em, 5em 2em, 5em 3em, 4em 3em, 4em 4em, 3em 4em, 3em 5em, 2em 5em, 2em 6em, 1em 6em, 1em 7em, 0em 7em);
background: var(--left-default-light);
transform: rotateY(90deg) translateY(-8em) translateZ(0em);
}
& > div:nth-child(1) {
width: 7em; height: 11em;
background: linear-gradient(14deg, var(--top-default-light) 17%, #B43D5B 50%);
transform: rotateX(90deg) translate(1em, -18em) translateZ(8em);
z-index: 1;
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(-1em, 11em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(-1em, 12em) translateZ(-2em);
}
}
& > div:nth-child(2) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: rotateX(90deg) translateY(-5em) translateZ(5em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(3) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: rotateX(90deg) translateY(-2em) translateZ(2em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: rotateX(-90deg) translateY(1em) translateZ(2em);
}
}
& > div:nth-child(4) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-1em);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
}
& > div:nth-child(5) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-5em) translateZ(-4em);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
}
& > div:nth-child(6) {
width: 7em; height: 1em;
background: var(--right-default-light);
transform: translate(1em, -8em) translateZ(-7em);
&::before {
width: 23em; height: 55em;
clip-path: polygon(0em 5em, 0em 61em, 8em 61em, 8em 6em, 14em 6em, 14em 61em, 23em 61em, 23em 5em, 17em 5em, 11.5em 0em, 6em 5em);
background: linear-gradient(0deg, var(--right-default-light) 56%, transparent 56%, transparent 69%, var(--right-default-light) 69%, var(--right-default-light) 82%, transparent 82%, transparent 92%, var(--right-default-light) 0%), conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--right-default-light);
transform: translate(-8em, -19em) translateZ(-1em);
}
&::after {
width: 23em; height: 50em;
background: linear-gradient(0deg, var(--left-default-light) 56%, transparent 56%, transparent 69%, var(--left-default-light) 69%, var(--left-default-light) 88%, transparent 0%), conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--left-default-light);
transform: rotateY(-90deg) translate(-24em, -14em) translateZ(8em);
}
}
& > div:nth-child(7) {
width: 25em; height: 25em;
background: var(--top-default-light);
transform: rotateX(90deg) translate(-8em, -32em) translateZ(0em);
&::before {
width: 25em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
}
&::after {
width: 1em; height: 25em;
background: var(--left-default-light);
transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
}
}
& > div:nth-child(8) {
width: 25em; height: 25em;
background: var(--top-default-light);
transform: rotateX(90deg) translate(-8em, -32em) translateZ(8em);
&::before {
width: 25em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
}
&::after {
width: 1em; height: 25em;
background: var(--left-default-light);
transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
}
}
& > div:nth-child(9) {
width: 25em; height: 25em;
background: var(--top-default-light);
transform: rotateX(90deg) translate(-8em, -32em) translateZ(16em);
&::before {
width: 25em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
}
&::after {
width: 1em; height: 25em;
background: var(--left-default-light);
transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
}
}
& > div:nth-child(10) {
width: 25em; height: 25em;
background: var(--top-default-light);
transform: rotateX(90deg) translate(-8em, -32em) translateZ(23em);
&::before {
width: 25em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
}
&::after {
width: 1em; height: 25em;
background: var(--left-default-light);
transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
}
}
& > div:nth-child(11) {
width: 6em; height: 1em;
background: var(--left-default-light);
transform: rotateX(90deg) translateY(-9em) translateZ(23em) rotateY(-42deg);
&::before {
width: 8em; height: 4em;
background: var(--left-default-light);
transform: rotateY(42deg) translate(-1em, -4em) rotateY(-42deg);
}
&::after {
border-left: 5.7em solid transparent;
border-right: 5.7em solid transparent;
border-top: 5.4em solid var(--right-default-light);
transform: rotateY(42deg) rotateX(90deg) translateX(-1em);
}
}
& > div:nth-child(12) {
width: 6em; height: 6em;
transform: rotateX(90deg) translate(-7em, -15em) translateZ(23em);
&::before {
box-sizing: border-box;
border-bottom: 3em solid transparent;
border-top: 3em solid transparent;
border-left: 6em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
&::after {
box-sizing: border-box;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
border-bottom: 6em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(13) {
width: 6em; height: 6em;
transform: rotateX(90deg) translate(-7em, -30em) translateZ(23em);
&::before {
box-sizing: border-box;
border-bottom: 3em solid transparent;
border-top: 3em solid transparent;
border-left: 6em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
&::after {
box-sizing: border-box;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
border-bottom: 6em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(14) {
width: 6em; height: 6em;
transform: rotateX(90deg) translate(-7em, -22.5em) translateZ(23em);
&::before {
box-sizing: border-box;
border-bottom: 3em solid transparent;
border-top: 3em solid transparent;
border-left: 6em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
&::after {
box-sizing: border-box;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
border-bottom: 6em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(15) {
width: 6em; height: 6em;
transform: rotateX(90deg) translate(10em, -15em) translateZ(23em);
&::before {
box-sizing: border-box;
border-bottom: 3em solid transparent;
border-top: 3em solid transparent;
border-left: 6em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
&::after {
box-sizing: border-box;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
border-bottom: 6em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(16) {
width: 6em; height: 6em;
transform: rotateX(90deg) translate(10em, -30em) translateZ(23em);
&::before {
box-sizing: border-box;
border-bottom: 3em solid transparent;
border-top: 3em solid transparent;
border-left: 6em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
&::after {
box-sizing: border-box;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
border-bottom: 6em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(17) {
width: 6em; height: 6em;
transform: rotateX(90deg) translate(10em, -22.5em) translateZ(23em);
&::before {
box-sizing: border-box;
border-bottom: 3em solid transparent;
border-top: 3em solid transparent;
border-left: 6em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
&::after {
box-sizing: border-box;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
border-bottom: 6em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > div:nth-child(18) {
width: 14em; height: 14em;
transform: rotateX(90deg) translate(-2.5em, -27em) translateZ(23em);
&::before {
box-sizing: border-box;
border-bottom: 7em solid transparent;
border-top: 7em solid transparent;
border-left: 14em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
&::after {
box-sizing: border-box;
border-left: 7em solid transparent;
border-right: 7em solid transparent;
border-bottom: 14em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
}
& > .cloud1 {
width: 8em; height: 32em;
overflow: hidden;
&::before {
width: 30em; height: 30em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-50%, 8em);
animation: b2Mp6Cloud1 var(--animation) linear;
}
&::after {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-11em, 3em);
animation: b2Mp6Cloud2 var(--animation) linear;
}
}
& > .cloud2 {
width: 9em; height: 40em;
clip-path: polygon(0em 8em, 0em 45em, 8em 45em, 8em 0em, 7em 0em, 7em 1em, 6em 1em, 6em 2em, 5em 2em, 5em 3em, 4em 3em, 4em 4em, 3em 4em, 3em 5em, 2em 5em, 2em 6em, 1em 6em, 1em 7em, 0em 7em);
transform: rotateY(90deg) translateY(-8em);
overflow: hidden;
&::before {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-50%, 9em);
animation: b2Mp6Cloud3 var(--animation) linear;
}
}
& > .cloud3 {
width: 23em; height: 55em;
clip-path: polygon(0em 5em, 0em 61em, 8em 61em, 8em 6em, 14em 6em, 14em 61em, 23em 61em, 23em 5em, 17em 5em, 11.5em 0em, 6em 5em);
transform: translate(-7em, -25em) translateZ(-8em);
overflow: hidden;
&::before {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-50%, 25em);
animation: b2Mp6Cloud4 var(--animation) linear;
}
}
& > .cloud4 {
width: 23em; height: 50em;
transform: rotateY(-90deg) translate(-31em, -22em) translateZ(7em);
overflow: hidden;
&::before {
width: 50em; height: 50em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-1em, 18em);
animation: b2Mp6Cloud5 var(--animation) linear;
}
&::after {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-20em, 18em);
animation: b2Mp6Cloud6 var(--animation) linear;
}
}
}
& > .mooving-bridge {
width: 56em; height: 8em;
transform: translate(46em, 67em) translateZ(31em);
&::before {
width: 8em; height: 9.8em;
background: var(--top-default-dark);
transform: rotateX(-37deg);
}
& > .mooving-bridge-cloud {
transform: translateX(25em);
&::before {
width: 23em; height: 30em;
background: var(--left-default-light);
border-radius: 50%;
filter: blur(6em);
animation: BridgeCloud1 var(--animation);
}
&::after {
width: 40em; height: 40em;
background: var(--left-default-light);
border-radius: 50%;
filter: blur(6em);
animation: BridgeCloud4 var(--animation);
}
& > div:nth-child(1) {
&::before {
width: 30em; height: 30em;
background: var(--left-default-light);
border-radius: 50%;
filter: blur(16px);
animation: BridgeCloud2 var(--animation);
}
&::after {
width: 70em; height: 70em;
background: var(--left-default-light);
border-radius: 50%;
filter: blur(50px);
opacity: 0.6;
animation: BridgeCloud3 var(--animation);
}
}
}
& > .mooving-bridge-part1 {
width: 13em; height: 8em;
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 1.5em 0em var(--top-default-light), inset 1.7em 0 var(--top-default-dark), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
animation: Bridge1 var(--animation);
&::before {
width: 13em; height: 1em;
background: var(--right-default-light);
transform: rotateX(-90deg);
}
&::after {
width: 13em; height: 1em;
background: var(--right-default-light);
transform: rotateX(-90deg) translateZ(8em);
}
& > div:nth-child(1) {
width: 13em; height: 8em;
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 1.5em 0em var(--top-default-light), inset 1.7em 0 var(--top-default-dark), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: translateZ(-1em);
&::before {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: rotateY(-90deg);
}
&::after {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: rotateY(-90deg) translateZ(-13em);
}
}
}
& > .mooving-bridge-part2 {
width: 8em; height: 6em;
background: var(--right-default-light);
animation: Bridge2 var(--animation);
&::before {
border-top: 6em solid var(--left-default-light);
border-right: 8em solid transparent;
transform: rotateY(90deg);
}
&::after {
border-top: 6em solid var(--left-default-light);
border-right: 8em solid transparent;
transform: rotateY(90deg) translateZ(7em);
}
& > div:nth-child(1) {
width: 8em; height: 8em;
background: var(--top-default-light);
transform: rotateX(-90deg);
&::before {
width: 8em; height: 8em;
background: var(--top-default-light);
transform: rotateX(-37deg) scaleY(1.26);
transform-origin: bottom center;
}
}
}
& > .mooving-bridge-part3 {
width: 13em; height: 1em;
background: var(--right-default-light);
animation: Bridge3 var(--animation);
&::before {
width: 12em; height: 1em;
background: var(--right-default-light);
transform: translateZ(8em);
}
&::after {
width: 13em; height: 8em;
clip-path: polygon(0em 0em, 13em 0em, 11em 2em, 12em 3em, 9em 6em, 12em 8em, 0em 8em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg);
}
& > div:nth-child(1) {
width: 3.5em; height: 1em;
background: var(--right-default-light);
transform: translateX(8.5em) translateZ(8em) rotateY(-34deg);
transform-origin: right center;
&::before {
width: 4.3em; height: 1em;
background: var(--left-default-light);
transform: rotateY(81deg);
}
&::after {
width: 2em; height: 1em;
background: var(--right-default-light);
transform: translateX(0.7em) translateZ(-4.1em) rotateY(170deg);
}
}
& > div:nth-child(2) {
width: 8em; height: 1em;
background: var(--left-default-light);
transform: rotateY(-90deg);
&::before {
width: 13em; height: 8em;
clip-path: polygon(0em 0em, 13em 0em, 11em 2em, 12em 3em, 9em 6em, 12em 8em, 0em 8em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg) translateZ(-1em);
}
&::after {
width: 4em; height: 1em;
background: var(--left-default-light);
transform: translateZ(-13em) rotateY(-47deg);
}
}
}
& > .mooving-bridge-part4 {
width: 6em; height: 1em;
background: var(--right-default-light);
animation: Bridge4 var(--animation);
&::before {
width: 13em; height: 8em;
clip-path: polygon(4em 0em, 2em 2em, 3em 3em, 0em 6em, 3em 8em, 13em 8em, 10em 0em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg) translateX(-4em);
}
&::after {
width: 13em; height: 8em;
clip-path: polygon(4em 0em, 2em 2em, 3em 3em, 0em 6em, 3em 8em, 13em 8em, 10em 0em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg) translateX(-4em) translateZ(-1em);
}
& > div:nth-child(1) {
width: 3em; height: 1em;
background: var(--right-default-light);
transform: rotateY(-135deg);
&::before {
width: 3em; height: 1em;
background: var(--left-default-light);
transform: translateX(3em) rotateY(96deg);
}
&::after {
width: 4em; height: 1em;
background: var(--right-default-light);
transform: translateX(3em) translateZ(-1.3em) rotateY(2deg);
}
}
& > div:nth-child(2) {
width: 10em; height: 1em;
background: var(--right-default-light);
transform: translateX(-1em) translateZ(8em);
&::before {
width: 3.6em; height: 1em;
background: var(--left-default-light);
transform: rotateY(147deg);
}
&::after {
width: 8.4em; height: 1em;
background: var(--left-default-light);
transform: translateX(10em) rotateY(111deg);
}
}
}
& > .mooving-bridge-part5 {
width: 16em; height: 1em;
background: var(--right-default-light);
animation: Bridge5 var(--animation);
&::before {
width: 16em; height: 8em;
clip-path: polygon(0em 0em, 3em 8em, 13em 8em, 15em 5em, 14em 3em, 16em 0em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg);
}
&::after {
width: 16em; height: 8em;
clip-path: polygon(0em 0em, 3em 8em, 13em 8em, 15em 5em, 14em 3em, 16em 0em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg) translateZ(-1em);
}
& > div:nth-child(1) {
width: 8.4em; height: 1em;
background: var(--left-default-light);
transform: rotateY(-70deg);
&::before {
width: 4em; height: 1em;
background: var(--left-default-light);
transform: translateX(5.5em) translateZ(-15em) rotateY(-54deg);
}
&::after {
width: 2.9em; height: 1em;
background: var(--right-default-light);
transform: translateX(7em) translateZ(-12em) rotateY(6deg);
}
}
& > div:nth-child(2) {
width: 10.2em; height: 1em;
background: var(--right-default-light);
transform: translateX(13em) translateZ(8em) rotateY(180deg);
&::before {
width: 3.2em; height: 1em;
background: var(--left-default-light);
transform: rotateY(-123deg);
}
}
}
& > .mooving-bridge-part6 {
width: 6em; height: 1em;
background: var(--right-default-light);
animation: Bridge6 var(--animation);
&::before {
width: 11em; height: 8em;
clip-path: polygon(3em 0em, 1em 3em, 2em 5em, 0em 8em, 11em 8em, 10em 6em, 10em 4em, 8em 2em, 9em 0em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset -1.5em 0em var(--top-default-light), inset -1.7em 0 var(--top-default-dark), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg) translateX(-3em);
}
&::after {
width: 11em; height: 8em;
clip-path: polygon(3em 0em, 1em 3em, 2em 5em, 0em 8em, 11em 8em, 10em 6em, 10em 4em, 8em 2em, 9em 0em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg) translateX(-3em) translateZ(-1em);
}
& > div:nth-child(1) {
width: 3.7em; height: 1em;
background: var(--left-default-light);
transform: rotateY(-124deg);
&::before {
width: 100%; height: 1em;
background: var(--right-default-light);
transform: rotateY(-121deg);
transform-origin: right center;
}
&::after {
width: 7em; height: 1em;
background: var(--left-default-light);
transform: rotateY(-121deg) translate(-6em, -6em) rotateY(-57deg);
}
}
& > div:nth-child(2) {
width: 11em; height: 1em;
background: var(--right-default-light);
transform: translateX(-3em) translateZ(8em);
&::before {
width: 3em; height: 1em;
background: var(--left-default-light);
transform: translateX(11em) rotateY(118deg);
}
&::after {
width: 2em; height: 1em;
background: var(--right-default-light);
transform: translateX(10em) translateZ(-2em) rotateY(89deg);
}
}
& > div:nth-child(3) {
width: 2.4em; height: 1em;
background: var(--right-default-light);
transform: translateX(6em) rotateY(-117deg);
&::before {
width: 2.9em; height: 1em;
background: var(--left-default-light);
transform: translateX(2.4em) rotateY(75deg);
}
}
}
}
& > .rocks {
&::before {
width: 10em; height: 16em;
background: #3D2E36;
transform: translateZ(-12em) rotateX(-26deg) rotateY(-180deg);
}
&::after {
width: 32em; height: 51em;
background: linear-gradient(102deg, #3D2E36 76%, transparent 0%);
transform: translate(-9em, 15em) translateZ(-27em) rotateX(0deg) rotateY(-41deg) rotateZ(0deg);
}
& > div:nth-child(1) {
width: 22em; height: 14em;
background: #3D2E36;
transform: translate(23em, 55em) translateZ(-17em) rotateY(-47deg);
&::before {
width: 22em; height: 20em;
background: linear-gradient(109deg, #3D2E36 76%, transparent 0%);
transform: translate(8em, 5em) translateZ(-5em) rotateY(-4deg);
}
&::after {
width: 20em; height: 23em;
background: linear-gradient(100deg, #3D2E36, #3D2E36) 0em 0em/12em 23em no-repeat, linear-gradient(15deg, #3D2E36 43%, transparent 0%) 11em -5em/11em 11em no-repeat, linear-gradient(100deg, #3D2E36 79%, transparent 0%) 9em 6em/11em 17em no-repeat;
transform: translate(-17em, -15em) translateZ(10em) rotateY(13deg);
}
}
& > div:nth-child(2) {
width: 26em; height: 78em;
background: #3D2E36;
border-radius: 0 0 26em 0 / 0 0 5em 0;
transform-origin: right top;
transform: translate(83em, -115em) translateZ(10em) rotateX(38deg) rotateY(-90deg);
&::before {
width: 60em; height: 21em;
background: #3D2E36;
border-radius: 0 0 3em 0;
transform-origin: top right;
transform: translate(-43em, 67em) skewY(-46deg) rotateZ(21deg);
}
&::after {
width: 30em; height: 37em;
background: linear-gradient(98deg, #3D2E36 82%, transparent 0%) 0em 18em / 29em 19em no-repeat, linear-gradient(110deg, #3D2E36 90%, transparent 0%) 0em 14em / 29em 4em no-repeat, linear-gradient(93deg, #3D2E36 95%, transparent 0%) 0em 0em / 29em 14em no-repeat;
transform-origin: top right;
transform: translate(-49em, 137em) translateZ(20em) rotateZ(52deg);
}
}
& > div:nth-child(3) {
width: 46em; height: 21em;
background: #3D2E36;
transform-origin: top left;
transform: translate(39em, 1em) translateZ(59em) rotateX(-23deg);
&::before {
width: 38em; height: 20em;
background: #3D2E36;
transform-origin: top center;
transform: translate(10em, 21em) rotateX(-29deg);
}
&::after {
width: 25em; height: 20em;
background: #3D2E36;
transform: translate(20em, -18em);
}
}
& > div:nth-child(4) {
width: 26em; height: 83em;
background: #3D2E36;
transform-origin: top left;
transform: translate(109em, 35em) translateZ(24em) rotateX(-26deg) rotateY(90deg);
&::before {
width: 75em; height: 8em;
background: #3D2E36;
transform: translate(19.7em, 59.4em) translateZ(-13em) rotateY(90deg) rotateX(48deg);
}
&::after {
width: 30em; height: 32em;
background: #3D2E36;
transform: translate(-9em, -7em) translateZ(-51em) rotateX(90deg) rotateY(49deg);
}
}
& > div:nth-child(5) {
width: 52em; height: 90em;
background: linear-gradient(136deg, #3d2e36 36%, transparent 0%);
transform-origin: top right;
transform: translate(50em, 66em) translateZ(13em) rotateY(-90deg);
&::before {
width: 14em; height: 76em;
background: #3d2e36;
transform: translate(32em, 8em) translateZ(6em) rotateX(90deg) rotateY(155deg);
}
&::after {
width: 30em; height: 43em;
background: #3d2f36;
transform: translate(51em, -13em) translateZ(48em) rotateX(-90deg) rotateY(-132deg);
}
}
& > div:nth-child(6) {
width: 90em; height: 8em;
background: #3d2e36;
transform: translate(21em, 82.3em) translateZ(-27em) rotateX(-38deg);
&::before {
width: 90em; height: 12em;
background: #3d2e36;
transform: translateY(8em) rotateX(-26deg);
}
&::after {
width: 54em; height: 54em;
background: #3d2e36;
border-radius: 0 5em 0 0 / 0 15em 0 0;
transform: translate(79em, -16em) translateZ(-4em) rotateX(-42deg) rotateY(-90deg) skewX(15deg);
}
}
& > div:nth-child(7) {
width: 90em; height: 8em;
background: #3d2e36;
transform: translate(21em, 94em) translateZ(-42em) rotateX(-49deg);
&::before {
width: 90em; height: 10em;
background: #3d2e36;
transform: translateY(8em) rotateX(-15deg);
}
&::after {
width: 90em; height: 20em;
background: #3d2e36;
transform: translateY(17.5em) translateZ(-2.6em) rotateX(-21deg);
}
}
& > div:nth-child(8) {
width: 97em; height: 11em;
background: #3d2e36;
transform: translate(21em, 109em) translateZ(-72em) rotateX(-49deg);
&::before {
width: 120em; height: 40em;
background: #3d2e36;
transform: translate(-13em, 11em) rotateX(20deg);
}
&::after {
width: 75em; height: 22em;
background: #3d2e36;
transform: translateY(-38em) translateZ(9em) rotateX(-96deg) rotateY(-90deg);
}
}
& > div:nth-child(9) {
width: 20em; height: 20em;
background: #3d2e36;
transform: translate(-11em, 124em) translateZ(-85em) rotateX(-30deg);
&::before {
width: 29em; height: 60em;
background: linear-gradient(-20deg, #3d2e36 84%, transparent 0%);
transform: translate(114em, 39em) translateZ(20em) rotateX(-30deg);
}
&::after {
width: 8em; height: 20em;
background: #3d2e36;
transform: translate(88em, 76em) translateZ(36em) rotateX(-30deg);
}
}
& > div:nth-child(10) {
width: 20em; height: 40em;
background: linear-gradient(-104deg, #3d2e36 66%, transparent 0%);
transform: translate(77em, 194em) translateZ(-86em) rotateY(150deg);
&::before {
width: 40em; height: 29em;
background: linear-gradient(-119deg, #3d2e36 70%, transparent 0%);
transform: translate(63em, -5em) translateZ(-27em) rotateY(-57deg);
}
&::after {
width: 41em; height: 26em;
background: #3d2e36;
transform: translate(68em, -20em) translateZ(-21em) rotateX(80deg);
}
}
& > div:nth-child(11) {
width: 20em; height: 21em;
background: linear-gradient(-48deg, #3d2e36 40%, transparent 0%), linear-gradient(-125deg, #3d2e36 40%, transparent 0%);
transform: translateY(179em) translateZ(-100em) rotateY(100deg);
&::before {
width: 14em; height: 20em;
background: linear-gradient(-32deg, #3d2e36 83%, transparent 0%);
transform: translate(3.7em, 20em) translateZ(-3em) rotateX(97deg) rotateY(18deg);
}
}
}
}
.building-3 {
width: 18em; height: 18em;
background: var(--top-default-light);
transform: translate(115em, 151em) translateZ(-16em) rotateX(0deg);
transform-style: preserve-3d;
animation: thirdBuilding var(--animation);
--left-default-light: #953552;
--left-default-dark: #88213D;
--left-accent-light: #7B2237;
--left-accent-dark: #701329;
--top-default-light: #D25A6C;
--top-default-dark: #BF394D;
--top-accent-light: #B25B78;
--top-accent-dark: #9E4662;
--right-default-light: #722C41;
--right-default-dark: #681A33;
--right-accent-light: #4C1325;
--right-accent-dark: #320716;
--right-window-inner: #300829;
--right-window-v: #56203E;
--right-window-h: #6A2B46;
&::before {
width: 1em; height: 18em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
&::after {
width: 18em; height: 1em;
background: var(--right-default-light);
transform: translateY(18em) rotateX(-90deg);
}
& > div:nth-child(1) {
width: 18em; height: 18em;
background: var(--top-default-light);
transform: translateZ(2em);
&::before {
width: 1em; height: 18em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
&::after {
width: 18em; height: 1em;
background: var(--right-default-light);
transform: translateY(18em) rotateX(-90deg);
}
}
& > div:nth-child(2) {
width: 16em; height: 16em;
background: var(--top-default-light);
transform: translate(1em, 1em) translateZ(3em);
&::before {
width: 50em; height: 16em;
clip-path: polygon(0em 0em, 0em 2em, 2em 2em, 2em 5em, 0em 5em, 0em 11em, 2em 11em, 2em 14em, 0em 14em, 0em 16em, 50em 16em, 50em 0em);
background: var(--left-default-light);
transform: translateZ(2em) rotateY(90deg);
}
&::after {
width: 140em; height: 16em;
clip-path: polygon(0em 0em, 0em 2em, 2em 2em, 2em 5em, 0em 5em, 0em 11em, 2em 11em, 2em 14em, 0em 14em, 0em 16em, 140em 16em, 140em 0em);
background: var(--right-default-light);
transform: translateY(16em) translateZ(2em) rotateY(90deg) rotateX(90deg);
}
}
& > div:nth-child(3) {
width: 1em; height: 2em;
background: var(--right-default-light);
box-shadow: 15em 0em var(--right-default-light);
transform: translate(1em, 3em) translateZ(5em) rotateX(-90deg);
&::before {
width: 1em; height: 2em;
background: var(--right-default-light);
box-shadow: 15em 0em var(--right-default-light);
transform: translateZ(9em);
}
&::after {
width: 1em; height: 1em;
background: var(--top-default-light);
box-shadow: 0em 1em var(--top-default-light), 0em 5em var(--top-default-light), 0em 6em var(--top-default-light), 0em 7em var(--top-default-light), 0em 8em var(--top-default-light), 0em 9em var(--top-default-light), 0em 10em var(--top-default-light), 0em 14em var(--top-default-light), 0em 15em var(--top-default-light), 15em 1em var(--top-default-light), 15em 5em var(--top-default-light), 15em 6em var(--top-default-light), 15em 7em var(--top-default-light), 15em 8em var(--top-default-light), 15em 9em var(--top-default-light), 15em 10em var(--top-default-light), 15em 14em var(--top-default-light), 15em 15em var(--top-default-light), 1em 0em var(--top-default-light), 5em 0em var(--top-default-light), 6em 0em var(--top-default-light), 7em 0em var(--top-default-light), 8em 0em var(--top-default-light), 9em 0em var(--top-default-light), 10em 0em var(--top-default-light), 14em 0em var(--top-default-light), 15em 0em var(--top-default-light), 1em 15em var(--top-default-light), 5em 15em var(--top-default-light), 6em 15em var(--top-default-light), 7em 15em var(--top-default-light), 8em 15em var(--top-default-light), 9em 15em var(--top-default-light), 10em 15em var(--top-default-light), 14em 15em var(--top-default-light);
transform: translateZ(-2em) rotateX(90deg);
}
}
& > div:nth-child(4) {
width: 2em; height: 1em;
background: var(--left-default-light);
box-shadow: 0em 15em var(--left-default-light);
transform: translate(6em, 1em) translateZ(5em) rotateY(90deg);
&::before {
width: 3em; height: 16em;
clip-path: polygon(0em 0em, 0em 16em, 3em 16em, 3em 14em, 1em 14em, 1em 11em, 3em 11em, 3em 5em, 1em 5em, 1em 2em, 3em 2em, 3em 0em);
background: var(--left-default-light);
transform: translateX(3em) translateZ(10em) rotateY(-180deg);
}
&::after {
width: 3em; height: 16em;
clip-path: polygon(0em 0em, 0em 16em, 3em 16em, 3em 14em, 1em 14em, 1em 11em, 3em 11em, 3em 5em, 1em 5em, 1em 2em, 3em 2em, 3em 0em);
background: var(--right-default-light);
transform: translate(3em, 1em) translateZ(-5em) rotateX(90deg) rotateY(180deg);
}
}
& > div:nth-child(5) {
width: 2em; height: 1em;
background: var(--left-default-light);
box-shadow: 0em 15em var(--left-default-light);
transform: translate(15em, 1em) translateZ(5em) rotateY(90deg);
&::before {
width: 7em; height: 10em;
clip-path: polygon(0em 0em, 7em 0em, 7em 4em, 4em 4em, 4em 6em, 7em 6em, 7em 10em, 0em 10em);
background: var(--left-default-light);
transform: translate(-5em, 3em) translateZ(-11em);
}
&::after {
width: 7em; height: 10em;
clip-path: polygon(0em 0em, 7em 0em, 7em 4em, 4em 4em, 4em 6em, 7em 6em, 7em 10em, 0em 10em);
background: var(--right-default-light);
transform: translate(-5em, 13em) translateZ(-11em) rotateX(90deg);
}
}
& > div:nth-child(6) {
width: 10em; height: 10em;
background: var(--top-default-light);
transform: translate(4em, 4em) translateZ(10em);
&::before {
border-left: 4em solid transparent;
border-right: 4em solid transparent;
border-top: 7em solid var(--right-accent-light);
transform: translate(1em, 9em) rotateX(128deg);
}
&::after {
border-bottom: 4em solid transparent;
border-top: 4em solid transparent;
border-left: 7em solid var(--left-accent-light);
transform: translate(1em, 1em) rotateY(-58deg);
}
}
& > div:nth-child(7) {
width: 3em; height: 3em;
background: var(--right-default-dark);
transform: translate(4em, 8em) translateZ(3em) rotateX(90deg);
&::before {
width: 2em; height: 3em;
background: var(--left-default-dark);
transform: translateX(6em) translateZ(-4em) rotateY(90deg);
}
&::after {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-top: 3px solid var(--right-window-h);
border-radius: 0 0 2em 2em;
transform: translate(-1em, -12em) translateZ(-10em);
}
}
& > div:nth-child(8) {
width: 1em; height: 2em;
background: var(--top-default-light);
box-shadow: 0 5em var(--top-default-light), 0 7em var(--top-default-light), 0 12em var(--top-default-light), 0 14em var(--top-default-light), 0 19em var(--top-default-light), 0 21em var(--top-default-light), 0 26em var(--top-default-light);
transform: translate(-21em, 6em) translateZ(-27em);
&::before {
width: 8em; height: 36em;
background: var(--top-default-light);
transform: translateY(-8em) translateZ(-1em);
}
&::after {
width: 20em; height: 36em;
clip-path: polygon(0em 8em, 1em 8em, 1em 0em, 20em 0em, 20em 17em, 11em 17em, 11em 28em, 20em 28em, 20em 36em, 0em 36em, 0em 34em, 1em 34em, 1em 31em, 0em 31em, 0em 27em, 1em 27em, 1em 24em, 0em 24em, 0em 20em, 1em 20em, 1em 17em, 0em 17em, 0em 13em, 1em 13em, 1em 10em, 0em 10em);
background: var(--left-default-light);
transform: translateY(-8em) rotateY(90deg);
}
}
& > div:nth-child(9) {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translate(-21em, 8em) translateZ(-27em) rotateX(-90deg);
&::before {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translateZ(7em);
}
&::after {
width: 49em; height: 60em;
clip-path: polygon(0em 60em, 0em 9em, 4em 9em, 4em 10em, 7em 10em, 7em 9em, 12em 9em, 12em 10em, 15em 10em, 15em 9em, 20em 9em, 20em 10em, 23em 10em, 23em 9em, 28em 9em, 28em 10em, 31em 10em, 31em 9em, 36em 9em, 36em 10em, 39em 10em, 39em 9em, 41em 9em, 41em 0em, 43em 0em, 43em 1em, 47em 1em, 47em 0em, 49em 0em, 49em 60em);
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1em 13em/3em 2em repeat-x, var(--right-default-light);
transform: translateX(-41em) translateZ(26em);
}
}
& > div:nth-child(10) {
width: 2em; height: 1em;
background: var(--top-default-light);
box-shadow: 6em 0 var(--top-default-light);
transform: translate(-21em, 33em) translateZ(-27em);
&::before {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translateY(-11em) rotateX(-90deg);
}
&::after {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translateY(-4em) rotateX(-90deg);
}
}
& > div:nth-child(11) {
width: 1em; height: 1em;
background: var(--top-default-light);
box-shadow: -31em -36em var(--top-default-light), -32em -36em var(--top-default-light), -36em -36em var(--top-default-light), -37em -36em var(--top-default-light), -38em -36em var(--top-default-light), -39em -33em var(--top-default-light), -39em -32em var(--top-default-light), -39em -31em var(--top-default-light), -39em -30em var(--top-default-light), -39em -29em var(--top-default-light), -39em -25em var(--top-default-light), -39em -24em var(--top-default-light), -39em -23em var(--top-default-light), -39em -22em var(--top-default-light), -39em -21em var(--top-default-light), -39em -17em var(--top-default-light), -39em -16em var(--top-default-light), -39em -15em var(--top-default-light), -39em -14em var(--top-default-light), -39em -13em var(--top-default-light), -39em -9em var(--top-default-light), -39em -8em var(--top-default-light), -39em -7em var(--top-default-light), -39em -6em var(--top-default-light), -39em -5em var(--top-default-light), -39em -1em var(--top-default-light), -38em 0 var(--top-default-light), -36em 0 var(--top-default-light), -30em 0 var(--top-default-light), -28em 0 var(--top-default-light), -22em 0 var(--top-default-light), -20em 0 var(--top-default-light), -14em 0 var(--top-default-light), -12em 0 var(--top-default-light), -6em 0 var(--top-default-light), -4em 0 var(--top-default-light), 1em 0 var(--top-default-light), -5em 0 var(--top-default-light), -7em 0 var(--top-default-light), -8em 0 var(--top-default-light), -13em 0 var(--top-default-light), -15em 0 var(--top-default-light), -16em 0 var(--top-default-light), -21em 0 var(--top-default-light), -23em 0 var(--top-default-light), -24em 0 var(--top-default-light), -29em 0 var(--top-default-light), -31em 0 var(--top-default-light), -32em 0 var(--top-default-light), -37em 0 var(--top-default-light), -39em 0 var(--top-default-light);
transform: translate(-23em, 33em) translateZ(-36em);
&::before {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
&::after {
width: 10em; height: 60em;
background: var(--right-default-light);
transform: translate(8em, -5em) translateZ(8em) rotateX(-90deg);
}
}
& > div:nth-child(12) {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translate(-31em, 33em) translateZ(-36em) rotateY(90deg);
&::before {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateZ(-8em);
}
&::after {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateZ(-16em);
}
}
& > div:nth-child(13) {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translate(-55em, 33em) translateZ(-36em) rotateY(90deg);
&::before {
width: 48em; height: 57em;
clip-path: polygon(0em 0em, 0em 57em, 8em 57em, 8em 44em, 47em 44em, 47em 43em, 8em 43em, 8em 8em, 16em 8em, 16em 0em);
background: var(--top-default-light);
transform: translate(1em, -43em) translateZ(-14em) rotateY(-90deg);
}
&::after {
width: 9em; height: 13em;
background: var(--right-default-dark);
transform: translate(2em, -18em) translateZ(34em) rotateX(90deg);
}
}
& > div:nth-child(14) {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(-32em, 34em) translateZ(-50em) rotateX(-90deg);
&::before {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(16em);
}
&::after {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translate(-30em, -14em) translateZ(-5em);
}
}
& > div:nth-child(15) {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translate(-62em, 21em) translateZ(-36em) rotateX(-90deg);
&::before {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translateZ(-8em);
}
&::after {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translateZ(-16em);
}
}
& > div:nth-child(16) {
width: 1em; height: 2em;
background: var(--left-default-light);
box-shadow: 0 32em var(--left-default-light), 0 27em var(--left-default-light), 0 26em var(--left-default-light), 0 24em var(--left-default-light), 0 19em var(--left-default-light), 0 18em var(--left-default-light), 0 16em var(--left-default-light), 0 9em var(--left-default-light), 0 11em var(--left-default-light), 0 8em var(--left-default-light), 0 2em var(--left-default-light), 0 3em var(--left-default-light);
transform: translateX(-62em) translateZ(-36em) rotateY(90deg);
&::before {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateY(-3em) translateZ(1em);
}
&::after {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateY(-3em) translateZ(7em);
}
}
& > div:nth-child(17) {
width: 1em; height: 8em;
background: var(--top-default-light);
transform: translate(-70em, 39em) translateZ(-38em);
&::before {
width: 8em; height: 10em;
clip-path: polygon(0em 0em, 2em 0em, 2em 1em, 6em 1em, 6em 0em, 8em 0em, 8em 10em, 0em 10em);
background: var(--right-default-light);
transform: translate(9em, -41em) translateZ(2em) rotateX(-90deg);
}
&::after {
width: 1em; height: 8em;
background: var(--top-default-light);
transform: translateX(-1em) translateZ(-1em);
}
}
& > div:nth-child(18) {
width: 1em; height: 8em;
background: var(--top-default-light);
transform: translate(-72em, 39em) translateZ(-40em);
&::before {
width: 59em; height: 81em;
clip-path: polygon(0em 0em, 0em 57em, 0.1em 58.8em, 0.5em 61em, 1.2em 63.1em, 2.5em 65.6em, 4.1em 67.7em, 5.9em 69.4em, 8.2em 71em, 9.9em 71.8em, 11.3em 72.3em, 12.9em 72.7em, 14.2em 72.9em, 16em 73em, 28em 73em, 28em 74em, 29em 74em, 29em 75em, 30em 75em, 30em 76em, 31em 76em, 31em 77em, 32em 77em, 32em 78em, 33em 78em, 33em 79em, 34em 79em, 34em 80em, 35em 80em, 35em 81em, 59em 81em, 59em 0em);
background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 3em 13em/2em 3em repeat-y, var(--left-default-light);
box-shadow: inset 0 -32em var(--left-default-light);
transform: translate(3em, -49em) translateZ(3em) rotateY(90deg);
}
&::after {
width: 1em; height: 8em;
background: var(--top-default-light);
transform: translateX(-1em) translateZ(-1em);
}
}
& > div:nth-child(19) {
width: 41em; height: 25em;
border-radius: 0 0 0 16em;
background: linear-gradient(135deg, var(--top-default-light) 15%, var(--right-default-light) 70%);
transform: translate(-61em, 38em) translateZ(-37em) rotateY(90deg);
&::before {
width: 1em; height: 8em;
background: var(--top-default-light);
transform: translate(5em, 1em) translateZ(-12em) rotateY(90deg);
}
&::after {
width: 1em; height: 8em;
background: var(--top-default-light);
transform: translate(6em, 1em) translateZ(-13em) rotateY(90deg);
}
}
& > div:nth-child(20) {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translate(-70em, 39em) translateZ(-38em) rotateY(90deg);
&::before {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translateX(1em) translateZ(-1em);
}
&::after {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translateX(2em) translateZ(-2em);
}
}
& > div:nth-child(21) {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translate(-73em, 39em) translateZ(-41em) rotateY(90deg);
&::before {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translateX(1em) translateZ(-1em);
}
&::after {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translateX(2em) translateZ(-2em);
}
}
& > div:nth-child(22) {
width: 23em; height: 8em;
background: var(--top-default-light);
transform: translate(-98em, 39em) translateZ(-44em);
&::before {
width: 25em; height: 8em;
clip-path: polygon(1em 0em, 1em 7em, 0em 7em, 0em 8em, 25em 8em, 25em 0em);
background: var(--left-default-light);
transform: translateZ(1em) rotateY(90deg);
}
&::after {
width: 29em; height: 59em;
clip-path: polygon(0em 7em, 0em 59em, 29em 59em, 29em 0em, 29em 1em, 28em 1em, 28em 2em, 27em 2em, 27em 3em, 26em 3em, 26em 4em, 25em 4em, 25em 5em, 24em 5em, 24em 6em, 23em 6em, 23em 7em, 22em 7em, 22em 6em, 20em 6em, 20em 7em, 17em 7em, 17em 6em, 12em 6em, 12em 7em, 9em 7em, 9em 6em, 4em 6em, 4em 7em, 2em 7em, 2em 6em, 0em 6em);
background: var(--right-default-light);
transform: translateY(8em) translateZ(7em) rotateX(-90deg);
}
}
& > div:nth-child(23) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(-69em, 63em) translateZ(-65em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(24) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(-69em, 66em) translateZ(-68em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
}
& > div:nth-child(25) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(-69em, 69em) translateZ(-71em);
&::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
&::after {
width: 8em; height: 24em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(-1em) rotateX(-90deg);
}
}
& > div:nth-child(26) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(-69em, 70em) translateZ(-71em) rotateX(-90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
}
& > div:nth-child(27) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(-69em, 67em) translateZ(-68em) rotateX(-90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
}
& > div:nth-child(28) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(-69em, 64em) translateZ(-65em) rotateX(-90deg);
&::before {
width: 63em; height: 70em;
clip-path: polygon(63em 0em, 61em 0em, 61em 1em, 58em 1em, 58em 0em, 53em 0em, 53em 1em, 50em 1em, 50em 0em, 45em 0em, 45em 1em, 42em 1em, 42em 0em, 37em 0em, 37em 1em, 34em 1em, 34em 0em, 29em 0em, 29em 1em, 26em 1em, 26em 0em, 21em 0em, 21em 1em, 18em 1em, 18em 0em, 13em 0em, 13em 1em, 10em 1em, 10em 0em, 5em 0em, 5em 1em, 2em 1em, 2em 0em, 0em 0em, 0em 70em, 63em 70em);
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1em 4em/3em 2em repeat-x, var(--right-default-light);;
transform: translate(-85em, -20em) translateZ(-41em);
}
&::after {
width: 63em; height: 1em;
background: var(--top-default-light);
transform: translate(-87em, -19em) translateZ(-42em) rotateX(90deg);
}
}
& > div:nth-child(29) {
width: 2em; height: 1em;
background: var(--top-default-light);
box-shadow: -5em 0 var(--top-default-light), -8em 0 var(--top-default-light), -7em 0 var(--top-default-light), -13em 0 var(--top-default-light), -14em 0 var(--top-default-light), -16em 0 var(--top-default-light), -21em 0 var(--top-default-light), -22em 0 var(--top-default-light), -24em 0 var(--top-default-light), -29em 0 var(--top-default-light), -30em 0 var(--top-default-light), -32em 0 var(--top-default-light), -37em 0 var(--top-default-light), -38em 0 var(--top-default-light), -40em 0 var(--top-default-light), -45em 0 var(--top-default-light), -46em 0 var(--top-default-light), -48em 0 var(--top-default-light), -53em 0 var(--top-default-light), -55em 0 var(--top-default-light), -56em 0 var(--top-default-light), -61em 0 var(--top-default-light);
transform: translate(-93em, 22em) translateZ(-45em);
&::before {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
&::after {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateX(-8em) rotateY(90deg);
}
}
& > div:nth-child(30) {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translate(-109em, 22em) translateZ(-45em) rotateY(90deg);
&::before {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateZ(-8em);
}
&::after {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateZ(-16em);
}
}
& > div:nth-child(31) {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translate(-133em, 22em) translateZ(-45em) rotateY(90deg);
&::before {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateZ(-8em);
}
&::after {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateZ(-16em);
}
}
& > div:nth-child(32) {
width: 70em; height: 1em;
background: var(--left-default-light);
transform: translate(-150em, 22em) translateZ(-45em) rotateY(90deg);
&::before {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(11em, 2em) translateZ(19em) rotateX(-90deg) rotateZ(-90deg);
}
&::after {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(11em, 2em) translateZ(34em) rotateX(-90deg) rotateZ(-90deg);
}
}
& > div:nth-child(33) {
width: 19em; height: 30em;
background: var(--left-default-light);
transform: translate(-106em, 66em) translateZ(-66em) rotateX(-90deg) rotateY(90deg);
&::before {
width: 19em; height: 8em;
background: var(--top-default-light);
transform: rotateX(90deg);
}
&::after {
width: 8em; height: 30em;
background: var(--right-default-light);
transform: rotateY(-90deg);
}
}
& > div:nth-child(34) {
width: 8em; height: 14em;
background: var(--top-default-light);
transform: translate(-38em, 43em) translateZ(-51em);
&::before {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(-61em, -20em) translateZ(-6em) rotateX(-90deg);
}
&::after {
width: 8em; height: 20em;
background: var(--top-default-light);
transform: translate(-77em, -15em) translateZ(-20em);
}
}
& > div:nth-child(35) {
width: 1em; height: 2em;
background: var(--top-default-light);
box-shadow: -7em 0em var(--top-default-light), -7em 12em var(--top-default-light), -7em 7em var(--top-default-light), -7em 5em var(--top-default-light), 0em 12em var(--top-default-light), 0em 7em var(--top-default-light), 0em 5em var(--top-default-light);
transform: translate(-31em, 43em) translateZ(-50em);
&::before {
width: 32em; height: 14em;
clip-path: polygon(0em 0em, 32em 0em, 32em 14em, 0em 14em, 0em 12em, 1em 12em, 1em 9em, 0em 9em, 0em 5em, 1em 5em, 1em 2em, 0em 2em);
background: var(--left-default-light);
transform: translateX(-7em) rotateY(90deg);
}
&::after {
width: 8em; height: 32em;
clip-path: polygon(0em 0em, 2em 0em, 2em 1em, 6em 1em, 6em 0em, 8em 0em, 8em 32em, 0em 32em);
background: var(--right-default-light);
transform: translate(-7em, 14em) rotateX(-90deg);
}
}
& > div:nth-child(36) {
width: 1em; height: 2em;
background: var(--left-default-light);
box-shadow: 0 12em var(--left-default-light), 0 7em var(--left-default-light), 0 5em var(--left-default-light);
transform: translate(-31em, 43em) translateZ(-50em) rotateY(90deg);
&::before {
width: 1em; height: 1em;
background: var(--right-default-light);
box-shadow: 0 7em var(--right-default-light);
transform: translateY(2em) translateZ(1em) rotateX(-90deg);
}
&::after {
width: 1em; height: 1em;
background: var(--right-default-light);
box-shadow: 0 7em var(--right-default-light);
transform: translateY(9em) translateZ(1em) rotateX(-90deg);
}
}
& > div:nth-child(37) {
width: 2em; height: 1em;
background: var(--top-default-light);
box-shadow: -6em 0em var(--top-default-light);
transform: translate(-32em, 56em) translateZ(-50em);
&::before {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
&::after {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(-3em, 1em) translateZ(-13em) rotateX(-90deg);
}
}
& > div:nth-child(38) {
width: 1em; height: 1em;
background: var(--top-default-light);
box-shadow: 0 1em var(--top-default-light), 0 5em var(--top-default-light), 0 6em var(--top-default-light), 0 7em var(--top-default-light), 0 8em var(--top-default-light), 0 12em var(--top-default-light), 0 13em var(--top-default-light), 0 14em var(--top-default-light), 0 15em var(--top-default-light), 0 18em var(--top-default-light), 0 19em var(--top-default-light), 1em 19em var(--top-default-light), 6em 19em var(--top-default-light), 7em 19em var(--top-default-light), 7em 0 var(--top-default-light), 7em 1em var(--top-default-light), 7em 5em var(--top-default-light), 7em 6em var(--top-default-light), 7em 7em var(--top-default-light), 7em 8em var(--top-default-light), 7em 12em var(--top-default-light), 7em 13em var(--top-default-light), 7em 14em var(--top-default-light), 7em 15em var(--top-default-light), 7em 18em var(--top-default-light), 7em 19em var(--top-default-light);
transform: translate(-115em, 28em) translateZ(-70em);
&::before {
width: 31em; height: 20em;
clip-path: polygon(0em 0em, 31em 0em, 31em 20em, 0em 20em, 0em 18em, 1em 18em, 1em 16em, 0em 16em, 0em 12em, 1em 12em, 1em 9em, 0em 9em, 0em 5em, 1em 5em, 1em 2em, 0em 2em);
background: var(--left-default-light);
transform: rotateY(90deg);
}
&::after {
width: 8em; height: 31em;
clip-path: polygon(0em 0em, 0em 31em, 8em 31em, 8em 0em, 6em 0em, 6em 1em, 2em 1em, 2em 0em);
background: var(--right-default-light);
transform: translateY(20em) rotateX(-90deg);
}
}
& > div:nth-child(39) {
width: 1em; height: 1em;
background: var(--right-default-light);
box-shadow: 7em 0 var(--right-default-light);
transform: translate(-115em, 30em) translateZ(-70em) rotateX(-90deg);
&::before {
width: 1em; height: 1em;
background: var(--right-default-light);
box-shadow: 7em 0 var(--right-default-light);
transform: translateZ(7em);
}
&::after {
width: 1em; height: 1em;
background: var(--right-default-light);
box-shadow: 7em 0 var(--right-default-light);
transform: translateZ(14em)
}
}
& > div:nth-child(40) {
width: 2em; height: 1em;
background: var(--left-default-light);
box-shadow: 5em 0 var(--left-default-light), 7em 0 var(--left-default-light), 12em 0 var(--left-default-light), 14em 0 var(--left-default-light), 18em 0 var(--left-default-light);
transform: translate(-108em, 28em) translateZ(-70em) rotateX(-90deg) rotateY(-90deg);
&::before {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateX(19em) translateZ(1em);
}
&::after {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(20em, 12em) translateZ(3em) rotateY(90deg);
}
}
& > div:nth-child(41) {
width: 16em; height: 16em;
background: var(--top-default-light);
transform: translate(1em, 1em) translateZ(3em);
&::before {
width: 55em; height: 16em;
clip-path: polygon(0em 0em, 55em 0em, 55em 16em, 0em 16em, 0em 14em, 2em 14em, 2em 11em, 0em 11em, 0em 5em, 2em 5em, 2em 2em, 0em 2em);
background: var(--left-default-light);
transform: translateZ(2em) rotateY(90deg);
}
&::after {
width: 100em; height: 16em;
clip-path: polygon(0em 0em, 100em 0em, 100em 16em, 0em 16em, 0em 14em, 2em 14em, 2em 11em, 0em 11em, 0em 5em, 2em 5em, 2em 2em, 0em 2em);
background: var(--right-default-light);
transform: translateY(16em) translateZ(2em) rotateZ(-90deg) rotateY(90deg);
}
}
& > div:nth-child(42) {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(8em, 20em) rotateX(-90deg);
}
& > .mooving-part-1 {
width: 8em; height: 30em;
background: var(--right-accent-light);
animation: b3Mp1 var(--animation);
&::before {
width: 8em; height: 10em;
background: var(--top-accent-light);
transform: translateY(-6em) translateZ(-8em) rotateX(53deg);
}
&::after {
width: 8em; height: 36em;
clip-path: polygon(0em 6em, 8em 0em, 8em 36em, 0em 36em);
background: var(--left-accent-light);
transform: translateY(-6em) rotateY(90deg);
}
& > div {
width: 8em; height: 22em;
background: var(--right-accent-light);
transform-origin: bottom center;
animation: b3Mp1DIV var(--animation);
&::before {
width: 8em; height: 8em;
background: var(--top-accent-light);
transform: rotateX(-90deg);
}
&::after {
width: 8em; height: 22em;
clip-path: polygon(0em 0em, 8em 0em, 8em 16em, 0em 22em);
background: var(--left-accent-light);
transform: rotateY(90deg);
}
& > div:nth-child(1) {
width: 8em; height: 16em;
background: var(--top-accent-light);
transform: translateZ(-8em);
&::before {
width: 1em; height: 4em;
background: var(--top-accent-light);
transform: translate(-1em, 4em) translateZ(2em);
}
&::after {
width: 1em; height: 4em;
background: var(--top-accent-light);
transform: translate(-1em, 12em) translateZ(2em);
}
}
& > div:nth-child(2) {
width: 4em; height: 4em;
box-sizing: border-box;
transform: translate(-1em, 4em) translateZ(-2em) rotateY(90deg);
animation: b3Mp1LeftPart var(--animation);
&::before {
width: 1em; height: 4em;
transform: translate(-1em, -1em) rotateY(-90deg);
animation: b3Mp1RightPart var(--animation);
}
&::after {
width: 4em; height: 1em;
transform: translate(-1em, -1em) rotateX(90deg);
animation: b3Mp1TopPart var(--animation);
}
}
& > div:nth-child(3) {
width: 4em; height: 4em;
box-sizing: border-box;
transform: translate(-1em, 12em) translateZ(-2em) rotateY(90deg);
animation: b3Mp1LeftPart var(--animation);
&::before {
width: 1em; height: 4em;
transform: translate(-1em, -1em) rotateY(-90deg);
animation: b3Mp1RightPart var(--animation);
}
&::after {
width: 4em; height: 1em;
transform: translate(-1em, -1em) rotateX(90deg);
animation: b3Mp1TopPart var(--animation);
}
}
}
}
& > .mooving-part-2 {
width: 8em; height: 19em;
background: var(--left-default-light);
animation: b3Mp2 var(--animation);
&::before {
width: 29em; height: 24em;
clip-path: polygon(0em 0em, 29em 0em, 29em 23em, 28em 23em, 28em 22em, 27em 22em, 27em 21em, 26em 21em, 26em 20em, 25em 20em, 25em 19em, 0em 19em);
background: var(--top-default-light);
transform: rotateY(90deg);
}
&::after {
width: 29em; height: 24em;
clip-path: polygon(0em 0em, 29em 0em, 29em 23em, 28em 23em, 28em 22em, 27em 22em, 27em 21em, 26em 21em, 26em 20em, 25em 20em, 25em 19em, 0em 19em);
background: var(--top-default-light);
transform: translateX(8em) rotateY(90deg);
}
& > div:nth-child(1) {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translate(8em, 21em) translateZ(-27em) rotateZ(90deg);
&::before {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translateX(-1em) translateZ(1em);
}
&::after {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translateX(-2em) translateZ(2em);
}
}
& > div:nth-child(2) {
width: 1em; height: 8em;
background: var(--right-default-light);
transform: translate(8em, 23em) translateZ(-29em) rotateX(90deg) rotateY(0deg) rotateZ(90deg);
&::before {
width: 25em; height: 8em;
background: var(--right-default-light);
transform: translateX(4em) translateZ(3em) translateZ(1em);
}
&::after {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translateX(1em) rotateY(-90deg);
}
}
& > div:nth-child(3) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(22em) translateZ(-28em) rotateX(90deg);
&::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
&::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
}
}
& > .mooving-part-3 {
width: 16em; height: 8em;
background: var(--top-accent-light);
animation: b3Mp3 var(--animation);
&::before {
width: 8em; height: 8em;
background: var(--left-accent-light);
transform: rotateY(90deg);
}
&::after {
width: 16em; height: 8em;
background: var(--right-accent-light);
transform: translateY(8em) rotateX(-90deg);
}
& > div:nth-child(1) {
width: 4em; height: 4em;
box-sizing: border-box;
transform: translate(3em, 9em) translateZ(-2em) rotateX(-90deg);
animation: b3Mp3RightPart var(--animation);
&::before {
width: 1em; height: 4em;
transform: translate(-1em, -1em) rotateY(90deg);
animation: b3Mp3LeftPart var(--animation);
}
&::after {
width: 4em; height: 1em;
transform: translate(-1em, -1em) rotateX(-90deg);
animation: b3Mp3TopPart var(--animation);
}
}
& > div:nth-child(2) {
width: 4em; height: 4em;
box-sizing: border-box;
transform: translate(10em, 9em) translateZ(-2em) rotateX(-90deg);
animation: b3Mp3RightPart var(--animation);
&::before {
width: 1em; height: 4em;
transform: translate(-1em, -1em) rotateY(90deg);
animation: b3Mp3LeftPart var(--animation);
}
&::after {
width: 4em; height: 1em;
transform: translate(-1em, -1em) rotateX(-90deg);
animation: b3Mp3TopPart var(--animation);
}
}
}
& > .mooving-part-4 {
width: 8em; height: 8em;
background: var(--top-default-light);
animation: b3Mp4 var(--animation);
&::before {
width: 28em; height: 8em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
&::after {
width: 8em; height: 30em;
background: var(--right-default-light);
transform: translateY(8em) rotateX(-90deg);
}
}
}
.Ro {
transform-style: preserve-3d;
animation: ro var(--animation) linear;
& > &_1 {
animation: ro1 var(--animation) linear;
&::before {
width: 140px; height: 268px;
background: conic-gradient(from 0.46turn at 34% -19%, #1a3468, 25deg, transparent, 25deg, transparent), linear-gradient(90deg, transparent 21%, #1a3468 21%, #1a3468 54%, transparent 21%);
border-radius: 0 0 35px 110px/0 0 35px 47px;
transform: translate(-10px, -414px) skewY(17deg);
}
& > .Ro__head {
width: 178px; height: 164px;
background: #1a3468;
box-shadow: inset 50px 35px 0 -40px white;
border-radius: 50%;
transform-origin: center center;
transform: translate(-50px, -562px) skew(13deg, 15deg);
&::before {
width: 122px; height: 114px;
background: #1a3468;
border-radius: 50%;
transform: translate(116px, 116px);
}
}
& > .Ro__legl {
width: 26px; height: 110px;
background: #1a3468;
border-radius: 13px;
transform-origin: 13px 13px;
animation: ro1LegL var(--animation) ease;
&::before {
width: 55px; height: 113px;
background: radial-gradient(#1a3468 71%, transparent 0%) 21px 73px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) 2px 81px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 29px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 29px 0px/26px 26px no-repeat;
border-radius: 0 13px 7px 80%/0 13px 7px 17%;
transform-origin: 42px 13px;
animation: ro1KneeL var(--animation) ease;
}
}
& > .Ro__legr {
width: 26px; height: 110px;
background: #1a3468;
border-radius: 13px;
transform-origin: 13px 13px;
animation: ro1LegR var(--animation) ease;
&::before {
width: 55px; height: 113px;
background: radial-gradient(#1a3468 71%, transparent 0%) 22px 73px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) 1px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 29px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 29px 0px/26px 26px no-repeat;
border-radius: 0 13px 7px 80%/0 13px 7px 17%;
transform-origin: 42px 13px;
animation: ro1KneeR var(--animation) ease;
}
}
& > .Ro__dress {
width: 66px; height: 309px;
background: radial-gradient(#1a3468 71%, transparent 0%) 11px -17px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 19px 36px 38px 45px/220px 250px 72px 112px;
transform-origin: top left;
transform: translate(5px, -370px) skewY(8deg) rotate(-3deg);
&::before {
width: 52px; height: 324px;
background: radial-gradient(#1a3468 71%, transparent 0%) 3px -22px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e -8%, #f06687 100%);
border-radius: 19px 36px 38px 45px/220px 250px 72px 112px;
transform-origin: top left;
transform: translate(22px, 9px) skewY(8deg) rotate(-11deg);
}
&::after {
width: 43px; height: 309px;
background: linear-gradient(180deg, #f9ac3e -13%, #f06687 100%);
border-radius: 0px 0px 13px 40px/0px 0px 80px 120px;
transform-origin: top right;
transform: translate(7px, 21px) skewY(8deg) rotate(-30deg);
}
& > div {
width: 12px; height: 261px;
background: linear-gradient(180deg, #f9ac3e -8%, #f06687);
border-radius: 0 0 2px 10px/0 0 0px 70px;
transform-origin: top right;
transform: translate(48px, 18px) skewY(8deg) rotate(-30deg);
&::before {
width: 56px; height: 261px;
background: linear-gradient(180deg, #f9ac3e -5%, #f06687 100%);
border-radius: 0 0 42px 23px/0 0 100px 90px;
transform-origin: top left;
transform: translate(-27px, -28px) skewY(8deg) rotate(46deg);
}
&::after {
width: 8px;
height: 193px;
background: linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 0 0 5px 5px/0 0 22px 50px;
transform-origin: top left;
transform: translate(-41px, -16px) skewY(8deg) rotate(49deg);
}
}
}
}
& > &_2 {
animation: ro2 var(--animation) linear;
&::before {
width: 140px; height: 268px;
background: conic-gradient(from 0.46turn at 34% -19%, #1a3468, 25deg, transparent, 25deg, transparent), linear-gradient(90deg, transparent 21%, #1a3468 21%, #1a3468 54%, transparent 21%);
border-radius: 0 0 110px 35px/0 0 47px 35px;
transform: translate(-10px, -414px) skewY(17deg);
}
& > .Ro__head {
width: 178px; height: 164px;
background: #1a3468;
box-shadow: inset -50px 16px 0 -40px white;
border-radius: 50%;
transform-origin: center center;
transform: translate(-50px, -562px) skew(13deg, 15deg);
&::before {
width: 122px; height: 114px;
background: #1a3468;
border-radius: 50%;
transform: translate(-81px, 69px);
}
}
& > .Ro__legl {
width: 26px; height: 110px;
background: #1a3468;
border-radius: 13px;
transform-origin: 13px 13px;
animation: ro2LegL var(--animation) ease;
&::before {
width: 55px; height: 113px;
background: radial-gradient(#1a3468 71%, transparent 0%) -115px 75px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) -8px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 0px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
border-radius: 13px 0 80% 7px/13px 0 17% 7px;
transform-origin: 13px 13px;
animation: ro2KneeL var(--animation) ease;
}
}
& > .Ro__legr {
width: 26px; height: 110px;
background: #1a3468;
border-radius: 13px;
transform-origin: 13px 13px;
animation: ro2LegR var(--animation) ease;
&::before {
width: 55px; height: 113px;
background: radial-gradient(#1a3468 71%, transparent 0%) -115px 75px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) -8px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 0px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
border-radius: 13px 0 80% 7px/13px 0 17% 7px;
transform-origin: 13px 13px;
animation: ro2KneeR var(--animation) ease;
}
}
& > .Ro__dress {
width: 74px; height: 287px;
background: radial-gradient(#1a3468 71%, transparent 0%) 17px -20px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 36px 19px 45px 38px/250px 220px 112px 72px;
transform-origin: top left;
transform: translate(7px, -368px) skewY(8deg) rotate(5deg);
&::before {
width: 67px; height: 278px;
background: radial-gradient(#1a3468 71%, transparent 0%) 17px -24px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e -1%, #f06687 100%);
border-radius: 36px 19px 45px 38px/250px 220px 112px 72px;
transform-origin: top left;
transform: translate(-13px, -15px) skewY(8deg) rotate(15deg);
}
&::after {
width: 53px; height: 256px;
background: linear-gradient(180deg, #f9ac3e -7%, #f06687 100%);
border-radius: 0px 0px 40px 13px/0px 0px 120px 80px;
transform-origin: top left;
transform: translate(11px, -5px) skewY(8deg) rotate(39deg);
}
& > div {
width: 8px; height: 227px;
background: linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 0 0 0px 6px/0 0 0px 70px;
transform-origin: top right;
transform: translate(57px, 18px) skewY(8deg) rotate(-22deg);
&::before {
width: 62px; height: 243px;
background: linear-gradient(180deg, #f9ac3e -16%, #f06687 100%);
border-radius: 0 0 23px 42px/0 0 90px 100px;
transform-origin: top right;
transform: translate(-54px, 24px) skewY(8deg) rotate(3deg);
}
&::after {
width: 8px; height: 193px;
background: linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 0 0 5px 5px/0 0 50px 22px;
transform-origin: top left;
transform: translate(-69px, -16px) skewY(8deg) rotate(58deg);
}
}
}
}
& > &_3 {
animation: ro3 var(--animation) linear;
&::before {
width: 140px; height: 268px;
background: conic-gradient(from 0.46turn at 34% -19%, #1a3468, 25deg, transparent, 25deg, transparent), linear-gradient(90deg, transparent 21%, #1a3468 21%, #1a3468 54%, transparent 21%);
border-radius: 0 0 35px 110px / 0 0 35px 47px;
transform: translate(-10px, -414px) skewY(17deg);
}
&::after {
width: 32px; height: 211px;
background: linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 0 0 36px 25px / 0 0 62px 52px;
transform-origin: top left;
transform: translate(19px, -389px) rotate(24deg);
z-index: -1;
}
& > .Ro__head {
width: 178px; height: 164px;
background: #1a3468;
border-radius: 50%;
transform-origin: center center;
transform: translate(-50px, -562px) skew(13deg, 15deg);
&::before {
width: 122px; height: 114px;
background: #1a3468;
border-radius: 50%;
transform: translate(139px, -11px);
}
&::after {
width: 100%; height: 100%;
background: radial-gradient(ellipse 80px 110px, white 74%, transparent 0%) -41px 3px no-repeat;
border-radius: 50%;
}
}
& > .Ro__legl {
width: 26px; height: 110px;
background: #1a3468;
border-radius: 13px;
transform-origin: 13px 13px;
animation: ro3LegL var(--animation) ease;
&::before {
width: 55px; height: 113px;
background: radial-gradient(#1a3468 71%, transparent 0%) 17px 74px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) 0px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 29px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 29px 0px/26px 26px no-repeat;
border-radius: 0 13px 7px 80% / 0 13px 7px 17%;
transform-origin: 42px 13px;
animation: ro3KneeL var(--animation) ease;
}
}
& > .Ro__legr {
width: 26px; height: 110px;
background: #1a3468;
border-radius: 13px;
transform-origin: 13px 13px;
animation: ro3LegR var(--animation) ease;
&::before {
width: 55px; height: 113px;
background: radial-gradient(#1a3468 71%, transparent 0%) 17px 74px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) 0px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 29px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 29px 0px/26px 26px no-repeat;
border-radius: 0 13px 7px 80% / 0 13px 7px 17%;
transform-origin: 42px 13px;
animation: ro3KneeR var(--animation) ease;
}
}
& > .Ro__dress {
width: 74px; height: 287px;
background: radial-gradient(#1a3468 71%, transparent 0%) 6px -20px/46px 26px no-repeat, linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 19px 36px 38px 45px/220px 250px 72px 112px;
transform-origin: top left;
transform: translate(19px, -368px) skewY(8deg) rotate(-1deg);
&::before {
width: 68px; height: 313px;
background: linear-gradient(180deg, #f9ac3e -15%, #f06687 100%);
border-radius: 19px 36px 38px 45px/220px 250px 72px 112px;
transform-origin: top left;
transform: translateY(17px) skewY(8deg) rotate(-23deg);
}
&::after {
width: 53px; height: 302px;
background: linear-gradient(180deg, #f9ac3e -16%, #f06687 100%);
border-radius: 0px 0px 13px 40px/0px 0px 80px 120px;
transform-origin: top left;
transform: translate(9px, 33px) skewY(8deg) rotate(-42deg);
}
& > div {
width: 8px; height: 107px;
background: linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 0 0 6px 0px/0 0 70px 0px;
transform-origin: top left;
transform: translate(-16px, 23px) skewY(8deg) rotate(26deg);
&::before {
width: 22px; height: 243px;
background: linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 0 0 10px 12px/0 0 20px 60px;
transform-origin: top left;
transform: translate(50px, -6px) skewY(8deg) rotate(-90deg);
}
&::after {
width: 11px; height: 133px;
background: linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 0 0 5px 5px/0 0 50px 22px;
transform-origin: top right;
transform: translate(57px, -36px) skewY(8deg) rotate(-90deg);
}
}
}
}
& > &_4 {
animation: ro4 var(--animation) linear;
&::before {
width: 140px; height: 268px;
background: conic-gradient(from 0.46turn at 34% -25%, #1a3468, 25deg, transparent, 25deg, transparent), linear-gradient(90deg, transparent 21%, #1a3468 21%, #1a3468 54%, transparent 21%);
border-radius: 0 0 35px 110px/0 0 35px 47px;
transform: translate(-10px, -414px) skewY(10deg);
}
&::after {
width: 19px; height: 311px;
background: linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 0 0 15px 36px/0 0 82px 142px;
transform-origin: top right;
transform: translate(47px, -362px) rotate(-19deg);
z-index: -1;
}
& > .Ro__head {
width: 178px; height: 164px;
background: #1a3468;
border-radius: 50%;
transform-origin: center center;
animation: ro4Head var(--animation);
&::before {
width: 122px; height: 114px;
background: #1a3468;
border-radius: 50%;
transform: translate(-81px, -51px);
}
&::after {
width: 100%; height: 100%;
background: radial-gradient(ellipse 80px 110px, white 74%, transparent 0%) 31px 5px no-repeat;
border-radius: 50%;
transform-origin: center center;
animation: ro4Face var(--animation);
}
}
& > .Ro__legl {
width: 26px; height: 110px;
background: #1a3468;
border-radius: 13px;
transform-origin: 13px 13px;
animation: ro4LegL var(--animation) ease;
&::before {
width: 55px; height: 113px;
background: radial-gradient(#1a3468 71%, transparent 0%) -119px 73px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) -9px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 0px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
border-radius: 13px 0 80% 7px/13px 0 17% 7px;
transform-origin: 13px 13px;
animation: ro4KneeL var(--animation) ease;
}
}
& > .Ro__legr {
width: 26px; height: 110px;
background: #1a3468;
border-radius: 13px;
transform-origin: 13px 13px;
animation: ro4LegR var(--animation) ease;
&::before {
width: 55px; height: 113px;
background: radial-gradient(#1a3468 71%, transparent 0%) -119px 73px/155px 30px no-repeat, radial-gradient(#132a58 71%, transparent 0%) -9px 82px/66px 34px no-repeat, linear-gradient(0deg, #1a3468, #1a3468) 0px 13px/26px 113px no-repeat, radial-gradient(#1a3468 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
border-radius: 13px 0 80% 7px/13px 0 17% 7px;
transform-origin: 13px 13px;
animation: ro4KneeR var(--animation) ease;
}
}
& > .Ro__dress {
width: 74px; height: 287px;
background: radial-gradient(#1a3468 71%, transparent 0%) 24px -16px/52px 26px no-repeat, linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 36px 19px 45px 38px/250px 220px 112px 72px;
transform-origin: top left;
transform: translate(-3px, -390px) skewY(24deg) rotate(2deg);
&::before {
width: 68px; height: 287px;
background: linear-gradient(180deg, #f9ac3e -15%, #f06687 100%);
border-radius: 36px 19px 45px 38px/250px 220px 112px 72px;
transform-origin: top left;
transform: translate(2px, -9px) skewY(11deg) rotate(20deg);
}
&::after {
width: 53px; height: 282px;
background: linear-gradient(180deg, #f9ac3e -16%, #f06687 100%);
border-radius: 0px 0px 40px 13px/0px 0px 120px 80px;
transform-origin: top left;
transform: translate(21px, -2px) skewY(8deg) rotate(42deg);
}
& > div {
width: 8px; height: 107px;
background: linear-gradient(180deg, #f9ac3e -40%, #f06687);
border-radius: 0 0 0px 6px/0 0 0px 70px;
transform-origin: top left;
transform: translate(96px, 73px) skewY(8deg) rotate(-31deg);
&::before {
width: 24px; height: 243px;
background: linear-gradient(180deg, #f9ac3e, #f06687);
border-radius: 0 0 12px 10px/0 0 60px 20px;
transform-origin: top left;
transform: translate(-57px, -86px) skewY(8deg) rotate(72deg);
}
&::after {
width: 11px; height: 133px;
background: linear-gradient(180deg, #f9ac3e -10%, #f06687);
border-radius: 0 0 5px 5px/0 0 50px 22px;
transform-origin: top left;
transform: translate(-83px, -81px) skewY(8deg) rotate(77deg);
}
}
}
}
& > .Ro__arml {
width: 1px; height: 9px;
border-radius: 20px;
border-radius: 1px;
transform-origin: top center;
animation: roArmL var(--animation) linear;
&::before {
width: 1px; height: 9px;
border-radius: 20px;
border-radius: 1px;
transform-origin: 0.5px 1px;
animation: roHandL var(--animation) linear;
}
}
& > .Ro__armr {
width: 1px; height: 9px;
border-radius: 20px;
border-radius: 1px;
transform-origin: top center;
z-index: -1;
animation: roArmR var(--animation) linear;
&::before {
width: 1px; height: 9px;
border-radius: 20px;
border-radius: 1px;
transform-origin: 0.5px 1px;
animation: roHandR var(--animation) linear;
}
}
}
.Girl {
transform-style: preserve-3d;
animation: girl var(--animation) linear;
& > &_1 {
animation: girl1 var(--animation) linear;
& > .Girl__dress {
width: 194px; height: 228px;
background: conic-gradient(from 0rad at 25% 16%, transparent 0deg 183deg, white 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% 0%, transparent 0deg 150deg, #d62939 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% -20%, transparent 0deg 159deg, #d62939 159deg 203deg, transparent 0deg 360deg);
border-radius: 0 0 45px 178px/0 0 41px 87px;
transform-origin: top left;
transform: translate(-51px, -335px) skewY(15deg);
}
& > .Girl__head {
width: 172px; height: 163px;
background: white;
box-shadow: inset -230px -97px 0 -120px #d62939;
border-radius: 50%;
transform-origin: center center;
transform: translate(-33px, -446px) skew(13deg, 15deg);
&::before {
left: 50%;
width: 124px; height: 159px;
background: linear-gradient(-136deg, #d62939 66%, transparent 0%);
border-radius: 0 110px 26px 20px/0 55px 104px 20px;
transform-origin: top left;
transform: translate(33px, 6px) rotate(29deg);
}
}
& > .Girl__legl {
width: 26px; height: 78px;
background: #ffffff;
border-radius: 13px;
transform-origin: 13px 13px;
animation: girl1LegL var(--animation) ease;
&::before {
width: 44px; height: 89px;
background: radial-gradient(#ffffff 71%, transparent 0%) 17px 29px/155px 54px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) 2px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 18px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 18px 0px/26px 26px no-repeat;
border-radius: 0 13px 7px 80%/0 13px 7px 34%;
transform-origin: 31px 13px;
animation: girl1KneeL var(--animation) ease;
}
}
& > .Girl__legr {
width: 26px; height: 78px;
background: #ffffff;
border-radius: 13px;
transform-origin: 13px 13px;
animation: girl1LegR var(--animation) ease;
&::before {
width: 44px; height: 89px;
background: radial-gradient(#ffffff 71%, transparent 0%) 17px 29px/155px 54px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) 2px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 18px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 18px 0px/26px 26px no-repeat;
border-radius: 0 13px 7px 80%/0 13px 7px 34%;
transform-origin: 31px 13px;
animation: girl1KneeR var(--animation) ease;
}
}
}
& > .Girl__arml {
width: 1px; height: 5px;
border-radius: 1px;
transform-origin: top center;
animation: girlArmL var(--animation);
&::before {
width: 1px; height: 5px;
border-radius: 1px;
transform-origin: top center;
animation: girlHandL var(--animation);
}
}
& > &_2 {
animation: girl2 var(--animation) linear;
& > .Girl__dress {
width: 194px; height: 228px;
background: conic-gradient(from 0rad at 67% 16%, transparent 0deg 150deg, white 0deg 172deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% -20%, transparent 0deg 150deg, #d62939 150deg 200deg, transparent 0deg 360deg);
border-radius: 0 0 178px 45px/0 0 87px 41px;
transform-origin: top left;
transform: translate(-41px, -368px) skewY(35deg);
}
& > .Girl__head {
width: 172px; height: 163px;
background: white;
box-shadow: inset 210px 0px 0 -90px #d62939;
border-radius: 50%;
transform-origin: center center;
transform: translate(-33px, -446px) skew(15deg, 16deg);
&::before {
left: -50%;
width: 124px; height: 159px;
background: linear-gradient(136deg, #d62939 66%, transparent 0%);
border-radius: 110px 0 20px 26px/55px 0 20px 104px;
transform-origin: top right;
transform: translateX(41px);
}
}
& > .Girl__legl {
width: 26px; height: 78px;
background: #ffffff;
border-radius: 13px;
transform-origin: 13px 13px;
animation: girl2LegL var(--animation) ease;
&::before {
width: 44px; height: 89px;
background: radial-gradient(#ffffff 71%, transparent 0%) -149px 39px/185px 34px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) -14px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 0px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
border-radius: 13px 0 80% 7px/13px 0 34% 7px;
transform-origin: 13px 13px;
animation: girl2KneeL var(--animation) ease;
}
}
& > .Girl__legr {
width: 26px; height: 78px;
background: #ffffff;
border-radius: 13px;
transform-origin: 13px 13px;
animation: girl2LegR var(--animation) ease;
&::before {
width: 44px; height: 89px;
background: radial-gradient(#ffffff 71%, transparent 0%) -149px 39px/185px 34px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) -14px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 0px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
border-radius: 13px 0 80% 7px/13px 0 34% 7px;
transform-origin: 13px 13px;
animation: girl2KneeR var(--animation) ease;
}
}
}
& > &_3 {
animation: girl3 var(--animation) linear;
& > .Girl__dress {
width: 194px; height: 228px;
background: radial-gradient(ellipse 25px 30px, white 74%, transparent 0%) -46px -35px no-repeat, conic-gradient(from 0rad at 36% 33%, transparent 0deg 149deg, white 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 19% 28%, transparent 0deg 143deg, white 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% 0%, transparent 0deg 147deg, #d62939 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% -20%, transparent 0deg 159deg, #d62939 159deg 203deg, transparent 0deg 360deg);
border-radius: 0 0 45px 178px / 0 0 41px 87px;
transform-origin: top left;
transform: translate(-51px, -335px) skewY(15deg);
}
& > .Girl__head {
width: 172px; height: 163px;
background: #d62939;
border-radius: 50%;
transform-origin: center center;
transform: translate(-33px, -446px) skew(13deg, 15deg);
&::before {
left: 50%;
width: 124px; height: 159px;
background: linear-gradient(-136deg, #d62939 66%, transparent 0%);
border-radius: 0 110px 26px 20px / 0 55px 104px 20px;
}
&::after {
width: 100%; height: 100%;
background: radial-gradient(ellipse 92px 108px, white 74%, transparent 0%) -26px -11px no-repeat;
border-radius: 50%;
transform: translate(-16px, 27px) rotate(-18deg);
}
}
& > .Girl__legl {
width: 26px; height: 78px;
background: #ffffff;
border-radius: 13px;
transform-origin: 13px 13px;
animation: girl3LegL var(--animation) ease;
&::before {
width: 44px; height: 89px;
background: radial-gradient(#ffffff 71%, transparent 0%) 17px 29px/155px 54px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) 2px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 18px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 18px 0px/26px 26px no-repeat;
border-radius: 0 13px 7px 80%/0 13px 7px 34%;
transform-origin: 31px 13px;
animation: girl3KneeL var(--animation) ease;
}
}
& > .Girl__legr {
width: 26px; height: 78px;
background: #ffffff;
border-radius: 13px;
transform-origin: 13px 13px;
animation: girl3LegR var(--animation) ease;
&::before {
width: 44px; height: 89px;
background: radial-gradient(#ffffff 71%, transparent 0%) 17px 29px/155px 54px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) 2px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 18px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 18px 0px/26px 26px no-repeat;
border-radius: 0 13px 7px 80%/0 13px 7px 34%;
transform-origin: 31px 13px;
animation: girl3KneeR var(--animation) ease;
}
}
}
& > &_4 {
animation: girl4 var(--animation) linear;
& > .Girl__dress {
width: 194px; height: 228px;
background: radial-gradient(ellipse 27px 25px, white 74%, transparent 0%) 30px -42px no-repeat, conic-gradient(from 0rad at 56% 28%, transparent 0deg 149deg, white 0deg 203deg, transparent 0deg 360deg), conic-gradient(from 0rad at 74% 27%, transparent 0deg 149deg, white 0deg 213deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% 0%, transparent 0deg 183deg, #d62939 0deg 208deg, transparent 0deg 360deg), conic-gradient(from 0rad at 43% -20%, transparent 0deg 150deg, #d62939 150deg 200deg, transparent 0deg 360deg);
border-radius: 0 0 178px 45px/0 0 87px 41px;
transform-origin: top left;
transform: translate(-41px, -368px) skewY(35deg);
}
& > .Girl__head {
width: 172px; height: 163px;
background: #d62939;
border-radius: 50%;
transform-origin: center center;
transform: translate(-33px, -446px) skew(15deg, 16deg);
&::before {
left: -50%;
width: 124px; height: 159px;
background: linear-gradient(136deg, #d62939 66%, transparent 0%);
border-radius: 110px 0 20px 26px/55px 0 20px 104px;
transform-origin: top right;
transform: translate(68px, 2px) rotate(15deg);
}
&::after {
width: 100%; height: 100%;
background: radial-gradient(ellipse 102px 108px, white 74%, transparent 0%) 24px 25px no-repeat;
border-radius: 50%;
}
}
& > .Girl__legl {
width: 26px; height: 78px;
background: #ffffff;
border-radius: 13px;
transform-origin: 13px 13px;
animation: girl4LegL var(--animation) ease;
&::before {
width: 44px; height: 89px;
background: radial-gradient(#ffffff 71%, transparent 0%) -149px 39px/185px 34px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) -14px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 0px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
border-radius: 13px 0 80% 7px/13px 0 34% 7px;
transform-origin: 13px 13px;
animation: girl4KneeL var(--animation) ease;
}
}
& > .Girl__legr {
width: 26px; height: 78px;
background: #ffffff;
border-radius: 13px;
transform-origin: 13px 13px;
animation: girl4LegR var(--animation) ease;
&::before {
width: 44px; height: 89px;
background: radial-gradient(#ffffff 71%, transparent 0%) -149px 39px/185px 34px no-repeat, radial-gradient(#dedfe1 71%, transparent 0%) -14px 49px/66px 39px no-repeat, linear-gradient(0deg, #ffffff, #ffffff) 0px 13px/26px 113px no-repeat, radial-gradient(#ffffff 71%, transparent 0%) 0px 0px/26px 26px no-repeat;
border-radius: 13px 0 80% 7px/13px 0 34% 7px;
transform-origin: 13px 13px;
animation: girl4KneeR var(--animation) ease;
}
}
}
}
/* COMMON */
@keyframes frame {
0%, 1%, 100% { background: black; }
3.1%, 98% { background: transparent; }
}
@keyframes scene {
0%, 1% { opacity: 0; }
3.1%, 100% { opacity: 1; }
00.00%, 30.11% { transform: translate(-57px, -136px); }
31.96%, 56.97% { transform: translate(-51px, 966px); }
58.23% { transform: translate(-64px, 946px); }
58.38% { transform: translate(-64px, 942px); }
58.89% { transform: translate(-74px, 932px); }
59.48% { transform: translate(-83px, 916px); }
59.93% { transform: translate(-92px, 904px); }
60.52% { transform: translate(-106px, 884px); }
60.96% { transform: translate(-116px, 870px); }
61.40% { transform: translate(-126px, 853px); }
62.43% { transform: translate(-153px, 814px); }
62.66% { transform: translate(-165px, 809px); }
63.25% { transform: translate(-180px, 783px); }
63.54% { transform: translate(-188px, 767px); }
63.84% { transform: translate(-200px, 760px); }
64.21% { transform: translate(-212px, 743px); }
64.80% { transform: translate(-231px, 714px); }
65.02% { transform: translate(-239px, 704px); }
65.61% { transform: translate(-259px, 676px); }
66.20% { transform: translate(-276px, 647px); }
66.72% { transform: translate(-294px, 623px); }
67.31% { transform: translate(-313px, 595px); }
67.75% { transform: translate(-329px, 584px); }
68.34% { transform: translate(-347px, 558px); }
68.86% { transform: translate(-364px, 535px); }
69.30% { transform: translate(-378px, 516px); }
70.18% { transform: translate(-403px, 481px); }
71.36% { transform: translate(-433px, 439px); }
72.47% { transform: translate(-453px, 406px); }
76.60%, 100.0% { transform: translate(-488px, 355px); }
}
/* COVER */
@keyframes cover {
0%, 1% {
background: radial-gradient(#9a0000a1 0%, black 0%);
opacity: 0;
}
3.09% {
background: radial-gradient(#9a0000a1 0%, black 100%);
opacity: 1;
}
7.82% { opacity: 1; }
9.44%, 100% { opacity: 0; }
}
@keyframes coverButton {
0%, 3.17%, 7.53%, 100% { opacity: 0; }
4.35%, 6.49% { opacity: 1; }
6.42%, 6.86% { transform: scale(1); }
6.49% { transform: scale(1.25); }
}
@keyframes coverButtonShadow {
3.25%, 5.09%, 6.57%, 7.53% { opacity: 0; }
4.43%, 6.79% { opacity: 0.4; }
3.25%, 6.57% { transform: scale(1); }
5.09%, 7.53% { transform: scale(1.9); }
}
/* FIRST BUILDING */
@keyframes firstBuilding {
0%, 31.96% { opacity: 1; }
31.97%, 100% { opacity: 0;}
}
@keyframes b1Mp2 {
0%, 11.66%, 12.18%, 12.40% { transform: translate(30em, 15em) translateZ(-18em); }
11.81% { transform: translate(30em, 15em) translateZ(-17em); }
12.03% { transform: translate(30em, 15em) translateZ(-18em); }
12.10% { transform: translate(30em, 15em) translateZ(-17.5em); }
12.69%, 100% { transform: translate(30em, 15em) translateZ(15em); }
}
@keyframes b1Mp2TopPart {
00.00%, 11.59%, 12.25%, 12.32%, 13.51%, 100.0% { background: var(--top-accent-light); }
11.66%, 11.81%, 12.40%, 13.06% { background: white; }
}
@keyframes b1Mp2LeftPart {
00.00%, 11.59%, 12.25%, 12.32%, 13.51%, 100.0% { background: var(--left-accent-light); }
11.66%, 11.81%, 12.40%, 13.06% { background: white; }
}
@keyframes b1Mp2RightPart {
00.00%, 11.59%, 12.25%, 12.32%, 13.51%, 100.0% {
border-color: var(--right-accent-light);
background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
box-shadow: 0 0 6em 2em transparent; }
11.66%, 11.81%, 12.40%, 13.06% {
border-color: white;
background: linear-gradient(45deg, white 50%, white 0%);
box-shadow: 0 0 6em 2em white; }
}
@keyframes b1Mp1 {
00.00%, 19.19% { transform: translate(78em, -58em) translateZ(23em); }
19.78%, 25.46% { transform: translate(78em, -32em) translateZ(23em); }
25.83%, 100.0% { transform: translate(78em, -78em) translateZ(23em); }
}
@keyframes b1Mp1LeftPart {
00.00%, 19.19%, 20.81%, 25.46%, 26.57%, 100.0% {
border-color: var(--left-accent-light);
background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
box-shadow: 0 0 6em 2em transparent; }
19.41%, 20.37%, 25.53%, 26.13% {
border-color: white;
background: linear-gradient(45deg, white 50%, white 0%);
box-shadow: 0 0 6em 2em white; }
}
@keyframes b1Mp1TopPart {
00.00%, 19.19%, 20.81%, 25.46%, 26.57%, 100.0% { background: var(--top-accent-light); }
19.41%, 20.37%, 25.53%, 26.13% { background: white; }
}
@keyframes b1Mp1RightPart {
00.00%, 19.19%, 20.81%, 25.46%, 26.57%, 100.0% { background: var(--right-accent-light); }
19.41%, 20.37%, 25.53%, 26.13% { background: white; }
}
/* SECOND BUILDING */
@keyframes secondBuilding {
00.00%, 55.05%, 58.89%, 100.0% { transform: translate(15em, -78em) rotateX(55deg) rotateZ(-45deg); }
55.20% { transform: translate(15em, -78em) translate(0.75em, 0em) rotateX(55deg) rotateZ(-45deg); }
55.35% { transform: translate(15em, -78em) translate(0.5em, 1.5em) rotateX(55deg) rotateZ(-45deg); }
55.50% { transform: translate(15em, -78em) translate(-1em, 1.25em) rotateX(55deg) rotateZ(-45deg); }
55.65% { transform: translate(15em, -78em) translate(1em, -0.5em) rotateX(55deg) rotateZ(-45deg); }
55.79% { transform: translate(15em, -78em) translate(-0.5em, -0.75em) rotateX(55deg) rotateZ(-45deg); }
55.94% { transform: translate(15em, -78em) translate(-0.75em, 0.75em) rotateX(55deg) rotateZ(-45deg); }
56.09% { transform: translate(15em, -78em) translate(-0.25em, 0.5em) rotateX(55deg) rotateZ(-45deg); }
56.24% { transform: translate(15em, -78em) translate(0.5em, 0.5em) rotateX(55deg) rotateZ(-45deg); }
56.38% { transform: translate(15em, -78em) translate(-0.75em, 0.75em) rotateX(55deg) rotateZ(-45deg); }
56.53% { transform: translate(15em, -78em) translate(0.75em, -1em) rotateX(55deg) rotateZ(-45deg); }
56.68% { transform: translate(15em, -78em) translate(-0.75em, -0.5em) rotateX(55deg) rotateZ(-45deg); }
56.83% { transform: translate(15em, -78em) translate(-0.5em, -0.5em) rotateX(55deg) rotateZ(-45deg); }
56.97% { transform: translate(15em, -78em) translate(0.75em, 0.5em) rotateX(55deg) rotateZ(-45deg); }
57.12% { transform: translate(15em, -78em) translate(-0.75em, -0.75em) rotateX(55deg) rotateZ(-45deg); }
}
@keyframes b2Mp1 {
00.00%, 35.65%, 36.97%, 40.00%, 41.70%, 42.36%, 46.05%, 100.0% { transform: translate(15em, 15em) translateZ(46em); }
35.87%, 36.68%, 40.37%, 41.48% { transform: translate(15em, 15em) translateZ(15em); }
43.62%, 45.83% { transform: translate(15em, 15em) translateZ(30em); }
}
@keyframes b2Mp1TopPart {
00.00%, 35.57%, 37.86%, 39.93%, 44.50%, 45.76%, 46.79%, 100.0% { background: var(--top-accent-light); }
35.65%, 37.42%, 40.00%, 43.62%, 45.83%, 46.35% { background: white; }
}
@keyframes b2Mp1RightPart {
00.00%, 35.57%, 37.86%, 39.93%, 44.50%, 45.76%, 46.79%, 100.0% { background: var(--right-accent-light); }
35.65%, 37.42%, 40.00%, 43.62%, 45.83%, 46.35% { background: white; }
}
@keyframes b2Mp1LeftPart {
00.00%, 35.57%, 37.86%, 39.93%, 44.50%, 45.76%, 46.79%, 100.0% {
border: 1em solid var(--left-accent-light);
background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
box-shadow: 0 0 6em 2em transparent; }
35.65%, 37.42%, 40.00%, 43.62%, 45.83%, 46.35% {
border: 1em solid white;
background: linear-gradient(45deg, white 50%, white 0%);
box-shadow: 0 0 6em 2em white; }
}
@keyframes b2Mp2 {
00.00%, 35.65%, 36.97%, 40.00%, 41.70%, 42.36%, 46.05%, 100.0% { transform: translate(15em, 30em) translateZ(15em); }
35.87%, 36.68%, 40.37%, 41.48% { transform: translate(15em, 30em) translateZ(46em); }
43.62%, 45.83% { transform: translate(15em, 30em) translateZ(30em); }
}
@keyframes b2Mp3 {
00.00%, 55.13% { transform: translate(39em, 23em) translateZ(75em); }
55.87%, 55.94% { transform: translate(39em, 23em) translateZ(55em); }
56.01%, 100.0% { transform: translate(39em, 23em) translateZ(53em); }
}
@keyframes b2Mp4 {
00.00%, 49.74% { transform: translate(31em, 7em) translateZ(75em); }
50.18% { transform: translate(31em, -23em) translateZ(75em); }
49.96%, 50.63%, 52.47% { transform: translate(31em, -24em) translateZ(75em); }
52.77%, 100.0% { transform: translate(31em, 7em) translateZ(75em); }
}
@keyframes b2Mp4TopPart {
00.00%, 49.74%, 50.63%, 52.47%, 53.73%, 100.0% { background: var(--top-accent-light); }
49.82%, 49.96%, 52.55%, 52.77% { background: white; }
}
@keyframes b2Mp4RightPart {
00.00%, 49.74%, 50.63%, 52.47%, 53.73%, 100.0% { background: var(--right-accent-light); }
49.82%, 49.96%, 52.55%, 52.77% { background: white; }
}
@keyframes b2Mp4LeftPart {
00.00%, 49.74%, 50.63%, 52.47%, 53.73%, 100.0% {
border: 1em solid var(--left-accent-light);
background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
box-shadow: 0 0 6em 2em transparent; }
49.82%, 49.96%, 52.55%, 52.77% {
border: 1em solid white;
background: linear-gradient(45deg, white 50%, white 0%);
box-shadow: 0 0 6em 2em white; }
}
@keyframes b2Mp5 {
00.00%, 56.24% { transform: translate(54em, 14em) translateZ(75em); }
56.97% { transform: translate(54em, 15em) translateZ(74em); }
58.23% { transform: translate(54em, 24em) translateZ(68em); }
58.38% { transform: translate(54em, 25em) translateZ(67em); }
58.89% { transform: translate(54em, 30em) translateZ(63em); }
59.48% { transform: translate(54em, 35em) translateZ(57em); }
59.93% { transform: translate(54em, 40em) translateZ(53em); }
60.52% { transform: translate(54em, 47em) translateZ(47em); }
60.96% { transform: translate(54em, 51em) translateZ(41em); }
61.40% { transform: translate(54em, 55em) translateZ(20em); }
62.43% { transform: translate(54em, 65em) translateZ(17em); }
62.66% { transform: translate(54em, 67em) translateZ(17em); }
63.25% { transform: translate(54em, 71em) translateZ(15em); }
63.54% { transform: translate(54em, 74em) translateZ(13em) rotateY(7deg) rotateZ(26deg); }
63.84% { transform: translate(54em, 77em) translateZ(9em) rotateY(14deg) rotateZ(48deg); }
64.21% { transform: translate(54em, 80em) translateZ(9em) rotateX(-11deg) rotateY(14deg) rotateZ(64deg); }
64.80% { transform: translate(54em, 84em) translateZ(1em) rotateX(-9deg) rotateY(6deg) rotateZ(83deg); }
65.02% { transform: translate(54em, 84em) translateZ(-4em) rotateX(-9deg) rotateY(4deg) rotateZ(92deg); }
65.61% { transform: translate(52em, 83em) translateZ(-9em) rotateX(-5deg) rotateY(-11deg) rotateZ(95deg); }
66.20% { transform: translate(51em, 90em) translateZ(-16em) rotateX(-8deg) rotateY(-11deg) rotateZ(95deg); }
66.72% { transform: translate(44em, 90em) translateZ(-18em) rotateX(-7deg) rotateY(4deg) rotateZ(95deg); }
67.31% { transform: translate(45em, 89em) translateZ(-27em) rotateX(-15deg) rotateY(6deg) rotateZ(86deg); }
67.75% { transform: translate(46em, 89em) translateZ(-30em) rotateX(-13deg) rotateY(5deg) rotateZ(86deg); }
68.34% { transform: translate(46em, 91em) translateZ(-36em) rotateX(-3deg) rotateY(3deg) rotateZ(90deg); }
68.86% { transform: translate(46em, 93em) translateZ(-40em) rotateX(-3deg) rotateZ(90deg); }
69.30% { transform: translate(46em, 94em) translateZ(-41em) rotateZ(90deg); }
70.18% { transform: translate(46em, 102em) translateZ(-53em) rotateX(10deg) rotateZ(90deg); }
71.36% { transform: translate(31em, 115em) translateZ(-69em) rotateX(9deg) rotateZ(90deg); }
72.47%, 100.0% { transform: translate(18em, 151em) translateZ(-69em) rotateZ(90deg); }
}
@keyframes b2Mp5Cloud1 {
00.00%, 56.97% { transform: translate(-21em, 16em) scale(0); }
58.23% { transform: translate(-21em, 16em) scale(0.8); }
60.29% { transform: translate(-21em, 16em) scale(1); }
61.62% { transform: translate(-21em, 16em) scale(0.7); }
62.58% { transform: translate(-21em, 16em) scale(1); }
63.76% { transform: translate(-21em, 16em) scale(0.9); }
64.87% { transform: translate(-21em, 16em) scale(1); }
66.12% { transform: translate(-21em, 16em) scale(0.7); }
67.01% { transform: translate(-21em, 16em) scale(1); }
68.04% { transform: translate(-21em, 16em) scale(0.8); }
69.59% { transform: translate(-21em, 16em) scale(1); }
71.29% { transform: translate(-21em, 16em) scale(0.9); }
74.91%, 100.0% { transform: translate(-21em, 16em) scale(0); }
}
@keyframes b2Mp5Cloud2 {
00.00%, 56.97% { transform: translate(-12em, 17em) scale(0); }
58.23% { transform: translate(-12em, 17em) scale(0.9); }
58.89% { transform: translate(-12em, 17em) scale(0.7); }
60.29% { transform: translate(-12em, 17em) scale(1); }
61.25% { transform: translate(-12em, 17em) scale(0.8); }
62.14% { transform: translate(-12em, 17em) scale(1); }
63.62% { transform: translate(-12em, 17em) scale(0.9); }
64.65% { transform: translate(-12em, 17em) scale(1); }
65.39% { transform: translate(-12em, 17em) scale(0.7); }
66.05% { transform: translate(-12em, 17em) scale(1); }
67.23% { transform: translate(-12em, 17em) scale(0.9); }
68.78% { transform: translate(-12em, 17em) scale(1); }
69.52% { transform: translate(-12em, 17em) scale(0.8); }
70.26% { transform: translate(-12em, 17em) scale(1); }
71.07% { transform: translate(-12em, 17em) scale(0.9); }
72.32% { transform: translate(-12em, 17em) scale(0.8); }
74.91%, 100.0% { transform: translate(-12em, 17em) scale(0); }
}
@keyframes b2Mp5Cloud3 {
00.00%, 56.97% { transform: translate(6em, -30em) scale(0); }
58.23% { transform: translate(6em, -30em) scale(0.9); }
58.67% { transform: translate(6em, -30em) scale(0.7); }
58.97% { transform: translate(6em, -30em) scale(1); }
60.07% { transform: translate(6em, -30em) scale(0.8); }
61.03% { transform: translate(6em, -30em) scale(1); }
62.58% { transform: translate(6em, -30em) scale(0.9); }
64.06% { transform: translate(6em, -30em) scale(1); }
64.94% { transform: translate(6em, -30em) scale(0.7); }
65.90% { transform: translate(6em, -30em) scale(1); }
67.38% { transform: translate(6em, -30em) scale(0.9); }
68.34% { transform: translate(6em, -30em) scale(1); }
69.22% { transform: translate(6em, -30em) scale(0.7); }
70.18% { transform: translate(6em, -30em) scale(1); }
71.00% { transform: translate(6em, -30em) scale(0.8); }
72.32% { transform: translate(6em, -30em) scale(0.8); }
74.91%, 100.0% { transform: translate(6em, -30em) scale(0); }
}
@keyframes b2Mp5Cloud4 {
00.00%, 56.97% { transform: translate(16em, 11em) scale(0); }
58.23% { transform: translate(16em, 11em) scale(0.9); }
60.22% { transform: translate(16em, 11em) scale(0.7); }
61.11% { transform: translate(16em, 11em) scale(1); }
61.84% { transform: translate(16em, 11em) scale(0.8); }
62.29% { transform: translate(16em, 11em) scale(1); }
63.54% { transform: translate(16em, 11em) scale(0.9); }
65.02% { transform: translate(16em, 11em) scale(1); }
65.68% { transform: translate(16em, 11em) scale(0.8); }
66.35% { transform: translate(16em, 11em) scale(1); }
67.67% { transform: translate(16em, 11em) scale(0.7); }
68.49% { transform: translate(16em, 11em) scale(1); }
69.89% { transform: translate(16em, 11em) scale(0.8); }
70.41% { transform: translate(16em, 11em) scale(1); }
71.22% { transform: translate(16em, 11em) scale(0.9); }
72.03% { transform: translate(16em, 11em) scale(0.8); }
74.91%, 100.0% { transform: translate(16em, 11em) scale(0); }
}
@keyframes b2Mp5Cloud5 {
00.00%, 56.97% { transform: translate(-30em, 6em) scale(0); }
58.23% { transform: translate(-30em, 6em) scale(0.9); }
58.82% { transform: translate(-30em, 6em) scale(0.7); }
59.26% { transform: translate(-30em, 6em) scale(1); }
60.59% { transform: translate(-30em, 6em) scale(0.8); }
61.11% { transform: translate(-30em, 6em) scale(1); }
62.36% { transform: translate(-30em, 6em) scale(0.9); }
62.80% { transform: translate(-30em, 6em) scale(1); }
63.54% { transform: translate(-30em, 6em) scale(0.8); }
64.87% { transform: translate(-30em, 6em) scale(1); }
65.83% { transform: translate(-30em, 6em) scale(0.8); }
66.86% { transform: translate(-30em, 6em) scale(1); }
67.60% { transform: translate(-30em, 6em) scale(0.8); }
68.78% { transform: translate(-30em, 6em) scale(1); }
70.26% { transform: translate(-30em, 6em) scale(0.9); }
70.92% { transform: translate(-30em, 6em) scale(1); }
74.91%, 100.0% { transform: translate(-30em, 6em) scale(0); }
}
@keyframes b2Mp5Cloud6 {
00.00%, 56.97% { transform: translate(-13em, 1em) scale(0); }
58.23% { transform: translate(-13em, 1em) scale(0.7); }
60.29% { transform: translate(-13em, 1em) scale(1); }
61.62% { transform: translate(-13em, 1em) scale(0.9); }
62.58% { transform: translate(-13em, 1em) scale(1); }
63.76% { transform: translate(-13em, 1em) scale(0.8); }
64.87% { transform: translate(-13em, 1em) scale(1); }
66.12% { transform: translate(-13em, 1em) scale(0.7); }
67.01% { transform: translate(-13em, 1em) scale(1); }
68.04% { transform: translate(-13em, 1em) scale(0.7); }
69.59% { transform: translate(-13em, 1em) scale(1); }
71.29% { transform: translate(-13em, 1em) scale(0.8); }
74.91%, 100.0% { transform: translate(-13em, 1em) scale(0); }
}
@keyframes b2Mp5Cloud7 {
00.00%, 56.97% { transform: translate(-20em, 24em) scale(0); }
58.23% { transform: translate(-20em, 24em) scale(0.9); }
58.89% { transform: translate(-20em, 24em) scale(0.7); }
60.29% { transform: translate(-20em, 24em) scale(1); }
61.25% { transform: translate(-20em, 24em) scale(0.8); }
62.14% { transform: translate(-20em, 24em) scale(1); }
63.62% { transform: translate(-20em, 24em) scale(0.9); }
64.65% { transform: translate(-20em, 24em) scale(1); }
65.39% { transform: translate(-20em, 24em) scale(0.7); }
66.05% { transform: translate(-20em, 24em) scale(1); }
67.23% { transform: translate(-20em, 24em) scale(0.9); }
68.78% { transform: translate(-20em, 24em) scale(1); }
69.52% { transform: translate(-20em, 24em) scale(0.8); }
70.26% { transform: translate(-20em, 24em) scale(1); }
71.07% { transform: translate(-20em, 24em) scale(0.9); }
72.32% { transform: translate(-20em, 24em) scale(0.8); }
74.91%, 100.0% { transform: translate(-20em, 24em) scale(0); }
}
@keyframes b2Mp5Cloud8 {
00.00%, 56.97% { transform: translate(-15em, 14em) scale(0); }
58.23% { transform: translate(-15em, 14em) scale(0.9); }
58.67% { transform: translate(-15em, 14em) scale(0.7); }
58.97% { transform: translate(-15em, 14em) scale(1); }
60.07% { transform: translate(-15em, 14em) scale(0.8); }
61.03% { transform: translate(-15em, 14em) scale(1); }
62.58% { transform: translate(-15em, 14em) scale(0.9); }
64.06% { transform: translate(-15em, 14em) scale(1); }
64.94% { transform: translate(-15em, 14em) scale(0.7); }
65.90% { transform: translate(-15em, 14em) scale(1); }
67.38% { transform: translate(-15em, 14em) scale(0.9); }
68.34% { transform: translate(-15em, 14em) scale(1); }
69.22% { transform: translate(-15em, 14em) scale(0.7); }
70.18% { transform: translate(-15em, 14em) scale(1); }
71.00% { transform: translate(-15em, 14em) scale(0.7); }
72.32% { transform: translate(-15em, 14em) scale(0.8); }
74.91%, 100.0% { transform: translate(-15em, 14em) scale(0); }
}
@keyframes b2Mp5Cloud9 {
00.00%, 56.97% { transform: translate(-20em, 24em) scale(0); }
58.23% { transform: translate(-20em, 24em) scale(0.8); }
60.22% { transform: translate(-20em, 24em) scale(0.7); }
61.11% { transform: translate(-20em, 24em) scale(1); }
61.84% { transform: translate(-20em, 24em) scale(0.9); }
62.29% { transform: translate(-20em, 24em) scale(1); }
63.54% { transform: translate(-20em, 24em) scale(0.8); }
65.02% { transform: translate(-20em, 24em) scale(1); }
65.68% { transform: translate(-20em, 24em) scale(0.9); }
66.35% { transform: translate(-20em, 24em) scale(1); }
67.67% { transform: translate(-20em, 24em) scale(0.8); }
68.49% { transform: translate(-20em, 24em) scale(1); }
69.89% { transform: translate(-20em, 24em) scale(0.9); }
70.41% { transform: translate(-20em, 24em) scale(1); }
71.22% { transform: translate(-20em, 24em) scale(0.8); }
72.03% { transform: translate(-20em, 24em) scale(0.9); }
74.91%, 100.0% { transform: translate(-20em, 24em) scale(0); }
}
@keyframes b2Mp5Cloud10 {
00.00%, 56.97% { transform: translate(-21em, 14em) scale(0); }
58.23% { transform: translate(-21em, 14em) scale(0.9); }
58.82% { transform: translate(-21em, 14em) scale(0.7); }
59.26% { transform: translate(-21em, 14em) scale(1); }
60.59% { transform: translate(-21em, 14em) scale(0.8); }
61.11% { transform: translate(-21em, 14em) scale(1); }
62.36% { transform: translate(-21em, 14em) scale(0.9); }
62.80% { transform: translate(-21em, 14em) scale(1); }
63.54% { transform: translate(-21em, 14em) scale(0.8); }
64.87% { transform: translate(-21em, 14em) scale(1); }
65.83% { transform: translate(-21em, 14em) scale(0.8); }
66.86% { transform: translate(-21em, 14em) scale(1); }
67.60% { transform: translate(-21em, 14em) scale(0.8); }
68.78% { transform: translate(-21em, 14em) scale(1); }
70.26% { transform: translate(-21em, 14em) scale(0.9); }
70.92% { transform: translate(-21em, 14em) scale(1); }
74.91%, 100.0% { transform: translate(-21em, 14em) scale(0); }
}
@keyframes b2Mp6 {
00.00%, 56.97% { transform: translate(69em, -1em) translateZ(83em) rotateX(-90deg); }
58.23% { transform: translate(69em, 3em) translateZ(82em) rotateX(-90deg); }
58.38% { transform: translate(69em, 4em) translateZ(81em) rotateX(-90deg); }
58.89% { transform: translate(69em, 8em) translateZ(81em) rotateX(-90deg); }
59.48% { transform: translate(69em, 11em) translateZ(78em) rotateX(-90deg); }
59.93% { transform: translate(69em, 15em) translateZ(77em) rotateX(-90deg); }
60.52% { transform: translate(69em, 20em) translateZ(74em) rotateX(-90deg); }
60.96% { transform: translate(69em, 24em) translateZ(72em) rotateX(-90deg); }
61.40% { transform: translate(69em, 29em) translateZ(70em) rotateX(-90deg); }
62.43% { transform: translate(69em, 39em) translateZ(63em) rotateX(-90deg); }
62.66% { transform: translate(69em, 42em) translateZ(63em) rotateX(-90deg); }
63.25% { transform: translate(69em, 48em) translateZ(58em) rotateX(-90deg); }
63.54% { transform: translate(69em, 52em) translateZ(56em) rotateX(-90deg); }
63.84% { transform: translate(69em, 55em) translateZ(54em) rotateX(-90deg); }
64.21% { transform: translate(69em, 59em) translateZ(51em) rotateX(-90deg); }
64.80% { transform: translate(69em, 66em) translateZ(45em) rotateX(-90deg); }
65.02% { transform: translate(69em, 67em) translateZ(43em) rotateX(-90deg); }
65.61% { transform: translate(76em, 67em) translateZ(30em) rotateX(-90deg); }
66.20% { transform: translate(74em, 75em) translateZ(25em) rotateX(-90deg); }
66.72% { transform: translate(76em, 78em) translateZ(17em) rotateX(-90deg); }
67.31% { transform: translate(76em, 80em) translateZ(10em) rotateX(-90deg); }
67.75% { transform: translate(76em, 87em) translateZ(1em) rotateX(-90deg); }
68.34% { transform: translate(76em, 90em) translateZ(-4em) rotateX(-90deg); }
68.86% { transform: translate(76em, 94em) translateZ(-12em) rotateX(-90deg); }
69.30% { transform: translate(76em, 101em) translateZ(-19em) rotateX(-90deg); }
70.18% { transform: translate(76em, 104em) translateZ(-26em) rotateX(-90deg); }
71.36% { transform: translate(76em, 111em) translateZ(-42em) rotateX(-90deg); }
72.47% { transform: translate(76em, 114em) translateZ(-46em) rotateX(-90deg); }
74.91%, 100.0% { transform: translate(54em, 141em) translateZ(-53em) rotateX(-90deg); }
}
@keyframes b2Mp6Cloud1 {
00.00%, 56.97% { transform: translate(-50%, 17em) scale(0); }
58.23% { transform: translate(-50%, 17em) scale(1); }
60.29% { transform: translate(-50%, 17em) scale(0.9); }
61.62% { transform: translate(-50%, 17em) scale(1); }
62.58% { transform: translate(-50%, 17em) scale(0.8); }
63.76% { transform: translate(-50%, 17em) scale(0.9); }
64.87% { transform: translate(-50%, 17em) scale(1); }
66.12% { transform: translate(-50%, 17em) scale(0.7); }
67.01% { transform: translate(-50%, 17em) scale(1); }
68.04% { transform: translate(-50%, 17em) scale(0.9); }
69.59% { transform: translate(-50%, 17em) scale(1); }
71.29% { transform: translate(-50%, 17em) scale(0.7); }
74.91%, 100.0% { transform: translate(-50%, 17em) scale(0); }
}
@keyframes b2Mp6Cloud2 {
00.00%, 56.97% { transform: translate(-11em, 11em) scale(0); }
58.23% { transform: translate(-11em, 11em) scale(1); }
58.89% { transform: translate(-11em, 11em) scale(0.7); }
60.29% { transform: translate(-11em, 11em) scale(1); }
61.25% { transform: translate(-11em, 11em) scale(0.9); }
62.14% { transform: translate(-11em, 11em) scale(1); }
63.62% { transform: translate(-11em, 11em) scale(0.8); }
64.65% { transform: translate(-11em, 11em) scale(1); }
65.39% { transform: translate(-11em, 11em) scale(0.9); }
66.05% { transform: translate(-11em, 11em) scale(1); }
67.23% { transform: translate(-11em, 11em) scale(0.8); }
68.78% { transform: translate(-11em, 11em) scale(1); }
69.52% { transform: translate(-11em, 11em) scale(0.9); }
70.26% { transform: translate(-11em, 11em) scale(1); }
71.07% { transform: translate(-11em, 11em) scale(0.7); }
72.32% { transform: translate(-11em, 11em) scale(1); }
74.91%, 100.0% { transform: translate(-11em, 11em) scale(0); }
}
@keyframes b2Mp6Cloud3 {
00.00%, 56.97% { transform: translate(-50%, 20em) scale(0); }
58.23% { transform: translate(-50%, 20em) scale(0.8); }
58.67% { transform: translate(-50%, 20em) scale(1); }
58.97% { transform: translate(-50%, 20em) scale(0.9); }
60.07% { transform: translate(-50%, 20em) scale(1); }
61.03% { transform: translate(-50%, 20em) scale(0.7); }
62.58% { transform: translate(-50%, 20em) scale(1); }
64.06% { transform: translate(-50%, 20em) scale(0.9); }
64.94% { transform: translate(-50%, 20em) scale(1); }
65.90% { transform: translate(-50%, 20em) scale(0.8); }
67.38% { transform: translate(-50%, 20em) scale(1); }
68.34% { transform: translate(-50%, 20em) scale(0.9); }
69.22% { transform: translate(-50%, 20em) scale(1); }
70.18% { transform: translate(-50%, 20em) scale(0.7); }
71.00% { transform: translate(-50%, 20em) scale(1); }
72.32% { transform: translate(-50%, 20em) scale(0.8); }
74.91%, 100.0% { transform: translate(-50%, 20em) scale(0); }
}
@keyframes b2Mp6Cloud4 {
00.00%, 56.97% { transform: translate(-50%, 32em) scale(0); }
58.23% { transform: translate(-50%, 32em) scale(0.8); }
60.22% { transform: translate(-50%, 32em) scale(1); }
61.11% { transform: translate(-50%, 32em) scale(0.9); }
61.84% { transform: translate(-50%, 32em) scale(1); }
62.29% { transform: translate(-50%, 32em) scale(0.7); }
63.54% { transform: translate(-50%, 32em) scale(1); }
65.02% { transform: translate(-50%, 32em) scale(0.9); }
65.68% { transform: translate(-50%, 32em) scale(1); }
66.35% { transform: translate(-50%, 32em) scale(0.8); }
67.67% { transform: translate(-50%, 32em) scale(1); }
68.49% { transform: translate(-50%, 32em) scale(0.9); }
69.89% { transform: translate(-50%, 32em) scale(1); }
70.41% { transform: translate(-50%, 32em) scale(0.7); }
71.22% { transform: translate(-50%, 32em) scale(1); }
72.03% { transform: translate(-50%, 32em) scale(0.9); }
74.91%, 100.0% { transform: translate(-50%, 32em) scale(0); }
}
@keyframes b2Mp6Cloud5 {
00.00%, 56.97% { transform: translate(-1em, 25em) scale(0); }
58.23% { transform: translate(-1em, 25em) scale(0.7); }
58.67% { transform: translate(-1em, 25em) scale(1); }
58.97% { transform: translate(-1em, 25em) scale(0.8); }
60.07% { transform: translate(-1em, 25em) scale(1); }
61.03% { transform: translate(-1em, 25em) scale(0.9); }
62.58% { transform: translate(-1em, 25em) scale(1); }
64.06% { transform: translate(-1em, 25em) scale(0.8); }
64.94% { transform: translate(-1em, 25em) scale(1); }
65.90% { transform: translate(-1em, 25em) scale(0.8); }
67.38% { transform: translate(-1em, 25em) scale(1); }
68.34% { transform: translate(-1em, 25em) scale(0.9); }
69.22% { transform: translate(-1em, 25em) scale(1); }
70.18% { transform: translate(-1em, 25em) scale(0.7); }
71.00% { transform: translate(-1em, 25em) scale(1); }
72.32% { transform: translate(-1em, 25em) scale(0.8); }
74.91%, 100.0% { transform: translate(-1em, 25em) scale(0); }
}
@keyframes b2Mp6Cloud6 {
00.00%, 56.97% { transform: translate(-20em, 30em) scale(0); }
58.23% { transform: translate(-20em, 30em) scale(1); }
60.29% { transform: translate(-20em, 30em) scale(0.7); }
61.62% { transform: translate(-20em, 30em) scale(1); }
62.58% { transform: translate(-20em, 30em) scale(0.9); }
63.76% { transform: translate(-20em, 30em) scale(0.8); }
64.87% { transform: translate(-20em, 30em) scale(1); }
66.12% { transform: translate(-20em, 30em) scale(0.7); }
67.01% { transform: translate(-20em, 30em) scale(1); }
68.04% { transform: translate(-20em, 30em) scale(0.9); }
69.59% { transform: translate(-20em, 30em) scale(1); }
71.29% { transform: translate(-20em, 30em) scale(0.8); }
74.91%, 100.0% { transform: translate(-20em, 30em) scale(0); }
}
@keyframes Bridge1 {
00.00%, 66.72% { transform: translate(0em, 0em) translateZ(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
66.79% { transform: translate(6em, 7em) translateZ(6em) rotateX(10deg) rotateY(-30deg) rotateZ(50deg); }
67.31% { transform: translate(-3em, 37em) translateZ(22em) rotateX(-20deg) rotateY(10deg) rotateZ(30deg); }
67.75% { transform: translate(1em, 37em) translateZ(1em) rotateX(-110deg) rotateY(0deg) rotateZ(40deg); }
68.34% { transform: translate(-9em, 55em) translateZ(-28em) rotateX(-90deg) rotateY(16deg) rotateZ(30deg); }
68.86% { transform: translate(-29em, 105em) translateZ(-68em) rotateX(-80deg) rotateY(-14deg) rotateZ(40deg); }
69.30% { transform: translate(-29em, 155em) translateZ(-118em) rotateX(-80deg) rotateY(-14deg) rotateZ(40deg); }
69.31%, 100.0% { transform: translate(-999em, 999em) translateZ(-118em) rotateX(-80deg) rotateY(-14deg) rotateZ(40deg); }
}
@keyframes Bridge2 {
00.00%, 66.72% { transform: translate(0em, 8em) translateZ(0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
66.79% { transform: translate(-5em, 11em) translateZ(0em) rotateX(-110deg) rotateY(8deg) rotateZ(-30deg); }
67.31% { transform: translate(-11em, 31em) translateZ(0em) rotateX(-90deg) rotateY(-2deg) rotateZ(-30deg); }
67.75% { transform: translate(-4em, 56em) translateZ(8em) rotateX(-110deg) rotateY(18deg) rotateZ(70deg); }
68.34% { transform: translate(-12em, 78em) translateZ(-25em) rotateX(-90deg) rotateY(-72deg) rotateZ(100deg); }
68.86% { transform: translate(-21em, 101em) translateZ(-66em) rotateX(-130deg) rotateY(-109deg) rotateZ(100deg); }
69.30% { transform: translate(-21em, 191em) translateZ(-96em) rotateX(-100deg) rotateY(-159deg) rotateZ(140deg); }
69.31%, 100.0% { transform: translate(-999em, 999em) translateZ(-96em) rotateX(-100deg) rotateY(-159deg) rotateZ(140deg); }
}
@keyframes Bridge3 {
00.00%, 66.72% { transform: translate(13em, 0em) translateZ(0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
66.79% { transform: translate(17em, 7em) translateZ(10em) rotateX(-70deg) rotateY(-50deg) rotateZ(-10deg); }
67.31% { transform: translate(17em, 30em) translateZ(13em) rotateX(-30deg) rotateY(-50deg) rotateZ(-10deg); }
67.75% { transform: translate(2em, 82em) translateZ(29em) rotateX(0deg) rotateY(-100deg) rotateZ(-7deg); }
68.34% { transform: translate(2em, 96em) translateZ(-18em) rotateX(-60deg) rotateY(-130deg) rotateZ(-27deg); }
68.86% { transform: translate(2em, 146em) translateZ(-48em) rotateX(-40deg) rotateY(-150deg) rotateZ(-7deg); }
69.30% { transform: translate(2em, 196em) translateZ(-68em) rotateX(-20deg) rotateY(-170deg) rotateZ(13deg); }
69.31%, 100.0% { transform: translate(999em, 999em) translateZ(-68em) rotateX(-20deg) rotateY(-170deg) rotateZ(13deg); }
}
@keyframes Bridge4 {
00.00%, 66.72% { transform: translate(26em, 0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
66.79% { transform: translate(28em, 8em) translateZ(3em) rotateX(-70deg) rotateY(20deg) rotateZ(0deg); }
67.31% { transform: translate(30em, 32em) translateZ(3em) rotateX(-4deg) rotateY(20deg) rotateZ(0deg); }
67.75% { transform: translate(33em, 51em) translateZ(2em) rotateX(-14deg) rotateY(0deg) rotateZ(-10deg); }
68.34% { transform: translate(33em, 63em) translateZ(-46em) rotateX(6deg) rotateY(10deg) rotateZ(-20deg); }
68.86% { transform: translate(19em, 102em) translateZ(-86em) rotateX(16deg) rotateY(-40deg) rotateZ(-50deg); }
69.30% { transform: translate(19em, 162em) translateZ(-116em) rotateX(26deg) rotateY(-60deg) rotateZ(-60deg); }
69.31%, 100.0% { transform: translate(999em, 999em) translateZ(-116em) rotateX(26deg) rotateY(-60deg) rotateZ(-60deg); }
}
@keyframes Bridge5 {
00.00%, 66.72% { transform: translate(32em, 0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
66.79% { transform: translate(42em, 4em) translateZ(10em) rotateX(-70deg) rotateY(-50deg) rotateZ(-10deg); }
67.31% { transform: translate(43em, 28em) translateZ(-3em) rotateX(10deg) rotateY(-10deg) rotateZ(20deg); }
67.75% { transform: translate(42em, 54em) translateZ(8em) rotateX(-120deg) rotateY(-60deg) rotateZ(70deg); }
68.34% { transform: translate(42em, 79em) translateZ(-29em) rotateX(-160deg) rotateY(-77deg) rotateZ(70deg); }
68.86% { transform: translate(24em, 87em) translateZ(-79em) rotateX(10deg) rotateY(-90deg) rotateZ(73deg); }
69.30% { transform: translate(24em, 109em) translateZ(-109em) rotateX(20deg) rotateY(-100deg) rotateZ(83deg); }
69.31%, 100.0% { transform: translate(999em, 999em) translateZ(-109em) rotateX(20deg) rotateY(-100deg) rotateZ(83deg); }
}
@keyframes Bridge6 {
00.00%, 66.72% { transform: translate(48em, 0em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
66.79% { transform: translate(51em, 4em) translateZ(10em) rotateX(-110deg) rotateY(-20deg) rotateZ(-30deg); }
67.31% { transform: translate(57em, 20em) translateZ(4em) rotateX(-150deg) rotateY(-50deg) rotateZ(-60deg); }
67.75% { transform: translate(53em, 45em) translateZ(-10em) rotateX(-100deg) rotateY(-20deg) rotateZ(-60deg); }
68.34% { transform: translate(53em, 54em) translateZ(-42em) rotateX(-110deg) rotateY(-30deg) rotateZ(-73deg); }
68.86% { transform: translate(39em, 89em) translateZ(-74em) rotateX(-130deg) rotateY(-50deg) rotateZ(-73deg); }
69.30% { transform: translate(39em, 107em) translateZ(-94em) rotateX(-140deg) rotateY(-60deg) rotateZ(-53deg); }
69.31%, 100.0% { transform: translate(999em, 999em) translateZ(-94em) rotateX(-140deg) rotateY(-60deg) rotateZ(-53deg); }
}
@keyframes BridgeCloud1 {
00.00%, 66.20% { transform: translate(-16em, -1em)rotateY(-90deg) scale(0); }
66.72% { transform: translate(-22em, -1em)rotateY(-90deg) scale(1); }
69.37%, 100.0% { transform: translate(-22em, -1em)rotateY(-90deg) scale(0); }
}
@keyframes BridgeCloud2 {
00.00%, 66.20% { transform: translate(2em, -4em) translateZ(-6em) rotateY(-90deg) scale(0); }
66.72% { transform: translate(13em, -4em) translateZ(-6em) rotateY(-90deg) scale(1); }
69.37%, 100.0% { transform: translate(13em, -4em) translateZ(-6em) rotateY(-90deg) scale(0); }
}
@keyframes BridgeCloud3 {
00.00%, 66.20% { transform: translate(-25em, -24em) translateZ(6em) scale(0); }
66.72% { transform: translate(-25em, -24em) translateZ(6em) scale(1); }
69.37%, 100.0% { transform: translate(-25em, -24em) translateZ(6em) scale(0); }
}
@keyframes BridgeCloud4 {
00.00%, 66.20% { transform: translate(-2em, -7em) translateZ(-10em) rotateY(-90deg) scale(0); }
66.72% { transform: translate(-5em, -7em) translateZ(-10em) rotateY(-90deg) scale(1); }
69.37%, 100.0% { transform: translate(-5em, -7em) translateZ(-10em) rotateY(-90deg) scale(0); }
}
@keyframes b2Door1 {
00.00%, 34.10% {
background: linear-gradient(0deg, #3e212f, transparent), linear-gradient(90deg, #6d324c 10%, transparent 0%) -2em 0em/6em 3em repeat-x, linear-gradient(90deg, #733a55 10%, #814364 0%) 0em 0em/1em 6em repeat-x;
transform: translate(-12.8em, 4.3em) translateZ(0em) rotateX(-90deg); }
35.06%, 100.0% {
background: linear-gradient(90deg, #6d324c 10%, transparent 0%) -2em 0em/6em 3em repeat-x, linear-gradient(90deg, #733a55 10%, #814364 0%) 0em 0em/1em 6em repeat-x;
transform: translate(-12.8em, 4.3em) translateZ(0em) rotateX(0deg); }
}
/* THIRD BUILDING */
@keyframes thirdBuilding {
00.00%, 31.96% { transform: translate(145em, 151em) translateZ(-16em) rotateX(0deg); }
31.97%, 100.0% { transform: translate(115em, 151em) translateZ(-16em) rotateX(0deg); }
}
@keyframes b3Mp1 {
00.00%, 77.64% { transform: translate(-106em, 47em) translateZ(-88em) rotateX(-90deg); }
77.79%, 81.99% { transform: translate(-106em, 47em) translateZ(-51em) rotateX(-90deg); }
82.29%, 100.0% { transform: translate(-106em, 47em) translateZ(-67em) rotateX(-90deg); }
}
@keyframes b3Mp1DIV {
00.00%, 79.11% { transform: translateY(-22em) translateZ(0em) rotateX(0deg); }
79.26% { transform: translateY(-22em) translateZ(0em) rotateX(-2deg); }
79.41% { transform: translateY(-19em) translateZ(3em) rotateX(-9deg); }
79.63% { transform: translateY(-15em) translateZ(5em) rotateX(-18deg); }
79.70% { transform: translateY(-7em) translateZ(6em) rotateX(-21deg); }
79.93% { transform: translateY(-7em) translateZ(6em) rotateX(-90deg); }
81.99% { transform: translateY(-7em) translateZ(13em) rotateX(-90deg); }
82.29%, 100.0% { transform: translateY(-23em) translateZ(-3em) rotateX(-90deg); }
}
@keyframes b3Mp1TopPart {
00.00%, 77.64%, 78.60%, 81.99%, 83.32%, 100.0% { background: var(--top-accent-light); }
77.71%, 78.08%, 82.07%, 82.73% { background: white; }
}
@keyframes b3Mp1RightPart {
00.00%, 77.64%, 78.60%, 81.99%, 83.32%, 100.0% { background: var(--right-accent-light); }
77.71%, 78.08%, 82.07%, 82.73% { background: white; }
}
@keyframes b3Mp1LeftPart {
00.00%, 77.64%, 78.60%, 81.99%, 83.32%, 100.0% {
border: 1em solid var(--left-accent-light);
background: linear-gradient(45deg, var(--right-accent-dark) 50%, var(--left-accent-dark) 0%);
box-shadow: 0 0 6em 2em transparent; }
77.71%, 78.08%, 82.07%, 82.73% {
border-color: white;
background: linear-gradient(45deg, white 50%, white 0%);
box-shadow: 0 0 6em 2em white; }
}
@keyframes b3Mp2 {
00.00%, 72.77% { transform: translate(-98em, 55em) translateZ(-96em) rotateY(-90deg) rotateZ(-90deg); }
73.95% { transform: translate(-98em, 47em) translateZ(-96em) rotateY(-90deg) rotateZ(0deg); }
74.10% { transform: translate(-98em, 48em) translateZ(-96em) rotateY(-90deg) rotateZ(-7deg); }
74.32%, 100.0% { transform: translate(-98em, 47em) translateZ(-96em) rotateY(-90deg) rotateZ(0deg); }
}
@keyframes b3Mp3 {
00.00%, 76.60% { transform: translate(-37em, -2em) translateZ(-28em); }
76.90%, 92.91% { transform: translate(-53em, -10em) translateZ(-37em); }
93.14%, 100.0% { transform: translate(-37em, -2em) translateZ(-28em); }
}
@keyframes b3Mp3TopPart {
00.00%, 76.60%, 77.64%, 92.91%, 94.17%, 100.0% { background: var(--top-accent-light); }
76.90%, 77.19%, 92.99%, 93.14% { background: white; }
}
@keyframes b3Mp3LeftPart {
00.00%, 76.60%, 77.64%, 92.91%, 94.17%, 100.0% { background: var(--left-accent-light); }
76.90%, 77.19%, 92.99%, 93.14% { background: white; }
}
@keyframes b3Mp3RightPart {
00.00%, 76.60%, 77.64%, 92.91%, 94.17%, 100.0% {
border: 1em solid var(--right-accent-light);
background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
box-shadow: 0 0 6em 2em transparent; }
76.90%, 77.19%, 92.99%, 93.14% {
border-color: white;
background: linear-gradient(45deg, white 50%, white 0%);
box-shadow: 0 0 6em 2em white; }
}
@keyframes b3Mp4 {
00.00%, 94.76% { transform: translate(-13em, 18em) translateZ(0em); }
95.13%, 95.28%, 100.0% { transform: translate(-13em, 18em) translateZ(-28em); }
95.20% { transform: translate(-13em, 18em) translateZ(-25em); }
}
/* RO */
@keyframes ro {
00.00% { transform: translate(72em, 35em) translateZ(-32em) rotateX(0deg) rotateZ(0deg); }
09.96% { transform: translate(72em, 35em) translateZ(-32em) rotateX(0deg) rotateZ(0deg); }
10.18% { transform: translate(72em, 32em) translateZ(-32em) rotateX(0deg) rotateZ(0deg); }
11.22% { transform: translate(72em, 16em) translateZ(-16em) rotateX(0deg) rotateZ(0deg); }
11.51% { transform: translate(72em, 12em) translateZ(-16em) rotateX(0deg) rotateZ(0deg); }
13.51% { transform: translate(72em, 12em) translateZ(-16em) rotateX(0deg) rotateZ(0deg); }
13.73% { transform: translate(75em, 12em) translateZ(-15em) rotateX(0deg) rotateZ(0deg); }
14.17% { transform: translate(75em, 21em) translateZ(1em) rotateX(0deg) rotateZ(0deg); }
14.83% { transform: translate(86em, 21em) translateZ(1em) rotateX(0deg) rotateZ(0deg); }
15.50% { transform: translate(70em, 20em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
18.08% { transform: translate(18em, 19em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
18.60% { transform: translate(18em, 10em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
19.19% { transform: translate(18em, 1em) translateZ(23em) rotateX(0deg) rotateZ(0deg); }
19.41% { transform: translate(18em, -3em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
20.81% { transform: translate(18em, -3em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
23.76% { transform: translate(80em, -3em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
25.02% { transform: translate(80em, -27em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
25.46% { transform: translate(80em, -27em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
25.83% { transform: translate(80em, -74em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
26.86% { transform: translate(80em, -74em) translateZ(24em) rotateX(0deg) rotateZ(0deg); }
27.23% { transform: translate(43em, -43em) translateZ(61em) rotateX(0deg) rotateZ(0deg); }
29.52% { transform: translate(92em, -43em) translateZ(61em) rotateX(0deg) rotateZ(0deg); }
31.96% { transform: translate(50em, 50em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
32.47% { transform: translate(41em, 50em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
32.84% { transform: translate(41em, 42em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
37.93% { transform: translate(41em, 42em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
38.30% { transform: translate(41em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
39.48% { transform: translate(17em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
40.00% { transform: translate(17em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
40.37% { transform: translate(17em, 34em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
41.48% { transform: translate(17em, 34em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
41.70% { transform: translate(17em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
42.36% { transform: translate(17em, 34em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
43.62% { transform: translate(17em, 34em) translateZ(31em) rotateX(0deg) rotateZ(0deg); }
44.50% { transform: translate(17em, 34em) translateZ(31em) rotateX(0deg) rotateZ(0deg); }
45.39% { transform: translate(17em, 20em) translateZ(31em) rotateX(0deg) rotateZ(0deg); }
45.83% { transform: translate(17em, 20em) translateZ(31em) rotateX(0deg) rotateZ(0deg); }
46.05% { transform: translate(17em, 20em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
47.23% { transform: translate(17em, 20em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
47.60% { transform: translate(17em, 13em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
48.41% { transform: translate(35em, 13em) translateZ(47em) rotateX(0deg) rotateZ(0deg); }
48.63% { transform: translate(42em, -29em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
49.08% { transform: translate(42em, -19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
49.52% { transform: translate(49em, -19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
50.77% { transform: translate(49em, -19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
51.51% { transform: translate(33em, -19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
51.96% { transform: translate(33em, -12em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
52.47% { transform: translate(33em, -12em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
52.77% { transform: translate(33em, 19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
53.80% { transform: translate(33em, 19em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
54.17% { transform: translate(33em, 27em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
55.13% { transform: translate(56em, 27em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
56.24% { transform: translate(56em, 27em) translateZ(76em) rotateX(0deg) rotateZ(0deg); }
56.97% { transform: translate(56em, 28em) translateZ(75em) rotateX(0deg) rotateZ(0deg); }
58.23% { transform: translate(56em, 37em) translateZ(69em) rotateX(0deg) rotateZ(0deg); }
58.38% { transform: translate(56em, 38em) translateZ(68em) rotateX(0deg) rotateZ(0deg); }
58.89% { transform: translate(56em, 43em) translateZ(64em) rotateX(0deg) rotateZ(0deg); }
59.48% { transform: translate(56em, 48em) translateZ(58em) rotateX(0deg) rotateZ(0deg); }
59.93% { transform: translate(56em, 53em) translateZ(54em) rotateX(0deg) rotateZ(0deg); }
60.52% { transform: translate(56em, 60em) translateZ(48em) rotateX(0deg) rotateZ(0deg); }
60.96% { transform: translate(56em, 64em) translateZ(42em) rotateX(0deg) rotateZ(0deg); }
61.40% { transform: translate(56em, 68em) translateZ(21em) rotateX(0deg) rotateZ(0deg); }
62.43% { transform: translate(56em, 78em) translateZ(18em) rotateX(0deg) rotateZ(0deg); }
62.66% { transform: translate(56em, 80em) translateZ(18em) rotateX(0deg) rotateZ(0deg); }
63.25% { transform: translate(56em, 76em) translateZ(16em) rotateX(0deg) rotateZ(0deg); }
63.54% { transform: translate(56em, 78em) translateZ(13em) rotateX(0deg) rotateZ(0deg); }
63.84% { transform: translate(53em, 83em) translateZ(10em) rotateX(0deg) rotateZ(0deg); }
64.21% { transform: translate(51em, 85em) translateZ(9em) rotateX(0deg) rotateZ(0deg); }
64.80% { transform: translate(51em, 89em) translateZ(1em) rotateX(0deg) rotateZ(0deg); }
65.02% { transform: translate(50em, 88em) translateZ(-3em) rotateX(0deg) rotateZ(0deg); }
65.61% { transform: translate(48em, 87em) translateZ(-10em) rotateX(0deg) rotateZ(0deg); }
66.20% { transform: translate(47em, 94em) translateZ(-16em) rotateX(0deg) rotateZ(0deg); }
66.72% { transform: translate(53em, 96em) translateZ(-10em) rotateX(0deg) rotateZ(0deg); }
67.31% { transform: translate(55em, 94em) translateZ(-20em) rotateX(0deg) rotateZ(0deg); }
67.75% { transform: translate(55.5em, 94em) translateZ(-23em) rotateX(0deg) rotateZ(0deg); }
68.34% { transform: translate(55em, 96em) translateZ(-28em) rotateX(0deg) rotateZ(0deg); }
68.86% { transform: translate(55em, 98em) translateZ(-31em) rotateX(0deg) rotateZ(0deg); }
69.30% { transform: translate(55em, 99em) translateZ(-32em) rotateX(0deg) rotateZ(0deg); }
70.18% { transform: translate(61em, 114em) translateZ(-41em) rotateX(0deg) rotateZ(0deg); }
71.36% { transform: translate(39em, 134em) translateZ(-57em) rotateX(0deg) rotateZ(0deg); }
72.77% { transform: translate(27em, 171em) translateZ(-60em) rotateX(0deg) rotateZ(0deg); }
78.74% { transform: translate(27em, 171em) translateZ(-60em) rotateX(0deg) rotateZ(0deg); }
79.11% { transform: translate(12em, 195em) translateZ(-44em) rotateX(0deg) rotateZ(0deg); }
79.26% { transform: translate(12em, 195.5em) translateZ(-44em) rotateX(2deg) rotateZ(4deg); }
79.41% { transform: translate(12em, 201em) translateZ(-47em) rotateX(-10deg) rotateZ(14deg); }
79.63% { transform: translate(12em, 206em) translateZ(-51em) rotateX(-24deg) rotateZ(35deg); }
79.70% { transform: translate(12em, 208em) translateZ(-59em) rotateX(-30deg) rotateZ(41deg); }
79.93% { transform: translate(13em, 227em) translateZ(-77em) rotateX(-90deg) rotateZ(90deg); }
81.99% { transform: translate(13em, 234em) translateZ(-77em) rotateX(-90deg) rotateZ(90deg); }
82.29% { transform: translate(13em, 218em) translateZ(-77em) rotateX(-90deg) rotateZ(90deg); }
83.47% { transform: translate(13em, 218em) translateZ(-77em) rotateX(-90deg) rotateZ(90deg); }
84.57% { transform: translate(13em, 218em) translateZ(-106em) rotateX(-90deg) rotateZ(90deg); }
85.24% { transform: translate(40em, 218em) translateZ(-106em) rotateX(-90deg) rotateZ(90deg); }
85.68% { transform: translate(46em, 223em) translateZ(-106em) rotateX(-90deg) rotateZ(90deg); }
85.83% { transform: translate(49em, 223em) translateZ(-106em) rotateX(-90deg) rotateZ(90deg); }
86.79% { transform: translate(49em, 223em) translateZ(-87em) rotateX(-90deg) rotateZ(90deg); }
87.23% { transform: translate(49em, 215em) translateZ(-78em) rotateX(-90deg) rotateZ(90deg); }
87.67% { transform: translate(49em, 215em) translateZ(-67em) rotateX(-90deg) rotateZ(90deg); }
87.97% { transform: translate(49em, 215em) translateZ(-64em) rotateX(-66deg) rotateZ(80deg); }
88.19% { transform: translate(49em, 214em) translateZ(-62em) rotateX(-54deg) rotateZ(70deg); }
88.41% { transform: translate(49em, 211em) translateZ(-58em) rotateX(-43deg) rotateZ(50deg); }
88.63% { transform: translate(49em, 207em) translateZ(-55em) rotateX(-31deg) rotateZ(50deg); }
88.86% { transform: translate(49em, 203em) translateZ(-53em) rotateX(-18deg) rotateZ(27deg); }
89.00% { transform: translate(49em, 201em) translateZ(-53em) rotateX(0deg) rotateZ(0deg); }
91.73% { transform: translate(49em, 146em) translateZ(-52em) rotateX(0deg) rotateZ(0deg); }
92.91% { transform: translate(71em, 146em) translateZ(-52em) rotateX(0deg) rotateZ(0deg); }
93.14% { transform: translate(89em, 154em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
93.73% { transform: translate(89em, 154em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
94.17% { transform: translate(96em, 154em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
95.28% { transform: translate(96em, 154em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
95.79% { transform: translate(96em, 163em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
100.0% { transform: translate(96em, 163em) translateZ(-43em) rotateX(0deg) rotateZ(0deg); }
}
@keyframes roArmL {
00.00%, 96.01% { background: transparent; }
96.16%, 100.0% { background: white; }
00.00%, 96.01% { transform: translate(-3px, 5px) translateZ(30px) rotateX(-90deg) rotateZ(4deg); }
96.31% { transform: translate(-3px, 5px) translateZ(30px) rotateX(-90deg) rotateZ(-20deg); }
96.68%, 100.0% { transform: translate(-3px, 5px) translateZ(30px) rotateX(-90deg) rotateZ(-10deg); }
}
@keyframes roHandL {
00.00%, 96.31% { transform: translateY(8px) rotate(-10deg); }
96.68%, 100.0% { transform: translateY(8px) rotate(-40deg); }
00.00%, 96.01% { background: transparent; }
96.31%, 100.0% { background: white; }
}
@keyframes roArmR {
00.00%, 96.01% { transform: translate(4px, 0px) translateZ(24px) rotateX(-90deg) rotateY(0deg) rotateZ(-10deg); }
96.31%, 100.0% { transform: translate(4px, 0px) translateZ(24px) rotateX(-90deg) rotateY(0deg) rotateZ(-33deg); }
00.00%, 96.01% { background: transparent; }
96.16%, 100.0% { background: white; }
}
@keyframes roHandR {
00.00%, 96.01% {
transform: translate(0px, 8px) rotate(-10deg);
background: transparent; }
96.31%, 100.0% {
transform: translate(0px, 8px) rotate(-10deg);
background: white; }
}
@keyframes ro1 {
00.00%, 13.51%, 14.84%, 15.50%, 18.09%, 20.81%, 23.77%, 27.23%, 32.48%, 32.84%, 37.94%, 38.30%, 44.51%, 47.60%, 49.53%, 49.59%, 59.49%, 66.20%, 84.58%, 91.73% {
opacity: 1; }
13.52%, 14.83%, 15.51%, 18.08%, 20.82%, 23.76%, 27.24%, 32.47%, 32.85%, 37.93%, 38.31%, 44.50%, 47.61%, 49.52%, 49.60%, 59.48%, 66.21%, 84.57%, 91.74%, 100.0% {
opacity: 0; }
00.00%, 09.96%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 11.44%, 14.76%, 14.91%, 15.06%, 15.20%, 15.35%, 15.50%, 18.01%, 18.15%, 18.30%, 18.45%, 18.60%, 18.75%, 18.89%, 19.04%, 19.19%, 19.34%, 23.69%, 23.84%, 23.99%, 24.13%, 24.28%, 24.43%, 24.58%, 24.72%, 24.87%, 25.02%, 26.86%, 27.01%, 27.16%, 27.31%, 32.40%, 32.55%, 32.69%, 32.84%, 37.93%, 38.08%, 38.23%, 38.38%, 44.50%, 44.65%, 44.80%, 44.94%, 45.09%, 45.24%, 45.39%, 47.23%, 47.38%, 47.53%, 47.67%, 62.66%, 62.80%, 62.95%, 63.10%, 63.25%, 63.39%, 84.57%, 84.72%, 84.87%, 85.02%, 85.17%, 85.31%, 85.46%, 85.61%, 85.76%, 85.90%, 88.12%, 88.26%, 88.41%, 88.56%, 88.71%, 88.86%, 89.00%, 89.15%, 89.30%, 89.45%, 89.59%, 89.74%, 89.89%, 90.04%, 90.18%, 90.33%, 90.48%, 90.63%, 90.77%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 91.66%, 100.0% {
transform: rotateX(-90deg) scale(0.07); }
10.04%, 10.18%, 10.33%, 10.48%, 10.63%, 10.77%, 10.92%, 11.07%, 11.22%, 11.37%, 14.83%, 14.98%, 15.13%, 15.28%, 15.42%, 18.08%, 18.23%, 18.38%, 18.52%, 18.67%, 18.82%, 18.97%, 19.11%, 19.26%, 23.76%, 23.91%, 24.06%, 24.21%, 24.35%, 24.50%, 24.65%, 24.80%, 24.94%, 26.94%, 27.08%, 27.23%, 32.47%, 32.62%, 32.77%, 38.01%, 38.15%, 38.30%, 44.58%, 44.72%, 44.87%, 45.02%, 45.17%, 45.31%, 47.31%, 47.45%, 47.60%, 62.73%, 62.88%, 63.03%, 63.17%, 63.32%, 84.65%, 84.80%, 84.94%, 85.09%, 85.24%, 85.39%, 85.53%, 85.68%, 85.83%, 88.19%, 88.34%, 88.49%, 88.63%, 88.78%, 88.93%, 89.08%, 89.22%, 89.37%, 89.52%, 89.67%, 89.81%, 89.96%, 90.11%, 90.26%, 90.41%, 90.55%, 90.70%, 90.85%, 91.00%, 91.14%, 91.29%, 91.44%, 91.59% {
transform: translateZ(-2px) rotateX(-90deg) scale(0.07); }
}
@keyframes ro1LegL {
00.00%, 09.96%, 10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 11.51%, 14.76%, 14.98%, 15.28%, 15.57%, 18.01%, 18.23%, 18.52%, 18.82%, 19.11%, 19.41%, 23.69%, 23.91%, 24.21%, 24.50%, 24.80%, 25.02%, 26.86%, 27.08%, 27.31%, 32.40%, 32.62%, 32.84%, 37.93%, 38.15%, 38.38%, 44.50%, 44.72%, 45.02%, 45.31%, 47.23%, 47.45%, 47.67%, 62.66%, 62.88%, 63.17%, 63.39%, 84.57%, 84.80%, 85.09%, 85.39%, 85.68%, 85.90%, 88.12%, 88.34%, 88.63%, 88.93%, 89.22%, 89.52%, 89.81%, 90.11%, 90.41%, 90.70%, 91.00%, 91.29%, 91.59%, 91.73%, 100.0% {
transform: translate(13px, -187px) skewY(32deg) rotate(6deg); }
10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 14.83%, 15.13%, 15.42%, 18.08%, 18.38%, 18.67%, 18.97%, 19.26%, 23.76%, 24.06%, 24.35%, 24.65%, 24.94%, 26.94%, 27.23%, 32.47%, 32.77%, 38.01%, 38.30%, 44.58%, 44.87%, 45.17%, 47.31%, 47.60%, 62.73%, 63.03%, 63.32%, 84.65%, 84.94%, 85.24%, 85.53%, 85.83%, 88.19%, 88.49%, 88.78%, 89.08%, 89.37%, 89.67%, 89.96%, 90.26%, 90.55%, 90.85%, 91.14%, 91.44% {
transform: translate(13px, -187px) skewY(32deg) rotate(40deg); }
10.11%, 10.41%, 10.70%, 11.00%, 11.29%, 14.91%, 15.20%, 15.50%, 18.15%, 18.45%, 18.75%, 19.04%, 19.34%, 23.84%, 24.13%, 24.43%, 24.72%, 27.01%, 32.55%, 38.08%, 44.65%, 44.94%, 45.24%, 47.38%, 62.80%, 63.10%, 84.72%, 85.02%, 85.31%, 85.61%, 88.26%, 88.56%, 88.86%, 89.15%, 89.45%, 89.74%, 90.04%, 90.33%, 90.63%, 90.92%, 91.22%, 91.51% {
transform: translate(13px, -187px) skewY(32deg) rotate(20deg); }
10.26%, 10.55%, 10.85%, 11.14%, 11.44%, 15.06%, 15.35%, 18.30%, 18.60%, 18.89%, 19.19%, 23.99%, 24.28%, 24.58%, 24.87%, 27.16%, 32.69%, 38.23%, 44.80%, 45.09%, 47.53%, 62.95%, 63.25%, 84.87%, 85.17%, 85.46%, 85.76%, 88.41%, 88.71%, 89.00%, 89.30%, 89.59%, 89.89%, 90.18%, 90.48%, 90.77%, 91.07%, 91.36%, 91.66% {
transform: translate(13px, -187px) skewY(32deg) rotate(-20deg); }
}
@keyframes ro1KneeL {
00.00%, 09.96%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 14.76%, 14.91%, 15.06%, 15.20%, 15.35%, 15.50%, 18.01%, 18.15%, 18.30%, 18.45%, 18.60%, 18.75%, 18.89%, 19.04%, 19.19%, 19.34%, 23.69%, 23.84%, 23.99%, 24.13%, 24.28%, 24.43%, 24.58%, 24.72%, 24.87%, 25.02%, 26.86%, 27.01%, 27.16%, 27.31%, 32.40%, 32.55%, 32.69%, 32.84%, 37.93%, 38.08%, 38.23%, 38.38%, 44.50%, 44.65%, 44.80%, 44.94%, 45.09%, 45.24%, 47.23%, 47.38%, 47.53%, 47.67%, 62.66%, 62.80%, 62.95%, 63.10%, 63.25%, 63.39%, 84.57%, 84.72%, 84.87%, 85.02%, 85.17%, 85.31%, 85.46%, 85.61%, 85.76%, 85.90%, 88.12%, 88.26%, 88.41%, 88.56%, 88.71%, 88.86%, 89.00%, 89.15%, 89.30%, 89.45%, 89.59%, 89.74%, 89.89%, 90.04%, 90.18%, 90.33%, 90.48%, 90.63%, 90.77%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 100.0% {
transform: translate(-29px, 85px) rotate(-12deg); }
10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 14.83%, 15.13%, 15.42%, 18.08%, 18.38%, 18.67%, 18.97%, 19.26%, 23.76%, 24.06%, 24.35%, 24.65%, 24.94%, 26.94%, 27.23%, 32.47%, 32.77%, 38.01%, 38.30%, 44.58%, 44.87%, 45.17%, 47.31%, 47.60%, 62.73%, 63.03%, 63.32%, 84.65%, 84.94%, 85.24%, 85.53%, 85.83%, 88.19%, 88.49%, 88.78%, 89.08%, 89.37%, 89.67%, 89.96%, 90.26%, 90.55%, 90.85%, 91.14%, 91.44% {
transform: translate(-29px, 85px) rotate(-60deg); }
}
@keyframes ro1LegR {
00.00%, 10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 11.51%, 14.83%, 15.13%, 15.42%, 15.57%, 18.08%, 18.38%, 18.67%, 18.97%, 19.26%, 19.41%, 23.76%, 24.06%, 24.35%, 24.65%, 24.94%, 26.94%, 27.23%, 32.47%, 32.77%, 38.01%, 38.30%, 44.58%, 44.87%, 45.17%, 45.39%, 47.31%, 47.60%, 62.73%, 63.03%, 63.32%, 84.65%, 84.94%, 85.24%, 85.53%, 85.83%, 88.19%, 88.49%, 88.78%, 89.08%, 89.37%, 89.67%, 89.96%, 90.26%, 90.55%, 90.85%, 91.14%, 91.44%, 91.73%, 100.0% {
transform: translate(63px, -187px) skewY(32deg) rotate(6deg); }
10.11%, 10.41%, 10.70%, 11.00%, 11.29%, 14.91%, 15.20%, 15.50%, 18.15%, 18.45%, 18.75%, 19.04%, 19.34%, 23.84%, 24.13%, 24.43%, 24.72%, 27.01%, 32.55%, 38.08%, 44.65%, 44.94%, 45.24%, 47.38%, 62.80%, 63.10%, 84.72%, 85.02%, 85.31%, 85.61%, 88.26%, 88.56%, 88.86%, 89.15%, 89.45%, 89.74%, 90.04%, 90.33%, 90.63%, 90.92%, 91.22%, 91.51% {
transform: translate(63px, -187px) skewY(32deg) rotate(-20deg); }
10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 14.98%, 15.28%, 18.23%, 18.52%, 18.82%, 19.11%, 23.91%, 24.21%, 24.50%, 24.80%, 27.08%, 32.62%, 38.15%, 44.72%, 45.02%, 45.31%, 47.45%, 62.88%, 63.17%, 84.80%, 85.09%, 85.39%, 85.68%, 88.34%, 88.63%, 88.93%, 89.22%, 89.52%, 89.81%, 90.11%, 90.41%, 90.70%, 91.00%, 91.29%, 91.59% {
transform: translate(63px, -187px) skewY(32deg) rotate(40deg); }
10.26%, 10.55%, 10.85%, 11.14%, 11.44%, 15.06%, 15.35%, 18.30%, 18.60%, 18.89%, 19.19%, 23.99%, 24.28%, 24.58%, 24.87%, 27.16%, 32.69%, 38.23%, 44.80%, 45.09%, 47.53%, 62.95%, 63.25%, 84.87%, 85.17%, 85.46%, 85.76%, 88.41%, 88.71%, 89.00%, 89.30%, 89.59%, 89.89%, 90.18%, 90.48%, 90.77%, 91.07%, 91.36%, 91.66% {
transform: translate(63px, -187px) skewY(32deg) rotate(20deg); }
}
@keyframes ro1KneeR {
00.00%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 11.44%, 14.91%, 15.06%, 15.20%, 15.35%, 18.15%, 18.30%, 18.45%, 18.60%, 18.75%, 18.89%, 19.04%, 19.19%, 23.84%, 23.99%, 24.13%, 24.28%, 24.43%, 24.58%, 24.72%, 24.87%, 27.01%, 27.16%, 32.55%, 32.69%, 38.08%, 38.23%, 44.65%, 44.80%, 44.94%, 45.09%, 45.24%, 45.39%, 47.38%, 47.53%, 62.80%, 62.95%, 63.10%, 63.25%, 84.72%, 84.87%, 85.02%, 85.17%, 85.31%, 85.46%, 85.61%, 85.76%, 88.26%, 88.41%, 88.56%, 88.71%, 88.86%, 89.00%, 89.15%, 89.30%, 89.45%, 89.59%, 89.74%, 89.89%, 90.04%, 90.18%, 90.33%, 90.48%, 90.63%, 90.77%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 91.66%, 100.0% {
transform: translate(-29px, 85px) rotate(-12deg); }
10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 14.98%, 15.28%, 18.23%, 18.52%, 18.82%, 19.11%, 23.91%, 24.21%, 24.50%, 24.80%, 27.08%, 32.62%, 38.15%, 44.72%, 45.02%, 45.31%, 47.45%, 62.88%, 63.17%, 84.80%, 85.09%, 85.39%, 85.68%, 88.34%, 88.63%, 88.93%, 89.22%, 89.52%, 89.81%, 90.11%, 90.41%, 90.70%, 91.00%, 91.29%, 91.59% {
transform: translate(-29px, 85px) rotate(-60deg); }
}
@keyframes ro2 {
00.00%, 13.51%, 14.84%, 20.81%, 23.77%, 27.23%, 29.53%, 47.60%, 48.42%, 49.08%, 49.53%, 54.17%, 55.14%, 66.20%, 69.31%, 72.77%, 78.75%, 79.11%, 84.58%, 91.73%, 95.29%, 100.0% {
opacity: 0; }
13.52%, 14.83%, 20.82%, 23.76%, 27.24%, 29.52%, 47.61%, 48.41%, 49.09%, 49.52%, 54.18%, 55.13%, 66.21%, 69.30%, 72.78%, 78.74%, 79.12%, 84.57%, 91.74%, 95.28% {
opacity: 1; }
00.00%, 13.43%, 13.58%, 13.73%, 13.87%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 20.81%, 20.96%, 21.11%, 21.25%, 21.40%, 21.55%, 21.70%, 21.84%, 21.99%, 22.14%, 22.29%, 22.44%, 22.58%, 22.73%, 22.88%, 23.03%, 23.17%, 23.32%, 23.47%, 23.62%, 23.76%, 27.16%, 27.31%, 27.45%, 27.60%, 27.75%, 27.90%, 28.04%, 28.19%, 28.34%, 28.49%, 28.63%, 28.78%, 28.93%, 29.08%, 29.22%, 29.37%, 29.52%, 47.53%, 47.67%, 47.82%, 47.97%, 48.12%, 48.27%, 48.41%, 49.00%, 49.15%, 49.30%, 49.45%, 54.10%, 54.24%, 54.39%, 54.54%, 54.69%, 54.83%, 54.98%, 55.13%, 66.20%, 66.35%, 66.49%, 66.64%, 83.47%, 83.62%, 83.76%, 83.91%, 84.06%, 84.21%, 84.35%, 84.50%, 84.65%, 91.66%, 91.81%, 91.95%, 92.10%, 92.25%, 92.40%, 92.55%, 92.69%, 92.84%, 93.73%, 93.87%, 94.02%, 94.17%, 100.0% {
transform: rotateX(-90deg) scale(0.07); }
13.51%, 13.65%, 13.80%, 13.95%, 14.10%, 14.24%, 14.39%, 14.54%, 14.69%, 20.89%, 21.03%, 21.18%, 21.33%, 21.48%, 21.62%, 21.77%, 21.92%, 22.07%, 22.21%, 22.36%, 22.51%, 22.66%, 22.80%, 22.95%, 23.10%, 23.25%, 23.39%, 23.54%, 23.69%, 27.23%, 27.38%, 27.53%, 27.68%, 27.82%, 27.97%, 28.12%, 28.27%, 28.41%, 28.56%, 28.71%, 28.86%, 29.00%, 29.15%, 29.30%, 29.45%, 47.60%, 47.75%, 47.90%, 48.04%, 48.19%, 48.34%, 49.08%, 49.22%, 49.37%, 54.17%, 54.32%, 54.46%, 54.61%, 54.76%, 54.91%, 55.05%, 66.27%, 66.42%, 66.57%, 83.54%, 83.69%, 83.84%, 83.98%, 84.13%, 84.28%, 84.43%, 84.57%, 91.73%, 91.88%, 92.03%, 92.18%, 92.32%, 92.47%, 92.62%, 92.77%, 93.80%, 93.95%, 94.10% {
transform: translateZ(-2px) rotateX(-90deg) scale(0.07); }
}
@keyframes ro2LegL {
00.00%, 13.51%, 13.80%, 14.10%, 14.39%, 14.69%, 14.83%, 20.89%, 21.18%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 23.84%, 27.23%, 27.53%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 29.52%, 47.60%, 47.90%, 48.19%, 48.41%, 49.08%, 49.37%, 49.52%, 54.17%, 54.46%, 54.76%, 55.05%, 66.27%, 66.57%, 66.72%, 83.54%, 83.84%, 84.13%, 84.43%, 84.65%, 91.73%, 92.03%, 92.32%, 92.62%, 92.91%, 93.80%, 94.10%, 100.0% {
transform: translate(8px, -196px) skewY(10deg) rotate(-6deg); }
13.58%, 13.87%, 14.17%, 14.46%, 14.76%, 20.96%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 27.31%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 47.67%, 47.97%, 48.27%, 49.15%, 49.45%, 54.24%, 54.54%, 54.83%, 66.35%, 66.64%, 83.62%, 83.91%, 84.21%, 84.50%, 91.81%, 92.10%, 92.40%, 92.69%, 93.87% {
transform: translate(8px, -196px) skewY(10deg) rotate(20deg); }
13.65%, 13.95%, 14.24%, 14.54%, 21.03%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 27.38%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 47.75%, 48.04%, 48.34%, 49.22%, 54.32%, 54.61%, 54.91%, 66.42%, 83.69%, 83.98%, 84.28%, 84.57%, 91.88%, 92.18%, 92.47%, 92.77%, 93.95% {
transform: translate(8px, -196px) skewY(10deg) rotate(-40deg); }
13.73%, 14.02%, 14.32%, 14.61%, 21.11%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 27.45%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 47.82%, 48.12%, 49.30%, 54.39%, 54.69%, 54.98%, 66.49%, 83.76%, 84.06%, 84.35%, 91.95%, 92.25%, 92.55%, 92.84%, 94.02% {
transform: translate(8px, -196px) skewY(10deg) rotate(-20deg); }
}
@keyframes ro2KneeL {
00.00%, 13.58%, 13.73%, 13.87%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 20.96%, 21.11%, 21.25%, 21.40%, 21.55%, 21.70%, 21.84%, 21.99%, 22.14%, 22.29%, 22.44%, 22.58%, 22.73%, 22.88%, 23.03%, 23.17%, 23.32%, 23.47%, 23.62%, 23.76%, 27.31%, 27.45%, 27.60%, 27.75%, 27.90%, 28.04%, 28.19%, 28.34%, 28.49%, 28.63%, 28.78%, 28.93%, 29.08%, 29.22%, 29.37%, 29.52%, 47.67%, 47.82%, 47.97%, 48.12%, 48.27%, 48.41%, 49.15%, 49.30%, 54.24%, 54.39%, 54.54%, 54.69%, 54.83%, 54.98%, 66.35%, 66.49%, 83.62%, 83.76%, 83.91%, 84.06%, 84.21%, 84.35%, 84.50%, 84.65%, 91.81%, 91.95%, 92.10%, 92.25%, 92.40%, 92.55%, 92.69%, 92.84%, 93.87%, 94.02%, 100.0% {
transform: translateY(85px) rotate(12deg); }
13.65%, 13.95%, 14.24%, 14.54%, 21.03%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 27.38%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 47.75%, 48.04%, 48.34%, 49.22%, 54.32%, 54.61%, 54.91%, 66.42%, 83.69%, 83.98%, 84.28%, 84.57%, 91.88%, 92.18%, 92.47%, 92.77%, 93.95% {
transform: translateY(85px) rotate(60deg); }
}
@keyframes ro2LegR {
00.00%, 13.43%, 13.65%, 13.95%, 14.24%, 14.54%, 14.83%, 20.81%, 21.03%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 23.84%, 27.16%, 27.38%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 47.53%, 47.75%, 48.04%, 48.34%, 49.00%, 49.22%, 49.52%, 54.10%, 54.32%, 54.61%, 54.91%, 55.13%, 66.20%, 66.42%, 66.72%, 83.47%, 83.69%, 83.98%, 84.28%, 84.57%, 91.66%, 91.88%, 92.18%, 92.47%, 92.77%, 92.91%, 93.73%, 93.95%, 94.17%, 100.0% {
transform: translate(64px, -157px) skewY(10deg) rotate(-6deg); }
13.51%, 13.80%, 14.10%, 14.39%, 14.69%, 20.89%, 21.18%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 27.23%, 27.53%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 47.60%, 47.90%, 48.19%, 49.08%, 49.37%, 54.17%, 54.46%, 54.76%, 55.05%, 66.27%, 66.57%, 83.54%, 83.84%, 84.13%, 84.43%, 91.73%, 92.03%, 92.32%, 92.62%, 93.80%, 94.10% {
transform: translate(64px, -157px) skewY(10deg) rotate(-40deg); }
13.58%, 13.87%, 14.17%, 14.46%, 14.76%, 20.96%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 27.31%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 47.67%, 47.97%, 48.27%, 49.15%, 49.45%, 54.24%, 54.54%, 54.83%, 66.35%, 66.64%, 83.62%, 83.91%, 84.21%, 84.50%, 91.81%, 92.10%, 92.40%, 92.69%, 93.87% {
transform: translate(64px, -157px) skewY(10deg) rotate(-20deg); }
13.73%, 14.02%, 14.32%, 14.61%, 21.11%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 27.45%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 47.82%, 48.12%, 49.30%, 54.39%, 54.69%, 54.98%, 66.49%, 83.76%, 84.06%, 84.35%, 91.95%, 92.25%, 92.55%, 92.84%, 94.02% {
transform: translate(64px, -157px) skewY(10deg) rotate(20deg); }
}
@keyframes ro2KneeR {
00.00%, 13.43%, 13.58%, 13.73%, 13.87%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 20.81%, 20.96%, 21.11%, 21.25%, 21.40%, 21.55%, 21.70%, 21.84%, 21.99%, 22.14%, 22.29%, 22.44%, 22.58%, 22.73%, 22.88%, 23.03%, 23.17%, 23.32%, 23.47%, 23.62%, 27.16%, 27.31%, 27.45%, 27.60%, 27.75%, 27.90%, 28.04%, 28.19%, 28.34%, 28.49%, 28.63%, 28.78%, 28.93%, 29.08%, 29.22%, 29.37%, 47.53%, 47.67%, 47.82%, 47.97%, 48.12%, 48.27%, 49.00%, 49.15%, 49.30%, 49.45%, 54.10%, 54.24%, 54.39%, 54.54%, 54.69%, 54.83%, 54.98%, 55.13%, 66.20%, 66.35%, 66.49%, 66.64%, 83.47%, 83.62%, 83.76%, 83.91%, 84.06%, 84.21%, 84.35%, 84.50%, 91.66%, 91.81%, 91.95%, 92.10%, 92.25%, 92.40%, 92.55%, 92.69%, 93.73%, 93.87%, 94.02%, 94.17%, 100.0% {
transform: translateY(85px) rotate(12deg); }
13.51%, 13.80%, 14.10%, 14.39%, 14.69%, 20.89%, 21.18%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 27.23%, 27.53%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 47.60%, 47.90%, 48.19%, 49.08%, 49.37%, 54.17%, 54.46%, 54.76%, 55.05%, 66.27%, 66.57%, 83.54%, 83.84%, 84.13%, 84.43%, 91.73%, 92.03%, 92.32%, 92.62%, 93.80%, 94.10% {
transform: translateY(85px) rotate(60deg); }
}
@keyframes ro3 {
00.00%, 15.50%, 18.09%, 31.96%, 32.48%, 32.84%, 32.92%, 38.30%, 44.51%, 49.59%, 51.52%, 55.20%, 59.49%, 85.83%, 88.20%, 100.0% {
opacity: 0; }
15.51%, 18.08%, 31.97%, 32.47%, 32.85%, 32.91%, 38.31%, 44.50%, 49.60%, 51.51%, 55.21%, 59.48%, 85.84%, 88.19% {
opacity: 1; }
00.00%, 15.42%, 15.57%, 15.72%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 31.96%, 32.10%, 32.25%, 32.40%, 32.55%, 38.30%, 38.45%, 38.60%, 38.75%, 38.89%, 39.04%, 39.19%, 39.34%, 39.48%, 50.77%, 50.92%, 51.07%, 51.22%, 51.36%, 51.51%, 85.76%, 85.90%, 86.05%, 86.20%, 86.35%, 86.49%, 86.64%, 86.79%, 86.94%, 87.08%, 87.23%, 87.38%, 87.53%, 87.67%, 87.82%, 87.97%, 88.12%, 88.19%, 100.0% {
transform: rotateX(-90deg) scale(0.07); }
15.50%, 15.65%, 15.79%, 15.94%, 16.09%, 16.24%, 16.38%, 16.53%, 16.68%, 16.83%, 16.97%, 17.12%, 17.27%, 17.42%, 17.56%, 17.71%, 17.86%, 18.01%, 32.03%, 32.18%, 32.32%, 32.47%, 38.38%, 38.52%, 38.67%, 38.82%, 38.97%, 39.11%, 39.26%, 39.41%, 50.85%, 51.00%, 51.14%, 51.29%, 51.44%, 85.83%, 85.98%, 86.12%, 86.27%, 86.42%, 86.57%, 86.72%, 86.86%, 87.01%, 87.16%, 87.31%, 87.45%, 87.60%, 87.75%, 87.90%, 88.04% {
transform: translateZ(-2px) rotateX(-90deg) scale(0.07); }
}
@keyframes ro3LegL {
00.00%, 15.50%, 15.79%, 16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 18.15%, 32.03%, 32.32%, 32.55%, 38.38%, 38.67%, 38.97%, 39.26%, 39.48%, 50.85%, 51.14%, 51.44%, 51.59%, 85.83%, 86.12%, 86.42%, 86.72%, 87.01%, 87.31%, 87.60%, 87.90%, 88.19%, 100.0% {
transform: translate(8px, -196px) rotate(0deg); }
15.57%, 15.87%, 16.16%, 16.46%, 16.75%, 17.05%, 17.34%, 17.64%, 17.93%, 32.10%, 32.40%, 38.45%, 38.75%, 39.04%, 39.34%, 50.92%, 51.22%, 51.51%, 85.90%, 86.20%, 86.49%, 86.79%, 87.08%, 87.38%, 87.67%, 87.97% {
transform: translate(8px, -196px) rotate(-20deg); }
15.65%, 15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 32.18%, 32.47%, 38.52%, 38.82%, 39.11%, 39.41%, 51.00%, 51.29%, 85.98%, 86.27%, 86.57%, 86.86%, 87.16%, 87.45%, 87.75%, 88.04% {
transform: translate(8px, -196px) rotate(40deg); }
15.72%, 16.01%, 16.31%, 16.61%, 16.90%, 17.20%, 17.49%, 17.79%, 18.08%, 32.25%, 38.60%, 38.89%, 39.19%, 51.07%, 51.36%, 86.05%, 86.35%, 86.64%, 86.94%, 87.23%, 87.53%, 87.82%, 88.12% {
transform: translate(8px, -196px) rotate(20deg); }
}
@keyframes ro3KneeL {
00.00%, 15.57%, 15.72%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 32.10%, 32.25%, 32.40%, 32.55%, 38.45%, 38.60%, 38.75%, 38.89%, 39.04%, 39.19%, 39.34%, 39.48%, 50.92%, 51.07%, 51.22%, 51.36%, 85.90%, 86.05%, 86.20%, 86.35%, 86.49%, 86.64%, 86.79%, 86.94%, 87.08%, 87.23%, 87.38%, 87.53%, 87.67%, 87.82%, 87.97%, 88.12%, 100.0% {
transform: translate(-29px, 85px) rotate(-6deg); }
15.65%, 15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 32.18%, 32.47%, 38.52%, 38.82%, 39.11%, 39.41%, 51.00%, 51.29%, 85.98%, 86.27%, 86.57%, 86.86%, 87.16%, 87.45%, 87.75%, 88.04% {
transform: translate(-29px, 85px) rotate(-60deg); }
}
@keyframes ro3LegR {
00.00%, 15.42%, 15.65%, 15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 18.15%, 31.96%, 32.18%, 32.47%, 38.30%, 38.52%, 38.82%, 39.11%, 39.41%, 50.77%, 51.00%, 51.29%, 51.59%, 85.76%, 85.98%, 86.27%, 86.57%, 86.86%, 87.16%, 87.45%, 87.75%, 88.04%, 88.19%, 100.0% {
transform: translate(64px, -157px) rotate(0deg); }
15.50%, 15.79%, 16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 32.03%, 32.32%, 38.38%, 38.67%, 38.97%, 39.26%, 50.85%, 51.14%, 51.44%, 85.83%, 86.12%, 86.42%, 86.72%, 87.01%, 87.31%, 87.60%, 87.90% {
transform: translate(64px, -157px) rotate(40deg); }
15.57%, 15.87%, 16.16%, 16.46%, 16.75%, 17.05%, 17.34%, 17.64%, 17.93%, 32.10%, 32.40%, 38.45%, 38.75%, 39.04%, 39.34%, 50.92%, 51.22%, 51.51%, 85.90%, 86.20%, 86.49%, 86.79%, 87.08%, 87.38%, 87.67%, 87.97% {
transform: translate(64px, -157px) rotate(20deg); }
15.72%, 16.01%, 16.31%, 16.61%, 16.90%, 17.20%, 17.49%, 17.79%, 18.08%, 32.25%, 38.60%, 38.89%, 39.19%, 51.07%, 51.36%, 86.05%, 86.35%, 86.64%, 86.94%, 87.23%, 87.53%, 87.82%, 88.12% {
transform: translate(64px, -157px) rotate(-20deg); }
}
@keyframes ro3KneeR {
00.00%, 15.42%, 15.57%, 15.72%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 31.96%, 32.10%, 32.25%, 32.40%, 38.30%, 38.45%, 38.60%, 38.75%, 38.89%, 39.04%, 39.19%, 39.34%, 50.77%, 50.92%, 51.07%, 51.22%, 51.36%, 51.51%, 85.76%, 85.90%, 86.05%, 86.20%, 86.35%, 86.49%, 86.64%, 86.79%, 86.94%, 87.08%, 87.23%, 87.38%, 87.53%, 87.67%, 87.82%, 87.97%, 100.0% {
transform: translate(-29px, 85px) rotate(-6deg); }
15.50%, 15.79%, 16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 32.03%, 32.32%, 38.38%, 38.67%, 38.97%, 39.26%, 50.85%, 51.14%, 51.44%, 85.83%, 86.12%, 86.42%, 86.72%, 87.01%, 87.31%, 87.60%, 87.90% {
transform: translate(-29px, 85px) rotate(-60deg); }
}
@keyframes ro4 {
00.00%, 32.91%, 37.94%, 48.63%, 49.09%, 51.51%, 54.18%, 55.13%, 55.21%, 69.30%, 72.78%, 78.74%, 79.12%, 95.28% {
opacity: 0; }
32.92%, 37.93%, 48.64%, 49.08%, 51.52%, 54.17%, 55.14%, 55.20%, 69.31%, 72.77%, 78.75%, 79.11%, 95.29%, 100.0% {
opacity: 1; }
00.00%, 48.63%, 48.78%, 48.93%, 49.08%, 49.15%, 51.44%, 51.59%, 51.73%, 51.88%, 51.96%, 53.80%, 53.95%, 54.10%, 54.24%, 69.30%, 69.45%, 69.59%, 69.74%, 69.89%, 70.04%, 70.18%, 78.74%, 78.89%, 79.04%, 79.11%, 95.28%, 95.42%, 95.57%, 95.72%, 95.79%, 100.0% {
transform: rotateX(-90deg) scale(0.07); }
48.71%, 48.86%, 49.00%, 51.51%, 51.66%, 51.81%, 53.87%, 54.02%, 54.17%, 69.37%, 69.52%, 69.67%, 69.81%, 69.96%, 70.11%, 78.82%, 78.97%, 95.35%, 95.50%, 95.64% {
transform: translateZ(-2px) rotateX(-90deg) scale(0.07); }
}
@keyframes ro4LegL {
00.00%, 48.71%, 49.00%, 49.15%, 51.51%, 51.81%, 51.96%, 53.87%, 54.17%, 69.37%, 69.67%, 69.96%, 70.18%, 78.82%, 79.11%, 95.35%, 95.64%, 95.79%, 100.0% {
transform: translate(8px, -191px) skewY(42deg) rotate(0deg); }
48.78%, 49.08%, 51.59%, 51.88%, 53.95%, 69.45%, 69.74%, 70.04%, 78.89%, 95.42%, 95.72% {
transform: translate(8px, -191px) skewY(42deg) rotate(10deg); }
48.86%, 51.66%, 54.02%, 69.52%, 69.81%, 70.11%, 78.97%, 95.50% {
transform: translate(8px, -191px) skewY(42deg) rotate(-30deg); }
48.93%, 51.73%, 54.10%, 69.59%, 69.89%, 79.04%, 95.57% {
transform: translate(8px, -191px) skewY(42deg) rotate(-20deg); }
}
@keyframes ro4KneeL {
00.00%, 48.78%, 48.93%, 51.59%, 51.73%, 53.95%, 54.10%, 69.45%, 69.59%, 69.74%, 69.89%, 70.04%, 70.18%, 78.89%, 79.04%, 95.42%, 95.57%, 100.0% {
transform: translateY(85px) rotate(6deg); }
48.86%, 51.66%, 54.02%, 69.52%, 69.81%, 70.11%, 78.97%, 95.50% {
transform: translateY(85px) rotate(40deg); }
}
@keyframes ro4LegR {
00.00%, 48.63%, 48.86%, 49.15%, 51.44%, 51.66%, 51.96%, 53.80%, 54.02%, 54.24%, 69.30%, 69.52%, 69.81%, 70.11%, 78.74%, 78.97%, 79.11%, 95.28%, 95.50%, 95.79%, 100.0% {
transform: translate(57px, -189px) skewY(42deg) rotate(0deg); }
48.71%, 49.00%, 51.51%, 51.81%, 53.87%, 54.17%, 69.37%, 69.67%, 69.96%, 78.82%, 95.35%, 95.64% {
transform: translate(57px, -189px) skewY(42deg) rotate(-30deg); }
48.78%, 49.08%, 51.59%, 51.88%, 53.95%, 69.45%, 69.74%, 70.04%, 78.89%, 95.42%, 95.72% {
transform: translate(57px, -189px) skewY(42deg) rotate(-10deg); }
48.93%, 51.73%, 54.10%, 69.59%, 69.89%, 79.04%, 95.57% {
transform: translate(57px, -189px) skewY(42deg) rotate(20deg); }
}
@keyframes ro4KneeR {
00.00%, 48.63%, 48.78%, 48.93%, 49.08%, 51.44%, 51.59%, 51.73%, 51.88%, 53.80%, 53.95%, 54.10%, 54.24%, 69.30%, 69.45%, 69.59%, 69.74%, 69.89%, 70.04%, 78.74%, 78.89%, 95.28%, 95.42%, 95.57%, 95.72%, 100.0% {
transform: translateY(85px) rotate(6deg); }
48.71%, 49.00%, 51.51%, 51.81%, 53.87%, 54.17%, 69.37%, 69.67%, 69.96%, 78.82%, 95.35%, 95.64% {
transform: translateY(85px) rotate(40deg); }
}
@keyframes ro4Head {
00.00%, 96.16% { transform: translate(-50px, -562px) rotateX(0deg) skew(16deg, 15deg); }
96.60%, 100.0% { transform: translate(-4px, -532px) rotate(30deg) skew(23deg, -1deg); }
}
@keyframes ro4Face {
00.00%, 96.16% { transform: rotate(0deg); }
96.60%, 100.0% { transform: rotate(38deg); }
}
/* GIRL */
@keyframes girl {
00.00% { transform: translate(72em, 42em) translateZ(-32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
09.96% { transform: translate(72em, 42em) translateZ(-32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
10.48% { transform: translate(72em, 32em) translateZ(-32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
11.51% { transform: translate(72em, 21.75em) translateZ(-22em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
13.51% { transform: translate(72em, 21.75em) translateZ(-22em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
13.65% { transform: translate(72em, 16em) translateZ(-16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
14.02% { transform: translate(72em, 12em) translateZ(-16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
14.17% { transform: translate(75em, 13em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
14.69% { transform: translate(75em, 21em) translateZ(1em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
15.28% { transform: translate(86em, 21em) translateZ(1em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
15.94% { transform: translate(70em, 20em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
18.60% { transform: translate(18em, 19em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
19.04% { transform: translate(18em, 10em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
19.41% { transform: translate(18em, 4.5em) translateZ(19em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
20.81% { transform: translate(18em, 4.5em) translateZ(19em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
21.11% { transform: translate(18em, 1em) translateZ(23em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
21.25% { transform: translate(18em, -3em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
24.28% { transform: translate(80em, -3em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
25.02% { transform: translate(80em, -17em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
25.46% { transform: translate(80em, -17em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
25.83% { transform: translate(80em, -64em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
26.86% { transform: translate(80em, -64em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
27.60% { transform: translate(80em, -80em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
29.52% { transform: translate(82em, -43em) translateZ(61em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
29.59% { transform: translate(82em, -43em) translateZ(61em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
30.11% { transform: translate(91em, -43em) translateZ(61em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
33.06% { transform: translate(48em, 51em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
33.51% { transform: translate(41em, 51em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
37.93% { transform: translate(41em, 51em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
38.67% { transform: translate(41em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
39.48% { transform: translate(25em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
40.00% { transform: translate(25em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
40.37% { transform: translate(25em, 35em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
41.48% { transform: translate(25em, 35em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
41.70% { transform: translate(25em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
42.36% { transform: translate(25em, 35em) translateZ(16em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
43.62% { transform: translate(25em, 35em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
44.50% { transform: translate(25em, 35em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
44.87% { transform: translate(17em, 35em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
45.39% { transform: translate(17em, 28em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
45.83% { transform: translate(17em, 28em) translateZ(31em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
46.05% { transform: translate(18em, 28em) translateZ(46em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
47.23% { transform: translate(18em, 28em) translateZ(46em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
47.97% { transform: translate(18em, 12em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
48.41% { transform: translate(27em, 12em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
48.56% { transform: translate(27em, 12em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
49.00% { transform: translate(35em, 12em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
49.22% { transform: translate(41em, -28em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
49.67% { transform: translate(41em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
50.77% { transform: translate(41em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
51.14% { transform: translate(49em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
51.96% { transform: translate(33em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
52.47% { transform: translate(33em, -19em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
52.77% { transform: translate(33em, 12em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
53.80% { transform: translate(33em, 12em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
54.61% { transform: translate(33em, 27em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
55.13% { transform: translate(48em, 27em) translateZ(76em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
55.87% { transform: translate(48em, 27em) translateZ(55em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
55.94% { transform: translate(48em, 27em) translateZ(56em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
56.01% { transform: translate(48em, 27em) translateZ(54em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
59.93% { transform: translate(48em, 27em) translateZ(54em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
60.52% { transform: translate(48em, 38em) translateZ(54em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
60.96% { transform: translate(48em, 47em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
61.40% { transform: translate(48em, 53em) translateZ(47em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
62.43% { transform: translate(48em, 68em) translateZ(32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
62.66% { transform: translate(48em, 72em) translateZ(32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
66.20% { transform: translate(104em, 72em) translateZ(32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
67.16% { transform: translate(104em, 89em) translateZ(32em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
67.75% { transform: translate(104em, 97em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
68.86% { transform: translate(105em, 118em) translateZ(24em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
70.18% { transform: translate(105em, 119em) translateZ(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
71.36% { transform: translate(105em, 140em) translateZ(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
72.47% { transform: translate(105em, 157em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
73.43% { transform: translate(105em, 174em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
90.92% { transform: translate(105em, 174em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
91.73% { transform: translate(105em, 160em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
94.17% { transform: translate(105em, 160em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
94.76% { transform: translate(105em, 173em) translateZ(-15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
95.13% { transform: translate(105em, 173em) translateZ(-43em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
95.20% { transform: translate(105em, 173em) translateZ(-40em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
95.28% { transform: translate(105em, 173em) translateZ(-43em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
95.57% { transform: translate(97em, 173em) translateZ(-43em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
96.60% { transform: translate(96.5em, 164.5em) translateZ(-43em) rotateX(4deg) rotateY(0deg) rotateZ(-6deg); }
100.0% { transform: translate(96.5em, 164.5em) translateZ(-43em) rotateX(4deg) rotateY(0deg) rotateZ(-6deg); }
}
@keyframes girlArmL {
00.00% { transform: translate(-3px, 5px) translateZ(30px) rotateX(-90deg) rotateY(0deg) rotateZ(4deg); }
96.01% { transform: translate(-1px, 3px) translateZ(28px) rotateX(-90deg) rotateY(0deg) rotateZ(4deg); }
96.31%, 100.0% { transform: translate(-5px, 4px) translateZ(21px) rotateX(-90deg) rotateY(0deg) rotateZ(120deg); }
00.00%, 96.01% { background: transparent; }
96.16%, 100.0% { background: white; }
}
@keyframes girlHandL {
00.00%, 96.01% { transform: translateY(4px) rotateZ(70deg); }
96.31%, 100.0% { transform: translateY(4px) rotateZ(30deg); }
00.00%, 96.01% { background: transparent; }
96.31%, 100.0% { background: white; }
}
@keyframes girl1 {
00.00%, 14.02%, 15.29%, 15.94%, 18.60%, 21.25%, 24.29%, 27.60%, 33.52%, 38.67%, 44.88%, 47.97%, 68.94%, 70.18%, 90.93%, 91.73%, 95.58%, 100.0% {
opacity: 1; }
14.03%, 15.28%, 15.95%, 18.60%, 21.26%, 24.28%, 27.61%, 33.51%, 38.68%, 44.87%, 47.98%, 68.93%, 70.19%, 90.92%, 91.73%, 95.57% {
opacity: 0; }
00.00%, 09.97%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 11.44%, 13.51%, 13.65%, 13.80%, 13.95%, 14.10%, 15.20%, 15.35%, 15.50%, 15.65%, 15.79%, 15.94%, 18.52%, 18.67%, 18.82%, 18.97%, 19.11%, 19.26%, 19.41%, 20.81%, 20.96%, 21.11%, 21.25%, 24.21%, 24.35%, 24.50%, 24.65%, 24.80%, 24.94%, 26.86%, 27.01%, 27.16%, 27.31%, 27.45%, 27.60%, 44.80%, 44.94%, 45.09%, 45.24%, 45.39%, 47.23%, 47.38%, 47.53%, 47.67%, 47.82%, 47.97%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 91.66%, 95.50%, 95.64%, 95.79%, 95.94%, 96.09%, 96.24%, 96.38%, 96.53%, 96.60%, 100.0% {
transform: rotateX(-90deg) scale(0.06); }
10.04%, 10.18%, 10.33%, 10.48%, 10.63%, 10.77%, 10.92%, 11.07%, 11.22%, 11.37%, 13.58%, 13.73%, 13.87%, 14.02%, 15.28%, 15.42%, 15.57%, 15.72%, 15.87%, 18.60%, 18.75%, 18.89%, 19.04%, 19.19%, 19.34%, 20.89%, 21.03%, 21.18%, 24.28%, 24.43%, 24.58%, 24.72%, 24.87%, 26.94%, 27.08%, 27.23%, 27.38%, 27.53%, 44.87%, 45.02%, 45.17%, 45.31%, 47.31%, 47.45%, 47.60%, 47.75%, 47.90%, 91.00%, 91.14%, 91.29%, 91.44%, 91.59%, 95.57%, 95.72%, 95.87%, 96.01%, 96.16%, 96.31%, 96.46% {
transform: translateZ(-2px) rotateX(-90deg) scale(0.06); }
}
@keyframes girl1LegL {
00.00%, 09.97%, 10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 11.51%, 13.51%, 13.73%, 14.02%, 15.20%, 15.42%, 15.72%, 16.01%, 18.52%, 18.75%, 19.04%, 19.34%, 20.81%, 21.03%, 21.33%, 24.21%, 24.43%, 24.72%, 25.02%, 26.86%, 27.08%, 27.38%, 27.68%, 44.80%, 45.02%, 45.31%, 47.23%, 47.45%, 47.75%, 48.04%, 68.86%, 69.08%, 69.37%, 69.67%, 69.96%, 70.18%, 90.92%, 91.14%, 91.44%, 91.73%, 95.50%, 95.72%, 96.01%, 96.31%, 96.60%, 100.0% {
transform: translate(1px, -136px) skewY(21deg) rotate(0deg); }
10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 13.58%, 13.87%, 15.28%, 15.57%, 15.87%, 18.60%, 18.89%, 19.19%, 20.89%, 21.18%, 24.28%, 24.58%, 24.87%, 26.94%, 27.23%, 27.53%, 44.87%, 45.17%, 47.31%, 47.60%, 47.90%, 91.00%, 91.29%, 91.59%, 95.57%, 95.87%, 96.16%, 96.46% {
transform: translate(1px, -136px) skewY(21deg) rotate(40deg); }
10.11%, 10.41%, 10.70%, 11.00%, 11.29%, 13.65%, 13.95%, 15.35%, 15.65%, 15.94%, 18.67%, 18.97%, 19.26%, 20.96%, 21.25%, 24.35%, 24.65%, 24.94%, 27.01%, 27.31%, 27.60%, 44.94%, 45.24%, 47.38%, 47.67%, 47.97%, 91.07%, 91.36%, 91.66%, 95.64%, 95.94%, 96.24%, 96.53% {
transform: translate(1px, -136px) skewY(21deg) rotate(20deg); }
10.26%, 10.55%, 10.85%, 11.14%, 11.44%, 13.80%, 15.50%, 15.79%, 18.82%, 19.11%, 21.11%, 24.50%, 24.80%, 27.16%, 27.45%, 45.09%, 47.53%, 47.82%, 91.22%, 91.51%, 95.79%, 96.09%, 96.38% {
transform: translate(1px, -136px) skewY(21deg) rotate(-20deg); }
68.93%, 69.22%, 69.52%, 69.81%, 70.11% {
transform: translate(1px, -136px) skewY(21deg) rotate(110deg); }
}
@keyframes girl1KneeL {
00.00%, 09.97%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 13.51%, 13.65%, 13.80%, 13.95%, 15.20%, 15.35%, 15.50%, 15.65%, 15.79%, 15.94%, 18.52%, 18.67%, 18.82%, 18.97%, 19.11%, 19.26%, 20.81%, 20.96%, 21.11%, 21.25%, 24.21%, 24.35%, 24.50%, 24.65%, 24.80%, 24.94%, 26.86%, 27.01%, 27.16%, 27.31%, 27.45%, 27.60%, 44.80%, 44.94%, 45.09%, 45.24%, 47.23%, 47.38%, 47.53%, 47.67%, 47.82%, 47.97%, 68.86%, 69.08%, 69.37%, 69.67%, 69.96%, 70.18%, 90.92%, 91.07%, 91.22%, 91.36%, 91.51%, 91.66%, 95.50%, 95.64%, 95.79%, 95.94%, 96.09%, 96.24%, 96.38%, 96.53%, 100.0% {
transform: translate(-18px, 52px) rotate(0deg); }
10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 13.58%, 13.87%, 15.28%, 15.57%, 15.87%, 18.60%, 18.89%, 19.19%, 20.89%, 21.18%, 24.28%, 24.58%, 24.87%, 26.94%, 27.23%, 27.53%, 44.87%, 45.17%, 47.31%, 47.60%, 47.90%, 91.00%, 91.29%, 91.59%, 95.57%, 95.87%, 96.16%, 96.46% {
transform: translate(-18px, 52px) rotate(-60deg); }
68.93%, 69.22%, 69.52%, 69.81%, 70.11% {
transform: translate(-18px, 52px) rotate(-120deg); }
}
@keyframes girl1LegR {
00.00%, 10.04%, 10.33%, 10.63%, 10.92%, 11.22%, 11.51%, 13.58%, 13.87%, 14.10%, 15.28%, 15.57%, 15.87%, 16.01%, 18.60%, 18.89%, 19.19%, 19.41%, 20.89%, 21.18%, 21.33%, 24.28%, 24.58%, 24.87%, 25.02%, 26.94%, 27.23%, 27.53%, 27.68%, 44.87%, 45.17%, 45.39%, 47.31%, 47.60%, 47.90%, 48.04%, 68.93%, 69.22%, 69.52%, 69.81%, 70.11%, 91.00%, 91.29%, 91.59%, 91.73%, 95.57%, 95.87%, 96.16%, 96.46%, 96.60%, 100.0% {
transform: translate(45px, -132px) skewY(21deg) rotate(0deg); }
10.11%, 10.41%, 10.70%, 11.00%, 11.29%, 13.65%, 13.95%, 15.35%, 15.65%, 15.94%, 18.67%, 18.97%, 19.26%, 20.96%, 21.25%, 24.35%, 24.65%, 24.94%, 27.01%, 27.31%, 27.60%, 44.94%, 45.24%, 47.38%, 47.67%, 47.97%, 91.07%, 91.36%, 91.66%, 95.64%, 95.94%, 96.24%, 96.53% {
transform: translate(45px, -132px) skewY(21deg) rotate(-20deg); }
10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 13.73%, 14.02%, 15.42%, 15.72%, 18.75%, 19.04%, 19.34%, 21.03%, 24.43%, 24.72%, 27.08%, 27.38%, 45.02%, 45.31%, 47.45%, 47.75%, 91.14%, 91.44%, 95.72%, 96.01%, 96.31% {
transform: translate(45px, -132px) skewY(21deg) rotate(40deg); }
10.26%, 10.55%, 10.85%, 11.14%, 11.44%, 13.80%, 15.50%, 15.79%, 18.82%, 19.11%, 21.11%, 24.50%, 24.80%, 27.16%, 27.45%, 45.09%, 47.53%, 47.82%, 91.22%, 91.51%, 95.79%, 96.09%, 96.38% {
transform: translate(45px, -132px) skewY(21deg) rotate(20deg); }
69.08%, 69.37%, 69.67%, 69.96% {
transform: translate(45px, -132px) skewY(21deg) rotate(200deg); }
}
@keyframes girl1KneeR {
00.00%, 10.11%, 10.26%, 10.41%, 10.55%, 10.70%, 10.85%, 11.00%, 11.14%, 11.29%, 11.44%, 13.65%, 13.80%, 13.95%, 14.10%, 15.35%, 15.50%, 15.65%, 15.79%, 18.67%, 18.82%, 18.97%, 19.11%, 19.26%, 19.41%, 20.96%, 21.11%, 24.35%, 24.50%, 24.65%, 24.80%, 27.01%, 27.16%, 27.31%, 27.45%, 44.94%, 45.09%, 45.24%, 45.39%, 47.38%, 47.53%, 47.67%, 47.82%, 68.93%, 69.22%, 69.52%, 69.81%, 70.11%, 91.07%, 91.22%, 91.36%, 91.51%, 95.64%, 95.79%, 95.94%, 96.09%, 96.24%, 96.38%, 100.0% {
transform: translate(-18px, 52px) rotate(0deg); }
10.18%, 10.48%, 10.77%, 11.07%, 11.37%, 13.73%, 14.02%, 15.42%, 15.72%, 18.75%, 19.04%, 19.34%, 21.03%, 24.43%, 24.72%, 27.08%, 27.38%, 45.02%, 45.31%, 47.45%, 47.75%, 69.08%, 69.37%, 69.67%, 69.96%, 91.14%, 91.44%, 95.72%, 96.01%, 96.31% {
transform: translate(-18px, 52px) rotate(-60deg); }
}
@keyframes girl2 {
00.00%, 14.02%, 15.29%, 21.25%, 24.29%, 27.60%, 30.12%, 47.97%, 49.01%, 49.67%, 51.15%, 54.61%, 59.49%, 62.66%, 66.21%, 68.86%, 68.94%, 100.0% {
opacity: 0; }
14.03%, 15.28%, 21.26%, 24.28%, 27.61%, 30.11%, 47.98%, 49.00%, 49.68%, 51.14%, 54.62%, 59.48%, 62.67%, 66.20%, 68.87%, 68.93% {
opacity: 1; }
00.00%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 14.91%, 15.06%, 15.20%, 15.35%, 21.18%, 21.33%, 21.48%, 21.62%, 21.77%, 21.92%, 22.07%, 22.21%, 22.36%, 22.51%, 22.66%, 22.80%, 22.95%, 23.10%, 23.25%, 23.39%, 23.54%, 23.69%, 23.84%, 23.99%, 24.13%, 24.28%, 27.53%, 27.68%, 27.82%, 27.97%, 28.12%, 28.27%, 28.41%, 28.56%, 28.71%, 28.86%, 29.00%, 29.15%, 29.30%, 29.45%, 29.59%, 29.74%, 29.89%, 47.90%, 48.04%, 48.19%, 48.34%, 48.56%, 48.71%, 48.86%, 49.00%, 50.77%, 50.92%, 51.07%, 51.22%, 54.54%, 54.69%, 54.83%, 54.98%, 55.13%, 62.58%, 62.73%, 62.88%, 63.03%, 63.17%, 63.32%, 63.47%, 63.62%, 63.76%, 63.91%, 64.06%, 64.21%, 64.35%, 64.50%, 64.65%, 64.80%, 64.94%, 65.09%, 65.24%, 65.39%, 65.53%, 65.68%, 65.83%, 65.98%, 66.12%, 100.0% {
transform: rotateX(-90deg) scale(0.06); }
14.10%, 14.24%, 14.39%, 14.54%, 14.69%, 14.83%, 14.98%, 15.13%, 15.28%, 21.25%, 21.40%, 21.55%, 21.70%, 21.84%, 21.99%, 22.14%, 22.29%, 22.44%, 22.58%, 22.73%, 22.88%, 23.03%, 23.17%, 23.32%, 23.47%, 23.62%, 23.76%, 23.91%, 24.06%, 24.21%, 27.60%, 27.75%, 27.90%, 28.04%, 28.19%, 28.34%, 28.49%, 28.63%, 28.78%, 28.93%, 29.08%, 29.22%, 29.37%, 29.67%, 29.82%, 47.97%, 48.12%, 48.27%, 48.63%, 48.78%, 48.93%, 50.85%, 51.00%, 51.14%, 54.61%, 54.76%, 54.91%, 55.05%, 62.66%, 62.80%, 62.95%, 63.10%, 63.25%, 63.39%, 63.54%, 63.69%, 63.84%, 63.98%, 64.13%, 64.28%, 64.43%, 64.58%, 64.72%, 64.87%, 65.02%, 65.17%, 65.31%, 65.46%, 65.61%, 65.76%, 65.90%, 66.05% {
transform: translateZ(-2px) rotateX(-90deg) scale(0.06); }
}
@keyframes girl2LegL {
00.00%, 14.10%, 14.39%, 14.69%, 14.98%, 15.28%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 23.91%, 24.21%, 24.35%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 29.52%, 29.67%, 29.96%, 47.97%, 48.27%, 48.41%, 48.63%, 48.93%, 50.85%, 51.14%, 54.61%, 54.91%, 55.20%, 62.66%, 62.95%, 63.25%, 63.54%, 63.84%, 64.13%, 64.43%, 64.72%, 65.02%, 65.31%, 65.61%, 65.90%, 66.20%, 100.0% {
transform: translate(1px, -141px) skewY(22deg) rotate(0deg); }
14.17%, 14.46%, 14.76%, 15.06%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 23.99%, 24.28%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 29.74%, 48.04%, 48.34%, 48.71%, 50.92%, 54.69%, 54.98%, 62.73%, 63.03%, 63.32%, 63.62%, 63.91%, 64.21%, 64.50%, 64.80%, 65.09%, 65.39%, 65.68%, 65.98% {
transform: translate(1px, -141px) skewY(22deg) rotate(20deg); }
14.24%, 14.54%, 14.83%, 15.13%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 24.06%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 29.82%, 48.12%, 48.78%, 51.00%, 54.76%, 55.05%, 62.80%, 63.10%, 63.39%, 63.69%, 63.98%, 64.28%, 64.58%, 64.87%, 65.17%, 65.46%, 65.76%, 66.05% {
transform: translate(1px, -141px) skewY(22deg) rotate(-40deg); }
14.32%, 14.61%, 14.91%, 15.20%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 23.84%, 24.13%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 29.89%, 48.19%, 48.86%, 51.07%, 54.83%, 55.13%, 62.88%, 63.17%, 63.47%, 63.76%, 64.06%, 64.35%, 64.65%, 64.94%, 65.24%, 65.53%, 65.83%, 66.12% {
transform: translate(1px, -141px) skewY(22deg) rotate(-20deg); }
}
@keyframes girl2KneeL {
00.00%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 14.91%, 15.06%, 15.20%, 21.33%, 21.48%, 21.62%, 21.77%, 21.92%, 22.07%, 22.21%, 22.36%, 22.51%, 22.66%, 22.80%, 22.95%, 23.10%, 23.25%, 23.39%, 23.54%, 23.69%, 23.84%, 23.99%, 24.13%, 27.68%, 27.82%, 27.97%, 28.12%, 28.27%, 28.41%, 28.56%, 28.71%, 28.86%, 29.00%, 29.15%, 29.30%, 29.74%, 29.89%, 48.04%, 48.19%, 48.71%, 48.86%, 50.92%, 51.07%, 54.69%, 54.83%, 54.98%, 55.13%, 62.73%, 62.88%, 63.03%, 63.17%, 63.32%, 63.47%, 63.62%, 63.76%, 63.91%, 64.06%, 64.21%, 64.35%, 64.50%, 64.65%, 64.80%, 64.94%, 65.09%, 65.24%, 65.39%, 65.53%, 65.68%, 65.83%, 65.98%, 66.12%, 100.0% {
transform: translateY(52px) rotate(0deg); }
14.24%, 14.54%, 14.83%, 15.13%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 24.06%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 29.82%, 48.12%, 48.78%, 51.00%, 54.76%, 55.05%, 62.80%, 63.10%, 63.39%, 63.69%, 63.98%, 64.28%, 64.58%, 64.87%, 65.17%, 65.46%, 65.76%, 66.05% {
transform: translateY(52px) rotate(60deg); }
}
@keyframes girl2LegR {
00.00%, 14.02%, 14.24%, 14.54%, 14.83%, 15.13%, 15.35%, 21.18%, 21.40%, 21.70%, 21.99%, 22.29%, 22.58%, 22.88%, 23.17%, 23.47%, 23.76%, 24.06%, 24.35%, 27.53%, 27.75%, 28.04%, 28.34%, 28.63%, 28.93%, 29.22%, 29.52%, 29.59%, 29.82%, 29.96%, 47.90%, 48.12%, 48.41%, 48.56%, 48.78%, 49.00%, 50.77%, 51.00%, 51.22%, 54.54%, 54.76%, 55.05%, 55.20%, 62.58%, 62.80%, 63.10%, 63.39%, 63.69%, 63.98%, 64.28%, 64.58%, 64.87%, 65.17%, 65.46%, 65.76%, 66.05%, 66.20%, 100.0% {
transform: translate(55px, -103px) skewY(22deg) rotate(0deg); }
14.10%, 14.39%, 14.69%, 14.98%, 15.28%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 23.91%, 24.21%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 29.67%, 47.97%, 48.27%, 48.63%, 48.93%, 50.85%, 51.14%, 54.61%, 54.91%, 62.66%, 62.95%, 63.25%, 63.54%, 63.84%, 64.13%, 64.43%, 64.72%, 65.02%, 65.31%, 65.61%, 65.90% {
transform: translate(55px, -103px) skewY(22deg) rotate(-40deg); }
14.17%, 14.46%, 14.76%, 15.06%, 21.33%, 21.62%, 21.92%, 22.21%, 22.51%, 22.80%, 23.10%, 23.39%, 23.69%, 23.99%, 24.28%, 27.68%, 27.97%, 28.27%, 28.56%, 28.86%, 29.15%, 29.45%, 29.74%, 48.04%, 48.34%, 48.71%, 50.92%, 54.69%, 54.98%, 62.73%, 63.03%, 63.32%, 63.62%, 63.91%, 64.21%, 64.50%, 64.80%, 65.09%, 65.39%, 65.68%, 65.98% {
transform: translate(55px, -103px) skewY(22deg) rotate(-20deg); }
14.32%, 14.61%, 14.91%, 15.20%, 21.48%, 21.77%, 22.07%, 22.36%, 22.66%, 22.95%, 23.25%, 23.54%, 23.84%, 24.13%, 27.82%, 28.12%, 28.41%, 28.71%, 29.00%, 29.30%, 29.89%, 48.19%, 48.86%, 51.07%, 54.83%, 55.13%, 62.88%, 63.17%, 63.47%, 63.76%, 64.06%, 64.35%, 64.65%, 64.94%, 65.24%, 65.53%, 65.83%, 66.12% {
transform: translate(55px, -103px) skewY(22deg) rotate(20deg); }
}
@keyframes girl2KneeR {
00.00%, 14.02%, 14.17%, 14.32%, 14.46%, 14.61%, 14.76%, 14.91%, 15.06%, 15.20%, 15.35%, 21.18%, 21.33%, 21.48%, 21.62%, 21.77%, 21.92%, 22.07%, 22.21%, 22.36%, 22.51%, 22.66%, 22.80%, 22.95%, 23.10%, 23.25%, 23.39%, 23.54%, 23.69%, 23.84%, 23.99%, 24.13%, 24.28%, 27.53%, 27.68%, 27.82%, 27.97%, 28.12%, 28.27%, 28.41%, 28.56%, 28.71%, 28.86%, 29.00%, 29.15%, 29.30%, 29.45%, 29.59%, 29.74%, 47.90%, 48.04%, 48.19%, 48.34%, 48.56%, 48.71%, 48.86%, 49.00%, 50.77%, 50.92%, 51.07%, 51.22%, 54.54%, 54.69%, 54.83%, 54.98%, 62.58%, 62.73%, 62.88%, 63.03%, 63.17%, 63.32%, 63.47%, 63.62%, 63.76%, 63.91%, 64.06%, 64.21%, 64.35%, 64.50%, 64.65%, 64.80%, 64.94%, 65.09%, 65.24%, 65.39%, 65.53%, 65.68%, 65.83%, 65.98%, 100.0% {
transform: translateY(52px) rotate(0deg); }
14.10%, 14.39%, 14.69%, 14.98%, 15.28%, 21.25%, 21.55%, 21.84%, 22.14%, 22.44%, 22.73%, 23.03%, 23.32%, 23.62%, 23.91%, 24.21%, 27.60%, 27.90%, 28.19%, 28.49%, 28.78%, 29.08%, 29.37%, 29.67%, 47.97%, 48.27%, 48.63%, 48.93%, 50.85%, 51.14%, 54.61%, 54.91%, 62.66%, 62.95%, 63.25%, 63.54%, 63.84%, 64.13%, 64.43%, 64.72%, 65.02%, 65.31%, 65.61%, 65.90% {
transform: translateY(52px) rotate(60deg); }
}
@keyframes girl3 {
00.00%, 15.94%, 18.61%, 33.06%, 33.52%, 38.67%, 44.88%, 51.14%, 51.96%, 70.18%, 70.27%, 73.43%, 90.93%, 91.73%, 94.18%, 94.76%, 95.58%, 100.0% {
opacity: 0; }
15.95%, 18.60%, 33.07%, 33.51%, 38.68%, 44.87%, 51.15%, 51.96%, 70.19%, 70.26%, 73.44%, 90.92%, 91.74%, 94.17%, 94.77%, 95.57% {
opacity: 1; }
00.00%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 18.23%, 18.38%, 18.52%, 18.67%, 33.06%, 33.21%, 33.36%, 33.51%, 38.67%, 38.82%, 38.97%, 39.11%, 39.26%, 39.41%, 44.50%, 44.65%, 44.80%, 44.94%, 51.07%, 51.22%, 51.36%, 51.51%, 51.66%, 51.81%, 51.96%, 95.28%, 95.42%, 95.57%, 95.64%, 100.0% {
transform: rotateX(-90deg) scale(0.06); }
15.94%, 16.09%, 16.24%, 16.38%, 16.53%, 16.68%, 16.83%, 16.97%, 17.12%, 17.27%, 17.42%, 17.56%, 17.71%, 17.86%, 18.01%, 18.15%, 18.30%, 18.45%, 18.60%, 33.14%, 33.28%, 33.43%, 38.75%, 38.89%, 39.04%, 39.19%, 39.34%, 44.58%, 44.72%, 44.87%, 51.14%, 51.29%, 51.44%, 51.59%, 51.73%, 51.88%, 95.35%, 95.50% {
transform: translateZ(-2px) rotateX(-90deg) scale(0.06); }
}
@keyframes girl3LegL {
00.00%, 15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 18.30%, 18.60%, 33.14%, 33.43%, 38.75%, 39.04%, 39.34%, 39.48%, 44.58%, 44.87%, 51.14%, 51.44%, 51.73%, 52.03%, 95.35%, 95.64%, 100.0% {
transform: translate(1px, -150px) rotate(-6deg); }
16.01%, 16.31%, 16.61%, 16.90%, 17.20%, 17.49%, 17.79%, 18.08%, 18.38%, 33.21%, 38.82%, 39.11%, 39.41%, 44.65%, 51.22%, 51.51%, 51.81%, 95.42% {
transform: translate(1px, -150px) rotate(-20deg); }
16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 18.15%, 18.45%, 33.28%, 38.89%, 39.19%, 44.72%, 51.29%, 51.59%, 51.88%, 95.50% {
transform: translate(1px, -150px) rotate(40deg); }
16.16%, 16.46%, 16.75%, 17.05%, 17.34%, 17.64%, 17.93%, 18.23%, 18.52%, 33.36%, 38.97%, 39.26%, 44.80%, 51.36%, 51.66%, 51.96%, 95.57% {
transform: translate(1px, -150px) rotate(20deg); }
}
@keyframes girl3KneeL {
00.00%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 18.23%, 18.38%, 18.52%, 33.21%, 33.36%, 38.82%, 38.97%, 39.11%, 39.26%, 44.65%, 44.80%, 51.22%, 51.36%, 51.51%, 51.66%, 51.81%, 51.96%, 95.42%, 95.57%, 100.0% {
transform: translate(-18px, 52px) rotate(0deg); }
16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 18.15%, 18.45%, 33.28%, 38.89%, 39.19%, 44.72%, 51.29%, 51.59%, 51.88%, 95.50% {
transform: translate(-18px, 52px) rotate(-60deg); }
}
@keyframes girl3LegR {
00.00%, 15.87%, 16.09%, 16.38%, 16.68%, 16.97%, 17.27%, 17.56%, 17.86%, 18.15%, 18.45%, 18.67%, 33.06%, 33.28%, 33.51%, 38.67%, 38.89%, 39.19%, 39.48%, 44.50%, 44.72%, 44.94%, 51.07%, 51.29%, 51.59%, 51.88%, 52.03%, 95.28%, 95.50%, 95.64%, 100.0% {
transform: translate(57px, -105px) rotate(-6deg); }
15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 18.30%, 18.60%, 33.14%, 33.43%, 38.75%, 39.04%, 39.34%, 44.58%, 44.87%, 51.14%, 51.44%, 51.73%, 95.35% {
transform: translate(57px, -105px) rotate(40deg); }
16.01%, 16.31%, 16.61%, 16.90%, 17.20%, 17.49%, 17.79%, 18.08%, 18.38%, 33.21%, 38.82%, 39.11%, 39.41%, 44.65%, 51.22%, 51.51%, 51.81%, 95.42% {
transform: translate(57px, -105px) rotate(20deg); }
16.16%, 16.46%, 16.75%, 17.05%, 17.34%, 17.64%, 17.93%, 18.23%, 18.52%, 33.36%, 38.97%, 39.26%, 44.80%, 51.36%, 51.66%, 51.96%, 95.57% {
transform: translate(57px, -105px) rotate(-20deg); }
}
@keyframes girl3KneeR {
00.00%, 15.87%, 16.01%, 16.16%, 16.31%, 16.46%, 16.61%, 16.75%, 16.90%, 17.05%, 17.20%, 17.34%, 17.49%, 17.64%, 17.79%, 17.93%, 18.08%, 18.23%, 18.38%, 18.52%, 18.67%, 33.06%, 33.21%, 33.36%, 33.51%, 38.67%, 38.82%, 38.97%, 39.11%, 39.26%, 39.41%, 44.50%, 44.65%, 44.80%, 44.94%, 51.07%, 51.22%, 51.36%, 51.51%, 51.66%, 51.81%, 95.28%, 95.42%, 100.0% {
transform: translate(-18px, 52px) rotate(0deg); }
15.94%, 16.24%, 16.53%, 16.83%, 17.12%, 17.42%, 17.71%, 18.01%, 18.30%, 18.60%, 33.14%, 33.43%, 38.75%, 39.04%, 39.34%, 44.58%, 44.87%, 51.14%, 51.44%, 51.73%, 95.35% {
transform: translate(-18px, 52px) rotate(-60deg); }
}
@keyframes girl4 {
00.00%, 49.22%, 49.68%, 51.96%, 54.62%, 59.48%, 62.67%, 66.20%, 68.87%, 70.26%, 73.44%, 94.17%, 94.77%, 100.0% {
opacity: 0; }
49.23%, 49.67%, 51.97%, 54.61%, 59.49%, 62.66%, 66.21%, 68.86%, 70.27%, 73.43%, 94.18%, 94.76% {
opacity: 1; }
00.00%, 49.22%, 49.37%, 49.52%, 49.67%, 53.80%, 53.95%, 54.10%, 54.24%, 54.39%, 54.54%, 54.69%, 59.93%, 60.07%, 60.22%, 60.37%, 60.52%, 60.66%, 60.81%, 60.96%, 61.11%, 61.25%, 61.40%, 61.55%, 61.70%, 61.84%, 61.99%, 62.14%, 62.29%, 62.43%, 62.58%, 62.73%, 66.12%, 66.27%, 66.42%, 66.57%, 66.72%, 66.86%, 67.01%, 67.16%, 67.31%, 67.45%, 67.60%, 67.75%, 67.90%, 68.04%, 68.19%, 68.34%, 68.49%, 68.63%, 68.78%, 70.18%, 70.33%, 70.48%, 70.63%, 70.77%, 70.92%, 71.07%, 71.22%, 71.36%, 71.51%, 71.66%, 71.81%, 71.96%, 72.10%, 72.25%, 72.40%, 72.55%, 72.69%, 72.84%, 72.99%, 73.14%, 73.28%, 73.43%, 94.17%, 94.32%, 94.46%, 94.61%, 94.76%, 100.0% {
transform: rotateX(-90deg) scale(0.06); }
49.30%, 49.45%, 49.59%, 53.87%, 54.02%, 54.17%, 54.32%, 54.46%, 54.61%, 60.00%, 60.15%, 60.29%, 60.44%, 60.59%, 60.74%, 60.89%, 61.03%, 61.18%, 61.33%, 61.48%, 61.62%, 61.77%, 61.92%, 62.07%, 62.21%, 62.36%, 62.51%, 62.66%, 66.20%, 66.35%, 66.49%, 66.64%, 66.79%, 66.94%, 67.08%, 67.23%, 67.38%, 67.53%, 67.67%, 67.82%, 67.97%, 68.12%, 68.27%, 68.41%, 68.56%, 68.71%, 70.26%, 70.41%, 70.55%, 70.70%, 70.85%, 71.00%, 71.14%, 71.29%, 71.44%, 71.59%, 71.73%, 71.88%, 72.03%, 72.18%, 72.32%, 72.47%, 72.62%, 72.77%, 72.91%, 73.06%, 73.21%, 73.36%, 94.24%, 94.39%, 94.54%, 94.69% {
transform: translateZ(-2px) rotateX(-90deg) scale(0.06); }
}
@keyframes girl4LegL {
00.00%, 49.30%, 49.59%, 53.87%, 54.17%, 54.46%, 54.69%, 60.00%, 60.29%, 60.59%, 60.89%, 61.18%, 61.48%, 61.77%, 62.07%, 62.36%, 62.66%, 66.20%, 66.49%, 66.79%, 67.08%, 67.38%, 67.67%, 67.97%, 68.27%, 68.56%, 68.86%, 70.26%, 70.55%, 70.85%, 71.14%, 71.44%, 71.73%, 72.03%, 72.32%, 72.62%, 72.91%, 73.21%, 73.43%, 94.24%, 94.54%, 94.76%, 100.0% {
transform: translate(1px, -131px) skewY(52deg); }
49.37%, 53.95%, 54.24%, 54.54%, 60.07%, 60.37%, 60.66%, 60.96%, 61.25%, 61.55%, 61.84%, 62.14%, 62.43%, 66.27%, 66.57%, 66.86%, 67.16%, 67.45%, 67.75%, 68.04%, 68.34%, 68.63%, 70.33%, 70.63%, 70.92%, 71.22%, 71.51%, 71.81%, 72.10%, 72.40%, 72.69%, 72.99%, 73.28%, 94.32%, 94.61% {
transform: translate(1px, -131px) skewY(52deg) rotate(10deg); }
49.45%, 54.02%, 54.32%, 54.61%, 60.15%, 60.44%, 60.74%, 61.03%, 61.33%, 61.62%, 61.92%, 62.21%, 62.51%, 66.35%, 66.64%, 66.94%, 67.23%, 67.53%, 67.82%, 68.12%, 68.41%, 68.71%, 70.41%, 70.70%, 71.00%, 71.29%, 71.59%, 71.88%, 72.18%, 72.47%, 72.77%, 73.06%, 73.36%, 94.39%, 94.69% {
transform: translate(1px, -131px) skewY(52deg) rotate(-30deg); }
49.52%, 54.10%, 54.39%, 60.22%, 60.52%, 60.81%, 61.11%, 61.40%, 61.70%, 61.99%, 62.29%, 62.58%, 66.42%, 66.72%, 67.01%, 67.31%, 67.60%, 67.90%, 68.19%, 68.49%, 68.78%, 70.48%, 70.77%, 71.07%, 71.36%, 71.66%, 71.96%, 72.25%, 72.55%, 72.84%, 73.14%, 94.46% {
transform: translate(1px, -131px) skewY(52deg) rotate(-20deg); }
}
@keyframes girl4KneeL {
00.00%, 49.37%, 49.52%, 53.95%, 54.10%, 54.24%, 54.39%, 54.54%, 54.69%, 60.07%, 60.22%, 60.37%, 60.52%, 60.66%, 60.81%, 60.96%, 61.11%, 61.25%, 61.40%, 61.55%, 61.70%, 61.84%, 61.99%, 62.14%, 62.29%, 62.43%, 62.58%, 66.27%, 66.42%, 66.57%, 66.72%, 66.86%, 67.01%, 67.16%, 67.31%, 67.45%, 67.60%, 67.75%, 67.90%, 68.04%, 68.19%, 68.34%, 68.49%, 68.63%, 68.78%, 70.33%, 70.48%, 70.63%, 70.77%, 70.92%, 71.07%, 71.22%, 71.36%, 71.51%, 71.66%, 71.81%, 71.96%, 72.10%, 72.25%, 72.40%, 72.55%, 72.69%, 72.84%, 72.99%, 73.14%, 73.28%, 73.43%, 94.32%, 94.46%, 94.61%, 94.76%, 100.0% {
transform: translateY(52px) rotate(0deg); }
49.45%, 54.02%, 54.32%, 54.61%, 60.15%, 60.44%, 60.74%, 61.03%, 61.33%, 61.62%, 61.92%, 62.21%, 62.51%, 66.35%, 66.64%, 66.94%, 67.23%, 67.53%, 67.82%, 68.12%, 68.41%, 68.71%, 70.41%, 70.70%, 71.00%, 71.29%, 71.59%, 71.88%, 72.18%, 72.47%, 72.77%, 73.06%, 73.36%, 94.39%, 94.69% {
transform: translateY(52px) rotate(40deg); }
}
@keyframes girl4LegR {
00.00%, 49.22%, 49.45%, 49.67%, 53.80%, 54.02%, 54.32%, 54.61%, 59.93%, 60.15%, 60.44%, 60.74%, 61.03%, 61.33%, 61.62%, 61.92%, 62.21%, 62.51%, 62.73%, 66.12%, 66.35%, 66.64%, 66.94%, 67.23%, 67.53%, 67.82%, 68.12%, 68.41%, 68.71%, 68.86%, 70.18%, 70.41%, 70.70%, 71.00%, 71.29%, 71.59%, 71.88%, 72.18%, 72.47%, 72.77%, 73.06%, 73.36%, 94.17%, 94.39%, 94.69%, 100.0% {
transform: translate(57px, -115px) skewY(52deg); }
49.30%, 49.59%, 53.87%, 54.17%, 54.46%, 60.00%, 60.29%, 60.59%, 60.89%, 61.18%, 61.48%, 61.77%, 62.07%, 62.36%, 62.66%, 66.20%, 66.49%, 66.79%, 67.08%, 67.38%, 67.67%, 67.97%, 68.27%, 68.56%, 70.26%, 70.55%, 70.85%, 71.14%, 71.44%, 71.73%, 72.03%, 72.32%, 72.62%, 72.91%, 73.21%, 94.24%, 94.54% {
transform: translate(57px, -115px) skewY(52deg) rotate(-30deg); }
49.37%, 53.95%, 54.24%, 54.54%, 60.07%, 60.37%, 60.66%, 60.96%, 61.25%, 61.55%, 61.84%, 62.14%, 62.43%, 66.27%, 66.57%, 66.86%, 67.16%, 67.45%, 67.75%, 68.04%, 68.34%, 68.63%, 70.33%, 70.63%, 70.92%, 71.22%, 71.51%, 71.81%, 72.10%, 72.40%, 72.69%, 72.99%, 73.28%, 94.32%, 94.61% {
transform: translate(57px, -115px) skewY(52deg) rotate(-10deg); }
49.52%, 54.10%, 54.39%, 60.22%, 60.52%, 60.81%, 61.11%, 61.40%, 61.70%, 61.99%, 62.29%, 62.58%, 66.42%, 66.72%, 67.01%, 67.31%, 67.60%, 67.90%, 68.19%, 68.49%, 68.78%, 70.48%, 70.77%, 71.07%, 71.36%, 71.66%, 71.96%, 72.25%, 72.55%, 72.84%, 73.14%, 94.46% {
transform: translate(57px, -115px) skewY(52deg) rotate(20deg); }
}
@keyframes girl4KneeR {
00.00%, 49.22%, 49.37%, 49.52%, 49.67%, 53.80%, 53.95%, 54.10%, 54.24%, 54.39%, 54.54%, 59.93%, 60.07%, 60.22%, 60.37%, 60.52%, 60.66%, 60.81%, 60.96%, 61.11%, 61.25%, 61.40%, 61.55%, 61.70%, 61.84%, 61.99%, 62.14%, 62.29%, 62.43%, 62.58%, 62.73%, 66.12%, 66.27%, 66.42%, 66.57%, 66.72%, 66.86%, 67.01%, 67.16%, 67.31%, 67.45%, 67.60%, 67.75%, 67.90%, 68.04%, 68.19%, 68.34%, 68.49%, 68.63%, 70.18%, 70.33%, 70.48%, 70.63%, 70.77%, 70.92%, 71.07%, 71.22%, 71.36%, 71.51%, 71.66%, 71.81%, 71.96%, 72.10%, 72.25%, 72.40%, 72.55%, 72.69%, 72.84%, 72.99%, 73.14%, 73.28%, 94.17%, 94.32%, 94.46%, 94.61%, 100.0% {
transform: translateY(52px) rotate(0deg); }
49.30%, 49.59%, 53.87%, 54.17%, 54.46%, 60.00%, 60.29%, 60.59%, 60.89%, 61.18%, 61.48%, 61.77%, 62.07%, 62.36%, 62.66%, 66.20%, 66.49%, 66.79%, 67.08%, 67.38%, 67.67%, 67.97%, 68.27%, 68.56%, 70.26%, 70.55%, 70.85%, 71.14%, 71.44%, 71.73%, 72.03%, 72.32%, 72.62%, 72.91%, 73.21%, 94.24%, 94.54% {
transform: translateY(52px) rotate(40deg); }
}
Also see: Tab Triggers