/* =====================================================================
   XMSphere - shared logo particle hero container
   Used by the video page Hero and the site-wide footer.
   Visuals (radius / grid / shadow / theme) stay in inner_pages.css.
   ===================================================================== */
.xms-sphere-host { position: relative; overflow: hidden; }
.xms-sphere-host .xls { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.xms-sphere-host .xls__art { position: absolute; inset: 0; }
.xms-sphere-host .xls canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease; }
.xms-sphere-host .xls[data-state="live"] canvas { opacity: 1; }
.xms-sphere-host .xls[data-state="fallback"] canvas { visibility: hidden; }
.xms-sphere-host .xls__svg { position: absolute; pointer-events: none; opacity: .34; transition: opacity .5s ease; }
.xms-sphere-host .xls[data-state="live"] .xls__svg { opacity: 0; transition-delay: .7s; }
.xms-sphere-host .xls[data-state="fallback"] .xls__svg { opacity: .94; }
.xms-sphere-host .xls__dbg { position: absolute; left: 12px; bottom: 10px; margin: 0; font: 11px/1.5 ui-monospace, Menlo, Consolas, monospace; color: rgba(190, 205, 225, .75); white-space: pre; }

/* Theme is driven by CSS custom properties so each host keeps its own look.
   Consumers may override: --xms-bg-top, --xms-bg-bottom, --xms-glow, --xms-glow-alpha */
.xms-sphere-host { --xms-bg-top: #07173a; --xms-bg-bottom: #07173a; --xms-glow: #1a4ac8; --xms-glow-alpha: .40; }

@media (prefers-reduced-motion: reduce) {
.xms-sphere-host .xls canvas, .xms-sphere-host .xls__svg { transition: none; }
}