///////////////////////////////////////////////////////////////////////
///////////////////////////////// FILL ////////////////////////////////
///////////////////////////////////////////////////////////////////////
// Generic non-effect-related CSS

.logoanimation {
}
.logoanimation h1 {
  display: block;
  height: 25px;
  font-size: 12px;
}
.logoanimation > div {
  display: inline-block;
}
.logoanimation > div > div {
  margin: 0 auto;
}


@keyframes fill-level {
  0% {
    transform: translate3d(-413px, -53px, 0) rotate(0deg);
  }
  15% {
    transform: translate3d(-393px, -73px, 0) rotate(0deg);
  }
  30% {
    transform: translate3d(-343px, -123px, 0) rotate(0deg);
  }
  45% {
    transform: translate3d(-283px, -183px, 0) rotate(0deg);
  }
  60% {
    transform: translate3d(-263px, -203px, 0) rotate(45deg);
  }
  75% {
    transform: translate3d(-243px, -223px, 0) rotate(35deg);
  }
  90% {
    transform: translate3d(-223px, -243px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-203px, -263px, 0) rotate(45deg);
  }
}
.fill {
  backface-visibility: hidden;
  z-index: 20;
  width: 250px;
  height: 221px;
  padding: 0;
  overflow: hidden;
  -webkit-mask-box-image: url('Arc Dust Logo Full Alpha inverse.svg');
  mask-image: url(#mask);
  mask-size: 250px auto;

}
.fill .svg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.fill .gooey-container {
  filter: url(#gooey-fill);
  position: absolute;
  width: 300px;
  height: 300px;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 18px #0000ff inset;
  overflow: hidden;
}
.fill .gooey-container .level, .fill .gooey-container .bubble {
  background: #ff4081;
}
.fill .gooey-container .level {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 300px;
  left: 50%;
  width: 500px;
  height: 350px;
  text-align: center;
  transform-origin: 50% 0;
  transform: translate3d(-413px, -53px, 0) rotate(45deg);
  animation: fill-level 1.5s linear infinite;
  animation-fill-mode:forwards;
  animation-iteration-count: 1;
  box-shadow: 0 0 100px 0 #0000ff inset,  0 0 200px 0 #0000ff inset;
}
@keyframes fill-bubbles {
  0% {
    transform: translate3d(-100px, -20px, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(100px, -40px, 0) rotate(180deg);
  }
  100% {
    transform: translate3d(-100px, -20px, 0) rotate(360deg);
  }
}
.fill .gooey-container .bubble {
  content: "";
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: rotate(0deg) translate3d(0, 0, 0);
  box-shadow: 0 0 30px 20px #0000ff inset;
}
.fill .gooey-container .bubble:nth-child(1) {
  animation: fill-bubbles 1s ease 0.5s infinite;
}
.fill .gooey-container .bubble:nth-child(2) {
  animation: fill-bubbles 1.5s ease 0.25s infinite;
}
.fill .gooey-container .bubble:nth-child(3) {
  animation: fill-bubbles 2s ease 0.1666666667s infinite;
}
.fill .gooey-container .bubble:nth-child(4) {
  animation: fill-bubbles 2.5s ease 0.125s infinite;
}
.fill .gooey-container .bubble:nth-child(5) {
  animation: fill-bubbles 3s ease 0.1s infinite;
}
.fill .gooey-container .bubble:nth-child(6) {
  animation: fill-bubbles 3.5s ease 0.0833333333s infinite;
}
.fill .gooey-container .bubble:nth-child(7) {
  animation: fill-bubbles 4s ease 0.0714285714s infinite;
}
.fill .gooey-container .bubble:nth-child(8) {
  animation: fill-bubbles 4.5s ease 0.0625s infinite;
}


///////////////////////////////////////////////////////////////////////
///////////////////////////////// FIRE FILL ////////////////////////////////
///////////////////////////////////////////////////////////////////////
// Generic non-effect-related CSS
.firelogoanimation {
  margin: 50px 0;
  padding: 0;
  font-size: 0;
  font-family: 'Nova Flat';
  background: #190a25;
  color: white;
  text-align: center;
  z-index: 30;
}
.firelogoanimation h1 {
  display: block;
  height: 25px;
  font-size: 12px;
}
.firelogoanimation > div {
  display: inline-block;
  width: 25%;
  min-width: 500px;
  margin-bottom: 50px;
}
.firelogoanimation > div > div {
  margin: 0 auto;
}


@keyframes fire-fill-level {
  0% {
    transform: translate3d(-413px, -53px, 0) rotate(0deg);
  }
  15% {
    transform: translate3d(-393px, -73px, 0) rotate(0deg);
  }
  30% {
    transform: translate3d(-343px, -123px, 0) rotate(0deg);
  }
  45% {
    transform: translate3d(-283px, -183px, 0) rotate(0deg);
  }
  60% {
    transform: translate3d(-263px, -203px, 0) rotate(45deg);
  }
  75% {
    transform: translate3d(-243px, -223px, 0) rotate(35deg);
  }
  90% {
    transform: translate3d(-223px, -243px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-203px, -263px, 0) rotate(45deg);
  }
}
.firefill {
  backface-visibility: hidden;
  z-index: 20;
  width: 250px;
  height: 250px;
  padding: 0;
  overflow: hidden;
  mask: url(#firemask);
}
.firefill .firesvg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.firefill .fire-gooey-container {
  filter: url(#gooey-fill);
  position: absolute;
  width: 300px;
  height: 300px;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 18px #0000ff inset;
  overflow: hidden;
}
.firefill .fire-gooey-container .firelevel, .firefill .fire-gooey-container .firebubble {
  background: #ff4081;
}
.firefill .fire-gooey-container .firelevel {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 300px;
  left: 50%;
  width: 500px;
  height: 350px;
  text-align: center;
  transform-origin: 50% 0;
  transform: translate3d(-413px, -53px, 0) rotate(45deg);
  animation: fire-fill-level 5s linear infinite;
  animation-fill-mode:forwards;
  animation-iteration-count: 1;
  box-shadow: 0 0 100px 0 #0000ff inset,  0 0 200px 0 #0000ff inset;
}
@keyframes fire-fill-bubbles {
  0% {
    transform: translate3d(-100px, -20px, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(100px, -40px, 0) rotate(180deg);
  }
  100% {
    transform: translate3d(-100px, -20px, 0) rotate(360deg);
  }
}
.firefill .fire-gooey-container .firebubble {
  content: "";
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: rotate(0deg) translate3d(0, 0, 0);
  box-shadow: 0 0 30px 20px #0000ff inset;
}
.firefill .fire-gooey-container .firebubble:nth-child(1) {
  animation: fire-fill-bubbles 1.5s ease 0.5s infinite;
}
.firefill .fire-gooey-container .firebubble:nth-child(2) {
  animation: fire-fill-bubbles 3s ease 0.25s infinite;
}
.firefill .fire-gooey-container .firebubble:nth-child(3) {
  animation: fire-fill-bubbles 4.5s ease 0.1666666667s infinite;
}
.firefill .fire-gooey-container .firebubble:nth-child(4) {
  animation: fire-fill-bubbles 6s ease 0.125s infinite;
}
.firefill .fire-gooey-container .firebubble:nth-child(5) {
  animation: fire-fill-bubbles 7.5s ease 0.1s infinite;
}
.firefill .fire-gooey-container .firebubble:nth-child(6) {
  animation: fire-fill-bubbles 9s ease 0.0833333333s infinite;
}
.firefill .fire-gooey-container .firebubble:nth-child(7) {
  animation: fire-fill-bubbles 10.5s ease 0.0714285714s infinite;
}
.firefill .fire-gooey-container .firebubble:nth-child(8) {
  animation: fire-fill-bubbles 12s ease 0.0625s infinite;
}