/* Project Omnistic — Build XXXV: shared museum architecture */
:root {
  --museum-bronze-deep: #3a291c;
  --museum-bronze: #8f6a3d;
  --museum-bronze-light: #c5a36e;
  --museum-glass: rgba(22, 25, 27, 0.58);
  --museum-granite: #777672;
  --museum-slate: #292d30;
  --museum-walnut: #3c2a20;
  --museum-linen: #ddd4c4;
  --museum-paper: #d5c6aa;
  --museum-ambient: rgba(221, 190, 141, 0.12);
  --museum-shadow: rgba(5, 7, 8, 0.58);
  --museum-haze: rgba(206, 212, 211, 0.18);
  --museum-horizon-image: none;
  --museum-horizon-position: 50% 50%;
  --museum-horizon-opacity: 0;
  --museum-horizon-blur: 3px;
  --museum-horizon-scale: 1.025;
  --museum-horizon-saturation: 0.62;
  --museum-horizon-contrast: 0.72;
  --museum-transition-slow: 1400ms;
}

html.museum-atmosphere-ready body {
  isolation: isolate;
}

html.museum-atmosphere-ready body::before,
html.museum-atmosphere-ready body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

html.museum-atmosphere-ready body::before {
  z-index: -2;
  background-color: var(--museum-slate);
  background-image: var(--museum-horizon-image);
  background-position: var(--museum-horizon-position);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(var(--museum-horizon-blur)) saturate(var(--museum-horizon-saturation)) contrast(var(--museum-horizon-contrast));
  opacity: var(--museum-horizon-opacity);
  transform: scale(var(--museum-horizon-scale));
  transition: opacity var(--museum-transition-slow) ease;
}

html.museum-horizon-loaded body::before { --museum-horizon-opacity: 0.78; }

html.museum-atmosphere-ready body::after {
  z-index: -1;
  background:
    linear-gradient(180deg, var(--museum-ambient), transparent 34%),
    linear-gradient(0deg, rgba(8, 10, 11, 0.46), transparent 42%),
    radial-gradient(ellipse at center, transparent 32%, rgba(8, 10, 11, 0.42) 100%),
    linear-gradient(var(--museum-haze), var(--museum-haze));
}

html[data-museum-window="panorama"] { --museum-horizon-position: 50% 42%; }
html[data-museum-window="clerestory"] { --museum-horizon-position: 50% 18%; --museum-horizon-opacity: 0.62; }
html[data-museum-atmosphere="morning"] { --museum-ambient: rgba(246, 204, 145, 0.17); --museum-haze: rgba(219, 223, 216, 0.18); }
html[data-museum-atmosphere="overcast"] { --museum-ambient: rgba(167, 180, 184, 0.12); --museum-haze: rgba(187, 197, 201, 0.25); --museum-horizon-saturation: 0.48; }
html[data-museum-atmosphere="sunset"] { --museum-ambient: rgba(224, 141, 84, 0.18); --museum-haze: rgba(192, 139, 109, 0.16); }
html[data-museum-atmosphere="moonlight"] { --museum-ambient: rgba(99, 126, 157, 0.14); --museum-haze: rgba(99, 116, 139, 0.2); --museum-horizon-saturation: 0.42; --museum-horizon-contrast: 0.62; }
html[data-museum-atmosphere="winter"] { --museum-ambient: rgba(205, 219, 225, 0.16); --museum-haze: rgba(221, 230, 232, 0.24); --museum-horizon-saturation: 0.46; }

.museum-glass,
[data-museum-material="glass"] {
  background: var(--museum-glass);
  border: 1px solid rgba(197, 163, 110, 0.32);
  box-shadow: 0 18px 55px var(--museum-shadow), inset 0 1px rgba(255,255,255,0.1);
  backdrop-filter: blur(12px) saturate(0.82);
  -webkit-backdrop-filter: blur(12px) saturate(0.82);
}

[data-museum-material="bronze"] { color: var(--museum-bronze-light); border-color: var(--museum-bronze); }
[data-museum-material="walnut"] { background-color: var(--museum-walnut); }
[data-museum-material="stone"] { background-color: var(--museum-granite); }

@media (max-width: 720px) {
  :root { --museum-horizon-blur: 2px; --museum-horizon-scale: 1.04; }
  html.museum-horizon-loaded body::before { --museum-horizon-opacity: 0.64; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --museum-transition-slow: 0ms; }
}

@media (prefers-reduced-data: reduce) {
  html.museum-atmosphere-ready body::before { background-image: none !important; opacity: 0 !important; }
}

@media print {
  html.museum-atmosphere-ready body::before,
  html.museum-atmosphere-ready body::after { display: none; }
}