1.pl {
2  box-shadow: 2em 0 2em rgba(0, 0, 0, 0.2) inset, -2em 0 2em rgba(255, 255, 255, 0.1) inset;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6  position: relative;
7  letter-spacing: 0.1em;
8  text-transform: uppercase;
9  transform: rotateX(30deg) rotateZ(45deg);
10  width: 14em;
11  height: 14em;
12  color: white;
13}
14
15.pl, .pl__dot {
16  border-radius: 50%;
17}
18
19.pl__dot {
20  animation-name: shadow724;
21  box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.5);
22  top: calc(50% - 0.75em);
23  left: calc(50% - 0.75em);
24  width: 1.5em;
25  height: 1.5em;
26}
27
28.pl__dot, .pl__dot:before, .pl__dot:after {
29  animation-duration: 2s;
30  animation-iteration-count: infinite;
31  position: absolute;
32}
33
34.pl__dot:before, .pl__dot:after {
35  content: "";
36  display: block;
37  left: 0;
38  width: inherit;
39  transition: background-color var(--trans-dur);
40}
41
42.pl__dot:before {
43  animation-name: pushInOut1724;
44  background-color: var(--bg);
45  border-radius: inherit;
46  box-shadow: 0.05em 0 0.1em rgba(255, 255, 255, 0.2) inset;
47  height: inherit;
48  z-index: 1;
49}
50
51.pl__dot:after {
52  animation-name: pushInOut2724;
53  background-color: var(--primary1);
54  border-radius: 0.75em;
55  box-shadow: 0.1em 0.3em 0.2em rgba(255, 255, 255, 0.4) inset, 0 -0.4em 0.2em #2e3138 inset, 0 -1em 0.25em rgba(0, 0, 0, 0.3) inset;
56  bottom: 0;
57  clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
58  height: 3em;
59  transform: rotate(-45deg);
60  transform-origin: 50% 2.25em;
61}
62
63.pl__dot:nth-child(1) {
64  transform: rotate(0deg) translateX(5em) rotate(0deg);
65  z-index: 5;
66}
67
68.pl__dot:nth-child(1), .pl__dot:nth-child(1):before, .pl__dot:nth-child(1):after {
69  animation-delay: 0s;
70}
71
72.pl__dot:nth-child(2) {
73  transform: rotate(-30deg) translateX(5em) rotate(30deg);
74  z-index: 4;
75}
76
77.pl__dot:nth-child(2), .pl__dot:nth-child(2):before, .pl__dot:nth-child(2):after {
78  animation-delay: -0.1666666667s;
79}
80
81.pl__dot:nth-child(3) {
82  transform: rotate(-60deg) translateX(5em) rotate(60deg);
83  z-index: 3;
84}
85
86.pl__dot:nth-child(3), .pl__dot:nth-child(3):before, .pl__dot:nth-child(3):after {
87  animation-delay: -0.3333333333s;
88}
89
90.pl__dot:nth-child(4) {
91  transform: rotate(-90deg) translateX(5em) rotate(90deg);
92  z-index: 2;
93}
94
95.pl__dot:nth-child(4), .pl__dot:nth-child(4):before, .pl__dot:nth-child(4):after {
96  animation-delay: -0.5s;
97}
98
99.pl__dot:nth-child(5) {
100  transform: rotate(-120deg) translateX(5em) rotate(120deg);
101  z-index: 1;
102}
103
104.pl__dot:nth-child(5), .pl__dot:nth-child(5):before, .pl__dot:nth-child(5):after {
105  animation-delay: -0.6666666667s;
106}
107
108.pl__dot:nth-child(6) {
109  transform: rotate(-150deg) translateX(5em) rotate(150deg);
110  z-index: 1;
111}
112
113.pl__dot:nth-child(6), .pl__dot:nth-child(6):before, .pl__dot:nth-child(6):after {
114  animation-delay: -0.8333333333s;
115}
116
117.pl__dot:nth-child(7) {
118  transform: rotate(-180deg) translateX(5em) rotate(180deg);
119  z-index: 2;
120}
121
122.pl__dot:nth-child(7), .pl__dot:nth-child(7):before, .pl__dot:nth-child(7):after {
123  animation-delay: -1s;
124}
125
126.pl__dot:nth-child(8) {
127  transform: rotate(-210deg) translateX(5em) rotate(210deg);
128  z-index: 3;
129}
130
131.pl__dot:nth-child(8), .pl__dot:nth-child(8):before, .pl__dot:nth-child(8):after {
132  animation-delay: -1.1666666667s;
133}
134
135.pl__dot:nth-child(9) {
136  transform: rotate(-240deg) translateX(5em) rotate(240deg);
137  z-index: 4;
138}
139
140.pl__dot:nth-child(9), .pl__dot:nth-child(9):before, .pl__dot:nth-child(9):after {
141  animation-delay: -1.3333333333s;
142}
143
144.pl__dot:nth-child(10) {
145  transform: rotate(-270deg) translateX(5em) rotate(270deg);
146  z-index: 5;
147}
148
149.pl__dot:nth-child(10), .pl__dot:nth-child(10):before, .pl__dot:nth-child(10):after {
150  animation-delay: -1.5s;
151}
152
153.pl__dot:nth-child(11) {
154  transform: rotate(-300deg) translateX(5em) rotate(300deg);
155  z-index: 6;
156}
157
158.pl__dot:nth-child(11), .pl__dot:nth-child(11):before, .pl__dot:nth-child(11):after {
159  animation-delay: -1.6666666667s;
160}
161
162.pl__dot:nth-child(12) {
163  transform: rotate(-330deg) translateX(5em) rotate(330deg);
164  z-index: 6;
165}
166
167.pl__dot:nth-child(12), .pl__dot:nth-child(12):before, .pl__dot:nth-child(12):after {
168  animation-delay: -1.8333333333s;
169}
170
171.pl__text {
172  font-size: 0.75em;
173  max-width: 5rem;
174  position: relative;
175  text-shadow: 0 0 0.1em var(--fg-t);
176  transform: rotateZ(-45deg);
177}
178
179/* Animations */
180@keyframes shadow724 {
181  from {
182    animation-timing-function: ease-in;
183    box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3);
184  }
185
186  25% {
187    animation-timing-function: ease-out;
188    box-shadow: 0.1em 0.1em 0 0.1em black, 0.8em 0 0.8em rgba(0, 0, 0, 0.5);
189  }
190
191  50%, to {
192    box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3);
193  }
194}
195
196@keyframes pushInOut1724 {
197  from {
198    animation-timing-function: ease-in;
199    background-color: var(--bg);
200    transform: translate(0, 0);
201  }
202
203  25% {
204    animation-timing-function: ease-out;
205    background-color: var(--primary2);
206    transform: translate(-71%, -71%);
207  }
208
209  50%, to {
210    background-color: var(--bg);
211    transform: translate(0, 0);
212  }
213}
214
215@keyframes pushInOut2724 {
216  from {
217    animation-timing-function: ease-in;
218    background-color: var(--bg);
219    clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
220  }
221
222  25% {
223    animation-timing-function: ease-out;
224    background-color: var(--primary1);
225    clip-path: polygon(0 25%, 100% 25%, 100% 100%, 0 100%);
226  }
227
228  50%, to {
229    background-color: var(--bg);
230    clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
231  }
232}