.lyor-motion-decor {
  --lyor-md-size: 88px;
  --lyor-md-stroke: 2px;
  --lyor-md-duration: 2.2s;
  --lyor-md-color: #ffffff;
  --lyor-md-opacity: 1;
  position: relative;
  width: var(--lyor-md-size);
  height: var(--lyor-md-size);
  color: var(--lyor-md-color);
  opacity: var(--lyor-md-opacity);
  display: inline-flex;
  isolation: isolate;
  filter: saturate(1.04);
}

.lyor-motion-decor.align-left { margin-right: auto; }
.lyor-motion-decor.align-center { margin-inline: auto; }
.lyor-motion-decor.align-right { margin-left: auto; }

.lyor-motion-decor .md-el {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  pointer-events: none;
  animation-duration: var(--lyor-md-duration);
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.lyor-motion-decor.mode-once .md-el { animation-iteration-count: 1; }
.lyor-motion-decor.is-paused .md-el { animation-play-state: paused; }

/* 1 Aurora Orb */
.lyor-motion-decor.type-aurora_orb .md-a,
.lyor-motion-decor.type-aurora_orb .md-b {
  width: 84%;
  height: 84%;
  border-radius: 50%;
}
.lyor-motion-decor.type-aurora_orb .md-a {
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, currentColor 85%, white 15%), transparent 58%);
  filter: blur(calc(var(--lyor-md-size) * .08));
  animation-name: mdAuroraA;
}
.lyor-motion-decor.type-aurora_orb .md-b {
  background: radial-gradient(circle at 70% 70%, color-mix(in srgb, currentColor 75%, black 10%), transparent 60%);
  filter: blur(calc(var(--lyor-md-size) * .11));
  animation-name: mdAuroraB;
}
.lyor-motion-decor.type-aurora_orb .md-c {
  width: 30%; height: 30%; border-radius: 50%; background: color-mix(in srgb, currentColor 86%, white 14%);
  filter: blur(calc(var(--lyor-md-size) * .03)); animation-name: mdAuroraC;
}
@keyframes mdAuroraA { 0%,100% { transform: translate(-54%, -52%) scale(.95);} 50% { transform: translate(-45%, -48%) scale(1.06);} }
@keyframes mdAuroraB { 0%,100% { transform: translate(-48%, -44%) scale(1.02);} 50% { transform: translate(-55%, -55%) scale(.9);} }
@keyframes mdAuroraC { 0%,100% { transform: translate(-30%, -40%) scale(.8); opacity:.45;} 50% { transform: translate(-62%, -58%) scale(1.08); opacity:.95;} }

/* 2 Glass Halo */
.lyor-motion-decor.type-glass_halo .md-a,
.lyor-motion-decor.type-glass_halo .md-b {
  width: 88%;
  height: 88%;
  border-radius: 50%;
  border: var(--lyor-md-stroke) solid color-mix(in srgb, currentColor 55%, transparent);
}
.lyor-motion-decor.type-glass_halo .md-a { animation-name: mdHaloA; }
.lyor-motion-decor.type-glass_halo .md-b {
  width: 66%;
  height: 66%;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  animation-name: mdHaloB;
}
.lyor-motion-decor.type-glass_halo .md-c {
  width: 104%;
  height: 104%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  animation-name: mdHaloC;
}
@keyframes mdHaloA { 0%,100% { opacity:.45; transform: translate(-50%,-50%) rotate(0deg);} 50% { opacity:.95; transform: translate(-50%,-50%) rotate(180deg);} }
@keyframes mdHaloB { 0%,100% { opacity:.8; } 50% { opacity:.3; } }
@keyframes mdHaloC { 0% { transform: translate(-50%,-50%) scale(.92); opacity:.1; } 100% { transform: translate(-50%,-50%) scale(1.08); opacity:.45; } }

