#voxel-world-canvas {
  display: none !important;
}

.world-layer {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
  background-color: #8fbeff;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  filter: saturate(1.03) contrast(1.02);
  transition: opacity .28s ease, filter .28s ease, background-position .8s cubic-bezier(.2,.7,.2,1);
  animation: scenic-breathe 18s ease-in-out infinite alternate;
}

.world-layer[data-scene="meadow"] {
  background-image: url("/images/scenes/meadow.svg");
  background-position: 50% 52%;
}

.world-layer[data-scene="arena"] {
  background-image: url("/images/scenes/arena.svg");
  background-position: 52% 50%;
}

.world-layer[data-scene="village"] {
  background-image: url("/images/scenes/village.svg");
  background-position: 50% 48%;
}

.world-layer[data-scene="tower"] {
  background-image: url("/images/scenes/tower.svg");
  background-position: 55% 48%;
}

.world-layer[data-scene="cave"] {
  background-image: url("/images/scenes/cave.svg");
  background-position: 50% 52%;
  background-color: #24211d;
  filter: saturate(.94) contrast(1.05);
}

.world-haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 16%, rgba(255,255,220,.24), transparent 18%),
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 35%, transparent 72%, rgba(255,255,255,.025));
  opacity: .9;
  animation: light-drift 10s ease-in-out infinite alternate;
}

.world-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 26%, transparent 76%, rgba(32,25,18,.08)),
    linear-gradient(90deg, rgba(45,35,24,.08), transparent 18%, transparent 82%, rgba(45,35,24,.06));
  box-shadow: inset 0 0 100px rgba(67,56,41,.08);
}

.world-layer[data-scene="cave"] .world-haze {
  background:
    radial-gradient(circle at 22% 48%, rgba(255,178,76,.2), transparent 12%),
    radial-gradient(circle at 72% 56%, rgba(255,151,62,.16), transparent 14%),
    linear-gradient(180deg, rgba(12,10,8,.18), rgba(5,5,4,.22));
  animation: torch-breathe 3.8s ease-in-out infinite alternate;
}

.world-layer[data-scene="cave"] .world-vignette {
  background: radial-gradient(circle at 50% 48%, transparent 28%, rgba(7,6,5,.18) 65%, rgba(5,4,3,.4) 100%);
  box-shadow: inset 0 0 150px rgba(0,0,0,.28);
}

.world-pixels {
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mix-blend-mode: soft-light;
}

.site-is-moving .world-layer {
  opacity: .72;
  filter: saturate(.88) brightness(.94) blur(.35px);
}

@keyframes scenic-breathe {
  from { background-position-x: 49.5%; }
  to { background-position-x: 50.7%; }
}

@keyframes light-drift {
  from { transform: translate3d(-.25%, 0, 0); opacity: .74; }
  to { transform: translate3d(.35%, -.15%, 0); opacity: .96; }
}

@keyframes torch-breathe {
  from { opacity: .72; filter: brightness(.92); }
  to { opacity: 1; filter: brightness(1.08); }
}

@media (max-width: 900px) {
  .world-layer { background-size: auto 100%; }
  .world-layer[data-scene="meadow"] { background-position: 58% 50%; }
  .world-layer[data-scene="arena"] { background-position: 62% 50%; }
  .world-layer[data-scene="village"] { background-position: 60% 50%; }
  .world-layer[data-scene="tower"] { background-position: 63% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .world-layer,
  .world-haze {
    animation: none !important;
  }
}