/* Kolnoan: a projector throws its beam through dust onto the screen that holds the title; real post images run on a film strip. */
.ns-sig--projector { --sig-bg: #0c0a16; --sig-fg: #1d1a2f; min-height: clamp(36rem, 88svh, 52rem); padding: 0; }
.ns-sig--projector .ns-sig__art { container-type: size; background: radial-gradient(70% 90% at 72% 40%, #2e2439, #120e1e 60%, #0c0a16); }

/* the screen is the text block itself */
.ns-sig--projector .ns-sig__inner { box-sizing: border-box; position: absolute; isolation: isolate; overflow: hidden; inset-block: 7% 27%; inset-inline: 4% auto; width: 49%; max-width: none; margin: 0; padding: 1rem 1.5rem; justify-items: center; align-content: center; text-align: center; gap: .3rem; background: radial-gradient(circle, transparent 0 9rem, #1d1a2f26 0 calc(9rem + 2px), transparent 0 12rem, #1d1a2f26 0 calc(12rem + 2px), transparent 0), linear-gradient(#1d1a2f1f 0 0) 50% 0 / 2px 100% no-repeat, linear-gradient(#1d1a2f1f 0 0) 0 50% / 100% 2px no-repeat, radial-gradient(75% 80%, #fbf3df 55%, #ecdcb6); background-color: #f6edd8; box-shadow: 0 0 0 .55rem #05040a, 0 0 0 .7rem #3a3044, 0 0 7rem 1.5rem #ffe6ad59; }
.ns-sig--projector .ns-sig__title { font-size: clamp(7rem, min(17vw, 31vh), 17rem); font-weight: 700; line-height: .82; animation: pj-weave .24s steps(2) infinite; }
.ns-sig--projector .ns-sig__tagline { max-width: none; font-size: clamp(1.3rem, 2.7vw, 2.4rem); font-weight: 600; color: #a4133c; }
@keyframes pj-weave { 50% { transform: translate(.4px, -.8px); } }
.ns-sig--projector .ns-sig__inner::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 200%; aspect-ratio: 1; margin: -100% 0 0 -100%; background: conic-gradient(#1d1a2f1c 0 62deg, transparent 0); border-radius: 50%; animation: pj-leader 5s linear infinite; }
@keyframes pj-leader { to { transform: rotate(360deg); } }
.ns-sig--projector .ns-sig__inner::after { content: ""; position: absolute; z-index: -1; inset: 0 -10%; background: linear-gradient(90deg, transparent 22%, #1d1a2f33 0 calc(22% + 1px), transparent 0 71%, #1d1a2f26 0 calc(71% + 2px), transparent 0); animation: pj-scr 1.1s steps(4) infinite; }
@keyframes pj-scr { 50% { transform: translateX(6%); opacity: .4; } 75% { transform: translateX(-5%); } }

.pj-cur, .pj-cur::after { background: repeating-linear-gradient(90deg, #55091f, #b3193f 1cqw, #55091f 2cqw); }
.pj-cur { position: absolute; inset: 0 0 auto auto; width: 56cqw; height: 8cqh; box-shadow: 0 .4rem 1rem #000; clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%); }
.pj-cur::after { content: ""; position: absolute; inset: 0 0 auto auto; width: 3cqw; height: 80cqh; }

/* the beam: a wedge from the lens, rays are a conic gradient from the same point */
.pj-beam { --lx: calc(2cqw + 46.4cqh); --ly: 51cqh; position: absolute; inset: 0; mix-blend-mode: screen; clip-path: polygon(var(--lx) calc(var(--ly) - 2cqh), 48cqw 6cqh, 48cqw 74cqh, var(--lx) calc(var(--ly) + 2cqh)); background: repeating-conic-gradient(from 0deg at var(--lx) var(--ly), #0000 0, #fff3 1.7deg, #0000 3.3deg, #ffffff1f 4.1deg, #0000 6.3deg), linear-gradient(90deg, #fff4d4 0, #ffe9b8bb 28%, #ffe9b844 50%); animation: pj-flick .36s steps(3) infinite; }
@keyframes pj-flick { 50% { opacity: .84; } 75% { opacity: .95; } }
.pj-beam svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-linecap: round; }
.pj-beam .d1 { stroke-width: 2; animation: pj-dust 19s ease-in-out infinite alternate; }
.pj-beam .d2 { stroke-width: 3.5; animation: pj-dust 13s -6s ease-in-out infinite alternate-reverse; }
@keyframes pj-dust { from { transform: translate(-14px, 30px); } to { transform: translate(30px, -38px); } }

.pj-seat { position: absolute; inset-inline: 0; inset-block-end: 16cqh; height: 10cqh; background: radial-gradient(circle at 50% 110%, #05040a 62%, #5a4659 63% 65%, transparent 66%) 0 0 / 12cqh 14cqh repeat-x; }

.pj-p { position: absolute; inset-block-end: 24cqh; inset-inline-end: 2cqw; width: 50cqh; height: 50cqh; stroke-width: 2; fill: none; }
.pj-p .o { fill: #2d2838; stroke: #6a5f7a; } .pj-p .w { fill: #0e0c14; } .pj-p .o2 { fill: #38313f; stroke: #14111c; }
.pj-p .h { fill: #0c0a16; stroke: #7a6f8a; }
.pj-p .le { fill: none; stroke: #3a3345; stroke-width: 13; stroke-linecap: round; }
.pj-p .fi { fill: none; stroke: #6a5f7a; stroke-width: 5; }
.pj-p .bd, .pj-p .kn, .pj-p .br { stroke: #000; }
.pj-p .bd { fill: url(#pjm); } .pj-p .kn, .pj-p .br { fill: url(#pjl); }
.pj-p .ri { fill: none; stroke: #ffdf9e; stroke-width: 3; stroke-linecap: round; }
.pj-p .ve { fill: none; stroke: #ffb648; stroke-width: 6; stroke-linecap: round; animation: pj-flick .36s steps(3) infinite; }
.pj-p .ve2 { stroke: #0c0a16; stroke-width: 5; }
.pj-p .gl { fill: #fff7d6; }
.pj-spin { animation: pj-spin 3.2s linear infinite; }
@keyframes pj-spin { to { transform: rotate(360deg); } }

.pj-film { position: absolute; inset: auto -2% -1cqh; height: 19cqh; direction: ltr; overflow: hidden; background: #05040a; transform: rotate(-.7deg); box-shadow: 0 -.4rem 1.5rem #000; }
.pj-film::before, .pj-film::after { content: ""; position: absolute; z-index: 1; inset-inline: 0; height: 2cqh; background: repeating-linear-gradient(90deg, #f6edd8 0 2.2cqh, #05040a 0 4.4cqh); }
.pj-film::before { inset-block-start: .5cqh; } .pj-film::after { inset-block-end: .5cqh; }
.pj-run { display: flex; gap: 1cqh; width: max-content; height: 100%; padding-block: 3cqh; box-sizing: border-box; animation: pj-roll 48s linear infinite; }
.pj-run span { display: block; flex: none; width: 24cqh; height: 100%; overflow: hidden; background: #2a2533; }
.pj-run img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes pj-roll { to { transform: translateX(-50%); } }

@media (max-width: 899px) {
	.ns-sig--projector { min-height: 40rem; }
	.ns-sig--projector .ns-sig__inner { inset-block: 1rem auto; inset-inline: 1rem; width: auto; height: 44%; }
	.ns-sig--projector .ns-sig__title { font-size: clamp(6rem, 33vw, 12rem); }
	.pj-cur { display: none; }
	.pj-beam { --lx: 59cqw; --ly: 62cqh; clip-path: polygon(var(--lx) var(--ly), 96cqw 46cqh, 4cqw 46cqh); background: linear-gradient(0deg, #fff4d4 18%, #ffe9b855 85%); }
	.pj-p { inset-block-end: 16cqh; inset-inline: auto 6cqw; width: 36cqh; height: 36cqh; transform: rotate(-16deg); }
	.pj-seat { inset-block-end: 13cqh; }
	.pj-film { height: 16cqh; }
	.pj-run { padding-block: 2.8cqh; }
	.pj-run span { width: 19cqh; }
}

/* touches */
body.ns-sig-projector .ns-cat-block__head .ns-section-title::after { content: ""; display: block; width: 7rem; height: .5rem; margin-block-start: .35rem; background: repeating-linear-gradient(90deg, #a4133c 0 .5rem, transparent 0 .85rem); }
body.ns-sig-projector .ns-fc:hover .ns-fc__img { box-shadow: 0 0 0 3px #1d1a2f, 0 0 1.2rem #e9c46a; }
body.ns-sig-projector .ns-footer { border-block-start: .6rem solid #1d1a2f; }