.flora-lazy {
  background-color: #f2f2f2;
  background-image: linear-gradient(90deg, #f2f2f2 0%, #e7e7e7 50%, #f2f2f2 100%);
  background-size: 200% 100%;
  animation: flora-shimmer 1.2s ease-in-out infinite;
  transition: opacity 0.3s ease;
  opacity: 0.95;
}

.flora-lazy-loaded {
  background-image: none;
  animation: none;
  opacity: 1;
}

.flora-lazy-error {
  background-image: none;
  animation: none;
  opacity: 1;
}

@keyframes flora-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.image-loader {
  display: block;
  z-index: 5;
  pointer-events: none;
}

.image-loader-fill {
  height: 100%;
}

.image-loader-square {
  aspect-ratio: 1 / 1;
}

.flower {
  --flower-size: 40px;
  --flower-speed: 5s;
  --flower-segment: calc(var(--flower-size) / 10);
  --flower-dot-size: calc(var(--flower-segment) * 4);
  --flower-petal: var(--brand, #fd8);
  --flower-center: rgba(var(--brand-rgb, 233, 150, 102), 0.85);

  font-family: sans-serif;
  font-weight: 100;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.flower::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: var(--flower-dot-size);
  height: var(--flower-dot-size);
  background: var(--flower-center);
  border-radius: 100%;
  box-shadow:
    white 0 0 15px 0,
    var(--flower-petal) calc(-3 * var(--flower-segment)) calc(-3 * var(--flower-segment)) 0 var(--flower-segment),
    var(--flower-petal) calc(3 * var(--flower-segment)) calc(-3 * var(--flower-segment)) 0 var(--flower-segment),
    var(--flower-petal) calc(3 * var(--flower-segment)) calc(3 * var(--flower-segment)) 0 var(--flower-segment),
    var(--flower-petal) calc(-3 * var(--flower-segment)) calc(3 * var(--flower-segment)) 0 var(--flower-segment);
  animation: flower var(--flower-speed) infinite ease-in-out;
  transform-origin: 50% 50%;
}

@keyframes flower {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-2px, 2px);
    box-shadow:
      white 0 0 15px 0,
      var(--flower-petal) calc(-3 * var(--flower-segment)) calc(-3 * var(--flower-segment)) 0 var(--flower-segment),
      var(--flower-petal) calc(3 * var(--flower-segment)) calc(-3 * var(--flower-segment)) 0 var(--flower-segment),
      var(--flower-petal) calc(3 * var(--flower-segment)) calc(3 * var(--flower-segment)) 0 var(--flower-segment),
      var(--flower-petal) calc(-3 * var(--flower-segment)) calc(3 * var(--flower-segment)) 0 var(--flower-segment);
  }
  50% {
    transform: translate(-50%, -50%) rotate(1080deg) translate(2px, -2px);
    box-shadow:
      white 0 0 15px 0,
      var(--flower-petal) calc(3 * var(--flower-segment)) calc(3 * var(--flower-segment)) 0 var(--flower-segment),
      var(--flower-petal) calc(-3 * var(--flower-segment)) calc(3 * var(--flower-segment)) 0 var(--flower-segment),
      var(--flower-petal) calc(-3 * var(--flower-segment)) calc(-3 * var(--flower-segment)) 0 var(--flower-segment),
      var(--flower-petal) calc(3 * var(--flower-segment)) calc(-3 * var(--flower-segment)) 0 var(--flower-segment);
  }
  100% {
    transform: translate(-50%, -50%) rotate(2160deg) translate(-2px, 2px);
  }
}

.fade-in-image {
  opacity: 0;
  transform: scale(1.02);
  filter: blur(6px);
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
}

.fade-in-image.loaded,
.fade-in-image.flora-lazy-loaded {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}