/* Shared articulation: a miniature keeps the same natural movement in its
   catalogue preview and while visiting the site. Static artwork stays intact. */
.site-motion-event {
  --garden-motion-play: var(--site-motion-state, paused);
  --garden-motion-scale: var(--site-motion-duration-scale, 1);
  --garden-motion-phase: calc(-1 * var(--site-event-delay, 0s));
}
.site-widget-sample { --garden-motion-play: paused; }
.garden-border-life {
  --garden-motion-play: var(--site-motion-state, paused);
  --garden-motion-scale: var(--site-motion-duration-scale, 1);
}
.site-widget-sample.is-motion-preview { --garden-motion-play: running; }
.site-widget-card:nth-child(2n) .site-widget-sample { --garden-motion-phase: -.7s; }
.site-widget-card:nth-child(3n) .site-widget-sample { --garden-motion-phase: -1.4s; }
.site-widget-card:nth-child(4n) .site-widget-sample { --garden-motion-phase: -2.1s; }
.site-widget-sample:not(.is-motion-preview) .garden-art,
.site-widget-sample:not(.is-motion-preview) .garden-art * { animation: none !important; }

@media (prefers-reduced-motion: no-preference) {
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) :is(.garden-wing, .garden-leg, .garden-glow, .garden-rotor, .garden-fish-tail, .garden-fin, .garden-ear, .garden-animal-tail, .garden-feeler, .garden-flower-head, .garden-sprig, .garden-steam, .garden-ripple-ring, .garden-glint, .garden-swing, .garden-breathe) {
    transform-box: view-box;
    transform-origin: var(--garden-part-origin, 32px 32px);
    animation-duration: calc(var(--garden-part-period, 3s) * var(--garden-motion-scale, 1));
    animation-delay: calc(var(--garden-part-delay, 0s) * var(--garden-motion-scale, 1) + var(--garden-motion-phase, 0s));
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: var(--garden-motion-play, paused);
  }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-wing {
    --garden-part-period: .55s;
    transform-origin: var(--garden-part-origin, 32px 25px);
    animation-name: garden-wingbeat;
  }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life)[data-behavior="bee"] .garden-wing { --garden-part-period: .15s; transform-origin: var(--garden-part-origin, 32px 31px); }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life)[data-behavior="dragonfly"] .garden-wing { --garden-part-period: .12s; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life)[data-behavior="firefly"] .garden-wing { --garden-part-period: .65s; transform-origin: var(--garden-part-origin, 32px 30px); }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life)[data-behavior="bird"] .garden-wing { --garden-part-period: 1.15s; transform-origin: var(--garden-part-origin, 32px 34px); animation-name: garden-bird-wingbeat; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life)[data-behavior="bird"][data-variant="1"] .garden-wing { --garden-part-period: 3.2s; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-leg {
    --garden-part-period: 1.2s;
    transform-box: view-box;
    transform-origin: var(--garden-part-origin, 32px 40px);
    animation-name: garden-footstep;
  }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-leg:nth-child(even) { animation-direction: reverse; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life)[data-behavior="water-swim"] .garden-leg { --garden-part-period: 2.4s; }
  .site-motion-event[data-behavior="ground-walk"] .garden-leg { animation-play-state: var(--garden-walk-state, var(--garden-motion-play, paused)); }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-glow { --garden-part-period: 3.4s; animation-name: garden-lantern; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-rotor { --garden-part-period: 7s; transform-origin: 32px 29px; animation-name: garden-pinwheel; animation-timing-function: linear; }
  .site-motion-layer[data-wind="west"] .garden-rotor { animation-direction: reverse; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-fish-tail { --garden-part-period: 1.25s; animation-name: garden-tail-stroke; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-fin { --garden-part-period: 1.7s; animation-name: garden-fin-stroke; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-ear { --garden-part-period: 6.7s; animation-name: garden-ear-twitch; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-animal-tail { --garden-part-period: 4.8s; animation-name: garden-tail-curl; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-feeler { --garden-part-period: 4.4s; animation-name: garden-feeler-search; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-flower-head { --garden-part-period: 6.2s; animation-name: garden-flower-unfold; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-sprig { --garden-part-period: 5.3s; animation-name: garden-leaf-breeze; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-steam { --garden-part-period: 3.5s; animation-name: garden-steam-rise; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-ripple-ring { --garden-part-period: 4s; animation-name: garden-water-ring; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-glint { --garden-part-period: 4.6s; animation-name: garden-soft-glint; }

  /* Short preview paths stay inside each card. Plant roots and plated objects
     remain still; their individual parts supply the motion. */
  .site-widget-sample > .garden-art {
    animation-duration: calc(5s * var(--garden-motion-scale, 1));
    animation-delay: var(--garden-motion-phase, 0s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: var(--garden-motion-play, paused);
    transform-origin: 50% 60%;
  }
  .site-widget-sample:is([data-behavior="petal-fall"], [data-behavior="leaf-fall"], [data-behavior="confetti"], [data-behavior="snow"]) > .garden-art { animation-name: garden-preview-fall; }
  .site-widget-sample:is([data-behavior="seed-drift"], [data-behavior="paper-glide"], [data-behavior="cloud"]) > .garden-art { animation-name: garden-preview-drift; }
  .site-widget-sample:is([data-behavior="butterfly"], [data-behavior="bee"], [data-behavior="dragonfly"], [data-behavior="firefly"], [data-behavior="bird"]) > .garden-art { animation-name: garden-preview-hover; }
  .site-widget-sample[data-behavior="ground-walk"] > .garden-art { animation-name: garden-preview-stroll; }
  .site-widget-sample[data-behavior="water-swim"] > .garden-art { animation-name: garden-preview-swim; }
  .site-widget-sample[data-behavior="ground-walk"][data-variant="1"] > .garden-art { animation-name: garden-preview-lookaround; }
  .site-widget-sample[data-behavior="ground-walk"][data-variant="1"] .garden-leg { animation-name: garden-preview-rest; animation-duration: calc(5s * var(--garden-motion-scale, 1)); animation-direction: normal; animation-delay: var(--garden-motion-phase, 0s); }
  .site-widget-sample[data-behavior="rain"] > .garden-art { animation-name: garden-preview-rain; animation-duration: calc(2.6s * var(--garden-motion-scale, 1)); }
  .site-widget-sample:is([data-behavior="twinkle"], [data-behavior="sunbeam"]) > .garden-art { animation-name: garden-preview-light; }
  .site-widget-sample[data-behavior="meteor"] > .garden-art { animation-name: garden-preview-meteor; }
}

@keyframes garden-wingbeat { 0%, 100% { scale: 1 1; } 50% { scale: .42 1; } }
@keyframes garden-swing-rock { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes garden-sleep-breath { 0%, 100% { scale: 1 1; } 50% { scale: 1.025 1.035; } }
@media (prefers-reduced-motion: no-preference) {
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-swing { --garden-part-period: 7s; animation-name: garden-swing-rock; }
  :is(.site-motion-event, .site-widget-sample, .garden-border-life) .garden-breathe { --garden-part-period: 4s; animation-name: garden-sleep-breath; }
}
@keyframes garden-bird-wingbeat { 0%, 100% { rotate: -9deg; scale: 1 1; } 50% { rotate: 13deg; scale: 1 .77; } }
@keyframes garden-footstep { 0%, 100% { rotate: -9deg; } 50% { rotate: 9deg; } }
@keyframes garden-lantern { 0%, 100% { opacity: .38; } 45%, 60% { opacity: 1; } }
@keyframes garden-pinwheel { to { rotate: 360deg; } }
@keyframes garden-tail-stroke { 0%, 100% { rotate: -12deg; scale: .92 1; } 50% { rotate: 12deg; scale: 1 1; } }
@keyframes garden-fin-stroke { 0%, 100% { rotate: -10deg; } 50% { rotate: 12deg; } }
@keyframes garden-ear-twitch { 0%, 44%, 78%, 100% { rotate: 0deg; } 52% { rotate: -12deg; } 60% { rotate: 4deg; } 67% { rotate: -5deg; } }
@keyframes garden-tail-curl { 0%, 100% { rotate: -4deg; } 45% { rotate: 8deg; } 70% { rotate: 1deg; } }
@keyframes garden-feeler-search { 0%, 100% { rotate: -7deg; } 40% { rotate: 8deg; } 65% { rotate: 2deg; } }
@keyframes garden-flower-unfold { 0%, 100% { scale: .96 .91; rotate: -2deg; } 55% { scale: 1 1.02; rotate: 2deg; } }
@keyframes garden-leaf-breeze { 0%, 100% { rotate: -3deg; } 55% { rotate: 4deg; } }
@keyframes garden-steam-rise { 0% { opacity: 0; translate: 0 3px; } 25% { opacity: .85; } 70% { opacity: .4; } 100% { opacity: 0; translate: 3px -10px; } }
@keyframes garden-water-ring { 0% { scale: .55 .6; opacity: 0; } 25% { opacity: .9; } 100% { scale: 1.18 1.12; opacity: 0; } }
@keyframes garden-soft-glint { 0%, 100% { opacity: .25; scale: .86; } 55% { opacity: .95; scale: 1.08; } }
@keyframes garden-preview-fall { 0%, 100% { translate: -2px -4px; rotate: -7deg; } 50% { translate: 3px 5px; rotate: 8deg; } }
@keyframes garden-preview-drift { 0%, 100% { translate: -5px 0; rotate: -2deg; } 50% { translate: 5px 2px; rotate: 3deg; } }
@keyframes garden-preview-hover { 0%, 100% { translate: -4px 1px; } 25% { translate: 0 -5px; } 55% { translate: 5px -2px; } 78% { translate: 1px 2px; } }
@keyframes garden-preview-swim { 0%, 100% { translate: -4px 1px; rotate: -3deg; } 28% { translate: 0 -2px; rotate: -1deg; } 55% { translate: 5px 0; rotate: 3deg; } 80% { translate: 1px 2px; rotate: 1deg; } }
@keyframes garden-preview-stroll { 0%, 100% { translate: -4px 0; } 50% { translate: 4px 0; } }
@keyframes garden-preview-lookaround { 0%, 100% { translate: -4px 0; } 38%, 59% { translate: 0 0; } 80% { translate: 4px 0; } }
@keyframes garden-preview-rest { 0%, 16%, 32%, 70%, 86%, 100% { rotate: -8deg; } 8%, 24%, 78%, 94% { rotate: 8deg; } 38%, 59% { rotate: 0deg; } }
@keyframes garden-preview-rain { 0% { opacity: 0; translate: -2px -11px; } 20%, 75% { opacity: 1; } 100% { opacity: 0; translate: 2px 11px; } }
@keyframes garden-preview-light { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes garden-preview-meteor { 0%, 15% { opacity: 0; translate: -8px -8px; } 35%, 65% { opacity: 1; } 90%, 100% { opacity: 0; translate: 8px 8px; } }

/* Printing keeps complete, legible static illustrations. */
@media print {
  :is(.site-widget-sample, .site-motion-event) .garden-art,
  :is(.site-widget-sample, .site-motion-event) .garden-art * { animation: none !important; }
}