/* A passing woodland breeze: the paper stays still while its surroundings stir. */
.woodland-breeze {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  isolation: isolate;
}

.breeze-cluster {
  position: absolute;
  width: clamp(100px, 12vw, 195px);
  height: clamp(110px, 15vw, 220px);
  transform-origin: 0 100%;
  transform: rotate(0deg);
  --breeze-side: 1;
  --breeze-delay: 0s;
}

.breeze-cluster--upper {
  top: 18%;
  left: -60px;
  --breeze-delay: -2.4s;
}

.breeze-cluster--right {
  top: 42%;
  right: -76px;
  transform-origin: 100% 100%;
  --breeze-side: -1;
  --breeze-delay: -1.1s;
}

.breeze-cluster--lower {
  bottom: -56px;
  left: -42px;
  --breeze-delay: -3.1s;
}

.breeze-cluster img,
.breeze-leaf {
  position: absolute;
  display: block;
  width: var(--leaf-width, 112px);
  height: auto;
  user-select: none;
  transform-origin: 88% 88%;
  transform: rotate(var(--leaf-angle, 0deg));
  opacity: var(--leaf-opacity, .62);
  filter: saturate(.8) brightness(.73) drop-shadow(2px 4px 3px #160c1640);
}

.breeze-cluster img:first-child {
  left: 0;
  bottom: 24px;
  --leaf-angle: 23deg;
  --leaf-width: clamp(103px, 10vw, 156px);
  --leaf-delay: -2.6s;
}

.breeze-cluster img:last-child {
  left: 25px;
  bottom: -1px;
  --leaf-angle: 72deg;
  --leaf-width: clamp(86px, 8vw, 127px);
  --leaf-opacity: .48;
  --leaf-delay: -3.1s;
}

.breeze-cluster--right img:first-child {
  left: auto;
  right: 28px;
  --leaf-angle: -104deg;
  --leaf-delay: -1.3s;
}

.breeze-cluster--right img:last-child {
  left: auto;
  right: 1px;
  bottom: 59px;
  --leaf-angle: -146deg;
  --leaf-delay: -1.8s;
}

.breeze-cluster--lower img:first-child {
  --leaf-angle: -18deg;
  --leaf-delay: -3.4s;
}

.breeze-cluster--lower img:last-child {
  --leaf-angle: 33deg;
  --leaf-delay: -3.9s;
}

/* The two loose leaves stay in narrow side gutters, behind the invitation. */
.breeze-leaf {
  --leaf-width: clamp(18px, 2.1vw, 31px);
  --leaf-opacity: 0;
  --leaf-angle: -28deg;
  left: 3%;
  top: 35%;
  transform-origin: 50% 50%;
}

.breeze-leaf--right {
  left: auto;
  right: 3%;
  top: 64%;
  --leaf-width: clamp(16px, 1.7vw, 26px);
  --leaf-angle: 141deg;
}

.enhanced .breeze-cluster {
  animation: woodland-gust 18s ease-in-out infinite;
  animation-delay: var(--breeze-delay);
}

.enhanced .breeze-cluster img {
  animation: woodland-rustle 18s ease-in-out infinite;
  animation-delay: var(--leaf-delay, 0s);
}

.enhanced .breeze-leaf {
  animation: woodland-loose-left 20s ease-in-out infinite;
  animation-delay: -5.7s;
}

.enhanced .breeze-leaf--right {
  animation-name: woodland-loose-right;
  animation-duration: 19s;
  animation-delay: -14.2s;
}

@keyframes woodland-gust {
  0%, 28%, 84%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  40% { transform: translate3d(3px, -1px, 0) rotate(calc(6deg * var(--breeze-side))); }
  48% { transform: translate3d(1px, 0, 0) rotate(calc(2deg * var(--breeze-side))); }
  57% { transform: translate3d(2px, -1px, 0) rotate(calc(4deg * var(--breeze-side))); }
  69% { transform: translate3d(0, 0, 0) rotate(calc(-1deg * var(--breeze-side))); }
}

@keyframes woodland-rustle {
  0%, 29%, 78%, 100% { transform: rotate(var(--leaf-angle)); }
  37% { transform: rotate(calc(var(--leaf-angle) + 3deg)); }
  42% { transform: rotate(calc(var(--leaf-angle) - 2deg)); }
  48% { transform: rotate(calc(var(--leaf-angle) + 4deg)); }
  53% { transform: rotate(calc(var(--leaf-angle) - 1deg)); }
  61% { transform: rotate(calc(var(--leaf-angle) + 2deg)); }
  69% { transform: rotate(calc(var(--leaf-angle) - .6deg)); }
}

@keyframes woodland-loose-left {
  0%, 26% { opacity: 0; transform: translate3d(-6px, -14px, 0) rotate(-28deg); }
  32% { opacity: .48; }
  45% { opacity: .54; transform: translate3d(7px, 19px, 0) rotate(8deg); }
  61% { opacity: .4; transform: translate3d(-4px, 42px, 0) rotate(41deg); }
  72%, 100% { opacity: 0; transform: translate3d(5px, 65px, 0) rotate(67deg); }
}

@keyframes woodland-loose-right {
  0%, 39% { opacity: 0; transform: translate3d(6px, -16px, 0) rotate(141deg); }
  45% { opacity: .42; }
  56% { opacity: .49; transform: translate3d(-6px, 13px, 0) rotate(166deg); }
  68% { opacity: .33; transform: translate3d(4px, 38px, 0) rotate(187deg); }
  79%, 100% { opacity: 0; transform: translate3d(-3px, 59px, 0) rotate(203deg); }
}

html[data-motion="paused"] .woodland-breeze *,
html[data-hidden="true"] .woodland-breeze * {
  animation-play-state: paused !important;
}

@media (max-width: 600px) {
  .breeze-cluster--upper { left: -91px; top: 25%; }
  .breeze-cluster--right { right: -99px; top: 58%; }
  .breeze-cluster--lower { left: -79px; bottom: -46px; }
  .breeze-leaf { left: .5%; --leaf-width: 17px; }
  .breeze-leaf--right { left: auto; right: .5%; --leaf-width: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .woodland-breeze * { animation: none !important; }
  .breeze-leaf { display: none; }
}