/* Decorative motion is progressive enhancement: artwork is visible and still
   until its owner marks the wrapper ready. Keep entered=true after first reveal. */
[data-botanical] {
  opacity: 1;
  transform: none;
}

[data-botanical] > .botanical-parallax {
  transform: none;
}

[data-botanical] > .botanical-parallax > .botanical-sway,
[data-botanical] .botanical-leaf {
  transform: none;
  transform-origin: 50% 85%;
  animation: none;
}

/* The persistent entered flag makes this transition happen only once. */
[data-botanical][data-botanical-ready="true"] {
  transition: opacity 700ms ease-out, transform 700ms ease-out;
  transition-delay: var(--botanical-delay, 0s);
}

[data-botanical][data-botanical-ready="true"]:not([data-botanical-entered="true"]) {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}

[data-botanical][data-botanical-ready="true"][data-botanical-entered="true"] {
  opacity: 1;
  transform: none;
}

[data-botanical][data-botanical-ready="true"][data-botanical-active="false"],
[data-botanical][data-botanical-ready="true"][data-botanical-visible="false"] {
  transition: none;
}

[data-botanical][data-botanical-ready="true"] > .botanical-parallax {
  transform: translate3d(0, var(--botanical-parallax-y, 0px), 0);
}

/* Preserve the animation phase when JS suspends an offscreen or hidden scene. */
[data-botanical][data-botanical-ready="true"] > .botanical-parallax > .botanical-sway {
  animation: botanical-flower-sway 10s ease-in-out infinite alternate;
  animation-delay: var(--botanical-delay, 0s);
  animation-play-state: paused;
}

[data-botanical][data-botanical-ready="true"] .botanical-leaf {
  --botanical-leaf-phase: -2s;
  animation: botanical-leaf-drift 9s ease-in-out infinite alternate;
  animation-delay: var(--leaf-delay, var(--botanical-leaf-phase));
  animation-play-state: paused;
}

[data-botanical][data-botanical-ready="true"] .botanical-leaf:nth-of-type(2n) {
  --botanical-leaf-phase: -5s;
}

[data-botanical][data-botanical-ready="true"] .botanical-leaf:nth-of-type(3n) {
  --botanical-leaf-phase: -7s;
}

[data-botanical][data-botanical-ready="true"][data-botanical-active="true"] > .botanical-parallax > .botanical-sway,
[data-botanical][data-botanical-ready="true"][data-botanical-active="true"] .botanical-leaf {
  animation-play-state: running;
}

[data-botanical][data-botanical-ready="true"][data-botanical-visible="false"] > .botanical-parallax > .botanical-sway,
[data-botanical][data-botanical-ready="true"][data-botanical-visible="false"] .botanical-leaf {
  animation-play-state: paused;
}

/* Either the document root or body may carry the shared motion preference. */
.motion-paused [data-botanical],
[data-botanical].motion-paused,
[data-botanical][data-botanical-motion="static"] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.motion-paused [data-botanical] > .botanical-parallax,
.motion-paused [data-botanical] > .botanical-parallax > .botanical-sway,
.motion-paused [data-botanical] .botanical-leaf,
[data-botanical].motion-paused > .botanical-parallax,
[data-botanical].motion-paused > .botanical-parallax > .botanical-sway,
[data-botanical].motion-paused .botanical-leaf,
[data-botanical][data-botanical-motion="static"] > .botanical-parallax,
[data-botanical][data-botanical-motion="static"] > .botanical-parallax > .botanical-sway,
[data-botanical][data-botanical-motion="static"] .botanical-leaf {
  transform: none !important;
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-botanical] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-botanical] > .botanical-parallax,
  [data-botanical] > .botanical-parallax > .botanical-sway,
  [data-botanical] .botanical-leaf {
    transform: none !important;
    animation-play-state: paused !important;
  }
}

@keyframes botanical-flower-sway {
  from { transform: rotate(-1.25deg); }
  to { transform: rotate(1.25deg); }
}

@keyframes botanical-leaf-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(4px, -3px, 0); }
}