/* 3 Orbital Node */
.lyor-motion-decor.type-orbital_node .md-a {
  width: 86%; height: 86%; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.lyor-motion-decor.type-orbital_node .md-b {
  width: 12%; height: 12%; border-radius: 50%; background: currentColor;
  transform: translate(-50%,-50%) rotate(0deg) translateX(calc(var(--lyor-md-size) * .42));
  animation-name: mdOrbitNode; animation-timing-function: linear;
}
.lyor-motion-decor.type-orbital_node .md-c {
  width: 8%; height: 8%; border-radius: 50%; background: color-mix(in srgb, currentColor 72%, white 28%);
}
@keyframes mdOrbitNode { from { transform: translate(-50%,-50%) rotate(0deg) translateX(calc(var(--lyor-md-size) * .42)); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(calc(var(--lyor-md-size) * .42)); } }

/* 4 Luxury Corner */
.lyor-motion-decor.type-lux_corner { width: min(var(--lyor-md-size), 220px); height: min(var(--lyor-md-size), 220px); }
.lyor-motion-decor.type-lux_corner .md-a,
.lyor-motion-decor.type-lux_corner .md-b {
  width: 100%; height: 100%; border-radius: 10%; border: var(--lyor-md-stroke) solid transparent;
}
.lyor-motion-decor.type-lux_corner .md-a { border-left-color: currentColor; border-top-color: currentColor; animation-name: mdLuxCornerA; }
.lyor-motion-decor.type-lux_corner .md-b { border-right-color: currentColor; border-bottom-color: currentColor; animation-name: mdLuxCornerB; }
.lyor-motion-decor.type-lux_corner .md-c { display:none; }
@keyframes mdLuxCornerA { 0%,100% { opacity:.35; } 50% { opacity:.95; } }
@keyframes mdLuxCornerB { 0%,100% { opacity:.95; } 50% { opacity:.35; } }

/* 5 Soft Beam */
.lyor-motion-decor.type-soft_beam { width: min(var(--lyor-md-size), 460px); height: calc(var(--lyor-md-size) * .18); }
.lyor-motion-decor.type-soft_beam .md-a {
  width: 100%; height: var(--lyor-md-stroke); background: color-mix(in srgb, currentColor 26%, transparent);
}
.lyor-motion-decor.type-soft_beam .md-b {
  width: 24%; height: calc(var(--lyor-md-stroke) * 2.2);
  left: 0; transform: translate(0,-50%);
  background: linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%);
  filter: blur(calc(var(--lyor-md-stroke) * .8)); animation-name: mdSoftBeam;
}
.lyor-motion-decor.type-soft_beam .md-c { display:none; }
@keyframes mdSoftBeam { 0% { left: 0; opacity:.25; } 50% { left: 76%; opacity:1; } 100% { left: 0; opacity:.25; } }

/* 6 Arc Signature */
.lyor-motion-decor.type-arc_signature .md-a,
.lyor-motion-decor.type-arc_signature .md-b {
  width: 86%; height: 86%; border-radius: 50%; border: var(--lyor-md-stroke) solid transparent;
}
.lyor-motion-decor.type-arc_signature .md-a { border-top-color: currentColor; border-left-color: currentColor; animation-name: mdArcA; }
.lyor-motion-decor.type-arc_signature .md-b { border-bottom-color: color-mix(in srgb, currentColor 46%, transparent); border-right-color: color-mix(in srgb, currentColor 46%, transparent); animation-name: mdArcB; }
.lyor-motion-decor.type-arc_signature .md-c { display:none; }
@keyframes mdArcA { from { transform: translate(-50%,-50%) rotate(0deg);} to { transform: translate(-50%,-50%) rotate(360deg);} }
@keyframes mdArcB { from { transform: translate(-50%,-50%) rotate(360deg);} to { transform: translate(-50%,-50%) rotate(0deg);} }

/* 7 Velvet Pulse */
.lyor-motion-decor.type-velvet_pulse .md-a,
.lyor-motion-decor.type-velvet_pulse .md-b {
  width: 76%; height: 76%; border-radius: 18%;
  border: var(--lyor-md-stroke) solid currentColor;
  animation-name: mdVelvetPulse;
}
.lyor-motion-decor.type-velvet_pulse .md-b { animation-delay: .34s; }
.lyor-motion-decor.type-velvet_pulse .md-c { display:none; }
@keyframes mdVelvetPulse { 0% { transform: translate(-50%,-50%) scale(.84); opacity:.9;} 100% { transform: translate(-50%,-50%) scale(1.12); opacity:0;} }

/* 8 Prism Sliver */
.lyor-motion-decor.type-prism_sliver { width: min(var(--lyor-md-size), 360px); height: calc(var(--lyor-md-size) * .22); }
.lyor-motion-decor.type-prism_sliver .md-a {
  width: 100%; height: var(--lyor-md-stroke); background: color-mix(in srgb, currentColor 25%, transparent);
}
.lyor-motion-decor.type-prism_sliver .md-b {
  width: 28%; height: calc(var(--lyor-md-stroke) * 2.6);
  left: 16%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, currentColor 88%, white 12%) 45%, transparent 100%);
  animation-name: mdPrism;
}
.lyor-motion-decor.type-prism_sliver .md-c { display:none; }
@keyframes mdPrism { 0%,100% { left: 16%; opacity:.35; } 50% { left: 70%; opacity:1; } }

