/* An isolated stacking context keeps the decorative layer above the host's
   own background and below all content, including unwrapped text nodes. */
.morpheon-hero-host { isolation: isolate !important; }
.morpheon-hero-position { position: relative !important; }
.morpheon-hero-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none !important;
    background: #020216 url('../images/morpheon-blog-obsidian.webp') center / 100% 100% no-repeat;
    opacity: var(--md-hero-opacity, 1);
    filter: brightness(var(--md-hero-brightness, 1));
    contain: strict;
}
.morpheon-hero-background[data-palette="blue"] { filter: brightness(var(--md-hero-brightness, 1)) hue-rotate(-28deg); }
.morpheon-hero-background[data-palette="neutral"] { filter: brightness(var(--md-hero-brightness, 1)) saturate(0); }
.morpheon-hero-background canvas { display: block; width: 100%; height: 100%; opacity: 0; }
.morpheon-hero-background[data-rendered] canvas { opacity: 1; }
.morpheon-hero-background[data-background="emblem"] { background: #06064c url('../images/morpheon-emblem-poster.webp') center / cover no-repeat; }
/* Static mobile fallback also reveals the mark after the same three seconds.
   The animated canvas supplies its own relief; this is only for unavailable
   WebGL and reduced motion, and never intercepts touch gestures. */
.morpheon-hero-background[data-background="emblem"][data-auto-emblem]:not([data-rendered])::after {
    content: ''; position: absolute; left: 50%; top: 48%;
    width: var(--md-emblem-fallback-width, 68%); aspect-ratio: 46.43 / 24.9;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #7363b1 0%, #322066 32%, #0d0c48 70%, #493293 100%);
    -webkit-mask: url('../images/morpheon-symbol.svg') center / contain no-repeat;
    mask: url('../images/morpheon-symbol.svg') center / contain no-repeat;
    opacity: 0; transition: opacity 1.2s ease;
}
.morpheon-hero-background[data-background="emblem"][data-auto-emblem="shown"]:not([data-rendered])::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .morpheon-hero-background[data-auto-emblem]::after { transition: none !important; }
}