.wildflower-garden {
  position: absolute;
  inset: 0;
  z-index: 81;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wildflower-field {
  position: absolute;
}

.wildflower-field--near {
  left: 0;
  bottom: 0;
  width: 47%;
  height: 25%;
}

.wildflower-field--upper {
  left: 45%;
  bottom: 30%;
  width: 43%;
  height: 10%;
}

.wildflower-field--right {
  right: 0;
  bottom: 0;
  width: 12%;
  height: 25%;
}

.wildflower.flower {
  left: var(--flower-left);
  bottom: var(--flower-bottom);
  width: clamp(0.42rem, 0.76vw, 0.72rem);
  height: clamp(1.1rem, 2.7vh, 1.8rem);
  transition-delay: var(--bloom-delay, 0s);
}

.wildflower-field--upper .wildflower {
  scale: 0.78;
  filter: saturate(0.82);
}

.wildflower--red {
  --petal-color: var(--flower-red);
}

.wildflower--yellow {
  --petal-color: var(--flower-yellow);
}

.wildflower--blue {
  --petal-color: var(--flower-blue);
}

.wildflower--pink {
  --petal-color: var(--flower-pink);
}

.wildflower--cream {
  --petal-color: var(--flower-cream);
}

.wildflower.is-bloomed::after {
  transform-origin: 50% 100%;
  animation: wildflower-sway var(--sway-duration, 6.5s) ease-in-out var(--sway-delay, 0s) infinite;
}

.wildflower-garden.is-restoring .wildflower {
  transition: none;
}

@keyframes wildflower-sway {
  0%,
  100% {
    transform: translateX(-50%) rotate(var(--flower-turn, 0deg));
  }

  50% {
    transform: translateX(-50%) rotate(calc(var(--flower-turn, 0deg) + 5deg));
  }
}

@media (min-width: 1025px) {
  .wildflower-garden {
    left: 50%;
    right: auto;
    width: min(100vw, 120rem);
    transform: translateX(-50%);
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .wildflower-field--near {
    width: 46%;
    height: 22%;
  }

  .wildflower-field--upper {
    left: 45%;
    bottom: 40%;
    width: 45%;
    height: 9%;
  }

  .wildflower-field--right {
    width: 10%;
    height: 25%;
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  .wildflower-field--near {
    width: 40%;
    height: 26%;
  }

  .wildflower-field--upper {
    left: 42%;
    bottom: 39%;
    width: 58%;
    height: 8%;
  }

  .wildflower-field--right {
    right: 0;
    bottom: 29%;
    width: 60%;
    height: 10%;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .wildflower-field--near {
    bottom: 6%;
    width: 42%;
    height: 20%;
  }

  .wildflower-field--upper {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%;
  }

  .wildflower-field--right {
    right: 0;
    bottom: 28%;
    width: 58%;
    height: 8%;
  }

  .wildflower.flower {
    width: clamp(0.4rem, 1.8vw, 0.62rem);
    height: clamp(1rem, 3.8vw, 1.55rem);
  }

  .wildflower-field--upper .wildflower {
    scale: 0.92;
    filter: saturate(0.95);
  }

  .wildflower-field--right .wildflower {
    scale: 0.72;
    filter: saturate(0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wildflower.flower {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }

  .wildflower.is-bloomed::after {
    animation: none;
  }
}