/* pl-magic: the styles that go with pl-magic.js (16 Oct 2026). Every colour is the page's own token, read where the effect sits
   (so a dark band re-pointing --ink and --bg is followed): --accent, --ink, --bg, --card, --line, --band-accent; set --mu-accent
   (and --mu-accent-2) on an element to override one effect. Only transform and opacity move, except where the effect is a blur or
   a marker by nature (blur-fade, text-animate's blur, morphing-text, the highlighter pass); curves are our own; hover only where
   there is a real pointer; "reduce motion" keeps the fades and drops the movement. Nothing is hidden unless the script runs.

   Ported from Magic UI, https://github.com/magicuidesign/magicui
   MIT License

   Copyright (c) Magic UI

   Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation
   files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy,
   modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software
   is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
   OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
   LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
   IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */

:root { --mu-out: cubic-bezier(0.23, 1, 0.32, 1); --mu-io: cubic-bezier(0.77, 0, 0.175, 1); --mu-dr: cubic-bezier(0.32, 0.72, 0, 1); }
[data-mu], .mu-vd-dlg {
  --mu-a: var(--mu-accent, var(--accent, #A8532E));
  --mu-a2: var(--mu-accent-2, var(--band-accent, color-mix(in srgb, var(--mu-a) 45%, #fff)));
  --mu-i: var(--ink, #1D1A16);
  --mu-p: var(--bg, var(--paper, #F6F2ED));
  --mu-c: var(--card, var(--mu-p));
  --mu-line: var(--line, color-mix(in srgb, var(--mu-i) 13%, transparent));
}
.mu-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mu-show { display: inline; }
.mu-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mu-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ── blur-fade ── */
.mu-js [data-mu~="blur-fade"]:not(.mu-in):not(.mu-bf-group), .mu-js .mu-bf-group:not(.mu-in) > * {
  opacity: 0; transform: translate(var(--mu-x, 0), var(--mu-y, 10px)); filter: blur(var(--mu-blur, 6px)); }
[data-mu~="blur-fade"].mu-in:not(.mu-bf-group), .mu-bf-group.mu-in > * {
  transition: opacity 520ms var(--mu-out), transform 520ms var(--mu-out), filter 520ms var(--mu-out);
  transition-delay: calc(var(--mu-k, 0) * var(--mu-st, 70ms)); }

/* ── text-animate ── */
.mu-ta .mu-seg, .mu-ta .mu-tw { display: inline-block; white-space: pre; }
.mu-ta-blur-up { --mu-from: translateY(0.32em); --mu-f: blur(8px); }
.mu-ta-fade-up { --mu-from: translateY(0.45em); --mu-f: none; }
.mu-ta-slide-left { --mu-from: translateX(0.6em); --mu-f: none; }
.mu-ta-blur { --mu-from: none; --mu-f: blur(10px); }
.mu-ta:not(.mu-in) .mu-seg { opacity: 0; transform: var(--mu-from); filter: var(--mu-f); }
.mu-ta.mu-in .mu-seg { transition: opacity 420ms var(--mu-out), transform 380ms var(--mu-out), filter 380ms var(--mu-out); transition-delay: calc(var(--mu-k, 0) * 1ms); }

/* ── text-reveal ── */
.mu-tr { position: relative; height: var(--mu-h, 220vh); }
.mu-tr-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; }
.mu-trw { transition: opacity 120ms linear; }

/* ── word-rotate ── */
[data-mu~="word-rotate"]:not(.mu-wr) > *:not(:last-child)::after { content: " / "; }
.mu-wr { display: inline-grid; vertical-align: bottom; overflow: hidden; padding: 0.06em 0.14em; margin: -0.06em -0.14em; }
.mu-wr > [aria-hidden] { grid-area: 1 / 1; opacity: 0; transform: translateY(-0.55em); }
.mu-wr > .mu-on { opacity: 1; transform: none; transition: opacity 250ms var(--mu-out), transform 250ms var(--mu-out); }
.mu-wr > .mu-out { opacity: 0; transform: translateY(0.55em); transition: opacity 200ms var(--mu-out), transform 220ms var(--mu-out); }

/* ── morphing-text ── */
[data-mu~="morphing-text"]:not(.mu-mt) > *:not(:last-child)::after { content: " / "; }
.mu-mt { display: inline-grid; position: relative; filter: url(#mu-threshold) blur(0.6px); }
.mu-mt > * { grid-area: 1 / 1; }
.mu-mt > .mu-mt-size { visibility: hidden; }
.mu-mt-t { will-change: filter, opacity; }
.mu-mt-still { filter: none; }
.mu-mt-still > .mu-mt-size { visibility: visible; opacity: 0; transition: opacity 400ms var(--mu-out); }
.mu-mt-still > .mu-mt-size.mu-on { opacity: 1; }

/* ── highlighter ── */
.mu-hl { --mu-hl: color-mix(in srgb, var(--mu-a) 30%, transparent); }
.mu-hl-highlight { background: linear-gradient(var(--mu-hl), var(--mu-hl)) no-repeat 0 62% / 100% 72%; padding-inline: 0.12em; margin-inline: -0.06em; border-radius: 0.18em; }
.mu-js .mu-hl-highlight:not(.mu-in) { background-size: 0% 72%; }
.mu-hl-highlight.mu-in { transition: background-size 900ms var(--mu-io); }
.mu-hl:not(.mu-hl-highlight) { position: relative; display: inline-block; --mu-hl: var(--mu-a); }
.mu-hl-svg { position: absolute; overflow: visible; pointer-events: none; fill: none; stroke: var(--mu-hl); stroke-width: var(--mu-hl-w, 2.2px); stroke-linecap: round; stroke-linejoin: round; }
.mu-hl-svg path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mu-js .mu-hl:not(.mu-in) .mu-hl-svg path { stroke-dashoffset: 1; }
.mu-hl.mu-in .mu-hl-svg path { transition: stroke-dashoffset 800ms var(--mu-io); }

/* ── number-ticker ── */
.mu-nt { display: inline-block; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── marquee ── */
[data-mu~="marquee"] { --mu-gap: 1rem; }
[data-mu~="marquee"]:not(.mu-mq) { display: flex; gap: var(--mu-gap); overflow-x: auto; }
[data-mu~="marquee"][data-mu-vertical]:not(.mu-mq) { flex-direction: column; overflow: auto; max-height: var(--mu-mq-h, 32rem); }
.mu-mq { display: flex; gap: var(--mu-gap); overflow: hidden; }
.mu-mq-v { flex-direction: column; height: var(--mu-mq-h, 32rem); }
.mu-mq-track { display: flex; flex: none; gap: var(--mu-gap); justify-content: space-around; animation: mu-mq var(--mu-dur, 40s) linear infinite; }
.mu-mq-v .mu-mq-track { flex-direction: column; animation-name: mu-mqv; }
.mu-mq-rev .mu-mq-track { animation-direction: reverse; }
.mu-mq.mu-off .mu-mq-track, .mu-away .mu-mq-track { animation-play-state: paused; }
.mu-mq-fade { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mu-mq-v.mu-mq-fade { -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
@keyframes mu-mq { to { transform: translateX(calc(-100% - var(--mu-gap))); } }
@keyframes mu-mqv { to { transform: translateY(calc(-100% - var(--mu-gap))); } }

/* ── velocity ── */
.mu-vel { overflow: hidden; white-space: nowrap; }
.mu-vel-in { display: inline-flex; align-items: center; will-change: transform; user-select: none; }
.mu-vel-b { display: inline-flex; flex: none; align-items: center; }

/* ── animated-list ── */
.mu-al { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.mu-al > * { transform-origin: 50% 0; transition: transform 460ms var(--mu-dr), opacity 300ms var(--mu-out); }
.mu-al > .mu-al-wait { display: none; }
.mu-al > .mu-al-new { opacity: 0; transform: translateY(-12px) scale(0.95); transition: none; }
.mu-al > .mu-al-gone { opacity: 0; transition: opacity 360ms var(--mu-out); }

/* ── bento ── */
[data-mu~="bento"] { display: grid; gap: var(--mu-gap, 1rem); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--mu-row, 22rem); }
[data-mu~="bento"] > [data-mu-col="2"] { grid-column: span 2; }
[data-mu~="bento"] > [data-mu-col="3"] { grid-column: span 3; }
[data-mu~="bento"] > [data-mu-row="2"] { grid-row: span 2; }
@media (max-width: 860px) {
  [data-mu~="bento"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(var(--mu-row-sm, 19rem), auto); }
  [data-mu~="bento"] > [data-mu-col], [data-mu~="bento"] > [data-mu-row] { grid-column: auto; grid-row: auto; }
}
.mu-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; border-radius: var(--r2, 22px);
  background: var(--mu-c, var(--card, #fff)); color: var(--ink, inherit);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink, #000) 6%, transparent), 0 2px 4px color-mix(in srgb, var(--ink, #000) 4%, transparent), 0 14px 30px -12px color-mix(in srgb, var(--ink, #000) 14%, transparent); }
.mu-card-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.mu-card-bg > img, .mu-card-bg > video { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--mu-out); }
.mu-card-body { position: relative; padding: clamp(18px, 2vw, 26px); transition: transform 300ms var(--mu-out); }
.mu-card-body h3 { margin: 0 0 0.3em; }
.mu-card-body p { margin: 0; max-width: 34ch; }
.mu-card > .mu-card-cta { align-self: flex-start; margin: -6px clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px); }
.mu-card-cta { display: inline-flex; align-items: center; gap: 0.45em; margin-top: 0.9em; font-weight: 600; text-decoration: none; color: inherit; transition: transform 140ms var(--mu-out); }
.mu-card-cta::after { content: "\2192"; transition: transform 200ms var(--mu-out); }
.mu-card-cta:active { transform: scale(0.97); }
.mu-card--photo { color: #fff; }
.mu-card--photo .mu-card-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.66), rgb(0 0 0 / 0.08) 55%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .mu-card .mu-card-cta, .mu-card > .mu-card-cta { position: absolute; left: clamp(18px, 2vw, 26px); bottom: clamp(18px, 2vw, 26px); margin: 0; opacity: 0; transform: translateY(10px); transition: opacity 240ms var(--mu-out), transform 240ms var(--mu-out); }
  .mu-card:hover .mu-card-body, .mu-card:focus-within .mu-card-body { transform: translateY(-2.4rem); }
  .mu-card:hover .mu-card-cta, .mu-card:focus-within .mu-card-cta { opacity: 1; transform: none; }
  .mu-card:hover .mu-card-bg > img, .mu-card:hover .mu-card-bg > video { transform: scale(1.04); }
  .mu-card-cta:hover::after { transform: translateX(3px); }
}

/* ── magic-card ── */
.mu-mc { position: relative; isolation: isolate; }
.mu-mc > :where(:not(.mu-mc-ring, .mu-mc-spot, .mu-card-bg, .mu-card-cta, [data-mu])) { position: relative; z-index: 2; }
.mu-mc > .mu-card-cta { z-index: 2; }
.mu-mc-ring, .mu-mc-spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 260ms var(--mu-out); }
.mu-mc-ring { z-index: 3; padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.mu-mc-spot { z-index: 1; }
.mu-mc-rb, .mu-mc-sb { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.mu-mc-rb { width: var(--mu-s); height: var(--mu-s); background: radial-gradient(closest-side, var(--mu-a), color-mix(in srgb, var(--mu-a2) 70%, transparent) 55%, transparent); }
.mu-mc-sb { width: calc(var(--mu-s) * 2); height: calc(var(--mu-s) * 2); background: radial-gradient(closest-side, color-mix(in srgb, var(--mu-a) 13%, transparent), transparent); }
.mu-mc.mu-hot .mu-mc-ring, .mu-mc.mu-hot .mu-mc-spot { opacity: 1; }

/* ── border-beam (and shine-border, its "shine" variant) ── */
.mu-bb { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; border: var(--mu-bw, 1.5px) solid transparent;
  -webkit-mask: linear-gradient(transparent, transparent) padding-box, linear-gradient(#000, #000) border-box; -webkit-mask-composite: source-in;
  mask: linear-gradient(transparent, transparent) padding-box, linear-gradient(#000, #000) border-box; mask-composite: intersect; }
.mu-bb-c { position: absolute; width: var(--mu-bs, 90px); aspect-ratio: 1; background: linear-gradient(to left, var(--mu-a), var(--mu-a2), transparent);
  offset-path: rect(0 auto auto 0 round var(--mu-bs, 90px)); animation: mu-beam var(--mu-dur, 7s) linear infinite; }
.mu-bb-rev .mu-bb-c { animation-direction: reverse; }
@supports not (offset-path: rect(0 auto auto 0)) { .mu-bb:not(.mu-bb-shine) { display: none; } }
@keyframes mu-beam { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.mu-bb-shine { overflow: hidden; border: 0; padding: var(--mu-bw, 1.5px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.mu-bb-shine .mu-bb-c { offset-path: none; width: 300%; height: 300%; aspect-ratio: auto; left: -100%; top: -100%;
  background: radial-gradient(circle at 30% 30%, transparent 18%, var(--mu-a) 26%, var(--mu-a2) 32%, transparent 40%), radial-gradient(circle at 70% 70%, transparent 18%, var(--mu-a2) 26%, var(--mu-a) 32%, transparent 40%);
  animation: mu-shine var(--mu-dur, 12s) linear infinite; }
@keyframes mu-shine { 0% { transform: translate(-16%, -16%) rotate(0deg); } 50% { transform: translate(16%, 16%) rotate(180deg); } 100% { transform: translate(-16%, -16%) rotate(360deg); } }
.mu-off > .mu-bb .mu-bb-c, .mu-away .mu-bb-c { animation-play-state: paused; }

/* ── avatars ── */
[data-mu~="avatars"] { display: flex; align-items: center; padding-left: 12px; }
[data-mu~="avatars"] > * { position: relative; flex: none; width: var(--mu-av, 42px); height: var(--mu-av, 42px); margin-left: -12px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--mu-p); background: var(--mu-c); display: grid; place-items: center; font: 600 13px/1 var(--f-text, inherit); color: var(--mu-i); text-decoration: none; }
[data-mu~="avatars"] > .mu-av-more { background: var(--mu-i); color: var(--mu-p); }
.mu-js [data-mu~="avatars"]:not(.mu-in) > * { opacity: 0; transform: translateX(-8px) scale(0.95); }
[data-mu~="avatars"].mu-in > * { transition: transform 200ms var(--mu-out), opacity 300ms var(--mu-out); transition-delay: calc(var(--mu-k, 0) * 50ms); }
@media (hover: hover) and (pointer: fine) { [data-mu~="avatars"].mu-in > *:hover { transform: translateY(-3px); transition-delay: 0ms; z-index: 1; } }

/* ── shimmer-button ── */
.mu-sh { --mu-speed: 3s; --mu-spark: #fff; --mu-cut: 0.06em; position: relative; isolation: isolate; overflow: hidden; z-index: 0;
  background: var(--mu-sh-bg, var(--mu-i)); color: var(--mu-sh-ink, var(--mu-p)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); transition: transform 140ms var(--mu-out); }
.mu-sh:active { transform: scale(0.97); }
.mu-sh-spark { position: absolute; inset: 0; z-index: -2; overflow: visible; filter: blur(2px); container-type: size; }
.mu-sh-s { position: absolute; inset: 0; height: 100cqh; aspect-ratio: 1; animation: mu-slide var(--mu-speed) var(--mu-io) infinite alternate; }
.mu-sh-c { position: absolute; inset: -100%; width: auto; background: conic-gradient(from 225deg, transparent 0, var(--mu-spark) 90deg, transparent 90deg); animation: mu-spin calc(var(--mu-speed) * 2) linear infinite; }
.mu-sh-bg { position: absolute; inset: var(--mu-cut); z-index: -1; border-radius: inherit; background: var(--mu-sh-bg, var(--mu-i)); }
.mu-sh-hl { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 -8px 10px rgb(255 255 255 / 0.12); }
.mu-sh-hl::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 -6px 12px rgb(255 255 255 / 0.25); opacity: 0; transition: opacity 220ms var(--mu-out); }
@media (hover: hover) and (pointer: fine) { .mu-sh:hover .mu-sh-hl::after { opacity: 1; } }
.mu-sh.mu-off .mu-sh-s, .mu-sh.mu-off .mu-sh-c, .mu-away .mu-sh-s, .mu-away .mu-sh-c { animation-play-state: paused; }
@keyframes mu-slide { to { transform: translate(calc(100cqw - 100%), 0); } }
@keyframes mu-spin { 0% { transform: rotate(0); } 15%, 35% { transform: rotate(90deg); } 65%, 85% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }

/* ── hover-button ── */
.mu-hb { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
  background: var(--mu-c); color: var(--mu-i); box-shadow: inset 0 0 0 1px var(--mu-line); transition: transform 140ms var(--mu-out); }
.mu-hb:active { transform: scale(0.97); }
.mu-hb-a { display: flex; align-items: center; gap: 0.6em; }
.mu-hb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mu-a); transition: transform 280ms var(--mu-io); }
.mu-hb-t { display: inline-block; transition: transform 260ms var(--mu-out), opacity 200ms var(--mu-out); }
.mu-hb-b { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0.5em; color: var(--on-accent, #fff);
  opacity: 0; transform: translateX(2.6em); transition: transform 260ms var(--mu-out), opacity 200ms var(--mu-out); }
@media (hover: hover) and (pointer: fine) {
  .mu-hb:hover .mu-hb-dot { transform: scale(var(--mu-hb-s, 60)); }
  .mu-hb:hover .mu-hb-t { transform: translateX(2.6em); opacity: 0; }
  .mu-hb:hover .mu-hb-b { opacity: 1; transform: none; }
}
.mu-hb:focus-visible .mu-hb-dot { transform: scale(var(--mu-hb-s, 60)); }
.mu-hb:focus-visible .mu-hb-t { opacity: 0; }
.mu-hb:focus-visible .mu-hb-b { opacity: 1; transform: none; }

/* ── iphone ── */
[data-mu~="iphone"] { position: relative; display: block; width: var(--mu-ph-w, 300px); max-width: 100%; aspect-ratio: 433 / 882; margin: 0; padding: 3.2%; border-radius: 15% / 7.4%;
  background: linear-gradient(145deg, #4a4a4e, #161618 38%, #2c2c2f); box-shadow: inset 0 0 0 1px #6a6a70, inset 0 0 0 2.5px #1c1c1e, inset 0 0 0 6px #050505, 0 50px 90px -40px rgb(0 0 0 / 0.55), 0 24px 40px -24px rgb(0 0 0 / 0.4); }
[data-mu~="iphone"] > img, [data-mu~="iphone"] > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 12.4% / 5.8%; background: #000; }
.mu-ph-island { position: absolute; z-index: 1; top: 3.3%; left: 50%; width: 27%; height: 3.1%; border-radius: 99px; background: #000; transform: translateX(-50%); }
[data-mu~="iphone"]::before, [data-mu~="iphone"]::after { content: ""; position: absolute; width: 1.2%; border-radius: 2px; background: #2c2c2f; }
[data-mu~="iphone"]::before { left: -0.9%; top: 21%; height: 12%; }
[data-mu~="iphone"]::after { right: -0.9%; top: 28%; height: 11%; }

/* ── video-dialog ── */
.mu-vd { position: relative; display: block; overflow: hidden; border-radius: var(--r3, 24px); cursor: pointer; transition: transform 140ms var(--mu-out); }
.mu-vd:active { transform: scale(0.985); }
.mu-vd > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--mu-out); }
.mu-vd::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.22); opacity: 0; transition: opacity 200ms var(--mu-out); }
.mu-vd-play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; transform: scale(0.92); transition: transform 200ms var(--mu-out); }
.mu-vd-ring { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: color-mix(in srgb, var(--mu-a) 18%, rgb(255 255 255 / 0.12)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mu-vd-btn { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; color: #fff; font-size: 30px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--mu-a) 55%, #fff), var(--mu-a)); box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.45); transition: transform 200ms var(--mu-out); }
.mu-vd-btn svg { margin-left: 4px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.12)); }
@media (hover: hover) and (pointer: fine) {
  .mu-vd:hover::after { opacity: 1; }
  .mu-vd:hover .mu-vd-play { transform: none; }
  .mu-vd:hover .mu-vd-btn { transform: scale(1.12); }
  .mu-vd:hover > img { transform: scale(1.02); }
}
.mu-vd-dlg { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; display: none; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--mu-i) 55%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity 190ms var(--mu-out); }
.mu-vd-dlg[open] { display: grid; }
.mu-vd-dlg::backdrop { background: transparent; }
.mu-vd-dlg.mu-open { opacity: 1; transition-duration: 240ms; }
.mu-vd-box { position: relative; width: min(960px, 100%); transform: scale(0.95); transition: transform 240ms var(--mu-out); }
.mu-vd-dlg.mu-open .mu-vd-box { transform: none; }
.mu-vd-v { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; background: #000; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9), 0 40px 80px -30px rgb(0 0 0 / 0.6); }
.mu-vd-x { position: absolute; right: 0; top: -56px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgb(20 20 20 / 0.5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 140ms var(--mu-out); }
.mu-vd-x:active { transform: scale(0.97); }

/* ── progressive-blur ── */
.mu-pb { position: absolute; inset-inline: 0; z-index: 2; pointer-events: none; border-radius: inherit; }
.mu-pb-bottom { bottom: 0; } .mu-pb-top { top: 0; } .mu-pb-both { inset-block: 0; }
.mu-pb > span { position: absolute; inset: 0; }

/* ── lens ── */
.mu-ln { position: relative; overflow: hidden; }
.mu-ln-l { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; }
.mu-ln-in { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; opacity: 0; transform: scale(0.9);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85), 0 18px 40px -12px rgb(0 0 0 / 0.5); transition: opacity 160ms var(--mu-out), transform 180ms var(--mu-out); }
.mu-ln.mu-hot .mu-ln-in { opacity: 1; transform: none; }
.mu-ln-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
@media (hover: hover) and (pointer: fine) { .mu-ln { cursor: zoom-in; } }

/* ── glare ── */
.mu-gl { position: relative; overflow: hidden; isolation: isolate; }
.mu-gl::after { content: ""; position: absolute; inset: -50%; z-index: 4; pointer-events: none;
  background: linear-gradient(var(--mu-ga, 135deg), transparent 44%, rgb(255 255 255 / var(--mu-go, 0.42)) 50%, transparent 56%); transform: translate(-50%, -50%); }
.mu-gl.mu-gl-go::after { transform: translate(50%, 50%); transition: transform 900ms var(--mu-io); }
@media (hover: hover) and (pointer: fine) { .mu-gl:hover::after { transform: translate(50%, 50%); transition: transform 750ms var(--mu-io); } }

/* ── pixel-image ── */
.mu-px { position: relative; overflow: hidden; }
.mu-px > img { position: relative; z-index: 1; opacity: 0; }
.mu-px.mu-color > img { opacity: 1; transition: opacity 1000ms var(--mu-out); }
.mu-px-l { position: absolute; inset: 0; z-index: 0; }
.mu-px-p { position: absolute; inset: 0; opacity: 0; transition: opacity 1000ms var(--mu-out); }
.mu-px.mu-in .mu-px-p { opacity: 1; }
.mu-px-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

/* ── video-text ── */
.mu-vt { position: relative; }
.mu-vt-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 400ms var(--mu-out);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.mu-vt.mu-vt-on .mu-vt-v { opacity: 1; }
.mu-vt.mu-vt-on .mu-vt-w { color: transparent; }

/* ── backgrounds ── */
[data-mu~="dot-pattern"], [data-mu~="grid-pattern"], [data-mu~="flickering-grid"], [data-mu~="light-rays"], [data-mu~="ripple"] { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
[data-mu~="dot-pattern"] { color: color-mix(in srgb, var(--mu-i) 26%, transparent); background-image: radial-gradient(currentColor 1px, transparent 1.6px); background-size: var(--mu-dg, 16px) var(--mu-dg, 16px); }
[data-mu~="dot-pattern"].mu-dp-glow { background: none; }
[data-mu~="grid-pattern"] { --mu-gl: color-mix(in srgb, var(--mu-i) 11%, transparent);
  background-image: linear-gradient(to right, var(--mu-gl) 1px, transparent 1px), linear-gradient(to bottom, var(--mu-gl) 1px, transparent 1px); background-size: var(--mu-cell, 40px) var(--mu-cell, 40px); }
.mu-gp-sq { position: absolute; left: 0; top: 0; width: calc(var(--mu-cell, 40px) - 1px); height: calc(var(--mu-cell, 40px) - 1px); background: color-mix(in srgb, var(--mu-a) 22%, transparent); opacity: 0;
  animation: mu-sq 4s var(--mu-io) 2 alternate; }
[data-mu~="grid-pattern"].mu-off .mu-gp-sq, .mu-away .mu-gp-sq { animation-play-state: paused; }
@keyframes mu-sq { to { opacity: 1; } }
.mu-fade-radial { -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
.mu-fade-ellipse { -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%); }
.mu-fade-top { -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.mu-fade-bottom { -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.mu-fade-edges { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }

[data-mu~="light-rays"] { --mu-ray: color-mix(in srgb, var(--mu-a2) 24%, transparent); isolation: isolate; }
.mu-lr-g { position: absolute; inset: 0; opacity: 0.6; }
.mu-lr-g1 { background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--mu-ray) 45%, transparent), transparent 70%); }
.mu-lr-g2 { background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--mu-ray) 35%, transparent), transparent 75%); }
.mu-ray { position: absolute; top: -12%; left: var(--l); width: var(--w); height: var(--mu-len, 75%); border-radius: 999px; transform-origin: 50% 0; opacity: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--mu-ray) 70%, transparent), transparent); filter: blur(var(--mu-blur, 36px)); mix-blend-mode: screen;
  animation: mu-ray var(--du, 14s) var(--mu-io) var(--dl, 0s) infinite; }
@keyframes mu-ray {
  0% { opacity: 0; transform: translateX(-50%) rotate(calc(var(--r) - var(--sw))); }
  50% { opacity: var(--in); transform: translateX(-50%) rotate(calc(var(--r) + var(--sw))); }
  100% { opacity: 0; transform: translateX(-50%) rotate(calc(var(--r) - var(--sw))); } }
[data-mu~="light-rays"].mu-off .mu-ray, .mu-away .mu-ray { animation-play-state: paused; }

[data-mu~="ripple"] { -webkit-mask-image: linear-gradient(to bottom, #fff, transparent); mask-image: linear-gradient(to bottom, #fff, transparent); }
.mu-rp-c { position: absolute; left: 50%; top: 50%; border-radius: 50%; background: color-mix(in srgb, var(--mu-i) 22%, transparent); border: 1px solid color-mix(in srgb, var(--mu-i) 50%, transparent);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.08); transform: translate(-50%, -50%); animation: mu-ripple 2.2s var(--mu-io) infinite; animation-delay: calc(var(--i, 0) * 0.2s); }
[data-mu~="ripple"].mu-off .mu-rp-c, .mu-away .mu-rp-c { animation-play-state: paused; }
@keyframes mu-ripple { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(0.9); } }

/* ── scroll-progress ── */
[data-mu~="scroll-progress"] { position: fixed; inset: 0 0 auto; z-index: 90; height: var(--mu-sp-h, 3px); pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--mu-a), var(--mu-a2)); }
@supports (animation-timeline: scroll()) { [data-mu~="scroll-progress"] { animation: mu-sp linear both; animation-timeline: scroll(root); } }
@keyframes mu-sp { to { transform: scaleX(1); } }

/* ══ part 2 (16 Oct 2026) ═══════════════════════════════════════════════════════════════════════════════════════════
   Exceptions to "only transform and opacity", as in part 1, where the effect is a colour or a line by nature: the beam's
   travelling dash (stroke-dashoffset), the moving colour of aurora-, gradient-, shiny- and line-shadow-text (background-position). */

/* ── animated-beam ── */
.mu-ab { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.mu-ab-on > :not(.mu-ab) { position: relative; z-index: 1; }
.mu-ab-base { fill: none; stroke: var(--mu-line); stroke-width: var(--mu-ab-w, 2px); stroke-linecap: round; }
.mu-ab-beam { fill: none; stroke-width: var(--mu-ab-w, 2px); stroke-linecap: round; stroke-dasharray: 0.24 1.3; stroke-dashoffset: 0.24;
  animation: mu-ab var(--mu-dur, 4s) var(--mu-out) infinite; }
@keyframes mu-ab { from { stroke-dashoffset: 0.24; } 75%, to { stroke-dashoffset: -1.02; } }
.mu-ab-on.mu-off .mu-ab-beam, .mu-away .mu-ab-beam { animation-play-state: paused; }

/* ── orbiting-circles ── */
[data-mu~="orbiting-circles"]:not(.mu-oc) { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mu-oc { position: absolute; inset: 0; pointer-events: none; }
.mu-oc-path { position: absolute; left: 50%; top: 50%; width: calc(var(--mu-r) * 2 * var(--mu-rs, 1)); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--mu-line); transform: translate(-50%, -50%); }
.mu-oc-i { --mu-o: translateY(calc(var(--mu-r) * var(--mu-rs, 1))); position: absolute; left: 50%; top: 50%; pointer-events: auto;
  transform: translate(-50%, -50%) rotate(var(--mu-ang)) var(--mu-o) rotate(calc(var(--mu-ang) * -1)); animation: mu-orbit var(--mu-dur, 20s) linear infinite; }
.mu-oc-rev .mu-oc-i { animation-direction: reverse; }
@keyframes mu-orbit {
  from { transform: translate(-50%, -50%) rotate(var(--mu-ang)) var(--mu-o) rotate(calc(var(--mu-ang) * -1)); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--mu-ang) + 360deg)) var(--mu-o) rotate(calc(var(--mu-ang) * -1 - 360deg)); } }
.mu-oc.mu-off .mu-oc-i, .mu-away .mu-oc-i { animation-play-state: paused; }

/* ── dotted-map ── */
[data-mu~="dotted-map"]:not(.mu-dm) { display: flex; flex-wrap: wrap; gap: 8px; align-content: center; justify-content: center; }
.mu-dm { overflow: hidden; }
.mu-dm .mu-cv { z-index: 0; }
.mu-dm > .mu-dm-l, .mu-dm > .mu-dm-pin { position: absolute; z-index: 2; transform: translate(-50%, -50%); white-space: nowrap; }
.mu-dm-l { padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--mu-c) 88%, transparent); box-shadow: 0 0 0 1px var(--mu-line);
  font: 500 12.5px/1.2 var(--f-text, inherit); color: var(--mu-i); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mu-dm-pin { transform: translate(-50%, calc(-100% - 18px)) !important; padding: 8px 13px; border-radius: 12px; background: var(--mu-i); color: var(--mu-p);
  font: 600 13px/1.2 var(--f-text, inherit); box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.45); }
.mu-dm-pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.mu-dm-dot { position: absolute; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--mu-a); box-shadow: 0 0 0 3px var(--mu-p); }
.mu-dm-dot::before, .mu-dm-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--mu-a); opacity: 0; animation: mu-pin 2.4s var(--mu-out) infinite; }
.mu-dm-dot::after { animation-delay: 1.2s; }
@keyframes mu-pin { 0% { transform: scale(0.95); opacity: 0.9; } 100% { transform: scale(3.4); opacity: 0; } }
.mu-dm-reach { position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--mu-a) 55%, transparent);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mu-a) 7%, transparent), transparent); transform: translate(-50%, -50%); pointer-events: none; }
.mu-js .mu-dm:not(.mu-in) .mu-dm-reach, .mu-js .mu-dm:not(.mu-in) > .mu-dm-l, .mu-js .mu-dm:not(.mu-in) > .mu-dm-pin { opacity: 0; }
.mu-dm.mu-in .mu-dm-reach, .mu-dm.mu-in > .mu-dm-l, .mu-dm.mu-in > .mu-dm-pin { transition: opacity 500ms var(--mu-out) 500ms; }
.mu-dm.mu-in > .mu-dm-pin { transition-delay: 200ms; }
.mu-dm.mu-off .mu-dm-dot::before, .mu-dm.mu-off .mu-dm-dot::after, .mu-away .mu-dm-dot::before, .mu-away .mu-dm-dot::after { animation-play-state: paused; }

