/* =========================================================
   THE LUXURY ASCENSION — scene layout + all keyframes
   ========================================================= */

/* ---------------- Stage ---------------- */
#scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #150b2e;
}
#scene-zoom {
  position: absolute;
  inset: 0;
  transform-origin: 50% 60%;
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
#sky-svg, #mountain-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#mountain-svg { z-index: 2; }

/* subtle whole-scene flinch on wrong answers */
#scene.shake-scene { animation: shake-scene 350ms ease; }

/* ---------------- Camps ---------------- */
.camp { cursor: pointer; outline: none; }
.camp-ring {
  fill: rgba(21, 11, 46, 0.55);
  stroke: #f7e3b3;
  stroke-width: 2.5;
  opacity: 0.9;
  transition: stroke 300ms, opacity 300ms;
}
.camp-dot {
  fill: #f7e3b3;
  opacity: 0.85;
  transition: fill 300ms;
}
.camp-glow { opacity: 0; transition: opacity 500ms; }
.camp-check {
  fill: #1d1038;
  font: 800 20px "Inter", sans-serif;
  opacity: 0;
  pointer-events: none;
}
.camp-label {
  fill: #f7e3b3;
  font: 700 24px "Inter", sans-serif;
  letter-spacing: 0.18em;
  opacity: 0.9;
  paint-order: stroke;
  stroke: rgba(21, 11, 46, 0.7);
  stroke-width: 5px;
  pointer-events: none;
}
.camp--summit .camp-label { font-size: 28px; fill: #ffd985; }

/* locked */
.camp.locked .camp-ring { stroke: #8a7bb0; opacity: 0.5; }
.camp.locked .camp-dot { fill: #8a7bb0; opacity: 0.5; }
.camp.locked .camp-label { opacity: 0.45; }
.camp.locked { cursor: not-allowed; }

/* unlocked + active */
.camp.unlocked .camp-glow { opacity: 1; }
.camp.unlocked .camp-ring { stroke: #ffd985; }
.camp.unlocked .camp-dot { fill: #ffd985; }
.camp.unlocked:hover .camp-ring, .camp.unlocked:focus .camp-ring { stroke-width: 4; }

/* completed */
.camp.done .camp-dot { fill: #e6b450; r: 16; }
.camp.done .camp-check { opacity: 1; }
.camp.done .camp-ring { stroke: #e6b450; }

.camp.ignite .camp-ring { animation: node-ignite 900ms ease; }
.camp.unlocked.current .camp-ring { animation: node-pulse 2.2s ease-in-out infinite; }

/* ---------------- Clouds ---------------- */
#clouds { pointer-events: none; }
.cloud .puff {
  transform-box: fill-box;
  transform-origin: center;
}
.cloud.dissipating .puff { animation: cloud-dissipate 900ms ease forwards !important; }
.cloud.gone { display: none; }
.cloud.puffing .puff { animation: cloud-puff 320ms ease; }

/* ---------------- Climber ---------------- */
#climber { pointer-events: none; }
.climber-inner {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
#climber.walking .climber-inner { animation: climber-bob 360ms ease-in-out infinite; }
#climber.arrived .climber-inner { animation: climber-hop 500ms ease; }

/* ---------------- Flag + eagle ---------------- */
#summit-flag line, #summit-flag circle {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
#summit-flag.planting { animation: flag-plant 450ms cubic-bezier(0.34, 1.56, 0.64, 1); transform-box: fill-box; transform-origin: 50% 100%; }
#summit-flag .pennant {
  transform-box: fill-box;
  transform-origin: 0% 50%;
}
#summit-flag.planted .pennant { animation: flag-wave 1.3s ease-in-out infinite; }

#eagle { will-change: transform; }
#eagle.flying { animation: eagle-fly 3.2s linear forwards; }
#eagle .wing {
  transform-box: fill-box;
}
#eagle .wing-l { transform-origin: 100% 50%; }
#eagle .wing-r { transform-origin: 0% 50%; }
#eagle.flying .wing-l { animation: eagle-flap-l 400ms ease-in-out infinite alternate; }
#eagle.flying .wing-r { animation: eagle-flap-r 400ms ease-in-out infinite alternate; }
.eagle-inner {
  transform-box: fill-box;
  transform-origin: center;
}
#eagle.flying .eagle-inner { animation: eagle-glide 3.2s ease-in-out forwards; }

/* ---------------- Golden hour ---------------- */
.sky-base, .sky-gold, #layer-massif-gold { transition: opacity 1500ms ease; }
#scene.golden .sky-gold { opacity: 1; }
#scene.golden #layer-massif-gold { opacity: 1; }
#scene.golden #sun-glow { opacity: 1; }

#gold-flood {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(90% 70% at 50% 22%, rgba(255, 228, 154, 0.85), rgba(255, 217, 133, 0.25) 45%, rgba(255, 217, 133, 0) 75%);
  mix-blend-mode: screen;
  transition: opacity 1500ms ease;
}
#gold-flood.on { opacity: 0.6; }

/* ---------------- FX layer (rocks + confetti) ---------------- */
#fx-layer {
  position: fixed;
  inset: 0;
  z-index: 65;
  pointer-events: none;
  overflow: hidden;
}
.rock {
  position: absolute;
  width: var(--size, 12px);
  height: var(--size, 12px);
  background: linear-gradient(135deg, #5b4a7a, #3b2f52);
  clip-path: polygon(30% 0, 100% 25%, 85% 100%, 10% 80%);
  animation: rockfall var(--dur, 800ms) cubic-bezier(0.3, 0.1, 0.7, 1) forwards;
}
.rock.bounce { animation-name: rockfall-bounce; }
.confetto {
  position: absolute;
  width: var(--size, 9px);
  height: calc(var(--size, 9px) * 0.55);
  background: var(--c, #ffd985);
  border-radius: 1px;
  animation: confetti-burst var(--dur, 1800ms) cubic-bezier(0.2, 0.5, 0.6, 1) forwards;
}

/* panel flinch */
.shake { animation: shake 300ms ease; }

/* ================= KEYFRAMES ================= */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes shake-scene {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 2px); }
}
@keyframes rockfall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--fall, 240px)) rotate(var(--rot, 360deg)); opacity: 0; }
}
@keyframes rockfall-bounce {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  55% { transform: translate(calc(var(--dx, 0) * 0.5), calc(var(--fall, 240px) * 0.72)) rotate(calc(var(--rot, 360deg) * 0.6)); }
  70% { transform: translate(calc(var(--dx, 0) * 0.62), calc(var(--fall, 240px) * 0.58)) rotate(calc(var(--rot, 360deg) * 0.72)); }
  100% { transform: translate(var(--dx, 0), var(--fall, 240px)) rotate(var(--rot, 360deg)); opacity: 0; }
}
@keyframes confetti-burst {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  18% { transform: translate(calc(var(--dx, 0) * 0.6), var(--rise, -120px)) rotate(calc(var(--rot, 720deg) * 0.3)); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--fall, 300px)) rotate(var(--rot, 720deg)); opacity: 0; }
}
@keyframes node-ignite {
  0% { stroke-width: 2.5; }
  35% { stroke-width: 9; stroke: #fff6df; }
  100% { stroke-width: 2.5; }
}
@keyframes node-pulse {
  0%, 100% { stroke-width: 2.5; opacity: 0.9; }
  50% { stroke-width: 5.5; opacity: 1; }
}
@keyframes flag-plant {
  0% { transform: scaleY(0); }
  70% { transform: scaleY(1.15); }
  100% { transform: scaleY(1); }
}
@keyframes flag-wave {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  50% { transform: skewY(-6deg) scaleX(0.92); }
}
@keyframes eagle-fly {
  0% { transform: translate(1080px, 360px); }
  100% { transform: translate(-220px, 250px); }
}
@keyframes eagle-glide {
  0% { transform: translateY(0); }
  30% { transform: translateY(-36px); }
  60% { transform: translateY(14px); }
  100% { transform: translateY(-20px); }
}
@keyframes eagle-flap-l {
  from { transform: rotate(0deg); }
  to { transform: rotate(-22deg); }
}
@keyframes eagle-flap-r {
  from { transform: rotate(0deg); }
  to { transform: rotate(22deg); }
}

/* decorative ambient motion — only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  #stars circle { animation: star-twinkle 3.4s ease-in-out infinite; }
  #stars circle:nth-child(3n) { animation-delay: 1.1s; animation-duration: 4.2s; }
  #stars circle:nth-child(3n + 1) { animation-delay: 2.2s; animation-duration: 5s; }
  #sun-glow { animation: sun-breathe 7s ease-in-out infinite; }
  .cloud .p1 { animation: cloud-drift-a 11s ease-in-out infinite alternate; }
  .cloud .p2 { animation: cloud-drift-b 14s ease-in-out infinite alternate; animation-delay: -3s; }
  .cloud .p3 { animation: cloud-drift-a 9.5s ease-in-out infinite alternate-reverse; animation-delay: -6s; }
  .cloud .p4 { animation: cloud-drift-b 12.5s ease-in-out infinite alternate; animation-delay: -9s; }
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.25; }
}
@keyframes sun-breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
@keyframes cloud-drift-a {
  from { transform: translate(-10px, 2px) scale(1); }
  to { transform: translate(12px, -4px) scale(1.06); }
}
@keyframes cloud-drift-b {
  from { transform: translate(9px, -3px) scale(1.03); }
  to { transform: translate(-11px, 4px) scale(0.97); }
}
@keyframes cloud-dissipate {
  to { transform: translate(6px, -26px) scale(1.55); opacity: 0; }
}
@keyframes cloud-puff {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}
@keyframes climber-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}
@keyframes climber-hop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  70% { transform: translateY(2px); }
}

/* reduced motion: strip decorative animation, keep function */
@media (prefers-reduced-motion: reduce) {
  #scene-zoom { transition: none; }
  .cloud .puff, #stars circle, #sun-glow { animation: none !important; }
  .cloud.dissipating .puff { animation: none !important; opacity: 0; transition: opacity 300ms; }
  #camp-panel { transition: opacity 150ms; }
  .sky-base, .sky-gold, #layer-massif-gold, #gold-flood { transition: opacity 300ms; }
}