/* ============================================
   FOREST SCENE v2 -- Level 1's layered parallax side-scroller
   Used by game/js/forest-scene.js on top of css/scene-kit.css (stage,
   layers, props, generic reactions, particles, HUD). This file holds the
   forest look: haze, tone of the far/near layers, the carving covers, the
   glyphs, Fern and the god-ray / falling-leaf atmosphere.
   ============================================ */

.fs-root.fs-forest { background: #223a1a; }

/* ============================================
   FOREST SCENE v2 -- layered parallax side-scroller
   Used by game/js/forest-scene.js (Level 1 rebuild POC).

   Coordinate system: a 960x540 "stage" scaled to the viewport with a
   single CSS transform, so every prop is placed in fixed design pixels.
   Layers are full-height strips translated by camX x parallax.
   ============================================ */

/* Warm haze between the far trees and the ground */
.fs-fog {
  position: absolute;
  left: 0; right: 0;
  top: 210px;
  height: 170px;
  background: linear-gradient(to bottom,
    rgba(232, 214, 150, 0) 0%,
    rgba(232, 214, 150, 0.42) 55%,
    rgba(214, 205, 140, 0.55) 80%,
    rgba(214, 205, 140, 0) 100%);
  pointer-events: none;
}

/* Far trunks: same cut-outs, pushed back by tone */
.fs-forest .fs-layer-far .fs-prop img {
  filter: brightness(0.82) saturate(0.7) contrast(0.92);
  opacity: 0.9;
}

/* Foreground: closer, darker, slightly softer */
.fs-forest .fs-layer-fore .fs-prop img {
  filter: brightness(0.78) saturate(0.95);
}

/* Log roll -- reveals the carving on its underside */
@keyframes fs-log-roll {
  0%   { transform: rotate(0) translateX(0); }
  40%  { transform: rotate(-9deg) translateX(-10px) translateY(-6px); }
  70%  { transform: rotate(4deg) translateX(6px); }
  100% { transform: rotate(-2deg) translateX(0); }
}
.fs-body.log-roll { animation: fs-log-roll 0.9s cubic-bezier(0.3, 0.8, 0.4, 1) forwards; }

/* Covers that hide the carvings */
@keyframes fs-ivy-part {
  0%   { transform: rotate(0deg); }
  35%  { transform: rotate(-62deg); }
  60%  { transform: rotate(-44deg); }
  80%  { transform: rotate(-54deg); }
  100% { transform: rotate(-50deg); }
}
.fs-body.ivy-part { animation: fs-ivy-part 1.4s cubic-bezier(0.3, 0.7, 0.3, 1) forwards; }

@keyframes fs-moss-off {
  0%   { transform: scale(1); opacity: 1; }
  25%  { transform: scale(1.12, 0.9) translateY(2px); }
  100% { transform: scale(0.35) translateY(70px) rotate(25deg); opacity: 0; }
}
.fs-body.moss-off { animation: fs-moss-off 0.8s ease-in forwards; }

@keyframes fs-moss-drop {
  0%   { transform: rotate(0); opacity: 1; }
  30%  { transform: rotate(6deg) translateY(4px); }
  100% { transform: rotate(-4deg) translateY(160px); opacity: 0; }
}
.fs-body.moss-drop { animation: fs-moss-drop 1.1s ease-in forwards; }

@keyframes fs-web-tear {
  0%   { transform: scale(1); opacity: 1; }
  30%  { transform: scale(1.06) skewX(6deg); }
  100% { transform: scale(0.6) translateY(30px) rotate(20deg); opacity: 0; }
}
.fs-body.web-tear { animation: fs-web-tear 0.7s ease-in forwards; }

/* ---- Carvings (glyphs) ---- */
.fs-glyph {
  position: absolute;
  width: var(--s, 56px);
  height: var(--s, 56px);
  transform: translate(-50%, -50%);
  background-image: url('../assets/images/puzzles/level1/symbol-glyphs.webp');
  background-size: 300% 200%;
  image-rendering: pixelated;
  border-radius: 6px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 58%, transparent 74%);
  mask-image: radial-gradient(ellipse at center, #000 58%, transparent 74%);
  opacity: 0;
  filter: brightness(0.55) saturate(0.6);
  transition: opacity 0.6s ease, filter 0.6s ease;
  pointer-events: none;
}
/* Dormant carvings are faintly there -- a sharp-eyed player can spot them */
.fs-glyph.dormant { opacity: 0.35; }
.fs-glyph.found {
  opacity: 1;
  filter: brightness(1.15) saturate(1.1);
  animation: fs-glyph-wake 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fs-glyph-wake {
  0%   { transform: translate(-50%, -50%) scale(0.6); filter: brightness(3); }
  50%  { transform: translate(-50%, -50%) scale(1.15); filter: brightness(1.8); }
  100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1.15); }
}
.fs-glyph.found::after {
  content: '';
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 136, 0.55) 0%, rgba(255, 200, 80, 0.18) 45%, transparent 70%);
  animation: fs-glyph-glow 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fs-glyph-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1; transform: scale(1.08); }
}
.fs-glyph-numeral {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 4px);
  font-family: var(--font-pixel, monospace);
  font-size: 9px;
  color: var(--gold-bright, #ffe888);
  text-shadow: 0 0 8px rgba(218, 186, 106, 0.9), 0 1px 3px rgba(0, 0, 0, 0.9);
  background: rgba(10, 14, 20, 0.6);
  padding: 2px 5px;
  border-radius: 2px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease 0.5s;
}
.fs-glyph.found .fs-glyph-numeral { opacity: 1; }

