/* Colours belong to individual effects; the surrounding catalogue stays quiet. */
.m-outline-glow { background:#faf8f2; }
.m-outline-glow .motion-decor { width:92%; height:46%; border-radius:5px; background:radial-gradient(ellipse at center,#163849,#101e29 75%); }
.m-outline-glow .motion-text { color:#132735; -webkit-text-stroke:.7px #d6ffff; text-shadow:0 0 2px #fff,0 0 5px #6ef6ff,0 0 11px #00c9e7; font-weight:700; }
.is-playing .m-outline-glow .motion-text { -webkit-text-stroke:.7px #d6ffff; animation:fluorescent-breathe var(--duration) ease-in-out infinite; }
@keyframes fluorescent-breathe { 0%,100%{filter:brightness(.88);text-shadow:0 0 2px #fff,0 0 5px #6ef6ff,0 0 10px #00c9e7} 50%{filter:brightness(1.16);text-shadow:0 0 2px #fff,0 0 7px #6ef6ff,0 0 16px #00c9e7} }

.m-sparkle { background:radial-gradient(ellipse at 50% 45%,#fffdf5,#f7efdd); }
.m-sparkle .motion-decor { inset:8%; background:none; }
.is-playing .m-sparkle .motion-decor { animation:none; }
.gold-glint { position:absolute; left:var(--gx); top:var(--gy); width:var(--gs); height:var(--gs); opacity:.6; filter:drop-shadow(0 0 3px #edbd48); }
.gold-glint::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,#91620b 0%,#f1c85a 32%,#fff9d6 49%,#deb24a 67%,#a77414 100%); clip-path:polygon(50% 0,59% 38%,100% 50%,59% 61%,50% 100%,40% 61%,0 50%,40% 38%); }
.gold-glint { width:calc(var(--gs)*1.4); height:calc(var(--gs)*1.4); filter:drop-shadow(0 0 2px #dca42c88); }
.gold-bokeh::before { clip-path:none; border-radius:50%; background:radial-gradient(circle,#fff5c4,#edc253 38%,#b68014 65%,transparent 75%); }
.is-playing .gold-glint { animation:gold-drift var(--duration) ease-in-out var(--gd) infinite; }
.m-sparkle .motion-text { color:#513b19; text-shadow:0 1px 0 white,0 0 7px #fffaf0,0 0 14px #fffaf0; }
@keyframes gold-drift { 0%{opacity:0;transform:translate(0,8px) scale(.45) rotate(0)} 28%{opacity:.95} 52%{opacity:.65;transform:translate(calc(var(--dx)*.5),0) scale(1) rotate(12deg)} 80%{opacity:.9} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.6) rotate(25deg)} }

.m-gradient-flow .motion-decor { width:90%; height:36%; border-radius:3px; background:linear-gradient(110deg,#24c1ce 0%,#5473ed 40%,#a57bea 70%,#24c1ce 100%); background-size:260% 100%; box-shadow:0 4px 12px #416cc31a; }
.m-gradient-flow .motion-text { color:white; text-shadow:0 1px 2px #24476866; }
.m-gradient-flow .motion-decor { max-height:60px; }
.is-playing .m-gradient-flow .motion-decor { animation:clean-gradient var(--duration) ease-in-out infinite alternate; }
@keyframes clean-gradient { from{background-position:0% 50%} to{background-position:100% 50%} }

.m-sticky { background:#fffefa; }
.m-sticky .motion-decor { width:89%; height:30%; background:linear-gradient(90deg,#eadb8560 0 11%,transparent 14%),repeating-linear-gradient(3deg,#ffffff10 0 1px,#cfb9520b 1px 3px),linear-gradient(105deg,#fff7bc,#fff0a1 72%,#f2df88); border:1px solid #e2cf7440; border-radius:0 0 1px 1px; box-shadow:0 1px 1px #6d541c22,3px 5px 7px -5px #725d3977; transform:rotate(-1.3deg); }
.m-sticky .motion-decor::after { content:''; position:absolute; right:0; bottom:0; width:10px; height:10px; background:linear-gradient(135deg,#e0ca70 48%,#fffbea 52%); clip-path:polygon(100% 0,100% 100%,0 100%); }
.m-sticky .motion-text { font-weight:500; color:#52482e; transform:rotate(-1.3deg); }
.m-sticky .motion-decor { max-height:64px; }
.is-playing .m-sticky .motion-decor,.is-playing .m-sticky .motion-text { animation:paper-stick var(--duration) cubic-bezier(.2,.8,.2,1) both; }
@keyframes paper-stick { from{opacity:0;transform:translateY(-12px) rotate(-4deg)} to{opacity:1;transform:translateY(0) rotate(-1.3deg)} }

.m-marker .motion-decor { width:84%; height:19%; top:47%; background:#ffec45; border-radius:1px; clip-path:polygon(1% 9%,99% 0,100% 86%,0 100%); }
.m-marker .motion-decor { opacity:.86; }
.is-playing .m-marker .motion-decor { animation:marker-draw var(--duration) cubic-bezier(.2,.65,.3,1) infinite; transform-origin:left; }
@keyframes marker-draw { 0%,8%{transform:scaleX(0)} 48%,100%{transform:scaleX(1)} }
.cap-pop-key-marker .caption-line { gap:3px; }
.cap-pop-key-marker .caption-band { display:block; background:#ffec45; top:65%; bottom:-2px; left:-3px; right:-3px; transform-origin:left; }
.cap-pop-key-marker .caption-unit:last-of-type { color:#202b36; }
@media(prefers-reduced-motion:reduce){ .gold-glint{opacity:.65} }