/* Light foreground details cover the viewport while dialogs and open menus stay above. */
html.site-motion-enabled {
  --site-motion-state: paused;
  --site-heading-motion-state: paused;
}

html.site-motion-enabled.site-motion-awake {
  --site-motion-state: running;
}

html.site-motion-enabled.site-motion-awake.site-motion-heading-visible.site-motion-sway {
  --site-heading-motion-state: running;
}

html.site-motion-enabled .app-shell {
  position: relative;
  z-index: auto;
}

.site-motion-layer {
  position: fixed;
  inset: 0;
  z-index: 35;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  user-select: none;
  contain: layout paint style;
}

.site-motion-ambient,
.site-motion-events {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-motion-event {
  position: absolute;
  left: var(--site-event-x);
  top: var(--site-event-y);
  width: var(--site-event-size);
  height: var(--site-event-size);
  color: var(--site-event-color, var(--site-petal, #d5b1be));
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: site-event-still var(--site-event-duration) linear var(--site-event-delay) both;
  animation-play-state: var(--site-motion-state, paused);
  will-change: transform, opacity;
}

.site-motion-event > svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: none;
  overflow: visible;
  pointer-events: none;
}

.site-motion-event:is([data-behavior="petal-fall"], [data-behavior="leaf-fall"], [data-behavior="confetti"], [data-behavior="snow"], [data-behavior="rain"]) { animation-name: site-event-fall; }
.site-motion-event:is([data-behavior="seed-drift"], [data-behavior="paper-glide"]) { animation-name: site-event-drift; }
.site-motion-event:is([data-behavior="butterfly"], [data-behavior="bee"], [data-behavior="dragonfly"]) { animation-name: site-event-forage; }
.site-motion-event:is([data-behavior="butterfly"], [data-behavior="bee"], [data-behavior="dragonfly"])[data-variant="2"] { animation-name: site-event-hover; }
.site-motion-event:is([data-behavior="bird"], [data-behavior="cloud"], [data-behavior="ground-walk"], [data-behavior="water-swim"]) { animation-name: site-event-cross; }
.site-motion-event[data-behavior="ground-walk"][data-variant="1"] { animation-name: site-event-walk-pause; }
.site-motion-event[data-behavior="firefly"] { animation-name: site-event-firefly; filter: drop-shadow(0 0 3px var(--site-petal, #d5c693)); }
.site-motion-event[data-behavior="meteor"] { animation-name: site-event-meteor; }
.site-motion-event[data-behavior="bloom"] { animation-name: site-event-bloom; transform-origin: 50% 100%; }
.site-motion-event[data-behavior="bloom"][data-growth="false"] { animation-name: site-event-still; }
.site-motion-event[data-behavior="ripple"] { animation-name: site-event-ripple; }
.site-motion-event:is([data-behavior="ground-walk"], [data-behavior="bloom"]) { top: calc(var(--site-event-y) - var(--site-event-size)); }
.site-motion-event:is([data-behavior="bird"], [data-behavior="ground-walk"], [data-behavior="water-swim"], [data-behavior="bee"], [data-behavior="dragonfly"]) > svg { scale: var(--site-event-facing, 1) 1; }

/* Native keyframes carry each visitor along its own bounded Bézier path. The
   centre anchor and tangent-driven facing keep turns attached to the habitat. */
.site-motion-event[data-path-kind="bezier"][data-path-engine] {
  left: calc(var(--site-event-x) - var(--site-event-size) / 2);
  top: calc(var(--site-event-y) - var(--site-event-size) / 2);
  animation-name: site-event-still;
}
.site-motion-event[data-path-kind="bezier"][data-path-engine="web-animations"] { animation: none; }
.site-motion-event[data-path-kind="bezier"][data-behavior="ground-walk"] { top: calc(var(--site-event-y) - var(--site-event-size)); }
.site-motion-event[data-path-kind="bezier"] > svg { scale: 1 1; }

/* A soft, low waterline belongs only to active aquatic scenes. Fish and ripples
   share this bounded habitat instead of being scattered through the page. */
.site-motion-layer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5vh;
  height: 12vh;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--site-alt-tint, #baded7) 42%, transparent), transparent 72%);
  transition: opacity 1s ease;
}
.site-motion-layer[data-water-active="true"]::before { opacity: .85; }

.site-event-wing {
  transform-box: view-box;
  transform-origin: 20px 21px;
  animation: site-butterfly-wing var(--site-event-flap, .45s) ease-in-out infinite alternate;
  animation-play-state: var(--site-motion-state, paused);
}

.site-event-wing-right { animation-delay: -.08s; }

.site-motion-event[data-behavior="petal-fall"] > svg,
.site-motion-event[data-behavior="confetti"] > svg,
.site-motion-event[data-behavior="leaf-fall"] > svg {
  animation: site-event-tumble var(--site-event-pulse, 3s) ease-in-out infinite alternate;
  animation-play-state: var(--site-motion-state, paused);
}

.site-motion-event[data-behavior="firefly"] > svg,
.site-motion-event[data-behavior="twinkle"] > svg {
  animation: site-event-twinkle var(--site-event-pulse, 3s) ease-in-out infinite alternate;
  animation-play-state: var(--site-motion-state, paused);
}

.site-motion-event[data-behavior="sunbeam"] > svg,
.site-motion-event[data-subject="moon"] > svg { animation: site-event-sunlight var(--site-event-pulse) ease-in-out infinite alternate; animation-play-state: var(--site-motion-state, paused); }

.site-motion-event[data-behavior="bloom"][data-growth="true"] > svg { transform-origin: 50% 100%; animation: site-heading-breeze var(--site-event-pulse) ease-in-out infinite alternate; animation-play-state: var(--site-motion-state, paused); }

.site-motion-particle {
  position: absolute;
  top: -32px;
  left: var(--site-mote-x);
  display: block;
  width: var(--site-mote-size);
  height: var(--site-mote-size);
  opacity: 0;
  pointer-events: none;
  animation: site-garden-fall var(--site-mote-duration) linear var(--site-mote-delay) infinite;
  animation-play-state: var(--site-motion-state, paused);
}

.site-motion-particle::before {
  content: '';
  display: block;
  width: 100%;
  height: 135%;
  border-radius: 75% 18% 75% 24%;
  background: var(--site-petal, #dbb4bd);
  box-shadow: inset 1px 1px 0 var(--site-petal-light, #f2dfe4);
  transform-origin: 55% 65%;
  animation: site-garden-flutter var(--site-mote-sway) ease-in-out var(--site-mote-delay) infinite alternate;
  animation-play-state: var(--site-motion-state, paused);
}

.site-motion-particle:nth-child(3n + 2)::before {
  background: var(--site-petal-light, #f2dfe4);
  box-shadow: inset 0 0 0 .6px var(--site-petal, #dbb4bd);
}

.site-motion-particle:nth-child(3n)::before {
  animation-direction: alternate-reverse;
}

/* The ambient shower shares the catalogue's real silhouettes and vein details. */
.site-motion-particle[data-art]::before { display: none; }
.site-motion-particle[data-art] > svg {
  display: block;
  width: 155%;
  height: 155%;
  overflow: visible;
  transform-origin: 55% 65%;
  animation: site-garden-flutter var(--site-mote-sway) ease-in-out var(--site-mote-delay) infinite alternate;
  animation-play-state: var(--site-motion-state, paused);
}
.site-motion-particle[data-art]:nth-child(3n) > svg { animation-direction: alternate-reverse; }

html.site-motion-awake .site-motion-particle {
  will-change: transform;
}

.site-motion-layer[data-kind="leaf"] .site-motion-particle::before {
  height: 155%;
  border-radius: 2% 88% 4% 90%;
  background: var(--site-caption, #839276);
  box-shadow: inset 1.5px 0 0 var(--site-petal-light, #e4daba);
}

.site-motion-layer[data-kind="leaf"] .site-motion-particle:nth-child(3n + 2)::before {
  background: var(--site-petal, #cca876);
}

.site-motion-layer[data-kind="paper"] .site-motion-particle::before {
  height: 115%;
  border-radius: 1px 2px 1px 0;
  background: var(--site-petal, #d7b8c7);
  box-shadow: inset 0 0 0 .6px var(--site-edge, #d9d4ce);
}

.site-motion-layer[data-kind="paper"] .site-motion-particle:nth-child(3n + 2)::before {
  height: 75%;
  background: var(--site-alt-tint, #d9e6dc);
}

.site-motion-layer[data-kind="snow"] .site-motion-particle::before {
  width: 52%;
  height: 52%;
  border-radius: 50%;
  background: var(--site-petal, #a8bdce);
  box-shadow: 0 0 3px var(--site-petal-light, #e1eaf1);
}

.site-motion-layer[data-kind="snow"] .site-motion-particle:nth-child(3n + 2)::before {
  width: 35%;
  height: 35%;
  background: var(--site-ink, #859baa);
}

.site-motion-layer[data-kind="sparkle"] .site-motion-particle::before {
  width: 85%;
  height: 85%;
  border-radius: 0;
  background: var(--site-petal, #b5abc8);
  box-shadow: none;
  clip-path: polygon(50% 0, 62% 37%, 100% 50%, 62% 62%, 50% 100%, 37% 62%, 0 50%, 37% 37%);
}

.site-motion-layer[data-kind="sparkle"] .site-motion-particle:nth-child(3n + 2)::before {
  width: 35%;
  height: 35%;
  border-radius: 50%;
  clip-path: none;
  background: var(--site-caption, #9c94b2);
}

/* Stars stay in the sky; clear winter air shimmers without inventing snowfall. */
.site-motion-layer:is([data-kind="sparkle"], [data-kind="dust"]) .site-motion-particle {
  top: var(--site-mote-y);
  animation-name: site-event-still;
  --site-event-opacity: var(--site-mote-opacity);
}
.site-motion-layer:is([data-kind="sparkle"], [data-kind="dust"]) .site-motion-particle::before {
  animation-name: site-event-twinkle;
  width: 45%;
  height: 45%;
}
.site-motion-layer[data-kind="dust"] .site-motion-particle::before {
  width: 22%;
  height: 22%;
  border-radius: 50%;
}
.site-motion-layer[data-kind="rain"] .site-motion-particle::before {
  width: 1px;
  height: 160%;
  border-radius: 50%;
  background: var(--site-ink, #859baa);
  box-shadow: none;
  animation: none;
}

/* Independent rotate/scale properties preserve the theme's static artwork. */
html.site-motion-enabled .page-heading::after {
  transform-origin: 75% 85%;
  animation: site-heading-breeze calc(10.5s * var(--site-motion-duration-scale, 1)) ease-in-out calc(-3.7s * var(--site-motion-duration-scale, 1)) infinite;
  animation-play-state: var(--site-heading-motion-state);
}

html.site-motion-enabled .page-heading .title-dot {
  display: inline-block;
  transform-origin: 50% 90%;
  animation: site-heading-dot calc(7.4s * var(--site-motion-duration-scale, 1)) ease-in-out calc(-1.9s * var(--site-motion-duration-scale, 1)) infinite;
  animation-play-state: var(--site-heading-motion-state);
}

html.site-motion-enabled .heading-stat > [data-icon] {
  animation: site-heading-emblem calc(9s * var(--site-motion-duration-scale, 1)) ease-in-out calc(-5s * var(--site-motion-duration-scale, 1)) infinite;
  animation-play-state: var(--site-heading-motion-state);
}

html.site-motion-enabled :is(.button, .hero-button, .icon-button, .filter-button, .login-button, .nav-item) {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .25s ease, translate .25s ease;
}

html.site-motion-enabled :is(.button, .hero-button, .icon-button, .filter-button, .login-button, .nav-item) > :is(svg, [data-icon]) {
  transition: rotate .35s ease, translate .35s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.site-motion-awake.site-motion-sway :is(.button, .icon-button, .filter-button, .login-button):not(:disabled):hover {
    translate: 0 -1px;
  }

  html.site-motion-awake.site-motion-sway .nav-item:hover {
    translate: 2px 0;
  }

  html.site-motion-awake.site-motion-sway :is(.button, .hero-button, .icon-button, .filter-button, .login-button):not(:disabled):hover > :is(svg, [data-icon]),
  html.site-motion-awake.site-motion-sway .nav-item:hover > :is(svg, [data-icon]):first-child {
    rotate: -5deg;
  }

  html.site-motion-awake.site-motion-sway :is(.button, .icon-button, .filter-button):not(:disabled):active {
    translate: 0 0;
  }
}

@keyframes site-garden-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  7% { opacity: var(--site-mote-opacity); }
  87% { opacity: var(--site-mote-opacity); }
  100% { opacity: 0; transform: translate3d(var(--site-mote-drift, 0px), calc(100vh + 64px), 0); }
}

@keyframes site-event-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
  9% { opacity: var(--site-event-opacity); }
  35% { transform: translate3d(calc(var(--site-event-drift) * .3), calc(var(--site-event-dy) * .35), 0) rotate(calc(var(--site-event-turn) * .28)); }
  68% { transform: translate3d(calc(var(--site-event-drift) * .72), calc(var(--site-event-dy) * .68), 0) rotate(calc(var(--site-event-turn) * .7)); }
  88% { opacity: var(--site-event-opacity); }
  100% { opacity: 0; transform: translate3d(var(--site-event-drift), var(--site-event-dy), 0) rotate(var(--site-event-turn)); }
}
@keyframes site-event-drift {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-5deg); }
  12% { opacity: var(--site-event-opacity); }
  32% { transform: translate3d(calc(var(--site-event-drift) * .32), calc(var(--site-event-dy) * .22), 0) rotate(7deg); }
  64% { transform: translate3d(calc(var(--site-event-drift) * .64), calc(var(--site-event-dy) * .64), 0) rotate(-4deg); }
  87% { opacity: var(--site-event-opacity); }
  100% { opacity: 0; transform: translate3d(var(--site-event-drift), var(--site-event-dy), 0) rotate(var(--site-event-turn)); }
}
@keyframes site-event-forage {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-4deg); }
  12% { opacity: var(--site-event-opacity); }
  30% { transform: translate3d(calc(var(--site-event-drift) * .32), calc(var(--site-event-curve) * -1), 0) rotate(5deg); }
  52% { transform: translate3d(calc(var(--site-event-drift) * .5), calc(var(--site-event-curve) * .35), 0) rotate(-5deg); }
  73% { transform: translate3d(calc(var(--site-event-drift) * .7), calc(var(--site-event-dy) - var(--site-event-curve)), 0) rotate(3deg); }
  85% { opacity: var(--site-event-opacity); }
  100% { opacity: 0; transform: translate3d(var(--site-event-drift), var(--site-event-dy), 0); }
}
@keyframes site-event-hover {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  12% { opacity: var(--site-event-opacity); }
  38%, 60% { transform: translate3d(calc(var(--site-event-drift) * .45), calc(var(--site-event-dy) * .45), 0); }
  48% { transform: translate3d(calc(var(--site-event-drift) * .45), calc(var(--site-event-dy) * .45 - 3px), 0); }
  84% { opacity: var(--site-event-opacity); }
  100% { opacity: 0; transform: translate3d(var(--site-event-drift), var(--site-event-dy), 0); }
}
@keyframes site-event-cross {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  10% { opacity: var(--site-event-opacity); }
  38% { transform: translate3d(calc(var(--site-event-drift) * .38), calc(var(--site-event-dy) * .38 - var(--site-event-curve)), 0); }
  65% { transform: translate3d(calc(var(--site-event-drift) * .65), calc(var(--site-event-dy) * .65), 0); }
  88% { opacity: var(--site-event-opacity); }
  100% { opacity: 0; transform: translate3d(var(--site-event-drift), var(--site-event-dy), 0); }
}
@keyframes site-event-walk-pause {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  10% { opacity: var(--site-event-opacity); }
  38%, 59% { transform: translate3d(calc(var(--site-event-drift) * .4), 0, 0); }
  88% { opacity: var(--site-event-opacity); }
  100% { opacity: 0; transform: translate3d(var(--site-event-drift), 0, 0); }
}
@keyframes site-event-firefly {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  15% { opacity: var(--site-event-opacity); }
  32% { transform: translate3d(calc(var(--site-event-drift) * .28), calc(var(--site-event-curve) * -1), 0); }
  58% { transform: translate3d(calc(var(--site-event-drift) * .55), calc(var(--site-event-curve) * .5), 0); }
  84% { opacity: var(--site-event-opacity); }
  100% { opacity: 0; transform: translate3d(var(--site-event-drift), var(--site-event-dy), 0); }
}
@keyframes site-event-still {
  0%, 100% { opacity: 0; }
  18%, 78% { opacity: var(--site-event-opacity); }
}
@keyframes site-event-meteor {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--site-event-turn)) scale(.6); }
  15% { opacity: var(--site-event-opacity); }
  65% { opacity: var(--site-event-opacity); }
  100% { opacity: 0; transform: translate3d(var(--site-event-drift), var(--site-event-dy), 0) rotate(var(--site-event-turn)) scale(.8); }
}
@keyframes site-event-bloom {
  0% { opacity: 0; transform: scale(.7, .2); }
  22% { opacity: var(--site-event-opacity); transform: scale(1); }
  82% { opacity: var(--site-event-opacity); transform: scale(1); }
  100% { opacity: 0; transform: scale(.96); }
}
@keyframes site-event-ripple {
  0% { opacity: 0; transform: scale(.3, .15); }
  25% { opacity: var(--site-event-opacity); }
  75% { opacity: calc(var(--site-event-opacity) * .5); }
  100% { opacity: 0; transform: scale(1.6, .55); }
}
@keyframes site-butterfly-wing {
  from { transform: scaleX(.42) rotateY(-18deg); }
  to { transform: scaleX(1) rotateY(12deg); }
}

@keyframes site-bird-wing {
  from { transform: scaleY(.65) rotate(-8deg); }
  to { transform: scaleY(1) rotate(6deg); }
}
@keyframes site-animal-step {
  from { rotate: -6deg; }
  to { rotate: 6deg; }
}
@keyframes site-animal-rest {
  0%, 16%, 32%, 68%, 84%, 100% { rotate: -6deg; }
  8%, 24%, 76%, 92% { rotate: 6deg; }
  38%, 59% { rotate: 0deg; }
}
@keyframes site-pinwheel-turn {
  to { rotate: 360deg; }
}

@keyframes site-event-tumble {
  from { transform: rotateY(-30deg) rotate(-12deg); }
  to { transform: rotateY(50deg) rotate(18deg); }
}

@keyframes site-event-twinkle {
  from { opacity: .4; scale: .85; }
  to { opacity: 1; scale: 1.08; }
}

@keyframes site-event-sunlight {
  from { opacity: .76; scale: .97; }
  to { opacity: 1; scale: 1.02; }
}

@keyframes site-garden-flutter {
  0% { transform: translate3d(-10px, 0, 0) rotate(-35deg) rotateY(-30deg); }
  40% { transform: translate3d(12px, 0, 0) rotate(65deg) rotateY(30deg); }
  74% { transform: translate3d(4px, 0, 0) rotate(130deg) rotateY(-25deg); }
  100% { transform: translate3d(-8px, 0, 0) rotate(195deg) rotateY(20deg); }
}

@keyframes site-heading-breeze {
  0%, 100% { rotate: -1deg; }
  50% { rotate: 1deg; }
}

@keyframes site-heading-dot {
  0%, 100% { scale: 1; opacity: .82; }
  50% { scale: 1.1; opacity: 1; }
}

@keyframes site-heading-emblem {
  0%, 100% { rotate: -2deg; }
  50% { rotate: 2deg; }
}

@media (max-width: 650px) {
  html.site-motion-enabled .sidebar.open { z-index: 40; }
  html.site-motion-enabled .sidebar-backdrop.open { z-index: 39; }
  .site-motion-particle { width: calc(var(--site-mote-size) * .8); height: calc(var(--site-mote-size) * .8); }
}

html.site-motion-enabled:not(.site-motion-sway) .page-heading::after,
html.site-motion-enabled:not(.site-motion-sway) .page-heading .title-dot,
html.site-motion-enabled:not(.site-motion-sway) .heading-stat > [data-icon] {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-motion-layer { display: none; }

  .site-motion-particle,
  .site-motion-particle::before,
  .site-motion-event,
  .site-motion-event > svg,
  .site-event-wing,
  .garden-wing,
  .garden-leg,
  .garden-glow,
  .garden-rotor,
  html.site-motion-enabled .page-heading::after,
  html.site-motion-enabled .page-heading .title-dot,
  html.site-motion-enabled .heading-stat > [data-icon] {
    animation: none;
    will-change: auto;
  }

  html.site-motion-enabled :is(.button, .hero-button, .icon-button, .filter-button, .login-button, .nav-item),
  html.site-motion-enabled :is(.button, .hero-button, .icon-button, .filter-button, .login-button, .nav-item) > :is(svg, [data-icon]) {
    transition: none;
    translate: none;
    rotate: none;
  }

  html.site-motion-enabled .hero-button:hover { transform: none; }
}

@media print {
  .site-motion-layer { display: none; }
}