/* ============================================
   OUTPOST SCENE v2 -- Level 5's living Explorer's Outpost
   Used by game/js/outpost-scene.js on top of css/scene-kit.css (stage,
   layers, props, generic reactions, particles). This file holds the
   outpost look: the two rooms and their crossfade, the ground strip, the
   campfire's glow and flicker, the flag, the drifting clouds, the windmill
   sails, the six pokable reactions, the map beckon, Compass (front sprite,
   walk strip, the gag poses) and the warm "outpost restored" finale.
   ============================================ */

.fs-root.fs-outpost { background: #3a1d10; }

/* ---- Rooms: one screen each, crossfaded ---- */
.os-room {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.os-room.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s;
}
.os-room.no-fade { transition: none; }
.os-room .fs-layer { width: 960px; }
.fs-outpost .fs-backdrop img { image-rendering: auto; }
/* The far layer (clouds, the flag, the sails, the bird) never takes a tap */
.os-far { pointer-events: none; }
.os-far .fs-prop .fs-body { pointer-events: none; }
.os-ground img {
  position: absolute;
  left: 0;
  bottom: -22px;
  width: 960px;
  height: auto;
  image-rendering: auto;
}
/* Foreground pieces sit at the edges and let taps through */
.os-fore { pointer-events: none; }
.os-fore .fs-prop img { filter: brightness(0.9) saturate(0.95); }

/* ---- Ambient life (slow, small) ---- */
/* Far clouds drift a little way and back over about a minute */
@keyframes os-drift {
  0%, 100% { transform: translateX(-26px); }
  50%      { transform: translateX(26px); }
}
.fs-outpost .fs-body.idle-drift { animation: os-drift calc(var(--dur, 5s) * 11) ease-in-out infinite; animation-delay: calc(var(--delay, 0s) * 8); }
/* The flag on the watchtower waves (anchored at its pole) */
@keyframes os-flag-wave {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  30%      { transform: skewY(-3deg) scaleX(0.97); }
  60%      { transform: skewY(2.5deg) scaleX(1.02); }
}
.os-flag .fs-body { transform-origin: 20% 100%; animation: os-flag-wave 2.6s ease-in-out infinite; }
/* The windmill's sails turn, slowly, about their hub */
@keyframes os-sails-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.os-sails .fs-body { transform-origin: 50% 50%; animation: os-sails-turn 38s linear infinite; }
/* The ground compass's needle settles on a new heading now and then */
.fs-body > img.os-needle {
  position: absolute;
  left: 50%;
  top: 46%;
  height: calc(var(--h) * 0.17);
  width: auto;
  transform: translate(-50%, -50%) rotate(var(--angle, 20deg));
  transform-origin: 50% 50%;
  transition: transform 1.6s cubic-bezier(0.34, 1.9, 0.5, 1);
  image-rendering: pixelated;
  pointer-events: none;
}
/* The campfire: the flame cells swap in JS; the body wobbles a touch; a breathing glow behind and in front */
.os-flame .fs-body { transform-origin: 50% 100%; transition: transform 0.16s ease-out; }
.os-flame .fs-body > img { filter: drop-shadow(0 0 8px rgba(255, 170, 60, 0.7)); }
.os-fire-glow {
  position: absolute;
  width: 360px;
  height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 176, 70, 0.42) 0%, rgba(255, 130, 40, 0.22) 35%, rgba(255, 120, 40, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: os-glow-breathe 2.1s ease-in-out infinite;
}
@keyframes os-glow-breathe { 0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); } }
.os-fire-glow.os-glow-flash { animation: os-glow-flash 0.9s ease-out; }
@keyframes os-glow-flash { 0% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); } 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } }
@keyframes os-flare {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.25, 1.45); }
  60%  { transform: scale(0.95, 1.1); }
  100% { transform: scale(1, 1); }
}
.fs-body.os-flare { animation: os-flare 0.7s ease-out !important; }
/* The lantern hangs (kit idle-hang); tapped, it swings wider and brightens */
@keyframes os-swing {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(14deg); }
  38%  { transform: rotate(-11deg); }
  60%  { transform: rotate(7deg); }
  80%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