/* ── safari ── */
[data-mu~="safari"] { --mu-sf-bar: 40px; position: relative; display: block; margin: 0; padding-top: var(--mu-sf-bar); overflow: hidden; border-radius: 12px;
  background: var(--mu-c); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mu-i) 14%, transparent), 0 40px 80px -40px rgb(0 0 0 / 0.42), 0 16px 32px -20px rgb(0 0 0 / 0.22); }
[data-mu~="safari"]::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--mu-sf-bar); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--mu-i) 10%, transparent);
  background: radial-gradient(circle at 20px 50%, var(--mu-sf-dot) 0 5.5px, transparent 6px), radial-gradient(circle at 39px 50%, var(--mu-sf-dot) 0 5.5px, transparent 6px),
    radial-gradient(circle at 58px 50%, var(--mu-sf-dot) 0 5.5px, transparent 6px), color-mix(in srgb, var(--mu-i) 3%, var(--mu-c));
  --mu-sf-dot: color-mix(in srgb, var(--mu-i) 16%, var(--mu-c)); }
[data-mu~="safari"]::after { content: attr(data-mu-url); position: absolute; top: 8px; left: 50%; width: min(56%, 440px); height: 24px; padding: 0 12px 0 28px; border-radius: 7px; transform: translateX(-50%);
  background: color-mix(in srgb, var(--mu-i) 7%, var(--mu-c)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Crect x='1' y='6' width='10' height='7.5' rx='1.6' fill='%23999'/%3E%3Cpath d='M3.4 6V4.4a2.6 2.6 0 0 1 5.2 0V6' fill='none' stroke='%23999' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat 12px 50% / 9px 11px;
  font: 500 12px/24px var(--f-text, system-ui, sans-serif); letter-spacing: 0; color: color-mix(in srgb, var(--mu-i) 55%, transparent); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-mu~="safari"] > img, [data-mu~="safari"] > video { display: block; width: 100%; height: auto; object-fit: cover; object-position: top; }
@media (max-width: 560px) { [data-mu~="safari"] { --mu-sf-bar: 34px; } [data-mu~="safari"]::after { top: 6px; height: 22px; line-height: 22px; width: 60%; left: 58%; font-size: 11px; } }

/* ── typing-animation ── */
.mu-ty { display: inline-grid; vertical-align: bottom; }
.mu-ty > * { grid-area: 1 / 1; white-space: pre; }
.mu-ty-g { visibility: hidden; }
.mu-ty-c { display: inline-block; width: 0.07em; min-width: 2px; height: 0.95em; margin-left: 0.06em; vertical-align: -0.1em; background: currentColor; animation: mu-blink 1.2s steps(1) infinite; }
.mu-ty-done .mu-ty-c { opacity: 0; animation: none; transition: opacity 300ms var(--mu-out); }
@keyframes mu-blink { 50% { opacity: 0; } }

/* ── hyper-text ── */
.mu-hx-w { display: inline-block; white-space: nowrap; }
.mu-hx { display: inline-block; text-align: center; }

/* ── sparkles-text ── */
.mu-sk { position: relative; display: inline-block; }
.mu-sk-s, .mu-sk-2 { position: absolute; z-index: 1; font-size: var(--mu-sk-size, 0.32em); line-height: 0; color: var(--mu-a); pointer-events: none; opacity: 0;
  animation: mu-sparkle 1.8s var(--mu-io) infinite; }
.mu-sk-2 { color: var(--mu-a2); }
@keyframes mu-sparkle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(75deg); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(var(--mu-sc, 1)) rotate(120deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(150deg); } }
.mu-sk.mu-off .mu-sk-s, .mu-away .mu-sk-s { animation-play-state: paused; }

