@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --animation-bg: #020202;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--animation-bg);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-width: 100vw;
  font-size: 100%;
  text-align: center;
}

.background {
  position: absolute;
  top: 0;
  width: calc(100% / 8);
  height: 100vh;
  opacity: 0;
  transform: translateY(40px);
  animation: background-slide 3s ease-in-out forwards;
}

.background0 { left: 0%; background-color: #eb4747; animation-delay: 2.2s; }
.background1 { left: 12.5%; background-color: #ebc247; animation-delay: 2.3s; }
.background2 { left: 25%; background-color: #99eb47; animation-delay: 2.4s; }
.background3 { left: 37.5%; background-color: #47eb70; animation-delay: 2.5s; }
.background4 { left: 50%; background-color: #47ebeb; animation-delay: 2.6s; }
.background5 { left: 62.5%; background-color: #4770eb; animation-delay: 2.7s; }
.background6 { left: 75%; background-color: #9947eb; animation-delay: 2.8s; }
.background7 { left: 87.5%; background-color: #eb47c2; animation-delay: 2.9s; }

.criterion {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  --unit: clamp(34px, 8vw, 78px);
}

@media (max-height: 540px) {
  .criterion {
    --unit: clamp(26px, 9vw, 64px);
  }
}

.text {
  position: absolute;
  width: var(--unit);
  line-height: var(--unit);
  font-size: calc(var(--unit) * 0.8);
  font-weight: 600;
  color: #fff;
  top: 0;
  left: calc((var(--slot, 0) - 3.5) * var(--unit));
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation: text-pop 0.9s ease-out forwards;
  letter-spacing: 0.04em;
}

.text0 { animation-delay: 0.8s; }
.text1 { animation-delay: 0.9s; }
.text2 { animation-delay: 1s; }
.text3 { animation-delay: 1.1s; }
.text4 { animation-delay: 1.2s; }
.text5 { animation-delay: 1.3s; }
.text6 { animation-delay: 1.4s; }
.text7 { animation-delay: 1.5s; }

.frame {
  position: absolute;
  width: calc(var(--unit) * 0.85);
  height: calc(var(--unit) * 0.85);
  border-radius: 50%;
  opacity: 0;
  top: 0;
  left: calc((var(--slot, 0) - 3.5) * var(--unit));
  transform: translate(-50%, -50%) scale(0.3);
  animation: frame-drop 1s ease-out forwards;
}

.frame0 { background: #eb4747; animation-delay: 0s; }
.frame1 { background: #ebc247; animation-delay: 0.15s; }
.frame2 { background: #99eb47; animation-delay: 0.3s; }
.frame3 { background: #47eb70; animation-delay: 0.45s; }
.frame4 { background: #47ebeb; animation-delay: 0.6s; }
.frame5 { background: #4770eb; animation-delay: 0.75s; }
.frame6 { background: #9947eb; animation-delay: 0.9s; }
.frame7 { background: #eb47c2; animation-delay: 1.05s; }

.particle {
  position: absolute;
  width: clamp(12px, 2vw, 20px);
  height: clamp(12px, 2vw, 20px);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  animation: particle-burst 1.15s ease-out forwards;
  animation-delay: var(--delay, 1.2s);
  background: var(--color, #ffffff);
}

@keyframes text-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes frame-drop {
  0% { opacity: 0; transform: translate(-50%, -150%) scale(0.4); }
  80% { opacity: 1; transform: translate(-50%, -25%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, 30%) scale(0.9); }
}

@keyframes particle-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  30% { opacity: 1; }
  100% { opacity: 0.2; transform: translate(calc(-50% + var(--target-x, 0px)), calc(-50% + var(--target-y, 0px))) scale(0); }
}

@keyframes background-slide {
  0% { opacity: 0; transform: translateY(40px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}