/* 9 Frame Whisper */
.lyor-motion-decor.type-frame_whisper { width: min(var(--lyor-md-size), 240px); height: min(var(--lyor-md-size), 240px); }
.lyor-motion-decor.type-frame_whisper .md-a,
.lyor-motion-decor.type-frame_whisper .md-b {
  width: 100%; height: 100%; border-radius: 12%;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.lyor-motion-decor.type-frame_whisper .md-a { animation-name: mdFrameWhisperA; }
.lyor-motion-decor.type-frame_whisper .md-b { width: 84%; height: 84%; animation-name: mdFrameWhisperB; }
.lyor-motion-decor.type-frame_whisper .md-c { display:none; }
@keyframes mdFrameWhisperA { 0%,100% { opacity:.32; } 50% { opacity:.78; } }
@keyframes mdFrameWhisperB { 0%,100% { opacity:.75; transform: translate(-50%,-50%) scale(1);} 50% { opacity:.22; transform: translate(-50%,-50%) scale(.92);} }

/* 10 Comet Tail */
.lyor-motion-decor.type-comet_tail { width: min(var(--lyor-md-size), 420px); height: calc(var(--lyor-md-size) * .2); }
.lyor-motion-decor.type-comet_tail .md-a {
  width: 100%; height: var(--lyor-md-stroke); background: color-mix(in srgb, currentColor 20%, transparent);
}
.lyor-motion-decor.type-comet_tail .md-b {
  width: 10%; height: 10%; border-radius: 50%; background: currentColor;
  left: 14%;
  box-shadow: 0 0 calc(var(--lyor-md-size) * .22) color-mix(in srgb, currentColor 68%, transparent);
  animation-name: mdCometHead;
}
.lyor-motion-decor.type-comet_tail .md-c {
  width: 28%; height: calc(var(--lyor-md-stroke) * 1.6);
  left: 6%; transform: translate(0,-50%);
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, currentColor 66%, transparent) 100%);
  animation-name: mdCometTail;
}
@keyframes mdCometHead { 0%,100% { left: 14%; opacity:.35; } 50% { left: 82%; opacity:1; } }
@keyframes mdCometTail { 0%,100% { left: 6%; width: 20%; opacity:.22; } 50% { left: 62%; width: 34%; opacity:.85; } }

@media (prefers-reduced-motion: reduce) {
  .lyor-motion-decor .md-el { animation: none !important; }
}

/* ===== Crazy Layer ===== */

/* 11 Neon Shock */
.lyor-motion-decor.type-neon_shock .md-a,
.lyor-motion-decor.type-neon_shock .md-b {
  width: 84%; height: 84%; border-radius: 50%;
  border: var(--lyor-md-stroke) solid currentColor;
  box-shadow: 0 0 calc(var(--lyor-md-size) * .18) color-mix(in srgb, currentColor 72%, transparent);
}
.lyor-motion-decor.type-neon_shock .md-a { animation-name: mdNeonShockA; }
.lyor-motion-decor.type-neon_shock .md-b { width: 54%; height: 54%; animation-name: mdNeonShockB; }
.lyor-motion-decor.type-neon_shock .md-c { display:none; }
@keyframes mdNeonShockA { 0%,100% { transform: translate(-50%,-50%) scale(.92); opacity:.42; } 50% { transform: translate(-50%,-50%) scale(1.1); opacity:1; } }
@keyframes mdNeonShockB { 0%,100% { opacity:1; } 45% { opacity:.2; } 50% { opacity:1; } }