/* ---- Fern ---- */
.fs-fern {
  position: absolute;
  width: 0;
  height: 0;
}
.fs-fern .fs-shadow {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 96px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20, 30, 10, 0.45) 0%, rgba(20, 30, 10, 0.2) 50%, transparent 72%);
  transition: transform 0.15s ease;
}
.fs-fern .fs-fern-body {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-50%);
}
.fs-fern img {
  display: block;
  height: 150px;
  width: auto;
  image-rendering: pixelated;
  transform-origin: 50% 100%;
  transform: scaleX(var(--face, 1));
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  animation: fs-fern-breathe 3.6s ease-in-out infinite;
  pointer-events: none;
  -webkit-user-drag: none;
}
@keyframes fs-fern-breathe {
  0%, 100% { transform: scaleX(var(--face, 1)) scaleY(1); }
  50%      { transform: scaleX(calc(var(--face, 1) * 1.008)) scaleY(1.016) translateY(-0.4%); }
}
.fs-fern.walking img {
  animation: fs-fern-gait 0.4s ease-in-out infinite;
}
@keyframes fs-fern-gait {
  0%, 100% { transform: scaleX(var(--face, 1)) translateY(0) rotate(-1.5deg); }
  50%      { transform: scaleX(var(--face, 1)) translateY(-3.5%) rotate(1.5deg) scaleY(1.02); }
}
.fs-fern.walking .fs-shadow { transform: translateX(-50%) scale(0.9); }

/* Side-view strips (approved frames, 2x cells with feet on the baseline).
   .mode-front shows the approved front sprite; .mode-walk / .mode-idle-side
   swap in the frame-stepped strip, which forest-scene.js drives by
   background-position. The strip art faces right; --face flips it. */
.fs-fern .fs-fern-strip {
  display: none;
  height: 150px;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: pixelated;
  transform-origin: 50% 100%;
  transform: scaleX(var(--face, 1));
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
.fs-fern.mode-walk .fs-fern-strip      { display: block; width: 122px;   background-size: 600% 100%; }
.fs-fern.mode-idle-side .fs-fern-strip { display: block; width: 110.5px; background-size: 300% 100%; }
.fs-fern.mode-walk img.fs-fern-front,
.fs-fern.mode-idle-side img.fs-fern-front { display: none; }

/* Materialize-in for the scene entrance (reuses the game's silhouette idea) */
.fs-fern.materializing img {
  animation: fs-fern-materialize 1.3s ease-out forwards;
}
@keyframes fs-fern-materialize {
  0%   { clip-path: inset(100% 0 0 0); filter: drop-shadow(0 0 10px rgba(120, 220, 255, 0.9)) brightness(2.2) saturate(0); }
  60%  { clip-path: inset(0 0 0 0); filter: drop-shadow(0 0 12px rgba(120, 220, 255, 0.8)) brightness(1.6) saturate(0.4); }
  100% { clip-path: inset(0 0 0 0); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)) brightness(1) saturate(1); }
}

/* Footstep dust */
.fs-dust {
  position: absolute;
  width: 10px;
  height: 6px;
  border-radius: 50%;
  background: rgba(214, 190, 130, 0.75);
  pointer-events: none;
}

/* ---- Forest atmosphere: god rays + falling leaves (motes/fireflies/vignette are kit) ---- */
.fs-ray {
  position: absolute;
  top: -80px;
  width: 90px;
  height: 520px;
  background: linear-gradient(to bottom, rgba(255, 236, 170, 0.55) 0%, rgba(255, 228, 150, 0.22) 45%, rgba(255, 220, 120, 0) 100%);
  transform: skewX(-22deg);
  mix-blend-mode: screen;
  filter: blur(3px);
  animation: fs-ray-breathe var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes fs-ray-breathe {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}
.fs-leaf {
  position: absolute;
  top: -30px;
  height: 14px;
  width: auto;
  image-rendering: pixelated;
  animation: fs-leaf-fall var(--dur, 8s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
@keyframes fs-leaf-fall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8%   { opacity: 0.85; }
  50%  { transform: translate(calc(var(--dx) * 0.4), 300px) rotate(calc(var(--rot) * 0.5)); }
  92%  { opacity: 0.7; }
  100% { opacity: 0; transform: translate(var(--dx), 580px) rotate(var(--rot)); }
}

/* ---- Paths restored (correct code): the Witch's tangle lifts ---- */
.fs-forest .fs-fog, .fs-forest .fs-vignette { transition: opacity 2.8s ease; }
.fs-forest .fs-layer-far .fs-prop img { transition: filter 2.8s ease, opacity 2.8s ease; }
.fs-root.paths-restored .fs-fog { opacity: 0; }
.fs-root.paths-restored .fs-vignette { opacity: 0.4; }
.fs-root.paths-restored .fs-layer-far .fs-prop img { filter: brightness(0.96) saturate(0.9) contrast(0.96); opacity: 1; }
.fs-root.paths-restored .fs-ray { animation-duration: 3s; }
.fs-root.paths-restored .fs-layer-fore .fs-prop.top-anchored .fs-body {
  animation: none;
  transform: translateY(-46px) rotate(-5deg);
  transition: transform 3s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.fs-root.input-locked .fs-layer-mid,
.fs-root.input-locked .fs-arrow { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .fs-body, .fs-fern img, .fs-ray, .fs-mote, .fs-firefly, .fs-leaf { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-fern img, .fs-ray, .fs-leaf { animation: none !important; }
}