body {
  inset: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: fixed;
  background: white;
}

body .text {
  color: #444444;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #132129;
  }

  body .text {
    color: #e4e4e4;
  }
}

#center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

#loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

svg {
  width: 300px;
  height: 300px;
}

svg path {
  stroke-width: 0.3;
  stroke: #b5333d;
  stroke-opacity: 1;
}

svg .gate {
  fill: #b5333d;
  fill-opacity: 1;
  stroke-dashoffset: 370;
  stroke-dasharray: 370;
  transform-origin: 80% 80%;
  animation: 2s 0s breathe, draw-gate 5s 2s forwards, fill-gate 2s 7s forwards;
  animation-timing-function: cubic-bezier(0.4, 0.2, 0.1, 0.1);
}

svg .left,
.right {
  stroke-dashoffset: 50;
  stroke-dasharray: 50;
  stroke-opacity: 1;
  fill: none;
}

svg .left {
  animation: draw-left-pattern 7s forwards;
}

svg .right {
  animation: draw-right-pattern 12s forwards;
}

#candle {
  animation: flicker-candle 2.7s 9s infinite;
}

.text-rotator {
  position: relative;
  width: 300px;
  height: 100px;
  overflow: hidden;
}

.text-rotator .text {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: fade-text 44s infinite;
}

.text-rotator .text:nth-child(1) {
  animation-delay: 0s;
}

.text-rotator .text:nth-child(2) {
  animation-delay: 4s;
}

.text-rotator .text:nth-child(3) {
  animation-delay: 8s;
}

.text-rotator .text:nth-child(4) {
  animation-delay: 12s;
}

.text-rotator .text:nth-child(5) {
  animation-delay: 16s;
}

.text-rotator .text:nth-child(6) {
  animation-delay: 20s;
}

.text-rotator .text:nth-child(7) {
  animation-delay: 24s;
}

.text-rotator .text:nth-child(8) {
  animation-delay: 28s;
}

.text-rotator .text:nth-child(9) {
  animation-delay: 32s;
}

.text-rotator .text:nth-child(10) {
  animation-delay: 36s;
}

.text-rotator .text:nth-child(11) {
  animation-delay: 40s;
}

#loader.init_done {
  animation: zoom 1s forwards;
}

@keyframes breathe {
  from {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  80% {
    fill-opacity: 1;
  }

  90% {
    transform: scale(1);
  }

  to {
    fill-opacity: 0;
  }
}

@keyframes draw-gate {
  from {
    fill-opacity: 0;
  }

  to {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
}

@keyframes fill-gate {
  to {
    fill-opacity: 1;
  }
}

@keyframes draw-right-pattern {
  from {
    stroke-dashoffset: 50;
  }

  30% {
    stroke-dashoffset: 50;
  }

  50% {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-left-pattern {
  from {
    stroke-dashoffset: 50;
  }

  75% {
    stroke-dashoffset: 50;
  }

  100% {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes flicker-candle {
  0% {
    fill-opacity: 0.9;
  }

  20% {
    fill-opacity: 0.7;
  }

  50% {
    fill-opacity: 0.9;
  }

  60% {
    fill-opacity: 0.6;
  }

  70% {
    fill-opacity: 0.7;
  }

  80% {
    fill-opacity: 0.75;
  }

  100% {
    fill-opacity: 0.9;
  }
}

@keyframes zoom {
  to {
    transform: scale(0.01);
  }
}

@keyframes fade-text {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  3%,
  7% {
    opacity: 1;
    transform: translateY(0);
  }
  10% {
    opacity: 0;
    transform: translateY(-100%);
  }
}