/* Dance4U: a dance floor at night. The floor lights on the beat, the beams sweep, the letters bounce. */
.ns-sig--stage { --sig-bg: #1d0529; --sig-fg: #fff; min-height: clamp(33rem, 84svh, 50rem); align-items: start; padding-block-start: clamp(3rem, 8vh, 5.5rem); }
.ns-sig--stage .ns-sig__inner { justify-items: center; text-align: center; gap: 1.2rem; }
.ns-sig--stage .ns-sig__title { font-size: clamp(4rem, 15vw, 12.5rem); font-weight: 400; line-height: .9; letter-spacing: .01em; text-shadow: .045em .045em 0 #c2185b, .09em .09em 0 #ffb703; }
.ns-sig--stage .ns-sig__ch { animation: st-hop 1.04s cubic-bezier(.3, 0, .3, 1) infinite; animation-delay: calc(var(--i) * 87ms); }
.ns-sig--stage .ns-sig__tagline { max-width: none; font-size: clamp(1.15rem, 2.4vw, 1.75rem); }
.ns-sig--stage .ns-sig__topics { justify-content: center; }
.ns-sig--stage .ns-sig__topics a { background: #1d0529; border: 2px solid #ffb703; }
.ns-sig--stage .ns-sig__topics a:hover { color: #1d0529; background: #ffb703; border-color: #ffb703; }
@keyframes st-hop { 0%, 55%, 100% { transform: none; } 22% { transform: translateY(-.13em) rotate(-3deg); } }

/* the floor: a grid laid back in perspective, each tile lit on its own count of the beat */
.st-floor { position: absolute; inset: auto -26% 0 -26%; height: 46%; perspective: 760px; perspective-origin: 50% -30%; -webkit-mask-image: linear-gradient(transparent, #000 26%); mask-image: linear-gradient(transparent, #000 26%); }
.st-floor > div { display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(6, 1fr); gap: 5px; height: 230%; transform: rotateX(66deg); transform-origin: 50% 0; }
.st-floor i { background: #c2185b; opacity: .22; animation: st-lit 2.08s steps(1) infinite; }
.st-floor i:nth-child(3n) { background: #ffb703; animation-delay: -.52s; }
.st-floor i:nth-child(3n + 1) { background: #7b2cbf; animation-delay: -1.04s; }
.st-floor i:nth-child(5n + 2) { animation-delay: -1.56s; }
.st-floor i:nth-child(7n) { animation-delay: -.26s; }
@keyframes st-lit { 0%, 49% { opacity: .95; } 50%, 100% { opacity: .16; } }

/* three beams from the rig; the middle one follows the mouse */
.st-beams i { position: absolute; top: -6%; width: min(46vw, 44rem); height: 118%; transform-origin: 50% 0; mix-blend-mode: screen; clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); }
.st-beams i:nth-child(1) { inset-inline-start: -8%; background: linear-gradient(rgb(255 183 3 / .62), transparent 70%); animation: st-sweep 6.2s ease-in-out infinite alternate; }
.st-beams i:nth-child(2) { inset-inline-start: calc(50% - min(23vw, 22rem)); background: linear-gradient(rgb(255 255 255 / .34), transparent 78%); transform: rotate(calc((var(--mx) - .5) * -56deg)); transition: transform .35s ease-out; }
.st-beams i:nth-child(3) { inset-inline-end: -8%; background: linear-gradient(rgb(233 30 140 / .72), transparent 70%); animation: st-sweep 5.2s ease-in-out infinite alternate-reverse; }
@keyframes st-sweep { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@media (max-width: 767px) {
	.ns-sig--stage { min-height: 33rem; }
	.st-floor { height: 34%; inset-inline: -60%; }
	.st-beams i { width: 90vw; opacity: .5; }
	.ns-sig--stage .ns-sig__tagline { padding: .1rem .6rem; background: #1d0529; }
	.st-beams i:nth-child(2) { inset-inline-start: 5vw; }
}

/* the night goes on down the page: a dark site, amber headings, an equaliser beside section titles, cards that step onto the floor */
body.ns-sig-stage { --wp--preset--color--background: #1d0529; --wp--preset--color--surface: #2b0a3d; --wp--preset--color--text: #fdf3fb; --wp--preset--color--muted: #dcc8e8; --wp--custom--accent-text: #ffc53d; --wp--custom--button-bg: #b3155a; color: #fdf3fb; background-color: #1d0529; }
body.ns-sig-stage .ns-section-title, body.ns-sig-stage .ns-section-title a { color: #ffc53d; }
body.ns-sig-stage .ns-cat-block__head { border-color: #5a2375; }
body.ns-sig-stage .ns-cat-block__head .ns-section-title::before { content: ""; display: inline-block; width: .85em; height: .8em; margin-inline-end: .4em; background: linear-gradient(0deg, #e91e8c 45%, transparent 0) 0 100% / 22% 100% no-repeat, linear-gradient(0deg, #ffb703 100%, transparent 0) 50% 100% / 22% 100% no-repeat, linear-gradient(0deg, #a855f7 65%, transparent 0) 100% 100% / 22% 100% no-repeat; }
body.ns-sig-stage .ns-fc { background: transparent; border: 0; box-shadow: none; color: #fdf3fb; transition: transform .2s; }
body.ns-sig-stage .ns-fc:hover { transform: translateY(-4px) rotate(-.6deg); }
body.ns-sig-stage .ns-fc__title a { color: #fdf3fb; }
body.ns-sig-stage .ns-fc:hover .ns-fc__title a { color: #ffc53d; }
body.ns-sig-stage .ns-fc__excerpt, body.ns-sig-stage .ns-fc__date { color: #dcc8e8; }
body.ns-sig-stage .ns-fc__kicker { justify-self: start; width: fit-content; padding: .05rem .55rem; color: #fff; background: #b3155a; border-radius: 999px; }
body.ns-sig-stage .ns-fc__img { border-radius: 6px; outline: 2px solid transparent; outline-offset: 3px; }
body.ns-sig-stage .ns-fc:hover .ns-fc__img { outline-color: #ffb703; }
body.ns-sig-stage .ns-footer { background: #12031b !important; color: #fdf3fb; }
body.ns-sig-stage .ns-content, body.ns-sig-stage .ns-content :is(p, li, h2, h3) { color: #fdf3fb; }
body.ns-sig-stage :is(input, textarea, select):not([type="submit"]) { color: #1d0529; background: #fff; }