/* Video background system */
.hero-bg-video { transition: opacity 0.6s ease; }

/* Landing page: show video at 25% (dark) or 20% (light). */
[data-theme="light"] #heroBgDark { opacity: 0 !important; display: none !important; }
[data-theme="light"] #heroBgLight { opacity: 0.18 !important; display: block !important; }
[data-theme="dark"] #heroBgDark,
:root:not([data-theme="light"]) #heroBgDark { opacity: 0.25; display: block; }
[data-theme="dark"] #heroBgLight,
:root:not([data-theme="light"]) #heroBgLight { opacity: 0 !important; display: none !important; }

/* When dashboard is visible, reduce video opacity further. */
#app[style*="display:block"] ~ .hero-bg-video,
#app[style*="display: block"] ~ .hero-bg-video { opacity: 0.08 !important; }

/* Hide videos completely when landing is hidden. */
#landing[style*="display:none"] ~ .hero-bg-video,
#landing[style*="display: none"] ~ .hero-bg-video { opacity: 0 !important; }