/* REFERENCE
 * - ui/companion/mote-scene.js (the two SVG layers these rules animate)
 * - ui/companion/mote-box.js (builds .pg-stage--mhsc / .mhsc-front)
 * - ui/companion/playground.css (base .pg-stage/.pg-mote stacking this scopes over)
 *
 * "Iltapuutarha" scene: layer stacking + all scene animation (clouds, stars,
 * fireflies, grass sway, flower bob). Transform/opacity only — no filters.
 */

/* The dusk scene replaces the old green-gradient stage backdrop. */
.pg-stage--mhsc {
  background: #101623;
  border-color: rgba(246, 200, 127, 0.14);
}

.mhsc {
  display: block;
  width: 100%;
  height: 100%;
}

/* Foreground thicket: above the wandering mote (z-sticky - 1), below the
 * particles/thought layers (z-sticky + 1..3). Never eats clicks. */
.mhsc-front {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-sticky);
}

/* Scene crossfade: mote-box.setScene() fades the backdrop out, swaps the
 * markup, and fades back in — duration must match setScene's 380ms. */
.pg-scene, .mhsc-front {
  transition: opacity 0.38s ease;
}
.pg-scene--fading { opacity: 0; }

/* Dynamic work layer (tree / ore vein): between backdrop and mote. */
.pg-worklayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pg-worklayer svg { display: block; width: 100%; height: 100%; }

/* Depth: mote-box scales the mote with distance (far meadow → front lip);
 * `scale` eases in step with position so approaching reads as walking
 * closer, not inflating. Inline transition-duration per move still wins. */
.pg-stage--mhsc .pg-mote {
  transition:
    left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    top 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Atmosphere (ILTA): drifting cloud wisps, twinkling stars, fireflies --- */
.mhsc-cloud--a { animation: mhsc-drift 34s ease-in-out infinite alternate; }
.mhsc-cloud--b { animation: mhsc-drift 26s ease-in-out -13s infinite alternate-reverse; }
.mhsc-ff { opacity: 0; animation: mhsc-ff 11s ease-in-out infinite; }
.mhsc-ff--1 { animation-duration: 10s; }
.mhsc-ff--2 { animation-duration: 12.5s; animation-delay: -4s; }
.mhsc-ff--3 { animation-duration: 11s; animation-delay: -7.5s; }
.mhsc-ff--4 { animation-duration: 9.5s; animation-delay: -6s; }
.mhsc-ff--2, .mhsc-ff--4 { animation-direction: reverse; }
.mhsc-tw { animation: mhsc-tw 8s ease-in-out infinite; }
.mhsc-tw--b { animation-duration: 11s; animation-delay: -3s; }
.mhsc-tw--c { animation-duration: 9s; animation-delay: -6s; }

@keyframes mhsc-drift {
  from { transform: translateX(-9px); }
  to { transform: translateX(11px); }
}
/* Seam-free loop: opacity is 0 at both ends so the position snap is invisible. */
@keyframes mhsc-ff {
  0% { transform: translate(0, 0); opacity: 0; }
  14% { opacity: 0.9; }
  42% { opacity: 0.45; }
  55% { transform: translate(8px, -11px); }
  72% { opacity: 0.85; }
  100% { transform: translate(13px, -19px); opacity: 0; }
}
@keyframes mhsc-tw {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.95; }
}

/* --- Flora (MIELIKKI): one shared breath of wind, staggered per tuft --- */
.mhsc-sway, .mhsc-bob, .mhsc-lip path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.mhsc-sway { animation: mhsc-sway 7s ease-in-out infinite; }
.mhsc-bob { animation: mhsc-bob 8.5s ease-in-out infinite; }
.mhsc-lip path { animation: mhsc-sway 9s ease-in-out infinite; }
.mhsc-d1 { animation-delay: -1.5s; }
.mhsc-d2 { animation-delay: -3.2s; }
.mhsc-d3 { animation-delay: -4.8s; }
.mhsc-d4 { animation-delay: -6.4s; }
.mhsc-lip path:nth-of-type(2n) { animation-delay: -3.4s; }
.mhsc-lip path:nth-of-type(3n) { animation-delay: -6.1s; }

@keyframes mhsc-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2.4deg); }
}
@keyframes mhsc-bob {
  0%, 100% { transform: rotate(-1.2deg) translateY(0); }
  50% { transform: rotate(1.4deg) translateY(-0.6px); }
}

/* --- Mote moods (box brain): floating comic words, naps, joy --- */
.pg-particle--word {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(250, 244, 230, 0.88);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  animation: mh-word-float 2s ease-out forwards;
}
@keyframes mh-word-float {
  0% { opacity: 0; transform: translateY(4px); }
  15% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(5px, -20px); }
}

/* Napping: eyes closed, breath slows. */
.pg-mote--sleepy .mote-eye { animation: none; transform: scaleY(0.12); }
.pg-mote--sleepy .mote-breathe { animation-duration: 5.8s; }

/* Joy flash (resource earned, greetings): wide sparkly eyes + a lift. */
.pg-mote--happy .mote-eye { animation: none; transform: scale(1.15); }

@media (prefers-reduced-motion: reduce) {
  .mhsc-cloud--a, .mhsc-cloud--b, .mhsc-ff, .mhsc-tw,
  .mhsc-sway, .mhsc-bob, .mhsc-lip path { animation: none !important; }
  /* Fireflies default to opacity 0 (the loop carries it) — pin them visible. */
  .mhsc-ff { opacity: 0.7; }
}