/* =================================================================
   background.css — the "Living Meadow" backdrop + shared motion.
   #fx-bg sits behind #app (which is z-indexed above). Painterly sky
   with layered hills, grass, drifting flowers, and a pollen canvas.
   ================================================================= */

#fx-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(180deg, var(--hm-sky-1) 0%, var(--hm-sky-2) 42%, var(--hm-sky-3) 74%);
}
#app { position: relative; z-index: 1; min-height: 100%; }

/* soft painted sun */
#fx-bg::before {
  content: '';
  position: absolute;
  top: -8vh; right: 6vw;
  width: 34vh; height: 34vh;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,246,206,.95), rgba(255,222,130,.55) 45%, transparent 70%);
  filter: blur(2px);
}

.fx-hills, .fx-grass, .fx-flowers, .fx-pollen, .fx-bee { position: absolute; will-change: transform; }

.fx-hills {
  left: -3%; right: -3%; bottom: 14vh; width: 106%; height: 42vh;
  background: url('/static/sprites/hills.svg') bottom center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 10px rgba(60,90,40,.18));
}
.fx-grass {
  left: -3%; right: -3%; bottom: -2vh; width: 106%; height: 20vh;
  background: linear-gradient(180deg, #5f9e3d 0%, #4b8531 60%, #3f7329 100%);
  border-radius: 45% 55% 0 0 / 20% 22% 0 0;
  box-shadow: inset 0 8px 26px rgba(255,255,255,.14);
}
.fx-flowers { left: 0; right: 0; bottom: 2vh; height: 20vh; }
.fx-flower { position: absolute; bottom: 0; opacity: .96; filter: drop-shadow(0 6px 8px rgba(40,70,30,.28)); }
.fx-flower.f1 { left: 6%;  width: 92px;  animation: fx-sway 6s var(--hm-ease) infinite; }
.fx-flower.f2 { left: 22%; width: 66px;  bottom: 1vh; animation: fx-sway 7.5s var(--hm-ease) infinite -1.5s; }
.fx-flower.f3 { right: 9%; width: 104px; animation: fx-sway 6.8s var(--hm-ease) infinite -3s; }
@keyframes fx-sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

.fx-pollen { inset: 0; width: 100%; height: 100%; }

.fx-bee {
  left: -8%; width: 46px; opacity: .9;
  filter: drop-shadow(0 4px 6px rgba(60,50,20,.3));
  animation-name: fx-fly; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes fx-fly {
  0%   { transform: translate3d(-8vw, 0, 0) scaleX(1); }
  49%  { transform: translate3d(108vw, calc(-1 * var(--fx-bob)), 0) scaleX(1); }
  50%  { transform: translate3d(108vw, 0, 0) scaleX(-1); }
  99%  { transform: translate3d(-8vw, var(--fx-bob), 0) scaleX(-1); }
  100% { transform: translate3d(-8vw, 0, 0) scaleX(1); }
}

/* Dim the meadow when a fully-opaque gameplay scene owns the screen. */
body:has(#scene-game.active) #fx-bg { opacity: 0; transition: opacity .4s var(--hm-ease); }

/* ---------- shared entrance reveal ---------- */
.hm-reveal { opacity: 0; transform: translateY(16px); }
.hm-reveal.hm-in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--hm-ease) var(--hm-delay, 0ms),
              transform .6s var(--hm-ease-bounce) var(--hm-delay, 0ms);
}
@keyframes hm-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.hm-pulse { animation: hm-pop .5s var(--hm-ease-bounce); }