/* Motion stays inside the illustrations; paper, labels and grid keep their positions. */
:is(#tags-section, #site-garden-preview) .tag-motion-item {
  --garden-motion-state: paused;
  --garden-sway-duration: 7.8s;
  --garden-sway-delay: -2.4s;
  --garden-petal-duration: 12s;
  --garden-petal-delay: -4.5s;
}

:is(#tags-section, #site-garden-preview) .tag-motion-item:nth-child(4n + 2) {
  --garden-sway-duration: 9.1s;
  --garden-sway-delay: -6.3s;
  --garden-petal-duration: 14.4s;
  --garden-petal-delay: -9.8s;
}

:is(#tags-section, #site-garden-preview) .tag-motion-item:nth-child(4n + 3) {
  --garden-sway-duration: 8.6s;
  --garden-sway-delay: -4.1s;
  --garden-petal-duration: 13.1s;
  --garden-petal-delay: -1.7s;
}

:is(#tags-section, #site-garden-preview) .tag-motion-item:nth-child(4n) {
  --garden-sway-duration: 10.2s;
  --garden-sway-delay: -7.6s;
  --garden-petal-duration: 15.3s;
  --garden-petal-delay: -6.1s;
}

:is(#tags-section, #site-garden-preview) .tag-motion-running {
  --garden-motion-state: running;
}

/* Animate the SVG, leaving the meadow theme's mirrored flowerbed untouched. */
:is(#tags-section, #site-garden-preview) .tag-motion-item .tag-garden-scene {
  transform-origin: 50% 100%;
  animation: tag-garden-sway calc(var(--garden-sway-duration) * var(--site-motion-duration-scale, 1)) ease-in-out calc(var(--garden-sway-delay) * var(--site-motion-duration-scale, 1)) infinite;
  animation-play-state: var(--garden-motion-state);
  translate: 0 0;
  transition: translate .6s ease;
}

:is(#tags-section, #site-garden-preview) .tag-motion-running .tag-garden-scene {
  will-change: transform;
}

:is(#tags-section, #site-garden-preview) .tag-motion-item .tag-garden-bed::before,
:is(#tags-section, #site-garden-preview) .tag-motion-item .tag-garden-bed::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 19%;
  width: 5px;
  height: 8px;
  border-radius: 75% 20% 70% 25%;
  background: var(--garden-petal, #eab6be);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: tag-garden-petal-drift calc(var(--garden-petal-duration) * var(--site-motion-duration-scale, 1)) linear calc(var(--garden-petal-delay) * var(--site-motion-duration-scale, 1)) infinite;
  animation-play-state: var(--garden-motion-state);
}

:is(#tags-section, #site-garden-preview) .tag-motion-item .tag-garden-bed::after {
  top: 4px;
  left: 73%;
  width: 4px;
  height: 7px;
  background: var(--garden-petal-light, #f9dfd8);
  box-shadow: inset 0 0 0 .5px var(--garden-petal, #eab6be);
  animation-name: tag-garden-petal-return;
  animation-duration: calc((var(--garden-petal-duration) + 3s) * var(--site-motion-duration-scale, 1));
  animation-delay: calc((var(--garden-petal-delay) - 5.2s) * var(--site-motion-duration-scale, 1));
}

#tags-section .tag-motion-item .tag-garden-banner {
  transform-origin: 50% 100%;
  animation: tag-garden-breathe calc(11s * var(--site-motion-duration-scale, 1)) ease-in-out calc(-3s * var(--site-motion-duration-scale, 1)) infinite;
  animation-play-state: var(--garden-motion-state);
  translate: 0 0;
  transition: translate .7s ease;
}

#tags-section .tag-motion-item .tag-garden-emblem {
  transform-origin: 50% 85%;
  transition: transform .55s cubic-bezier(.2, .75, .3, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #tags-section .tag-motion-running:hover .tag-garden-scene {
    translate: 0 -1.5px;
  }

  #tags-section .tag-motion-running:hover .tag-garden-emblem {
    transform: rotate(7deg) translateY(-1px);
  }

  #tags-section .tag-motion-running:hover .tag-garden-banner {
    translate: 0 -2px;
  }
}

#tags-section .tag-motion-running:focus-within .tag-garden-emblem {
  transform: rotate(5deg);
}

@keyframes tag-garden-sway {
  0%, 100% { transform: rotate(-.85deg) skewX(-.35deg); }
  50% { transform: rotate(1.05deg) skewX(.45deg); }
}

@keyframes tag-garden-petal-drift {
  0%, 14% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-25deg); }
  22% { opacity: .72; }
  42% { opacity: .62; transform: translate3d(10px, 15px, 0) rotate(70deg); }
  64% { opacity: .42; transform: translate3d(4px, 27px, 0) rotate(150deg); }
  79%, 100% { opacity: 0; transform: translate3d(15px, 35px, 0) rotate(210deg); }
}

@keyframes tag-garden-petal-return {
  0%, 20% { opacity: 0; transform: translate3d(0, 0, 0) rotate(20deg); }
  29% { opacity: .8; }
  48% { opacity: .68; transform: translate3d(-9px, 14px, 0) rotate(-65deg); }
  68% { opacity: .45; transform: translate3d(-3px, 26px, 0) rotate(-150deg); }
  83%, 100% { opacity: 0; transform: translate3d(-15px, 37px, 0) rotate(-220deg); }
}

@keyframes tag-garden-breathe {
  0%, 100% { transform: rotate(-.45deg) scale(1); opacity: .88; }
  50% { transform: rotate(.55deg) scale(1.018); opacity: 1; }
}

:is(#tags-section, #site-garden-preview) .tag-motion-disabled .tag-garden-scene,
#tags-section .tag-motion-disabled .tag-garden-banner,
#tags-section .tag-motion-disabled .tag-garden-emblem {
  animation: none;
  transition: none;
  transform: none;
  translate: none;
  will-change: auto;
}

:is(#tags-section, #site-garden-preview) .tag-motion-disabled .tag-garden-bed::before,
:is(#tags-section, #site-garden-preview) .tag-motion-disabled .tag-garden-bed::after {
  content: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(#tags-section, #site-garden-preview) .tag-motion-item .tag-garden-scene,
  #tags-section .tag-motion-item .tag-garden-banner,
  #tags-section .tag-motion-item .tag-garden-emblem {
    animation: none;
    transition: none;
    transform: none;
    translate: none;
    will-change: auto;
  }

  #tags-section .tag-motion-running:focus-within .tag-garden-emblem {
    transform: none;
  }

  :is(#tags-section, #site-garden-preview) .tag-motion-item .tag-garden-bed::before,
  :is(#tags-section, #site-garden-preview) .tag-motion-item .tag-garden-bed::after {
    content: none;
    animation: none;
  }
}