/* WizeShop: a shopping bag lifted off a glowing summoning circle, in a paper-cut burst of rays and sparks. */
.ns-sig--spellbag { --sig-bg: #1d0d33; --sig-fg: #fff; --bx: 28%; min-height: clamp(34rem, 86svh, 50rem); }
.ns-sig--spellbag .ns-sig__inner { grid-template-columns: minmax(0, 36rem); justify-content: start; gap: 1.1rem; }
.ns-sig--spellbag .ns-sig__title { font-size: clamp(3.4rem, 8vw, 7.4rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; text-shadow: .03em .04em 0 #a23b72; }
.ns-sig--spellbag .ns-sig__tagline { color: #ffd27a; font-size: clamp(1.25rem, 2.5vw, 1.9rem); font-weight: 700; }
.ns-sig--spellbag .ns-sig__topics a { background: #1d0d33; border: 2px solid #ffd27a; }
.ns-sig--spellbag .ns-sig__topics a:hover { color: #1d0d33; background: #ffd27a; border-color: #ffd27a; }

/* night and rays */
.sb-sky { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; }
.sb-ry { position: absolute; left: calc(var(--bx) - 100rem); top: calc(47% - 100rem); width: 200rem; height: 200rem; fill: #3a1a5e; animation: sb-spin 60s linear infinite; }
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* everything is built around the bag's centre */
.sb-c { position: absolute; left: var(--bx); top: 47%; width: 0; height: 0; translate: calc((var(--mx) - .5) * -18px) calc((var(--my) - .5) * -12px); transition: translate .5s ease-out; }
.sb-g { position: absolute; left: -27rem; top: -27rem; width: 54rem; height: 54rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 170 40 / .8), rgb(190 60 130 / .5) 50%, transparent); animation: sb-glow 3.6s ease-in-out infinite alternate; }
@keyframes sb-glow { from { opacity: .72; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
/* the circle lies flat under the bag and turns */
.sb-ci { position: absolute; left: -24rem; top: -2.5rem; width: 48rem; height: 48rem; overflow: visible; transform: perspective(1100px) rotateX(74deg); }
.sb-ci g { transform-box: view-box; transform-origin: 0 0; }
.sb-ci .o { animation: sb-turn 26s linear infinite; }
.sb-ci .n { animation: sb-turn 18s linear infinite reverse; }
@keyframes sb-turn { to { transform: rotate(360deg); } }
.sb-ci circle, .sb-ci path { fill: none; }
.sb-ci .l { stroke: #ffc35c; stroke-width: 5; }
.sb-ci .d { stroke: #fff6df; stroke-width: 24; stroke-dasharray: 4 21; }
.sb-ci .t { stroke: #ffc35c; stroke-width: 26; stroke-dasharray: 14 10 3 10; }
/* the light that holds it up */
.sb-b { position: absolute; left: -15rem; top: 3rem; width: 30rem; height: 19rem; background: linear-gradient(0deg, transparent, rgb(255 195 92 / .75) 16%, transparent 92%); clip-path: polygon(26% 0, 74% 0, 100% 100%, 0 100%); animation: sb-glow 2.4s ease-in-out infinite alternate; }

.sb-bag { position: absolute; left: -9.6rem; top: -13.5rem; width: 19.2rem; height: auto; overflow: visible; rotate: -6deg; transform-origin: 50% 90%; animation: sb-rise 1.4s cubic-bezier(.2, .9, .3, 1.2) backwards, sb-float 4.2s ease-in-out 1.4s infinite alternate; }
@keyframes sb-rise { from { transform: translateY(9rem) scale(.7); opacity: 0; } }
@keyframes sb-float { from { transform: translateY(.7rem) rotate(-1.4deg); } to { transform: translateY(-1rem) rotate(2deg); } }
.sb-bag .h { fill: none; stroke: #fff6df; stroke-width: 12; stroke-linecap: round; }
.sb-bag .nm { fill: #2b1645; font: 900 26px/1 var(--ns-font-heading, inherit); text-anchor: middle; direction: ltr; }

/* a ribbon of light circles the bag: the back half is drawn behind it, the front half before it */
.sb-or { position: absolute; left: -21.25rem; top: -12.5rem; width: 42.5rem; height: 25rem; overflow: visible; rotate: -14deg; }
.sb-or path { fill: none; stroke-linecap: round; }
.sb-or .z { stroke: #ffe9a8; stroke-width: 3; stroke-dasharray: 1 13; }
.sb-or .y { stroke: #fff; stroke-width: 7; stroke-dasharray: 170 1100; animation: sb-comet 3.4s linear infinite; }
.sb-or.b .y { animation-delay: -1.7s; }
@keyframes sb-comet { from { stroke-dashoffset: 760; } to { stroke-dashoffset: -510; } }

/* sparks burst out of the middle and fall away */
.sb-sp i { position: absolute; width: 1.15rem; height: 1.15rem; margin: -.57rem; background: #ffd27a; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; animation: sb-spark 3.2s cubic-bezier(.1, .7, .3, 1) calc(var(--r) * -2.6s) infinite; }
.sb-sp i:nth-child(3n) { background: #fff; width: 1.7rem; height: 1.7rem; }
.sb-sp i:nth-child(3n + 1) { background: #ff7ac6; }
@keyframes sb-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-4rem) scale(.3); } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-18rem - var(--r) * 11rem)) scale(1) rotate(180deg); } }
.sb-tw { position: absolute; left: -22rem; top: -22rem; width: 44rem; height: 44rem; overflow: visible; }
.sb-tw use { transform-box: fill-box; transform-origin: center; animation: sb-tw 3.2s ease-in-out var(--d) infinite; }
@keyframes sb-tw { 0%, 100% { transform: scale(.25); opacity: .25; } 50% { transform: scale(1.25); opacity: 1; } }

@media (max-width: 767px) {
	.ns-sig--spellbag { --bx: 50%; align-items: start; min-height: 40rem; padding-block-start: 1.75rem; }
	.ns-sig--spellbag .ns-sig__inner { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	.ns-sig--spellbag .ns-sig__title { font-size: clamp(3.2rem, 17vw, 5rem); }
	.ns-sig--spellbag .ns-sig__topics a:nth-child(n + 4) { display: none; }
	.ns-sig--spellbag .ns-sig__topics a { padding: .3rem .7rem; font-size: .95rem; }
	.sb-c { top: 69%; scale: .56; }
	.sb-ry { top: calc(69% - 100rem); }
}

/* touches: a four-point star marks section titles, a card lifts with a little levitation on hover */
body.ns-sig-spellbag .ns-cat-block__head .ns-section-title::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-inline-end: .4em; vertical-align: -.04em; background: #f18f01; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
body.ns-sig-spellbag .ns-fc { transition: transform .35s cubic-bezier(.2, .9, .3, 1.3); }
body.ns-sig-spellbag .ns-fc:hover { transform: translateY(-6px); }