/* ============================================
   SWAMP SCENE v2 -- Level 6's living Shadowy Swamp
   Used by game/js/swamp-scene.js on top of css/scene-kit.css (stage,
   layers, props, generic reactions, particles). This file holds the swamp
   look: the water strip, the darkness that lifts as the mushrooms are lit
   (with a hole of light around each one), the mist, the moon, the watching
   eyes, the sleeping fireflies, the glowing clusters and their pools of
   light on the water, the four pokable reactions, Shade (the front sprite
   on a float with a breathing lantern glow, the frozen opacity stages as
   solid-0..5, the peek) and the "swamp restored" finale.
   ============================================ */

.fs-root.fs-swamp { background: #06100f; }
.fs-swamp .fs-backdrop img { image-rendering: auto; }
/* The far layer (pillar, moss, eyes, the light shaft) and the foreground never take a tap;
   scenery on the mid layer lets a tap fall through to the water beneath it */
.sw-far, .sw-fore { pointer-events: none; }
.fs-swamp .fs-prop:not(.tappable) .fs-anchor { pointer-events: none; }
.sw-far .fs-prop .fs-body { pointer-events: none; }
.sw-water { pointer-events: none; }
.sw-water > img {
  position: absolute;
  left: 0;
  bottom: -22px;
  width: 960px;
  height: auto;
  image-rendering: auto;
}
.sw-fore .fs-prop img { filter: brightness(0.8) saturate(0.9); }

/* ---- The darkness: full on arrival, a step lighter per light, a hole around each lit cluster (JS sets the mask) ---- */
.sw-dark {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(2, 8, 12, 0.55) 0%, rgba(2, 6, 10, 0.9) 70%, rgba(1, 3, 6, 0.98) 100%);
  opacity: calc(var(--dark, 1) * 0.8);
  transition: opacity 1.4s ease;
  pointer-events: none;
}
.fs-swamp:not(.sw-dark-on) .sw-dark { opacity: 0; }
/* The mist over the water: a slow drift, thinner once the swamp is lit, gone when restored */
.sw-mist {
  position: absolute;
  left: -120px;
  right: -120px;
  top: 250px;
  height: 200px;
  background:
    linear-gradient(to bottom, rgba(150, 190, 200, 0) 0%, rgba(150, 190, 200, 0.28) 30%, rgba(160, 200, 210, 0.34) 55%, rgba(150, 190, 200, 0.12) 100%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 100%);
  opacity: 0.85;
  animation: sw-mist-drift 26s ease-in-out infinite;
  transition: opacity 2.5s ease;
  pointer-events: none;
}
@keyframes sw-mist-drift {
  0%, 100% { transform: translateX(-30px) scaleY(1); }
  50%      { transform: translateX(30px) scaleY(1.06); }
}
.fs-swamp.sw-lit .sw-mist { opacity: 0.45; }
.fs-swamp.sw-restored .sw-mist { opacity: 0; }
.sw-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(2, 8, 10, 0.5) 0%, rgba(2, 8, 10, 0) 24%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(2, 6, 8, 0.55) 100%);
  pointer-events: none;
}
.fs-swamp.sw-restored .sw-vignette { opacity: 0.35; transition: opacity 2.5s ease; }
/* The moon glow through the canopy, breathing */
.sw-moon {
  position: absolute;
  left: 480px;
  top: 70px;
  width: 420px;
  height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(200, 240, 230, 0.32) 0%, rgba(160, 220, 200, 0.12) 40%, rgba(120, 200, 180, 0) 70%);
  mix-blend-mode: screen;
  animation: sw-moon-breathe 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sw-moon-breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
