/* Effects live in pointer-transparent layers. The actual controls stay still. */
.wjj-mp-anchor { position: relative; }
.wjj-mp-layer,
.wjj-mp-layer::before,
.wjj-mp-layer::after {
    box-sizing: border-box !important;
    pointer-events: none !important;
}
.wjj-mp-layer {
    position: absolute !important;
    display: block !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    opacity: 0;
    transform: none;
    z-index: 1;
    contain: paint;
}
.wjj-mp-layer::before,
.wjj-mp-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.wjj-mp-light { background: linear-gradient(115deg,transparent 20%,#96d7ee33 48%,transparent 72%); }
.wjj-mp-rule::before { inset: auto 0 0; height: 2px; background: linear-gradient(90deg,#368eaf,#c3a160); }
.wjj-mp-edge::before { border: 1px solid #58a5c980; }
.wjj-mp-bloom { background: radial-gradient(ellipse at 50% 60%,#7dc4e333,transparent 72%); }
.wjj-mp-corner::before { inset: 2px; border: 2px solid #b2945480; clip-path: polygon(0 0,25% 0,25% 3%,3% 3%,3% 28%,0 28%,0 0,100% 100%,75% 100%,75% 97%,97% 97%,97% 72%,100% 72%,100% 100%); }
.wjj-mp-ring::before { inset: 3px; border: 1px solid #5699b477; border-radius: 50%; }
.wjj-mp-dot::before { inset: auto auto 6px 8px; width: 5px; height: 5px; background:#89bfd1; border-radius:50%; }
.wjj-mp-grid { background-image:linear-gradient(#438eb31a 1px,transparent 1px),linear-gradient(90deg,#438eb31a 1px,transparent 1px); background-size:24px 24px; }
.wjj-mp-paper { background:linear-gradient(135deg,#ffffff44,transparent 35%,#d8b46b1a); }
.wjj-mp-shadow { box-shadow: inset 0 0 0 1px #508fae66,inset 0 -14px 30px #54a8c318; }

/* Fifteen distinct five-second accents. JS starts each cycle fifteen seconds apart. */
.wjj-mp-cycle-active > .wjj-mp-cycle { animation: wjj-mp-envelope 5s linear both; }
.wjj-mp-cycle::before,
.wjj-mp-cycle::after { animation-duration: 5s; animation-timing-function: cubic-bezier(.22,.61,.36,1); animation-fill-mode: both; animation-play-state: paused; }
.wjj-mp-cycle-active > .wjj-mp-cycle::before,
.wjj-mp-cycle-active > .wjj-mp-cycle::after { animation-play-state: running; animation-name:var(--wjj-mp-keyframes, none); }
.wjj-mp-cycle[data-accent="sheen"]::before { background:linear-gradient(110deg,transparent 30%,#fff4 48%,transparent 65%); --wjj-mp-keyframes:wjj-mp-sheen; }
.wjj-mp-cycle[data-accent="twin-beam"]::before { background:linear-gradient(90deg,transparent 24%,#9dd9ef33 25%,transparent 29%,transparent 65%,#fff3 66%,transparent 70%); --wjj-mp-keyframes:wjj-mp-twin; }
.wjj-mp-cycle[data-accent="center-bloom"]::before { background:radial-gradient(ellipse,#97d6f04d,transparent 68%); --wjj-mp-keyframes:wjj-mp-center; }
.wjj-mp-cycle[data-accent="edge-orbit"]::before { inset:2px; border:1px solid #a1d5e899; --wjj-mp-keyframes:wjj-mp-orbit; }
.wjj-mp-cycle[data-accent="underline-trace"]::before { inset:auto 12% 3px; height:2px; background:linear-gradient(90deg,transparent,#cfb675,transparent); transform-origin:left; --wjj-mp-keyframes:wjj-mp-trace; }
.wjj-mp-cycle[data-accent="corner-spark"]::before { background:radial-gradient(circle at 0 0,#fff6,transparent 35%),radial-gradient(circle at 100% 100%,#8acee855,transparent 35%); --wjj-mp-keyframes:wjj-mp-spark; }
.wjj-mp-cycle[data-accent="vertical-scan"]::before { background:linear-gradient(0deg,transparent 35%,#b0e8ff30 50%,transparent 65%); --wjj-mp-keyframes:wjj-mp-vertical; }
.wjj-mp-cycle[data-accent="horizon"]::before { inset:50% 5% auto;height:1px;background:#e2c99899;box-shadow:0 0 9px #fff4;--wjj-mp-keyframes:wjj-mp-horizon; }
.wjj-mp-cycle[data-accent="ripple"]::before { inset:10%;border:1px solid #a8dbec88;border-radius:50%;--wjj-mp-keyframes:wjj-mp-ripple; }
.wjj-mp-cycle[data-accent="star-glint"]::before { background:linear-gradient(90deg,transparent 46%,#fff7 50%,transparent 54%),linear-gradient(transparent 46%,#fff6 50%,transparent 54%);inset:20% 35%;--wjj-mp-keyframes:wjj-mp-glint; }
.wjj-mp-cycle[data-accent="gold-ribbon"]::before { background:linear-gradient(155deg,transparent 42%,#dbc58b44 48%,#fff2 51%,transparent 57%);--wjj-mp-keyframes:wjj-mp-ribbon; }
.wjj-mp-cycle[data-accent="inset-frame"]::before { inset:4px;border:1px solid #fff5;--wjj-mp-keyframes:wjj-mp-frame; }
.wjj-mp-cycle[data-accent="tide"]::before { background:radial-gradient(ellipse at 50% 130%,#79c4df55,transparent 68%);--wjj-mp-keyframes:wjj-mp-tide; }
.wjj-mp-cycle[data-accent="dot-trail"]::before { inset:auto auto 4px 8px;width:4px;height:4px;border-radius:50%;background:#c8dfea;box-shadow:-7px 0 #b5d0dd99,-14px 0 #b5d0dd55;--wjj-mp-keyframes:wjj-mp-trail; }
.wjj-mp-cycle[data-accent="soft-prism"]::before { background:conic-gradient(from 45deg at 50% 50%,transparent,#98cee533,transparent,#d3bf8926,transparent);--wjj-mp-keyframes:wjj-mp-prism; }
@keyframes wjj-mp-envelope {0%,100%{opacity:0}12%,86%{opacity:1}}
@keyframes wjj-mp-sheen {from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes wjj-mp-twin {0%{transform:translateX(-90%)}70%,100%{transform:translateX(95%)}}
@keyframes wjj-mp-center {0%{transform:scale(.2);opacity:0}55%{transform:scale(1.2);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes wjj-mp-orbit {0%{clip-path:inset(0 100% 80% 0)}25%{clip-path:inset(0 0 80% 0)}50%{clip-path:inset(0 0 0 80%)}75%{clip-path:inset(80% 0 0 0)}100%{clip-path:inset(0 80% 0 0)}}
@keyframes wjj-mp-trace {0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}
@keyframes wjj-mp-spark {0%{opacity:0;transform:scale(.85)}45%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}
@keyframes wjj-mp-vertical {from{transform:translateY(110%)}to{transform:translateY(-110%)}}
@keyframes wjj-mp-horizon {0%{transform:scaleX(0);opacity:0}50%{transform:scaleX(1);opacity:.7}100%{transform:scaleX(.5);opacity:0}}
@keyframes wjj-mp-ripple {0%{transform:scale(.1);opacity:0}25%{opacity:.7}100%{transform:scale(1.9);opacity:0}}
@keyframes wjj-mp-glint {0%{transform:scale(0) rotate(-30deg)}50%{transform:scale(.8) rotate(0)}100%{transform:scale(0) rotate(35deg)}}
@keyframes wjj-mp-ribbon {0%{transform:translate(-80%,35%)}100%{transform:translate(80%,-35%)}}
@keyframes wjj-mp-frame {0%{clip-path:inset(50% 0);opacity:0}60%{clip-path:inset(0);opacity:.8}100%{clip-path:inset(0);opacity:0}}
@keyframes wjj-mp-tide {0%{transform:translateY(70%)}50%{transform:translateY(-15%)}100%{transform:translateY(70%)}}
@keyframes wjj-mp-trail {0%{left:8px;opacity:0}20%{opacity:.8}80%{opacity:.8}100%{left:calc(100% - 12px);opacity:0}}
@keyframes wjj-mp-prism {0%{transform:scale(.9) rotate(-15deg);opacity:0}50%{opacity:.8}100%{transform:scale(1.1) rotate(15deg);opacity:0}}

/* Suspend accents immediately during an interaction, including keyboard input. */
[data-wjj-mp-control]:is(:hover,:focus-within,:active,:disabled,[aria-disabled="true"],[aria-busy="true"]) > .wjj-mp-cycle { visibility:hidden !important; }
body.wjj-mp-paused .wjj-mp-layer { display:none !important; }
#wjj-mp-toggle { display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;margin:12px 0 0;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1.3;cursor:pointer; }
#wjj-mp-toggle:focus-visible { outline:2px solid #79b8d4;outline-offset:4px; }
@media(prefers-reduced-motion:reduce) {
    .wjj-mp-layer { display:none !important;animation:none !important; }
    .wjj-mp-layer::before,.wjj-mp-layer::after { animation:none !important; }
}