/* UniClick: one giant click. Question marks flip outward from the pointer into section names: the picture clears. */
.ns-sig--cursor { --sig-bg: #052531; --sig-fg: #fff; --t: max(9.4rem, 10.9vw); --cx: 29%; --cy: 44%; --len: 10s; min-height: clamp(33rem, 84svh, 50rem); }
.ns-sig--cursor .ns-sig__inner { grid-template-columns: minmax(0, 28rem); justify-content: start; gap: 1.1rem; }
/* the title is the word that got double-clicked: it sits in a selection block */
.ns-sig--cursor .ns-sig__title { justify-self: start; padding: .02em .16em .1em; color: #052531; background: #22d3ee; font-size: clamp(3.4rem, 6.6vw, 6rem); font-weight: 700; line-height: 1; white-space: nowrap; }
.ns-sig--cursor .ns-sig__tagline { font-size: clamp(1.3rem, 2.5vw, 2rem); font-weight: 700; }
.ns-sig--cursor .ns-sig__topics { gap: .5rem; }
.ns-sig--cursor .ns-sig__topics a { padding: .5rem .9rem; border: 2px solid #22d3ee; border-radius: .35rem; background: #052531; }
.ns-sig--cursor .ns-sig__topics a:hover { color: #052531; background: #e879f9; border-color: #e879f9; }

/* the board */
.cu-b { direction: ltr; position: absolute; left: calc(var(--cx) - var(--t) * 3 - .6rem); top: calc(var(--cy) - var(--t) * 2.5 - .5rem); display: grid; grid-template-columns: repeat(6, var(--t)); grid-auto-rows: var(--t); gap: .4rem; transform: rotate(-5deg); }
.cu-b b { position: relative; display: block; transform: perspective(900px) rotateY(180deg); transform-style: preserve-3d; animation: cu-flip var(--len) cubic-bezier(.5, 0, .2, 1) calc(var(--r) * .09s) infinite both; }
.cu-b b::before, .cu-b i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: .7rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cu-b b::before { content: "?"; color: #2c94ae; background: #0a4356; box-shadow: inset 0 0 0 2px #10607a; font: 700 calc(var(--t) * .46)/1 var(--ns-font-heading, inherit); }
.cu-b i { box-sizing: border-box; padding: .5rem; overflow: hidden; color: #052531; background: #22d3ee; font: 700 clamp(1rem, 1.5vw, 1.45rem)/1.15 var(--ns-font-heading, inherit); text-align: center; direction: rtl; overflow-wrap: anywhere; transform: rotateY(180deg); }
.cu-b i:empty::after { content: "!"; font-size: calc(var(--t) * .5); opacity: .4; }
.cu-b b:nth-child(5n) i { background: #e879f9; color: #2a0a33; }
.cu-b b:nth-child(5n + 2) i { background: #ecfeff; }
.cu-b b:nth-child(5n + 3) i { background: #fde047; }
@keyframes cu-flip { 0%, 12% { transform: perspective(900px) rotateY(0); } 20%, 84% { transform: perspective(900px) rotateY(180deg); } 92%, 100% { transform: perspective(900px) rotateY(360deg); } }

/* click point: ripples, a burst of ticks, the pointer */
.cu-c { position: absolute; left: var(--cx); top: var(--cy); width: 0; height: 0; }
.cu-c u { position: absolute; width: 60rem; height: 60rem; margin: -30rem; border: .8rem solid #e879f9; border-radius: 50%; opacity: 0; animation: cu-ring var(--len) ease-out infinite; }
.cu-c u + u { border-color: #fff; animation-delay: .14s; }
.cu-c u + u + u { border-color: #22d3ee; animation-delay: .28s; }
@keyframes cu-ring { 0%, 11.9% { opacity: 0; transform: scale(.02); } 12% { opacity: 1; transform: scale(.04); } 28%, 100% { opacity: 0; transform: scale(1.2); } }
.cu-k { position: absolute; width: 16rem; height: 16rem; margin: -8rem; overflow: visible; opacity: 0; animation: cu-burst var(--len) ease-out infinite; }
.cu-k circle { fill: none; stroke: #fde047; stroke-width: 14; stroke-dasharray: 10 35.55; }
@keyframes cu-burst { 0%, 11.9% { opacity: 0; transform: scale(.2); } 12% { opacity: 1; } 19%, 100% { opacity: 0; transform: scale(1.1); } }
.cu-p { position: absolute; left: -1rem; top: -1rem; width: 18rem; height: auto; overflow: visible; transform-origin: 1rem 1rem; translate: calc((var(--mx) - .5) * 3rem) calc((var(--my) - .5) * 3rem); transition: translate .4s ease-out; animation: cu-go var(--len) cubic-bezier(.6, 0, .2, 1) infinite both; }
.cu-p path { fill: #fff; stroke: #052531; stroke-width: 1.3; stroke-linejoin: round; }
.cu-p .s { fill: #e879f9; }
@keyframes cu-go { 0% { transform: translate(-14rem, 22rem) rotate(8deg); } 8% { transform: none; } 11% { transform: none; } 12.5% { transform: scale(.86); } 15% { transform: none; } 78% { transform: translate(2rem, 1.5rem); } 86% { transform: none; } 88% { transform: scale(.86); } 90% { transform: none; } 100% { transform: translate(-14rem, 22rem) rotate(8deg); } }

@media (max-width: 767px) {
	.ns-sig--cursor { --t: 5.7rem; --cx: 44%; --cy: 73%; align-items: start; min-height: 40rem; padding-block-start: 2rem; }
	.ns-sig--cursor .ns-sig__inner { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
	.ns-sig--cursor .ns-sig__topics a:nth-child(n + 4) { display: none; }
	.ns-sig--cursor .ns-sig__topics a { padding: .35rem .7rem; }
	.cu-b i { padding: .3rem; font-size: .92rem; }
	.cu-p { width: 7.5rem; }
	.cu-c u { width: 32rem; height: 32rem; margin: -16rem; border-width: .35rem; }
	.cu-k { width: 9rem; height: 9rem; margin: -4.5rem; }
	@keyframes cu-go { 0% { transform: translate(-5rem, 8rem); } 8%, 11% { transform: none; } 12.5% { transform: scale(.86); } 15%, 86%, 90% { transform: none; } 88% { transform: scale(.86); } 100% { transform: translate(-5rem, 8rem); } }
}

/* touches: the arrow marks section titles, a card flips a little toward you on hover */
body.ns-sig-cursor .ns-cat-block__head .ns-section-title::before { content: ""; display: inline-block; width: .62em; height: .9em; margin-inline-end: .45em; background: #0891b2; clip-path: polygon(0 0, 0 82%, 24% 63%, 42% 100%, 62% 92%, 44% 58%, 78% 58%); vertical-align: -.08em; }
body.ns-sig-cursor .ns-fc { transition: transform .25s; }
body.ns-sig-cursor .ns-fc:hover { transform: perspective(900px) rotateY(-3deg) scale(1.01); }