/* The swamp restored (correct code): warm light over everything, the water clearing, the shaft of light */
.sw-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 236, 170, 0.5) 0%, rgba(255, 220, 140, 0.26) 40%, rgba(180, 230, 200, 0.1) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 2.5s ease;
  pointer-events: none;
}
.fs-swamp.sw-restored .sw-light { opacity: 0.7; }
.sw-water-clear {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  background: linear-gradient(to bottom, rgba(60, 200, 190, 0) 0%, rgba(80, 220, 200, 0.35) 30%, rgba(90, 230, 210, 0.4) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 2.5s ease;
  pointer-events: none;
}
.fs-swamp.sw-restored .sw-water-clear { opacity: 1; }
.sw-shaft { opacity: 0; transition: opacity 2.5s ease 0.4s; mix-blend-mode: screen; }
.sw-shaft .fs-body > img { image-rendering: auto; }
.fs-swamp.sw-restored .sw-shaft { opacity: 0.55; }
/* Things that only appear once the swamp is restored (the lilies open in JS; the bank blooms) */
.sw-bloom { opacity: 0; transition: opacity 1.6s ease; }
.fs-swamp.sw-bloomed .sw-bloom { opacity: 1; }
.sw-lily .fs-body > img { transition: filter 0.6s ease; }
.fs-swamp.sw-bloomed .sw-lily .fs-body > img { filter: drop-shadow(0 0 8px rgba(255, 214, 232, 0.8)); }

/* ---- The watching eyes: a blink now and then; they blink out when the light reaches them ---- */
.sw-eyes .fs-body { animation: sw-blink var(--blink, 6s) ease-in-out infinite; animation-delay: var(--bdelay, 0s); }
.sw-eyes .fs-body > img { filter: drop-shadow(0 0 5px rgba(255, 200, 80, 0.55)); }
@keyframes sw-blink {
  0%, 88%, 100% { transform: scaleY(1); opacity: 0.85; }
  91%           { transform: scaleY(0.1); opacity: 0.4; }
  94%           { transform: scaleY(1); opacity: 0.85; }
}
.sw-eyes.gone { opacity: 0; transition: opacity 0.7s ease; pointer-events: none; }
.fs-body.sw-eyes-vanish { animation: sw-eyes-vanish 0.7s ease-out forwards !important; }
@keyframes sw-eyes-vanish {
  0%   { transform: scaleY(1); opacity: 1; }
  20%  { transform: scaleY(0.1); opacity: 0.4; }
  40%  { transform: scaleY(1); opacity: 0.9; }
  60%  { transform: scaleY(0.1); opacity: 0.3; }
  100% { transform: scaleY(0.05) translateY(6px); opacity: 0; }
}

/* ---- The fireflies: asleep (dim, still) until a light wakes them; the glints on the water ---- */
.sw-flies { position: absolute; pointer-events: none; }
.sw-flies .sw-fly {
  background: radial-gradient(circle, #fff4c8 0%, #ffd86a 40%, rgba(255, 216, 106, 0.4) 65%, transparent 100%);
  box-shadow: 0 0 9px 3px rgba(255, 200, 90, 0.6);
  transition: opacity 1.2s ease;
}
.sw-flies.asleep .sw-fly { opacity: 0.12 !important; animation-play-state: paused; }
.sw-flies.sw-wake .sw-fly { animation: fs-firefly-drift var(--dur, 8s) ease-in-out infinite, fs-firefly-blink 0.6s ease-in-out 3; }
.sw-glint {
  position: absolute;
  width: 4px;
  height: 2px;
  border-radius: 50%;
  background: rgba(220, 250, 245, 0.9);
  box-shadow: 0 0 4px 1px rgba(200, 245, 235, 0.7);
  opacity: 0;
  animation: sw-glint var(--dur, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  pointer-events: none;
}
@keyframes sw-glint { 0%, 100% { opacity: 0; } 6% { opacity: 0.9; } 12% { opacity: 0; } }
.fs-swamp.sw-dark-on .sw-glint { opacity: 0; animation: none; }

/* ---- The mushroom clusters: unlit and grey, lit and glowing; the pool of light on the water ---- */
.sw-mushroom .fs-body > img { transition: filter 0.9s ease; filter: brightness(0.8) saturate(0.7) drop-shadow(0 0 4px rgba(120, 255, 220, 0.25)); }
.sw-mushroom.lit .fs-body > img {
  filter: brightness(1.05) drop-shadow(0 0 10px rgba(80, 255, 210, 0.75)) drop-shadow(0 0 22px rgba(60, 240, 200, 0.35));
  animation: sw-mush-glow 3.4s ease-in-out infinite;
}
@keyframes sw-mush-glow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 8px rgba(80, 255, 210, 0.7)) drop-shadow(0 0 18px rgba(60, 240, 200, 0.3)); }
  50%      { filter: brightness(1.12) drop-shadow(0 0 14px rgba(80, 255, 210, 0.95)) drop-shadow(0 0 30px rgba(60, 240, 200, 0.45)); }
}
/* "Tap to continue": the next unlit cluster beckons faintly */
.sw-mushroom.sw-beckon .fs-body > img { animation: sw-beckon 1.6s ease-in-out infinite; }
@keyframes sw-beckon {
  0%, 100% { filter: brightness(0.6) saturate(0.7) drop-shadow(0 0 3px rgba(120, 255, 220, 0.3)); transform: scale(1); }
  50%      { filter: brightness(0.95) saturate(1) drop-shadow(0 0 12px rgba(120, 255, 220, 0.8)); transform: scale(1.05); }
}
.fs-body.sw-bloom-in { animation: sw-bloom-in 0.9s ease-out !important; }
@keyframes sw-bloom-in {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.18, 1.25); }
  60%  { transform: scale(0.96, 1.04); }
  100% { transform: scale(1, 1); }
}
.sw-pool {
  position: absolute;
  width: 260px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(90, 255, 215, 0.42) 0%, rgba(60, 220, 190, 0.2) 40%, rgba(40, 200, 170, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
.sw-pool.on { opacity: 1; animation: sw-pool-breathe 4.6s ease-in-out infinite; }
@keyframes sw-pool-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } }

