/* NodeClash World 21 — cinematic photographic depth layer */
.nc-er-world,
.nc-er-world * { box-sizing: border-box; }

.nc-er-world {
  --nc-er-photo-x: 50%;
  --nc-er-photo-y: 50%;
  --nc-er-photo-scale: 1.035;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #080b0d;
}

.nc-er-world::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: -3;
  background-image: var(--nc-er-photo, none);
  background-size: cover;
  background-position: var(--nc-er-photo-x) var(--nc-er-photo-y);
  transform: scale(var(--nc-er-photo-scale)) translate3d(0,0,0);
  transform-origin: center;
  will-change: transform, background-position;
  filter: saturate(1.06) contrast(1.04);
}

.nc-er-world::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.05) 34%, rgba(0,0,0,.30) 100%),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.05), transparent 58%);
}

.nc-er-photo {
  position: absolute;
  inset: -3%;
  z-index: -1;
  background-image: var(--nc-er-photo, none);
  background-size: cover;
  background-position: var(--nc-er-photo-x) var(--nc-er-photo-y);
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .7s ease, transform 4s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  will-change: opacity, transform;
}

.nc-er-world[data-world-id="autumn-forest"]::before {
  background-position: 50% 43%;
  filter: saturate(1.10) contrast(1.05);
}

.nc-er-world[data-world-id="autumn-forest"]::after {
  background:
    linear-gradient(180deg, rgba(20,11,4,.30), rgba(0,0,0,.08) 38%, rgba(10,6,2,.36)),
    radial-gradient(circle at 52% 48%, rgba(255,205,105,.12), transparent 55%);
}

@media (prefers-reduced-motion: reduce) {
  .nc-er-world::before,
  .nc-er-photo { transform: none !important; transition: none !important; }
}

/* Adaptive HUD legibility */
.nc-er-world [data-nc-er-hud],
.nc-er-world .nc-er-hud,
.nc-er-world .nc-er-panel,
.nc-er-world .nc-er-label {
  text-shadow: 0 2px 10px rgba(0,0,0,.88), 0 0 3px rgba(0,0,0,.95);
}

.nc-er-world.nc-er-light-env [data-nc-er-hud],
.nc-er-world.nc-er-light-env .nc-er-hud,
.nc-er-world.nc-er-light-env .nc-er-panel,
.nc-er-world.nc-er-light-env .nc-er-label {
  color: #101417;
  text-shadow: 0 1px 5px rgba(255,255,255,.9);
}