/* layers. mg-fx sits between the button surface and its label. Custom element names so no page rule for span or i can reach them. */
mg-fx, mg-s, mg-g, mg-d { display: block; position: absolute; pointer-events: none; margin: 0; padding: 0; border: 0; background: none; }
mg-fx { inset: var(--mg-out, 0px); z-index: -1; border-radius: inherit; }
.mg-glass mg-fx { z-index: 0; }                                   /* inside the glass: above the refraction canvas (z -1), below the label (z 1), where the old light sweep was */
mg-s { inset: 0; }
.mg-iso { isolation: isolate; } .mg-rel { position: relative; }
.mg-on .glimmer { display: none !important; } .mg-on.btn-call::after { content: none !important; }                     /* the gleam replaces the old light sweep on glass buttons */
.mg-on.mg-glass .glass-button { overflow: visible !important; }
/* breathing rim glow: sample 5 at half strength (same two shadows, peak 0.5), lengths scaled by --mg-g for small controls (1 on normal buttons) */
mg-g { inset: 0; border-radius: inherit; opacity: 0; animation: mg-breathe 3.87s ease-in-out infinite; }
mg-g.i { box-shadow: inset 0 0 0 calc(2px * var(--mg-g, 1)) #fff, inset 0 0 calc(26px * var(--mg-g, 1)) calc(10px * var(--mg-g, 1)) rgba(255,255,255,.9); }
mg-g.o { box-shadow: 0 0 calc(30px * var(--mg-g, 1)) calc(10px * var(--mg-g, 1)) rgba(255,255,255,.95), 0 0 calc(70px * var(--mg-g, 1)) calc(24px * var(--mg-g, 1)) rgba(255,255,255,.5); }
@keyframes mg-breathe { 0% { opacity: 0; } 31% { opacity: .5; } 74.2% { opacity: 0; } 100% { opacity: 0; } }
/* the two gleams: 30 glows each on a normal button (head core 3.328px, second 3.944px, tail 0.96px; halo 3.4 times the core), riding the rim */
mg-d { left: 0; top: 0; width: calc(var(--d) * 3.4); height: calc(var(--d) * 3.4); opacity: 0; border-radius: 0;
  background: radial-gradient(circle closest-side, #fff 0, #fff 26%, rgba(255,255,255,.9) 32%, rgba(255,255,255,.5) 48%, rgba(255,255,255,.16) 72%, rgba(255,255,255,0) 100%);
  offset-path: inset(var(--mg-in, 1.25px) round var(--mg-r, 2px)); offset-rotate: 0deg;
  animation: mg-a 3.87s linear infinite; animation-delay: calc(var(--i) * var(--mg-st, .0394s) - 3.87s); }
mg-s.b mg-d { animation-name: mg-b; }
@keyframes mg-a { 0% { offset-distance: var(--mg-a0); opacity: 0; } 6.46% { opacity: var(--o); } 29.12% { opacity: var(--o); } 44.63% { offset-distance: var(--mg-a1); opacity: 0; } 100% { offset-distance: var(--mg-a1); opacity: 0; } }
@keyframes mg-b { 0% { offset-distance: var(--mg-b0); opacity: 0; } 6.46% { opacity: var(--o); } 29.12% { opacity: var(--o); } 44.63% { offset-distance: var(--mg-b1); opacity: 0; } 100% { offset-distance: var(--mg-b1); opacity: 0; } }
/* v1.1 light surfaces (a button whose own label is dark): the white gleam is unchanged, with a neutral near black shadow added around it so it can be seen. No colour. */
.mg-light mg-d { background: radial-gradient(circle closest-side, #fff 0, #fff 26%, rgba(255,255,255,.9) 32%, rgba(11,11,12,.24) 44%, rgba(11,11,12,.1) 68%, rgba(11,11,12,0) 100%); }
.mg-light mg-g.o { box-shadow: 0 0 calc(30px * var(--mg-g, 1)) calc(10px * var(--mg-g, 1)) rgba(255,255,255,.95), 0 0 calc(70px * var(--mg-g, 1)) calc(24px * var(--mg-g, 1)) rgba(255,255,255,.5), 0 0 calc(44px * var(--mg-g, 1)) calc(18px * var(--mg-g, 1)) rgba(11,11,12,.34); }
.mg-light mg-g.i { box-shadow: inset 0 0 0 calc(2px * var(--mg-g, 1)) #fff, inset 0 0 calc(26px * var(--mg-g, 1)) calc(10px * var(--mg-g, 1)) rgba(255,255,255,.9), inset 0 0 0 calc(3px * var(--mg-g, 1)) rgba(11,11,12,.3); }
/* off screen, hidden, disabled: nothing runs */
.mg-off mg-fx, .mg-plain mg-fx, :disabled > mg-fx, [aria-disabled="true"] > mg-fx, [hidden] mg-fx { display: none !important; }
html.mg-paused mg-g, html.mg-paused mg-d { animation-play-state: paused !important; }
/* reduced motion: one still state (as the comparison: glow held at 0.3, the two streaks resting near their corners) */
@media (prefers-reduced-motion: reduce) {
  mg-g { animation: none !important; opacity: .3; }
  mg-d { animation: none !important; offset-path: none; opacity: var(--o); left: calc(92% - var(--i) * var(--mg-sp, 2.7px)); top: var(--mg-in, 1.25px); transform: translate(-50%, -50%); }
  mg-s.b mg-d { left: calc(8% + var(--i) * var(--mg-sp, 2.7px)); top: calc(100% - var(--mg-in, 1.25px)); }
}
@media print { mg-fx { display: none !important; } }