/* YouToo: a crowd that keeps saying "me too". Big geometric people, bobbing, waving, carrying the site's sections on placards, watching your mouse. */
.ns-sig--crowd { --sig-bg: #ffd23f; --sig-fg: #1e1e3f; --sig-acc: #e2492a; align-items: start; min-height: clamp(36rem, 88svh, 52rem); padding-block-start: clamp(1.5rem, 4vh, 2.75rem); background-image: repeating-radial-gradient(circle at 50% 118%, #ffd23f 0 5rem, #ffdb5e 5rem 10rem); }
.ns-sig--crowd .ns-sig__inner { justify-items: center; gap: .1rem; text-align: center; }
.ns-sig--crowd .ns-sig__title { font-size: clamp(4.4rem, 12.6vw, 10.5rem); font-weight: 400; line-height: .98; text-shadow: .035em .05em 0 #e2492a; }
.ns-sig--crowd .ns-sig__ch { animation: cw-hop 1.2s ease-in-out calc(var(--i) * -.17s) infinite alternate; }
@keyframes cw-hop { from { transform: translateY(.03em) rotate(-1.5deg); } to { transform: translateY(-.05em) rotate(1.5deg); } }
.ns-sig--crowd .ns-sig__tagline { max-width: none; font-size: clamp(1.2rem, 2.4vw, 1.85rem); font-weight: 700; }

.ns-sig--crowd .cw { position: absolute; inset: auto 0 0; width: 100%; height: 66%; overflow: hidden; }
.ns-sig--crowd .cw .x { transform-box: fill-box; transform-origin: 50% 100%; animation: cw-bob 1.3s ease-in-out var(--d) infinite alternate; }
@keyframes cw-bob { from { transform: translateY(5px) rotate(-1.4deg); } to { transform: translateY(-13px) rotate(1.4deg); } }
.ns-sig--crowd .cw g[transform] > .x:nth-child(3n) { animation-duration: 1.05s; }
.ns-sig--crowd .cw g[transform] > .x:nth-child(4n + 1) { animation-duration: 1.6s; }
.cw .ar { fill: none; stroke: currentColor; stroke-width: 40; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 100%; animation: cw-wave .62s ease-in-out var(--d) infinite alternate; }
.cw .ar.r { transform-origin: 100% 100%; animation-name: cw-wave2; }
@keyframes cw-wave { from { transform: rotate(-16deg); } to { transform: rotate(20deg); } }
@keyframes cw-wave2 { from { transform: rotate(16deg); } to { transform: rotate(-20deg); } }
/* the eyes watch the mouse; everyone blinks now and then */
.cw .p { transform: translate(calc((var(--mx) - .5) * 22px), calc((var(--my) - .5) * 20px)); transition: transform .25s ease-out; }
.cw .bl { transform-box: fill-box; transform-origin: center; animation: cw-blink 5s linear var(--d) infinite; }
@keyframes cw-blink { 0%, 95%, 100% { transform: none; } 97% { transform: scaleY(.08); } }
.cw .sm { fill: none; stroke: #1e1e3f; stroke-width: 7; stroke-linecap: round; }
/* placards */
.cw .sk { stroke: #7a4a1e; stroke-width: 9; stroke-linecap: round; }
.cw .sn { fill: #fffaf3; stroke: #1e1e3f; stroke-width: 5; stroke-linejoin: round; }
.ns-sig--crowd .cw foreignObject p { display: grid; place-items: center; height: 100%; margin: 0; color: #1e1e3f; font: 400 21px/1.05 var(--ns-font-heading, inherit); text-align: center; overflow: hidden; }
/* the "me too" balloons pop one after the other */
.cw .u use:nth-child(even) { opacity: 0; }
.cw .u use { transform-box: fill-box; transform-origin: 40% 100%; animation: cw-say 8.8s cubic-bezier(.2, .9, .3, 1.4) var(--u) infinite both; }
.cw #q text { fill: #c7361a; font: 400 40px/1 var(--ns-font-heading, inherit); text-anchor: middle; }
@keyframes cw-say { 0% { opacity: 0; transform: scale(.2); } 4%, 21% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: scale(.7); } }

@media (max-width: 767px) {
	.ns-sig--crowd { min-height: 34rem; padding-block-start: 1.5rem; }
	.ns-sig--crowd .ns-sig__title { font-size: clamp(4rem, 23vw, 6.4rem); }
	.ns-sig--crowd .cw { inset: auto auto 0 50%; width: 230vw; height: auto; aspect-ratio: 3 / 1; translate: -50%; }
}

/* touches: little faces mark the section titles, a card bobs when hovered */
body.ns-sig-crowd .ns-cat-block__head .ns-section-title::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-inline-end: .4em; vertical-align: -.1em; border-radius: 50% 50% 18% 18%; background: radial-gradient(circle at 34% 42%, #1e1e3f 0 .07em, #fff .08em .15em, transparent .16em), radial-gradient(circle at 66% 42%, #1e1e3f 0 .07em, #fff .08em .15em, transparent .16em), #e2492a; }
body.ns-sig-crowd .ns-fc { transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
body.ns-sig-crowd .ns-fc:hover { transform: translateY(-5px) rotate(.6deg); }