@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap");

:root {
  --body-font: "Raleway", sans-serif;
  --display-font: "Alex Brush", serif;
  --color-dark: #028090;
  --color-accent: #e9834a;
  --color-light-accent: #feeac5;
  --color-white: #faf4ee;

  --ratio-passed: 0.9;
  --ratio-waiting: 0.1;

  --filter: drop-shadow(0.83vw 0.83vw 0.56vw #00000066);
}

body {
  color: var(--color-dark);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-image: url("/assets/top-view-flowers-with-copy-space.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

main {
  height: 100%;
  width: 75%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-family: var(--display-font);
  font-size: 7.8vw;
  font-weight: 500;
  text-align: center;

  position: relative;
  display: flex;
  flex-direction: row;
  gap: 1.1vw;
  margin-bottom: 3.33vw;
  filter: var(--filter);
}

h1 img {
  width: 11vw;
}

h1 img:last-child {
  scale: -1 1;
}

.digit-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3.35vw;
  margin-bottom: 4.4vw;
}

.digit {
  width: 8.9vw;
  height: 11.8vw;
  border-radius: 0.56vw;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: top;

  background-color: var(--color-dark);
  border: 0.14vw solid var(--color-white);

  box-shadow: 0 0 0 1.1vw var(--color-dark);
  filter: var(--filter);
}

.digit .door {
  width: 100%;
  height: 11.8vw;
  overflow: hidden;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.digit h2 {
  color: var(--color-white);
  font-family: var(--body-font);
  font-size: 7vw;
  font-weight: 400;
  margin-top: -1.6vw;
  transition-property: transform;
}

.digit img {
  width: 6.25vw;
  color: var(--color-light-accent);
  scale: 1 -1;
}

.digit p {
  color: var(--color-white);
  font-family: var(--display-font);
  font-size: 2.5vw;
  font-weight: 400;
}

.progress-bar {
  position: relative;

  width: 62.5vw;
  height: 2.25vw;
  display: flex;
  flex-direction: row;

  margin-top: 2.2vw;
  margin-bottom: 5vw;
  border-radius: 0.7vw;
  border: 0.2vw solid var(--color-dark);
  filter: var(--filter);

  animation: widenOnLoad 1.5s ease-in-out forwards;
}

.progress-bar-left,
.progress-bar-center,
.progress-bar-right {
  height: 100%;
  color: var(--color-dark);
  font-family: var(--body-font);
  font-weight: 800;
  font-size: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
}

.progress-bar-left {
  background-color: var(--color-accent);
  width: 50%;
  border-radius: 0.5vw 0 0 0.5vw;
}

.progress-bar-center {
  background-color: var(--color-light-accent);
  border-left: 0.07vw solid var(--color-dark);
  border-right: 0.07vw solid var(--color-dark);
  width: calc(50% * var(--ratio-passed));
  transition: width 1s ease-in-out;
}

.progress-bar-right {
  border-left: 0.07vw solid var(--color-dark);
  background-color: var(--color-white);
  width: calc(50% * var(--ratio-waiting));
  border-radius: 0 0.5vw 0.5vw 0;
  transition: width 1s ease-in-out;
}

.label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  position: absolute;
  top: 125%;

  width: 9vw;
  background-color: var(--color-white);
  font-family: var(--body-font);
  font-size: 0.9vw;
  font-weight: 800;
  border: 0.14vw solid var(--color-dark);
  border-radius: 0.56vw;
  z-index: 10;

  height: 3.33vw;
  opacity: 0;
  animation: growHeightEffect 1.5s ease-in-out 1s forwards;
}

.label-first {
  translate: -10%;
}

.label-second {
  left: 50%;
  translate: -50%;
}

.label-third {
  top: revert;
  bottom: 125%;

  left: calc(50% + 50% * var(--ratio-passed));
  transition: left 1s ease-in-out;
  translate: -90%;
}

.label-fourth {
  /* top: revert; */
  /* bottom: 125%; */
  left: 100%;
  translate: -90%;
}

/* Arrows on Labels */
.label::after {
  content: "";
  position: absolute;
  border-width: 0.6vw;
  border-style: solid;
}

.label-first::after,
.label-second::after,
.label-fourth::after {
  bottom: 100%;
  border-color: transparent transparent var(--color-dark) transparent;
}

.label-first::after {
  left: 0;
  translate: 15%;
}

.label-third::after {
  left: 85%;
  top: 100%;
  border-color: var(--color-dark) transparent transparent transparent;
}

.label-fourth::after {
  left: 85%;
  translate: 0;
}

@keyframes widenOnLoad {
  0% {
    scale: 0 1;
  }
  100% {
    scale: 1 1;
  }
}

@keyframes growHeightEffect {
  0% {
    scale: 1 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    scale: 1 1;
    opacity: 1;
  }
}

/* Taller screens (Portrait / Mobile) */
/* Triggered when width is less than or equal to height */
@media (max-aspect-ratio: 1/1) {
  body {
    background-image: url("/assets/top-view-flowers-with-copy-space-mobile.jpg");
  }

  main {
    width: 100%;
    flex-grow: 0.25;
  }

  h1 {
    background-color: var(--color-white);
    padding: 1.1vw;
    border-radius: 50%;
    border: 0.07vw solid var(--color-dark);
    margin-top: 10vw;
    margin-bottom: 15vw;
    width: 95vw;
    font-size: 9vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .digit-container {
    margin-bottom: 20vw;
    width: 95vw;
    gap: 6vw;
  }

  .digit {
    width: 20vw;
    height: 27vw;
    border: 0.21vw solid var(--color-white);
    border-radius: 2vw;
    box-shadow: 0 0 0 2vw var(--color-dark);
  }

  .digit .door {
    height: 17.7vw;
  }

  .digit h2 {
    font-size: 15.5vw;
    margin-top: -3.75vw;
  }

  .digit img {
    width: 14vw;
  }

  .digit p {
    font-size: 5.625vw;
  }

  .progress-bar {
    width: 95vw;
    height: 5vw;
    border: 0.4vw solid var(--color-dark);
    border-radius: 0.9vw;
  }

  .progress-bar-left,
  .progress-bar-center,
  .progress-bar-right {
    font-size: 2.5vw;
  }

  .label {
    width: 25vw;
    height: 7vw;
    top: 150%;

    font-size: 2.5vw;
    border: 0.2vw solid var(--color-dark);
    border-radius: 0.8vw;
  }

  .label-third {
    top: revert;
    bottom: 150%;
  }

  .label::after {
    border-width: 1.5vw;
    border-style: solid;
  }
}