/* ── dock ── */
[data-mu~="dock"] { position: relative; display: flex; width: max-content; max-width: 100%; margin-inline: auto; align-items: flex-end; gap: 8px; padding: 8px;
  border-radius: 22px; isolation: isolate; }
.mu-dk-bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--mu-c) 78%, transparent);
  box-shadow: inset 0 0 0 1px var(--mu-line), 0 18px 40px -22px rgb(0 0 0 / 0.45); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
[data-mu~="dock"]:not(.mu-dk) { background: var(--mu-c); box-shadow: inset 0 0 0 1px var(--mu-line); }
[data-mu~="dock"] > :not(.mu-dk-bg) { position: relative; display: grid; place-items: center; flex: none; width: var(--mu-dk-s, 46px); height: var(--mu-dk-s, 46px); border-radius: 50%;
  color: var(--mu-i); background: color-mix(in srgb, var(--mu-i) 6%, var(--mu-c)); text-decoration: none; transform-origin: 50% 100%; transition: background-color 200ms var(--mu-out); }
[data-mu~="dock"] > .mu-dk-main { background: var(--mu-a); color: var(--on-accent, #fff); }
[data-mu~="dock"] > * > svg { width: 44%; height: 44%; }
[data-mu~="dock"] > * > span { position: absolute; bottom: calc(100% + 10px); left: 50%; padding: 5px 9px; border-radius: 8px; background: var(--mu-i); color: var(--mu-p);
  font: 500 12px/1 var(--f-text, inherit); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity 150ms var(--mu-out), transform 150ms var(--mu-out); }
[data-mu~="dock"] > :active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) { [data-mu~="dock"] > :hover > span, [data-mu~="dock"] > :focus-visible > span { opacity: 1; transform: translate(-50%, 0); } }
@media (hover: none), (pointer: coarse) { [data-mu~="dock"] > :focus-visible > span { opacity: 1; transform: translate(-50%, 0); } }
[data-mu~="dock"][data-mu-sticky] { display: none; }
@media (max-width: 760px) {
  [data-mu~="dock"][data-mu-sticky] { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; display: flex; width: calc(100% - 24px); max-width: 420px;
    margin: 0 auto 12px; justify-content: space-between; gap: 4px; padding: 8px 10px; transition: opacity 220ms var(--mu-out), transform 260ms var(--mu-dr); }
  .mu-js .mu-dk-sticky:not(.mu-dk-on) { opacity: 0; transform: translateY(18px); pointer-events: none; }
  [data-mu~="dock"][data-mu-sticky] > :not(.mu-dk-bg) { width: auto; min-width: 58px; height: 54px; padding: 6px 4px 4px; border-radius: 14px; background: none; align-content: center; gap: 3px; }
  [data-mu~="dock"][data-mu-sticky] > * > svg { width: 21px; height: 21px; }
  [data-mu~="dock"][data-mu-sticky] > * > span { position: static; padding: 0; background: none; color: inherit; font-size: 11px; opacity: 1; transform: none; }
  [data-mu~="dock"][data-mu-sticky] > .mu-dk-main { background: var(--mu-a); color: var(--on-accent, #fff); }
}

/* ── confetti ── */
.mu-cf { position: fixed; inset: 0; z-index: 9999; width: 100%; height: 100%; pointer-events: none; }

/* ── backgrounds of part 2 ── */
[data-mu~="meteors"], [data-mu~="particles"], [data-mu~="noise-texture"], [data-mu~="striped-pattern"] { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.mu-me { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--mu-a2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mu-a2) 12%, transparent);
  opacity: 0; transform: rotate(var(--mu-ang)); animation: mu-meteor 5s linear infinite; }
.mu-me::before { content: ""; position: absolute; top: 50%; left: 0; width: 56px; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, var(--mu-a2), transparent); }
@keyframes mu-meteor { 0% { transform: rotate(var(--mu-ang)) translateX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(var(--mu-ang)) translateX(-560px); opacity: 0; } }
[data-mu~="meteors"].mu-off .mu-me, .mu-away .mu-me { animation-play-state: paused; }
[data-mu~="noise-texture"] { opacity: var(--mu-nz, 0.5);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.15'/%3E%3CfeFuncG type='linear' slope='0.15'/%3E%3CfeFuncB type='linear' slope='0.15'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E") repeat 0 0 / 220px; }
[data-mu~="noise-texture"].mu-nz-l { mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.5'/%3E%3CfeFuncG type='linear' slope='0.5'/%3E%3CfeFuncB type='linear' slope='0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
[data-mu~="striped-pattern"] { --mu-sc: color-mix(in srgb, var(--mu-i) 12%, transparent);
  background: repeating-linear-gradient(-45deg, var(--mu-sc) 0 1px, transparent 1px var(--mu-sg, 10px)); }
[data-mu~="striped-pattern"].mu-stp-r { background: repeating-linear-gradient(45deg, var(--mu-sc) 0 1px, transparent 1px var(--mu-sg, 10px)); }

/* ── aurora-text, gradient-text, shiny-text ── */
[data-mu~="aurora-text"], [data-mu~="gradient-text"] { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-mu~="aurora-text"] { background: linear-gradient(135deg, var(--mu-tint, var(--mu-a), var(--mu-a2), color-mix(in srgb, var(--mu-a) 55%, var(--mu-i)), var(--mu-a2), var(--mu-a))) 0 50% / 200% auto;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mu-aurora var(--mu-dur, 10s) var(--mu-io) infinite alternate; }
  [data-mu~="gradient-text"] { background: linear-gradient(90deg, var(--mu-tint, var(--mu-a), var(--mu-a2), var(--mu-a))) 0 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mu-gradient var(--mu-dur, 8s) linear infinite; }
  [data-mu~="shiny-text"] { --mu-shw: 110px; color: color-mix(in srgb, var(--mu-i) 64%, transparent);
    background: linear-gradient(90deg, transparent, var(--mu-tint, color-mix(in srgb, var(--mu-i) 92%, transparent)) 50%, transparent) no-repeat calc(-100% - var(--mu-shw)) 0 / var(--mu-shw) 100%;
    -webkit-background-clip: text; background-clip: text; animation: mu-shiny var(--mu-dur, 8s) var(--mu-io) infinite; }
}
@keyframes mu-aurora { 0% { background-position: 0% 50%; } 33% { background-position: 50% 100%; } 66% { background-position: 100% 50%; } 100% { background-position: 50% 0%; } }
@keyframes mu-gradient { to { background-position: 300% 0; } }
@keyframes mu-shiny { 0%, 90%, 100% { background-position: calc(-100% - var(--mu-shw)) 0; } 30%, 60% { background-position: calc(100% + var(--mu-shw)) 0; } }
[data-mu~="aurora-text"].mu-off, [data-mu~="gradient-text"].mu-off, [data-mu~="shiny-text"].mu-off, .mu-away [data-mu~="aurora-text"], .mu-away [data-mu~="gradient-text"], .mu-away [data-mu~="shiny-text"] { animation-play-state: paused; }

/* ── pulsating-button ── */
.mu-pu { isolation: isolate; }
.mu-pu-r { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--mu-pu-c, inherit); pointer-events: none; animation: mu-pulse 1.8s var(--mu-out) infinite; }
@keyframes mu-pulse { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(var(--mu-pu-x, 1.1), var(--mu-pu-y, 1.2)); } }
.mu-pu.mu-off .mu-pu-r, .mu-away .mu-pu-r { animation-play-state: paused; }

