/*
 * OPTIONAL FLOWER AMBIENCE
 * Delete this file, or set flowerAmbience to false in rsvp-config.js,
 * to remove the effect without changing the rest of the website.
 */

.ambient-flower {
  --ambient-size: 4rem;
  --ambient-center: var(--paper);
  position: fixed;
  z-index: 40;
  width: var(--ambient-size);
  height: var(--ambient-size);
  color: var(--blue);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72) rotate(var(--ambient-rotation));
  filter: blur(0.1px);
  animation: ambient-flower-appearance 7s cubic-bezier(.22, 1, .36, 1) forwards;
}

.ambient-flower svg {
  width: 100%;
  height: 100%;
}

@keyframes ambient-flower-appearance {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72) rotate(var(--ambient-rotation));
  }

  28% {
    opacity: 0.18;
  }

  65% {
    opacity: 0.15;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -58%) scale(1.08) rotate(var(--ambient-rotation));
  }
}

.ambient-flower--light {
  color: var(--paper);
  --ambient-center: var(--blue);
}

.ambient-flower--test {
  filter: none;
  animation-duration: 3s !important;
}

@media (prefers-reduced-motion: reduce) {
  .ambient-flower:not(.ambient-flower--test) {
    display: none;
  }
}