/* 12 Plasma Core */
.lyor-motion-decor.type-plasma_core .md-a,
.lyor-motion-decor.type-plasma_core .md-b {
  width: 90%; height: 90%; border-radius: 50%;
  filter: blur(calc(var(--lyor-md-size) * .07));
}
.lyor-motion-decor.type-plasma_core .md-a {
  background: radial-gradient(circle at 20% 30%, color-mix(in srgb, currentColor 88%, #00e5ff 12%), transparent 58%);
  animation-name: mdPlasmaA;
}
.lyor-motion-decor.type-plasma_core .md-b {
  background: radial-gradient(circle at 80% 70%, color-mix(in srgb, currentColor 82%, #ff00a8 18%), transparent 58%);
  animation-name: mdPlasmaB;
}
.lyor-motion-decor.type-plasma_core .md-c {
  width: 28%; height: 28%; border-radius: 50%; background: currentColor;
  filter: blur(calc(var(--lyor-md-size) * .03)); animation-name: mdPlasmaC;
}
@keyframes mdPlasmaA { 0%,100% { transform: translate(-58%,-54%) scale(1.02); } 50% { transform: translate(-42%,-48%) scale(.9); } }
@keyframes mdPlasmaB { 0%,100% { transform: translate(-42%,-46%) scale(.9); } 50% { transform: translate(-58%,-56%) scale(1.06); } }
@keyframes mdPlasmaC { 0%,100% { opacity:.45; transform: translate(-35%,-40%) scale(.86);} 50% { opacity:.95; transform: translate(-62%,-58%) scale(1.1);} }

/* 13 Glitch Ring */
.lyor-motion-decor.type-glitch_ring .md-a,
.lyor-motion-decor.type-glitch_ring .md-b {
  width: 84%; height: 84%; border-radius: 50%; border: var(--lyor-md-stroke) solid currentColor;
}
.lyor-motion-decor.type-glitch_ring .md-a {
  box-shadow: 2px 0 0 rgba(0,255,255,.45), -2px 0 0 rgba(255,0,122,.45);
  animation-name: mdGlitchRingA;
  animation-timing-function: steps(2, end);
}
.lyor-motion-decor.type-glitch_ring .md-b {
  width: 60%; height: 60%; opacity:.45; animation-name: mdGlitchRingB;
}
.lyor-motion-decor.type-glitch_ring .md-c { display:none; }
@keyframes mdGlitchRingA {
  0%,88%,100% { transform: translate(-50%,-50%); }
  90% { transform: translate(calc(-50% + 1px), calc(-50% - 1px)); }
  92% { transform: translate(calc(-50% - 1px), calc(-50% + 1px)); }
  94% { transform: translate(calc(-50% + 1px), -50%); }
}
@keyframes mdGlitchRingB { 0%,100% { opacity:.22; } 50% { opacity:.75; } }

/* 14 Warp Gate */
.lyor-motion-decor.type-warp_gate .md-a,
.lyor-motion-decor.type-warp_gate .md-b,
.lyor-motion-decor.type-warp_gate .md-c {
  width: 88%; height: 88%; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 46%, transparent);
  animation-timing-function: linear;
}
.lyor-motion-decor.type-warp_gate .md-a { animation-name: mdWarpA; }
.lyor-motion-decor.type-warp_gate .md-b { width: 68%; height: 68%; animation-name: mdWarpB; }
.lyor-motion-decor.type-warp_gate .md-c { width: 46%; height: 46%; animation-name: mdWarpC; }
@keyframes mdWarpA { from { transform: translate(-50%,-50%) rotate(0deg);} to { transform: translate(-50%,-50%) rotate(360deg);} }
@keyframes mdWarpB { from { transform: translate(-50%,-50%) rotate(360deg);} to { transform: translate(-50%,-50%) rotate(0deg);} }
@keyframes mdWarpC { 0%,100% { opacity:.2; transform: translate(-50%,-50%) scale(.9);} 50% { opacity:.9; transform: translate(-50%,-50%) scale(1.08);} }

/* 15 Quantum Burst */
.lyor-motion-decor.type-quantum_burst .md-a,
.lyor-motion-decor.type-quantum_burst .md-b,
.lyor-motion-decor.type-quantum_burst .md-c {
  width: var(--lyor-md-stroke);
  height: calc(var(--lyor-md-size) * .44);
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 calc(var(--lyor-md-size) * .18) color-mix(in srgb, currentColor 60%, transparent);
}
.lyor-motion-decor.type-quantum_burst .md-a { transform: translate(-50%,-50%) rotate(0deg); animation-name: mdQuantumA; }
.lyor-motion-decor.type-quantum_burst .md-b { transform: translate(-50%,-50%) rotate(60deg); animation-name: mdQuantumB; }
.lyor-motion-decor.type-quantum_burst .md-c { transform: translate(-50%,-50%) rotate(120deg); animation-name: mdQuantumC; }
@keyframes mdQuantumA { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@keyframes mdQuantumB { 0%,100% { opacity:1; } 50% { opacity:.22; } }
@keyframes mdQuantumC { 0%,100% { opacity:.45; } 50% { opacity:.95; } }

/* ===== Signature Layer ===== */

/* 16 Signature Wire */
.lyor-motion-decor.type-signature_wire {
  width: min(var(--lyor-md-size), 420px);
  height: calc(var(--lyor-md-size) * .22);
}
.lyor-motion-decor.type-signature_wire .md-a {
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, currentColor 30%, transparent);
}
.lyor-motion-decor.type-signature_wire .md-b {
  width: 34%;
  height: 1px;
  left: 16%;
  transform: translate(0, -50%);
  background: linear-gradient(90deg, transparent 0%, currentColor 45%, transparent 100%);
  animation-name: mdSignatureWire;
}
.lyor-motion-decor.type-signature_wire .md-c { display: none; }
@keyframes mdSignatureWire { 0%,100% { left: 16%; opacity: .35; } 50% { left: 62%; opacity: 1; } }

/* 17 Signature Notch */
.lyor-motion-decor.type-signature_notch {
  width: min(var(--lyor-md-size), 220px);
  height: min(var(--lyor-md-size), 220px);
}
.lyor-motion-decor.type-signature_notch .md-a {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.lyor-motion-decor.type-signature_notch .md-b,
.lyor-motion-decor.type-signature_notch .md-c {
  width: 22%;
  height: 22%;
  border: var(--lyor-md-stroke) solid currentColor;
}
.lyor-motion-decor.type-signature_notch .md-b {
  left: 12%;
  top: 12%;
  transform: translate(0, 0);
  border-right: none;
  border-bottom: none;
  animation-name: mdSignatureNotchA;
}
.lyor-motion-decor.type-signature_notch .md-c {
  left: auto;
  right: 12%;
  top: auto;
  bottom: 12%;
  transform: translate(0, 0);
  border-left: none;
  border-top: none;
  animation-name: mdSignatureNotchB;
}
@keyframes mdSignatureNotchA { 0%,100% { opacity: .38; } 50% { opacity: 1; } }
@keyframes mdSignatureNotchB { 0%,100% { opacity: 1; } 50% { opacity: .34; } }

/* 18 Signature Orbit */
.lyor-motion-decor.type-signature_orbit .md-a {
  width: 86%;
  height: 86%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.lyor-motion-decor.type-signature_orbit .md-b {
  width: 12%;
  height: 12%;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(0deg) translateX(calc(var(--lyor-md-size) * .40));
  animation-name: mdSignatureOrbit;
  animation-timing-function: linear;
}
.lyor-motion-decor.type-signature_orbit .md-c {
  width: 8%;
  height: 8%;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 68%, white 32%);
}
@keyframes mdSignatureOrbit {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(calc(var(--lyor-md-size) * .40)); }
  to { transform: translate(-50%, -50%) rotate(360deg) translateX(calc(var(--lyor-md-size) * .40)); }
}

/* 19 Signature Frame */
.lyor-motion-decor.type-signature_frame {
  width: min(var(--lyor-md-size), 260px);
  height: min(var(--lyor-md-size), 260px);
}
.lyor-motion-decor.type-signature_frame .md-a,
.lyor-motion-decor.type-signature_frame .md-b {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
}
.lyor-motion-decor.type-signature_frame .md-a { animation-name: mdSignatureFrameA; }
.lyor-motion-decor.type-signature_frame .md-b {
  width: 86%;
  height: 86%;
  animation-name: mdSignatureFrameB;
}
.lyor-motion-decor.type-signature_frame .md-c { display: none; }
@keyframes mdSignatureFrameA { 0%,100% { opacity: .3; } 50% { opacity: .78; } }
@keyframes mdSignatureFrameB { 0%,100% { opacity: .82; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .26; transform: translate(-50%, -50%) scale(.92); } }

/* 20 Signature Blade */
.lyor-motion-decor.type-signature_blade {
  width: min(var(--lyor-md-size), 440px);
  height: calc(var(--lyor-md-size) * .26);
}
.lyor-motion-decor.type-signature_blade .md-a {
  width: 100%;
  height: var(--lyor-md-stroke);
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.lyor-motion-decor.type-signature_blade .md-b {
  width: 36%;
  height: calc(var(--lyor-md-stroke) * 2.4);
  left: 8%;
  transform: translate(0, -50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, currentColor 92%, white 8%) 48%, transparent 100%);
  filter: blur(calc(var(--lyor-md-stroke) * .5));
  animation-name: mdSignatureBlade;
}
.lyor-motion-decor.type-signature_blade .md-c { display: none; }
@keyframes mdSignatureBlade { 0%,100% { left: 8%; opacity: .35; } 50% { left: 58%; opacity: 1; } }