.fs-body.os-swing { animation: os-swing 1.6s ease-out !important; transform-origin: 50% 0; }
.fs-prop.os-bright .fs-body > img { filter: drop-shadow(0 0 16px rgba(255, 200, 90, 0.95)) brightness(1.15); transition: filter 0.3s ease; }
.fs-prop .fs-body > img { transition: filter 0.6s ease; }

/* ---- Pokable reactions ---- */
@keyframes os-tilt {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(-6deg) translateY(-3px); }
  70%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
.fs-body.os-tilt { animation: os-tilt 0.7s ease-out; transform-origin: 40% 100%; }
@keyframes os-tilt-back {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}
.fs-body.os-tilt-back { animation: os-tilt-back 0.5s ease-out; transform-origin: 40% 100%; }
@keyframes os-lid-pop {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.06, 0.92); }
  60%  { transform: scale(0.96, 1.1) translateY(-4px); }
  100% { transform: scale(1, 1); }
}
.fs-body.os-lid-pop { animation: os-lid-pop 0.6s ease-out; }
@keyframes os-globe-spin {
  0%   { transform: scaleX(1); }
  20%  { transform: scaleX(-1); }
  40%  { transform: scaleX(1); }
  60%  { transform: scaleX(-1); }
  80%  { transform: scaleX(1); }
  90%  { transform: scaleX(-0.6); }
  100% { transform: scaleX(1); }
}
.fs-body.os-globe-spin { animation: os-globe-spin 1.2s ease-out; }
@keyframes os-flutter {
  0%   { transform: rotate(0deg) skewX(0deg); }
  15%  { transform: rotate(-2deg) skewX(-4deg); }
  35%  { transform: rotate(2deg) skewX(4deg); }
  55%  { transform: rotate(-1.5deg) skewX(-3deg); }
  75%  { transform: rotate(1deg) skewX(2deg); }
  100% { transform: rotate(0deg) skewX(0deg); }
}
.fs-body.os-flutter { animation: os-flutter 0.9s ease-out; transform-origin: 50% 0; }
/* The wall maps: two pinned maps in one pokable */
.os-maps .fs-body { position: relative; width: 132px; height: 92px; }
.os-maps img { position: absolute; bottom: 0; image-rendering: pixelated; -webkit-user-drag: none; }
.os-maps .os-map-a { left: 0; height: 92px; }
.os-maps .os-map-b { left: 70px; bottom: 18px; height: 52px; }
@keyframes os-mend {
  0%   { filter: brightness(1); transform: scale(1); }
  40%  { filter: brightness(1.6) drop-shadow(0 0 14px rgba(255, 232, 136, 0.9)); transform: scale(1.06); }
  100% { filter: brightness(1); transform: scale(1); }
}
.fs-body.os-mend { animation: os-mend 0.9s ease-out; }
.os-maps.whole img, .fs-prop.whole .fs-body > img { filter: drop-shadow(0 0 8px rgba(255, 232, 136, 0.55)); }

/* ---- "Tap to continue": the torn map on its stone beckons ---- */
.os-beckon .fs-body > img { animation: os-beckon 1.5s ease-in-out infinite; }
@keyframes os-beckon {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 4px rgba(255, 232, 136, 0.5)); transform: scale(1); }
  50%      { filter: brightness(1.18) drop-shadow(0 0 16px rgba(255, 232, 136, 0.95)); transform: scale(1.05); }
}

