/* Existing and automatically adopted headings keep their typography and layout. */
[data-menu-magic] { position: relative; isolation: isolate; }
[data-menu-magic] > .menu-magic-layer,
[data-menu-magic] > .menu-magic-glow { position: absolute; pointer-events: none !important; user-select: none; z-index: -1; }
[data-menu-magic] > .menu-magic-layer { inset: calc(-1 * var(--menu-magic-bleed,12px)) -8px; width: calc(100% + 16px); height: calc(100% + var(--menu-magic-bleed,12px) * 2); overflow: visible; }
[data-menu-magic] > .menu-magic-glow { inset: 0 5%; border-radius: 50%; background: radial-gradient(ellipse,#dfb87a12,transparent 68%); animation: menu-magic-breath 5s ease-in-out infinite; }
.menu-magic-comet { offset-path: path('M92 24C45 43 5 85 24 120C38 145 84 133 77 161C68 198 18 180 34 151C55 114 105 188 184 191C272 196 388 159 378 100C370 52 320 32 307 59C295 83 339 112 363 82C392 44 342 12 310 35'); offset-rotate: auto; animation: menu-magic-orbit 5s linear infinite; }
.menu-magic-twinkle { animation: menu-magic-twinkle 5s ease-in-out infinite; opacity: .25; }
.menu-magic-twinkle-two { animation-delay: -1.7s; }
.menu-magic-twinkle-three { animation-delay: -3.4s; }
@keyframes menu-magic-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes menu-magic-breath { 0%,100% { opacity: .45; } 50% { opacity: .9; } }
@keyframes menu-magic-twinkle { 0%,38%,70%,100% { opacity: .2; } 47%,57% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
 [data-menu-magic] > .menu-magic-glow,.menu-magic-comet,.menu-magic-twinkle { animation: none; }
 .menu-magic-comet { display: none; }
}

/* Automatic coverage stays inside the heading box: never spills onto the
   camera, preview canvas, photograph or result image beside/below it. */
[data-menu-magic-auto] > .menu-magic-layer { inset: 0; width: 100%; height: 100%; overflow: hidden; }
[data-menu-magic-auto] > .menu-magic-glow { inset: 0 5%; }