/* ---- Pokables without a cut-out: invisible hit zones over the water and the firefly cloud ---- */
.sw-hit-body { pointer-events: auto; }
.sw-hit .fs-body::before { inset: 0; }
/* The skull on the tree: a cartoon jaw chatter */
@keyframes sw-chatter {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  10%  { transform: rotate(-7deg) translateY(-2px); }
  20%  { transform: rotate(6deg) translateY(1px); }
  30%  { transform: rotate(-6deg) translateY(-2px); }
  40%  { transform: rotate(5deg) translateY(1px); }
  50%  { transform: rotate(-5deg) translateY(-1px); }
  60%  { transform: rotate(4deg); }
  75%  { transform: rotate(-2deg); }
}
.fs-body.sw-chatter { animation: sw-chatter 0.9s ease-out; transform-origin: 50% 70%; }
.sw-fish img { image-rendering: pixelated; filter: blur(0.4px) brightness(0.7); }
/* The near mist wisps drift slowly */
.sw-mist-wisp .fs-body { opacity: 0.7; animation: sw-wisp var(--dur, 22s) ease-in-out infinite; }
@keyframes sw-wisp {
  0%, 100% { transform: translateX(-34px); opacity: 0.55; }
  50%      { transform: translateX(34px); opacity: 0.8; }
}
.fs-swamp.sw-restored .sw-mist-wisp .fs-body { opacity: 0; transition: opacity 2.5s ease; }

/* ---- The tree's hollow: the lantern flickers in it the moment before the peek ---- */
.sw-hollow-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 90, 0.85) 0%, rgba(255, 160, 60, 0.35) 35%, rgba(255, 140, 40, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.sw-hollow-glow.sw-flicker { animation: sw-flicker 1.4s ease-out; }
@keyframes sw-flicker {
  0%   { opacity: 0; }
  12%  { opacity: 0.9; }
  20%  { opacity: 0.2; }
  30%  { opacity: 1; }
  42%  { opacity: 0.4; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- Shade ---- */
.sw-shade {
  opacity: var(--solid, 0.6);
  transition: opacity 1.5s ease;
}
.sw-shade.peeking { transition: none; }
.sw-shade .fs-body { position: relative; }
.sw-shade-figure {
  position: relative;
  transform-origin: 50% 100%;
  animation: sw-float 4.2s ease-in-out infinite;
}
.sw-shade.talking .sw-shade-figure { animation-duration: 2.6s; }
@keyframes sw-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-7px) rotate(1deg); }
}
.sw-shade img.sw-front {
  display: block;
  height: var(--h);
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(160, 128, 208, 0.35));
  -webkit-user-drag: none;
  user-select: none;
}
/* The lantern's glow (the lantern hangs at his left hand), breathing; warmer and bigger as he grows solid */
.sw-lantern-glow {
  position: absolute;
  left: 26%;
  top: 68%;
  width: 130px;
  height: 130px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 110, 0.75) 0%, rgba(255, 170, 70, 0.3) 35%, rgba(255, 150, 60, 0) 70%);
  mix-blend-mode: screen;
  animation: sw-lantern-breathe 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sw-lantern-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }
.sw-shade.solid-5 .sw-lantern-glow { width: 160px; height: 160px; }
.sw-lantern-glow.sw-glow-pulse { animation: sw-glow-pulse 1.3s ease-out; }
@keyframes sw-glow-pulse {
  0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.9); }
  100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
}
.sw-shade-figure.sw-figure-pulse img.sw-front { animation: sw-figure-pulse 1.3s ease-out; }
@keyframes sw-figure-pulse {
  0%   { filter: brightness(1) drop-shadow(0 0 10px rgba(160, 128, 208, 0.35)); }
  30%  { filter: brightness(1.5) drop-shadow(0 0 22px rgba(255, 210, 120, 0.9)); }
  100% { filter: brightness(1) drop-shadow(0 0 10px rgba(160, 128, 208, 0.35)); }
}
/* Standing in the light (the finale): a little higher, the lantern held high, a warm edge */
.sw-shade.in-light .sw-shade-figure { animation: sw-float-high 3.6s ease-in-out infinite; }
@keyframes sw-float-high {
  0%, 100% { transform: translateY(-10px) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(0deg); }
}
.sw-shade.in-light img.sw-front { filter: drop-shadow(0 0 14px rgba(255, 220, 140, 0.7)); }
.sw-shade.in-light .sw-lantern-glow { width: 190px; height: 190px; top: 60%; }

@media (prefers-reduced-motion: reduce) {
  .sw-mist, .sw-moon, .sw-eyes .fs-body, .sw-flies .sw-fly, .sw-glint, .sw-mushroom.lit .fs-body > img, .sw-mushroom.sw-beckon .fs-body > img,
  .sw-pool.on, .sw-mist-wisp .fs-body, .sw-shade-figure, .sw-lantern-glow, .sw-hollow-glow.sw-flicker { animation: none !important; }
  .sw-mushroom.sw-beckon .fs-body > img { filter: brightness(0.95) drop-shadow(0 0 12px rgba(120, 255, 220, 0.8)); }
  .sw-dark, .sw-mist, .sw-light, .sw-water-clear, .sw-shaft, .sw-bloom, .sw-shade, .sw-pool { transition: none; }
}