/* ---- Compass ---- */
.os-compass { transition: opacity 0.6s ease; }
.os-compass .fs-body { position: relative; }
.os-compass-figure { position: relative; transform-origin: 50% 100%; }
.os-shadow {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 78%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(60, 30, 10, 0.45) 0%, rgba(60, 30, 10, 0) 70%);
  pointer-events: none;
}
.os-compass.walking .os-shadow { transform: translateX(-50%) scale(0.9); }
.os-compass img.os-front, .os-compass img.os-hatless, .os-compass img.os-salute {
  display: block;
  height: var(--h);
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 6px rgba(60, 30, 10, 0.4));
  transform-origin: 50% 100%;
  -webkit-user-drag: none;
}
/* The hatless pose is a touch shorter (no hat): matched at the feet */
.os-compass img.os-hatless { height: calc(var(--h) * 0.977); }
.os-compass img.os-hatless, .os-compass img.os-salute, .os-compass .os-strip { display: none; }
/* Idle while Eva explores: the bounce-on-toes breathe (springier than the engine's) */
.os-compass.mode-idle img.os-front { animation: os-bounce-breathe 1.7s ease-in-out infinite; }
.os-compass.talking img.os-front { animation: os-bounce-breathe 1.1s ease-in-out infinite; }
@keyframes os-bounce-breathe {
  0%, 100% { transform: scaleY(1) scaleX(1) translateY(0); }
  50%      { transform: scaleY(1.03) scaleX(0.99) translateY(-3px); }
}
/* Frame-stepped walk strip (approved cells, feet on the baseline). The strip
   art faces right; --face flips it. outpost-scene.js drives the frame. */
.os-compass .os-strip {
  height: var(--h);
  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(60, 30, 10, 0.4));
  pointer-events: none;
}
.os-compass.mode-walk .os-strip { display: block; width: var(--walk-w, 157px); background-size: 600% 100%; }
.os-compass.mode-walk img.os-front { display: none; }
.os-compass.mode-hatless img.os-hatless { display: block; }
.os-compass.mode-hatless img.os-front { display: none; }
.os-compass.mode-salute img.os-salute { display: block; }
.os-compass.mode-salute img.os-front { display: none; }
/* Arrival: he glitches into being (the game's materialise, on the scene) */
.os-compass.materializing .os-compass-figure { animation: os-materialize 1.4s ease-out; }
@keyframes os-materialize {
  0%   { opacity: 0; filter: brightness(3) contrast(0.6); transform: translateY(6px) scaleY(0.94); }
  20%  { opacity: 0.5; filter: brightness(2) contrast(0.8); }
  30%  { opacity: 0.25; }
  40%  { opacity: 0.85; filter: brightness(1.6); }
  55%  { opacity: 0.6; }
  70%  { opacity: 1; filter: brightness(1.2); }
  100% { opacity: 1; filter: brightness(1); transform: translateY(0) scaleY(1); }
}
.os-dust {
  position: absolute;
  width: 10px;
  height: 6px;
  border-radius: 50%;
  background: rgba(214, 190, 130, 0.75);
  pointer-events: none;
}
/* The hat, mid-air */
.os-hat {
  position: absolute;
  height: 63px;
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 6px rgba(60, 30, 10, 0.4));
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ---- Atmosphere ---- */
.fs-mote.os-mote {
  width: 3px;
  height: 3px;
  background: rgba(255, 224, 160, 0.9);
  box-shadow: 0 0 4px rgba(255, 200, 120, 0.9);
}
.os-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(40, 16, 4, 0.32) 100%);
  pointer-events: none;
}
/* The outpost restored (correct code): warm gold over everything */
.os-warm {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 55% 55%, rgba(255, 220, 120, 0.5) 0%, rgba(255, 190, 80, 0.28) 45%, rgba(255, 160, 60, 0.1) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 2.5s ease;
  pointer-events: none;
}
/* (no filter transitions on the full-screen images: a warm overlay is all the tablet has to paint) */
.fs-outpost.os-restored .os-warm { opacity: 0.62; }
.fs-outpost.os-restored .os-fire-glow { animation-duration: 1.2s; }

@media (prefers-reduced-motion: reduce) {
  .fs-outpost .fs-body.idle-drift, .os-flag .fs-body, .os-sails .fs-body, .os-fire-glow, .os-beckon .fs-body > img,
  .os-compass.mode-idle img.os-front, .os-compass.talking img.os-front, .os-compass.materializing .os-compass-figure { animation: none !important; }
  .os-beckon .fs-body > img { filter: brightness(1.15) drop-shadow(0 0 12px rgba(255, 232, 136, 0.9)); }
  .os-needle { transition: none; }
  .os-warm { transition: none; }
}