/*
 * M12 procedural living-world overlay.
 *
 * The module inserts `.living-world` inside `[data-scene-media]`, so the
 * atmosphere follows the same bounded scene transform. It never replaces,
 * filters or mutates the three raster phase images.
 */

html[data-variant="customer-v12"] .living-world {
  position: absolute;
  z-index: 5;
  inset: 0;
  contain: strict;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 480ms ease;
}

html[data-variant="customer-v12"].living-world-ready .living-world {
  opacity: 1;
}

html[data-variant="customer-v12"] .living-world__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  pointer-events: none;
}

/*
 * M12 owns all moving atmosphere. The older full-frame gradient layers and
 * moving diagonal vignette washes are suppressed once the engine is ready;
 * the static vignette itself remains for UI contrast.
 */
html[data-variant="customer-v12"].living-world-ready .living-atmosphere {
  opacity: 0;
}

html[data-variant="customer-v12"].living-world-ready .scene-vignette::before,
html[data-variant="customer-v12"].living-world-ready .scene-vignette::after {
  animation: none !important;
  opacity: 0 !important;
  transform: none !important;
}

html[data-variant="customer-v12"] .living-world[data-living-world-state="hidden"] .living-world__canvas,
html[data-variant="customer-v12"] .living-world[data-living-world-state="page-hidden"] .living-world__canvas {
  opacity: 0.9;
}

@media (max-width: 760px), (pointer: coarse) {
  html[data-variant="customer-v12"] .living-world__canvas {
    opacity: 0.82;
  }

  html[data-variant="customer-v12"].living-world-ready .living-atmosphere {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-variant="customer-v12"] .living-world {
    transition: none;
  }

  html[data-variant="customer-v12"] .living-world__canvas {
    opacity: 0.72;
  }
}