/* ── spinning-text ── */
.mu-spt { position: relative; display: inline-grid; place-items: center; width: calc(var(--mu-spr) * 2 + 1.6em); aspect-ratio: 1; }
.mu-spt-r { position: absolute; inset: 0; animation: mu-spin360 var(--mu-dur, 18s) linear infinite; }
.mu-spt-rev .mu-spt-r { animation-direction: reverse; }
.mu-spt-c { position: absolute; left: 50%; top: 50%; line-height: 1; transform: translate(-50%, -50%) rotate(var(--mu-ang)) translateY(calc(var(--mu-spr) * -1)); }
.mu-spt-mid { position: relative; z-index: 1; }
@keyframes mu-spin360 { to { transform: rotate(360deg); } }
.mu-spt.mu-off .mu-spt-r, .mu-away .mu-spt-r { animation-play-state: paused; }

/* ── line-shadow-text ── */
.mu-ls { position: relative; z-index: 0; display: inline-block; }
.mu-ls::after { content: attr(data-mu-text); content: attr(data-mu-text) / ""; position: absolute; left: 0.04em; top: 0.04em; z-index: -1; width: 100%; pointer-events: none;
  background: linear-gradient(45deg, transparent 45%, var(--mu-ls-c, var(--mu-a)) 45%, var(--mu-ls-c, var(--mu-a)) 55%, transparent 0) 0 0 / 0.06em 0.06em;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: mu-ls 15s linear infinite; }
