/* Keep painted backgrounds and all hit targets still. Motion lives in overlays. */
.scene-atmosphere,
.scene-effects {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.scene-atmosphere { z-index: 1; }
.scene-effects { z-index: 16; }
.scene-atmosphere *, .scene-effects * { pointer-events: none; }
.ambient-sunlight {
  position: absolute;
  width: 62%;
  height: 120%;
  left: -13%;
  top: -35%;
  transform-origin: 50% 0;
  background: conic-gradient(from 142deg at 50% 0, transparent 0deg, #fff5b52b 8deg,
    transparent 15deg, #ffedaa20 21deg, transparent 31deg);
  animation: forest-sunlight 12s ease-in-out infinite alternate;
}
.ambient-leaf {
  position: absolute;
  left: var(--x);
  top: -5%;
  width: 1.1cqw;
  height: 1.8cqw;
  animation: forest-leaf-fall var(--duration) var(--delay) linear infinite;
}
.ambient-leaf b {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 90% 8% 85% 12%;
  background: linear-gradient(55deg, #74983a, #bcd566 48%, #dbe6a0 50%, #a2bd51 57%);
  box-shadow: 0 .1cqw .15cqw #25482c20;
  animation: forest-leaf-turn 3.8s var(--delay) ease-in-out infinite alternate;
}
.ambient-leaf:nth-child(3n) b { filter: hue-rotate(-22deg); }
.ambient-mote {
  position: absolute;
  width: .3cqw;
  height: .3cqw;
  min-width: 2px;
  min-height: 2px;
  border-radius: 50%;
  background: #fff6b9;
  box-shadow: 0 0 .5cqw .12cqw #ffe49b80;
  animation: forest-mote var(--duration) var(--delay) ease-in-out infinite alternate;
}
.ambient-butterfly {
  position: absolute;
  top: 52%;
  left: 4%;
  width: 2.4cqw;
  height: 2.1cqw;
  animation: forest-butterfly 19s -6s ease-in-out infinite;
}
.ambient-butterfly > span { position: relative; display: block; width: 100%; height: 100%; transform: rotate(-18deg); }
.ambient-butterfly i {
  position: absolute;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, #fff0a7, #e9b857 60%, #b97837);
  border: .08cqw solid #aa803d80;
  border-radius: 75% 35% 50% 65%;
  transform-origin: right center;
  animation: forest-wing .55s ease-in-out infinite alternate;
}
.ambient-butterfly i + i { left: 50%; border-radius: 35% 75% 65% 50%; transform-origin: left center; animation-delay: -.2s; }
.ambient-butterfly-far { left: 89%; top: 23%; scale: .65; animation-delay: -13s; animation-duration: 24s; }
.ambient-butterfly-far i { background: linear-gradient(135deg, #e0f6ff, #8ccdd6 60%, #5a9fb6); }
.ambient-water { position: absolute; left: 67%; top: 51%; width: 12%; height: 9%; transform: rotate(8deg); }
.ambient-water i { position: absolute; width: 70%; height: 20%; border-top: .13cqw solid #ecfff7ab; border-radius: 50%; animation: forest-ripple 4.5s ease-out infinite; }
.ambient-water i:nth-child(2) { top: 30%; left: 19%; animation-delay: -1.5s; }
.ambient-water i:nth-child(3) { top: 65%; left: 6%; animation-delay: -3s; }
.ambient-chimney { position: absolute; left: 68%; top: 17%; width: 3%; height: 1%; }
.ambient-chimney i { position: absolute; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #f6f3d887; animation: forest-steam 5s linear infinite; }
.ambient-chimney i:nth-child(2) { animation-delay: -1.7s; }
.ambient-chimney i:nth-child(3) { animation-delay: -3.4s; }

.motion-burst, .motion-note { position: absolute; }
.motion-ring { position: absolute; width: 3cqw; height: 3cqw; margin: -1.5cqw; border: .15cqw solid #fff7b0; border-radius: 50%; }
.motion-spark { position: absolute; width: .5cqw; height: .5cqw; margin: -.25cqw; background: #fff0a0; border-radius: 35%; box-shadow: 0 0 .35cqw #ffd876; }
.motion-spark:nth-child(2n) { background: #d8efc1; border-radius: 50%; }
.motion-note { font-size: 2.8cqw; font-weight: 900; color: #fff4af; text-shadow: 0 .15cqw .2cqw #785131, 0 0 .7cqw #e6b94f; }

/* One entry per scene, so re-rendering a task does not repeatedly fade controls. */
.has-scene-motion > .scene-content,
.has-scene-motion > .order,
.has-scene-motion > .topbar,
.has-scene-motion > .forest-topbar { animation: forest-arrive 550ms cubic-bezier(.2,.7,.3,1) both; }
.forest-map-dialog[open], .forest-settings[open] { animation: forest-panel 280ms cubic-bezier(.2,.8,.3,1) both; }
.forest-map-dialog[open]::backdrop, .forest-settings[open]::backdrop { animation: forest-backdrop 220ms ease-out both; }
.has-scene-motion button, .has-scene-motion a,
.forest-settings button { transition: scale 160ms ease, filter 160ms ease, background-color 160ms ease; }
.has-scene-motion button:active:not(:disabled), .has-scene-motion a:active { scale: .96; }
@media (hover: hover) {
  .forest-icon-button:hover, .round-control:hover { scale: 1.08; }
  .map-menu-button:hover, .map-continue:hover, .course-button:hover,
  .map-playground:hover, .pg-controls button:hover, .utility button:hover { filter: brightness(1.06); scale: 1.025; }
  .fruit-source:hover .front-fruit { animation: forest-wiggle 480ms ease-in-out; }
}
.map-sign-face { transform-origin: center top; animation: forest-sign-sway 6s ease-in-out infinite alternate; }
.map-signpost-arithmetic .map-sign-face { animation-delay: -2.3s; }
.map-signpost-shapes .map-sign-face { animation-delay: -4s; }
.map-signpost-patterns .map-sign-face { animation-delay: -1s; }
.map-signpost:hover .map-sign-face, .map-signpost:focus-visible .map-sign-face { animation-play-state: paused; }
.map-sign-face > span { display: inline-block; animation: forest-invitation 3.6s ease-in-out infinite; }
.course-friend svg, .pg-companion svg { transform-origin: 50% 92%; animation: forest-breathe 4.6s ease-in-out infinite; }
.course-destination:nth-child(2) .course-friend svg { animation-delay: -1.6s; }
.course-destination:nth-child(3) .course-friend svg { animation-delay: -3s; }
.pg-bird svg { animation: forest-bird 3.2s ease-in-out infinite; }
.course-item.selected > span > svg { animation: forest-select 300ms ease-out; }
.pg-water-line { animation: forest-flow 4.5s ease-in-out infinite; }
.pg-water-line + div.pg-water-line { animation-delay: -2s; }
.pg-river:after { animation: forest-flow 6s -2s ease-in-out infinite; }
.pg-engine { position: relative; }
.pg-engine:before, .pg-engine:after {
  content: ''; position: absolute; left: 62%; top: 1%; width: 1.25cqw; height: 1.25cqw;
  border-radius: 50%; background: #fff8dd9c; pointer-events: none;
  animation: forest-steam 3.5s linear infinite;
}
.pg-engine:after { animation-delay: -1.8s; }
[data-music-playing="true"] .pg-bird svg { animation-duration: 640ms; }
[data-music-playing="true"] .pg-engine:before, [data-music-playing="true"] .pg-engine:after { animation-duration: 1.5s; }
.game .selected-fruit { animation: none; }
.game .power-light { animation: forest-machine-light 3s ease-in-out infinite; }
.game .liquid:after, .game .cup-liquid:after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 24% 78%, #fff3b377 0 4%, transparent 5%),
    radial-gradient(circle at 68% 54%, #fff7d477 0 3%, transparent 4%),
    radial-gradient(circle at 45% 90%, #fff3b377 0 2%, transparent 3%);
  animation: forest-juice-bubbles 3.4s ease-in-out infinite;
}
.game .fireflies { display: none; } /* Shared ambient lights replace the older layer. */

@keyframes forest-sunlight { from { opacity: .35; transform: rotate(-4deg); } to { opacity: .8; transform: rotate(4deg); } }
@keyframes forest-leaf-fall {
  0% { transform: translate3d(0, -3cqw, 0) rotate(-30deg); opacity: 0; }
  8% { opacity: .75; }
  50% { transform: translate3d(calc(var(--sway) * 3cqw), 26cqw, 0) rotate(100deg); }
  90% { opacity: .65; }
  100% { transform: translate3d(calc(var(--sway) * -2cqw), 62cqw, 0) rotate(220deg); opacity: 0; }
}
@keyframes forest-leaf-turn { from { transform: rotateY(10deg) rotate(-12deg); } to { transform: rotateY(65deg) rotate(20deg); } }
@keyframes forest-mote { 0% { transform: translate(0, .8cqw); opacity: .15; } 60% { opacity: .85; } 100% { transform: translate(1cqw, -1.6cqw); opacity: .35; } }
@keyframes forest-butterfly { 0%, 100% { transform: translate(0, 0) rotate(-12deg); } 30% { transform: translate(5cqw, -4cqw) rotate(8deg); } 60% { transform: translate(8cqw, 1cqw) rotate(-5deg); } 80% { transform: translate(3cqw, 3cqw) rotate(12deg); } }
@keyframes forest-wing { from { transform: rotateY(0deg); } to { transform: rotateY(68deg); } }
@keyframes forest-ripple { 0% { transform: translateY(0) scaleX(.65); opacity: 0; } 35% { opacity: .8; } 100% { transform: translateY(1.5cqw) scaleX(1.2); opacity: 0; } }
@keyframes forest-steam { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: .55; } 100% { transform: translate(2.3cqw, -5cqw) scale(2.3); opacity: 0; } }
@keyframes forest-arrive { from { opacity: 0; translate: 0 .6cqw; } to { opacity: 1; translate: 0 0; } }
@keyframes forest-panel { from { opacity: 0; translate: 0 12px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes forest-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes forest-sign-sway { from { rotate: -.65deg; } to { rotate: .65deg; } }
@keyframes forest-invitation { 0%, 70%, 100% { translate: 0 0; } 80% { translate: .2cqw 0; } 90% { translate: 0 0; } }
@keyframes forest-breathe { 0%, 100% { scale: 1 1; rotate: -.6deg; } 50% { scale: 1.015 1.035; rotate: .6deg; } }
@keyframes forest-bird { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -.6cqw; rotate: 2deg; } }
@keyframes forest-select { 0% { scale: .94; } 65% { scale: 1.12; } 100% { scale: 1; } }
@keyframes forest-flow { 0%, 100% { translate: -.5cqw 0; opacity: .5; } 50% { translate: .7cqw .3cqw; opacity: 1; } }
@keyframes forest-wiggle { 30% { rotate: -7deg; translate: 0 -.3cqw; } 70% { rotate: 6deg; } }
@keyframes forest-machine-light { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes forest-juice-bubbles { from { translate: 0 14%; opacity: .2; } 50% { opacity: .8; } to { translate: 0 -20%; opacity: .2; } }

/* Freeze CSS loops while menus are open, the page is hidden or its owner pauses. */
[data-motion-paused="true"] *,
[data-motion-paused="true"] *::before,
[data-motion-paused="true"] *::after { animation-play-state: paused !important; }
/* Dialogs are intentionally still animated into view over the frozen scene. */
[data-motion-paused="true"] dialog[open] { animation-play-state: running !important; }
[data-motion-reduced="true"] .scene-atmosphere,
[data-motion-reduced="true"] .scene-effects { display: none; }
@media (prefers-reduced-motion: reduce) {
  .has-scene-motion *, .has-scene-motion *::before, .has-scene-motion *::after,
  .forest-settings[open], .forest-settings[open]::backdrop {
    animation: none !important;
    transition: none !important;
  }
  .scene-atmosphere, .scene-effects { display: none; }
}