@keyframes mu-ls { to { background-position: 100% -100%; } }
.mu-ls.mu-off::after, .mu-away .mu-ls::after { animation-play-state: paused; }

/* ── text-3d-flip ── */
.mu-tf-w { display: inline-block; white-space: nowrap; perspective: 420px; }
.mu-tf-c { position: relative; display: inline-block; line-height: 1; transform-style: preserve-3d; transform-origin: 50% 50% -0.5em;
  transition: transform 280ms var(--mu-out); transition-delay: calc(var(--mu-k, 0) * 18ms); }
.mu-tf-f, .mu-tf-b { display: block; white-space: pre; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mu-tf-b { position: absolute; left: 0; top: 0; transform-origin: 50% 50% -0.5em; transform: rotateX(-90deg); }
@media (hover: hover) and (pointer: fine) { .mu-tf:hover .mu-tf-c { transform: rotateX(90deg); } }

/* ── ripple-button ── */
.mu-rb { position: relative; overflow: hidden; isolation: isolate; transition: transform 140ms var(--mu-out); }
.mu-rb:active { transform: scale(0.97); }
.mu-rb-w { position: absolute; z-index: -1; border-radius: 50%; background: var(--mu-rb-c, currentColor); opacity: 0.26; transform: scale(0.1); pointer-events: none; }
.mu-rb-w.mu-go { opacity: 0; transform: scale(1); transition: transform 280ms var(--mu-out), opacity 280ms var(--mu-out); }

/* ── backlight ── */
.mu-bl { isolation: isolate; }

/* ── reduce motion: the fades stay, the movement goes ── */
@media (prefers-reduced-motion: reduce) {
  .mu-js [data-mu~="blur-fade"]:not(.mu-in):not(.mu-bf-group), .mu-js .mu-bf-group:not(.mu-in) > * { transform: none; filter: none; }
  .mu-ta:not(.mu-in) .mu-seg { transform: none; filter: none; }
  .mu-wr > [aria-hidden], .mu-wr > .mu-out { transform: none; }
  .mu-js [data-mu~="avatars"]:not(.mu-in) > * { transform: none; }
  .mu-al > .mu-al-new { transform: none; }
  .mu-hl-highlight.mu-in { transition: opacity 300ms; }
  .mu-js .mu-hl-highlight:not(.mu-in) { background-size: 100% 72%; }
  .mu-js .mu-hl:not(.mu-in) .mu-hl-svg path { stroke-dashoffset: 0; }
  .mu-js .mu-hl:not(.mu-in) .mu-hl-svg { opacity: 0; }
  .mu-hl.mu-in .mu-hl-svg { transition: opacity 400ms; }
  .mu-mq .mu-mq-track { animation: none; }
  .mu-mq { overflow: auto; }
  .mu-mq > [aria-hidden] { display: none; }
  .mu-bb-c, .mu-sh-s, .mu-sh-c, .mu-ray, .mu-rp-c, .mu-gp-sq { animation: none !important; }
  .mu-bb:not(.mu-bb-shine) { display: none; }
  .mu-ray { opacity: calc(var(--in) * 0.5); transform: translateX(-50%) rotate(var(--r)); }
  .mu-sh-spark { display: none; }
  .mu-card-bg > img, .mu-card-body, .mu-card-cta, .mu-vd-box, .mu-vd-play, .mu-vd-btn, .mu-vd > img, .mu-ln-in { transition-property: opacity !important; }
  .mu-gl::after, .mu-hb-dot, .mu-hb-t, .mu-hb-b { transition: none !important; }
  .mu-vd-box { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mu-ab-beam { display: none; }
  .mu-oc-i, .mu-sk-s, .mu-me, .mu-pu-r, .mu-spt-r, .mu-dm-dot::before, .mu-dm-dot::after, .mu-ty-c { animation: none !important; }
  .mu-sk-s, .mu-me, .mu-pu-r, .mu-dm-dot::before, .mu-dm-dot::after { display: none; }
  [data-mu~="aurora-text"], [data-mu~="gradient-text"], [data-mu~="shiny-text"], .mu-ls::after { animation: none !important; }
  .mu-tf-c { transition: none; transform: none !important; }
  .mu-dk-sticky { transition: opacity 220ms var(--mu-out) !important; }
  .mu-js .mu-dk-sticky:not(.mu-dk-on) { transform: none; }
}