/* HaDerech: driving at night into a rising moon. Real perspective: dashes, posts and road signs carrying the site's sections rush at the viewer. */
.ns-sig--road { --sig-bg: #0a1020; --sig-fg: #fff; min-height: clamp(36rem, 88svh, 52rem); align-items: start; padding-block-start: clamp(1.5rem, 5.5vh, 3.5rem); }
.ns-sig--road .ns-sig__art { container-type: size; background: linear-gradient(#0a1020, #0d1f2e 26%, #164049 42%, #a5683a 53%, #f0a64a 57%); }
.ns-sig--road .ns-sig__inner { justify-items: center; text-align: center; gap: 1rem; }
.ns-sig--road .ns-sig__title { font-size: clamp(6.5rem, 15vw, 13.5rem); font-weight: 900; line-height: .95; letter-spacing: -.02em; text-shadow: 0 .012em 0 #fde047, 0 .024em 0 #f0ce2e, 0 .036em 0 #c9a51c, 0 .048em 0 #8a7312, 0 .11em .12em #0009; transform: perspective(44rem) rotateX(24deg); transform-origin: 50% 100%; animation: rd-come 2.2s cubic-bezier(.15, .7, .2, 1) both; }
@keyframes rd-come { from { transform: perspective(44rem) rotateX(24deg) translateY(.32em) scale(.72); } }
.ns-sig--road .ns-sig__tagline { max-width: none; font-size: clamp(1.15rem, 2.1vw, 1.7rem); font-weight: 500; color: #fff; text-shadow: 0 1px 6px #0a1020; }

.rd-stars { position: absolute; inset: 0 0 auto; width: 100%; height: 56cqh; fill: none; stroke: #fff; stroke-linecap: round; }
.rd-stars .a { stroke-width: 1.5; opacity: .7; }
.rd-stars .b { stroke-width: 2.6; animation: rd-tw 3.4s ease-in-out infinite alternate; }
@keyframes rd-tw { to { opacity: .35; } }
.rd-moon { --hz: 58cqh; position: absolute; inset-block-start: calc(var(--hz) - 17cqh); left: 50%; width: 22cqh; height: 22cqh; margin-inline: -11cqh; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #fffbe0, #fde047 62%, #f6b73c); box-shadow: 0 0 5cqh 1cqh #fde04766, 0 0 18cqh 6cqh #f0a64a55; }

/* the world banks a little with the mouse, around the vanishing point */
.rd-w { --hz: 58cqh; --cam: 27cqh; --k: 2.05; position: absolute; inset: 0; transform-origin: 50% var(--hz); transform: rotate(calc((var(--mx) - .5) * -2.4deg)) scale(1.05); transition: transform .5s ease-out; }
.rd-hills { position: absolute; inset-inline: -5%; width: 110%; top: calc(var(--hz) - 19cqh); height: 19.2cqh; }
.rd-hills .f { fill: #17323c; } .rd-hills .n { fill: #0b1c22; }
.rd-hills .t { fill: none; stroke: #fde047; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rd-ground { position: absolute; inset: var(--hz) -30% -5%; background: repeating-conic-gradient(from 90deg at 50% 0, #0c2925 0 1.5deg, #08201c 0 3deg); }
.rd-ground::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0a1a1c 0, transparent 22%, transparent 70%, #030809); }
.rd-road { --X: calc(var(--k) * 44cqh); position: absolute; inset: var(--hz) 0 -5%; background: radial-gradient(52% 72% at 50% 106%, #8f8767, #3b3d3a 58%, #1b2226); clip-path: polygon(50% 0, calc(50% + var(--X)) 100%, calc(50% - var(--X)) 100%); }
.rd-road::after { content: ""; position: absolute; inset: 0; background: #e8ecef; clip-path: polygon(50% 0, calc(50% + var(--X) * .985) 100%, calc(50% + var(--X) * .95) 100%, 50% 0, calc(50% - var(--X) * .95) 100%, calc(50% - var(--X) * .985) 100%); }

/* the 3D stage: x is a share of the road's half width, y the height of the eye, z runs from far ahead to behind the viewer */
.rd-3d { position: absolute; inset: 0; perspective: 100cqh; perspective-origin: 50% var(--hz); }
.rd-l { --px: calc(var(--x, 0) * var(--k) * var(--cam)); position: absolute; left: 50%; top: var(--hz); width: 0; height: 0; transform-style: preserve-3d; }
.rd-l > * { position: absolute; --z: calc(var(--i) / var(--n) * 685cqh - 600cqh); animation: rd-run var(--T) linear infinite; animation-delay: calc(var(--i) / var(--n) * var(--T) * -1); }
.rd-l > :nth-child(2) { --i: 1; } .rd-l > :nth-child(3) { --i: 2; } .rd-l > :nth-child(4) { --i: 3; } .rd-l > :nth-child(5) { --i: 4; } .rd-l > :nth-child(6) { --i: 5; } .rd-l > :nth-child(7) { --i: 6; } .rd-l > :nth-child(8) { --i: 7; }
.rd-l > :first-child { --i: 0; }
@keyframes rd-run { from { opacity: 0; transform: translate3d(var(--px), var(--py), -600cqh) var(--tilt, rotate(0)); } 9% { opacity: 1; } to { opacity: 1; transform: translate3d(var(--px), var(--py), 85cqh) var(--tilt, rotate(0)); } }
.rd-d { --n: 8; --T: 4.4s; --py: var(--cam); --tilt: rotateX(90deg); }
.rd-d i { width: 1.5cqh; height: 44cqh; margin: -22cqh -.75cqh; background: #fde047; transform: translate3d(var(--px), var(--py), var(--z)) rotateX(90deg); }
.rd-p { --n: 6; --T: 3.3s; --py: var(--cam); }
.rd-p i { bottom: 0; width: 1.3cqh; height: 8cqh; margin-inline: -.65cqh; transform-origin: 50% 100%; background: linear-gradient(#e8ecef 0 22%, #fde047 0 40%, #e8ecef 0 62%, #5c6468 0); transform: translate3d(var(--px), var(--py), var(--z)); }
.rd-s { --n: 4; --T: 8.8s; --py: var(--cam); }
.rd-s b { --px: calc(var(--k) * var(--cam) * 1.42); box-sizing: border-box; display: grid; place-items: center; bottom: 26cqh; width: 40cqh; min-height: 12cqh; margin-inline: -20cqh; padding: 1cqh 2cqh; color: #fff; font: 800 3.6cqh/1.1 var(--ns-font-heading, inherit); text-align: center; background: #047857; border: .5cqh solid #fff; outline: .35cqh solid #047857; border-radius: 1.3cqh; transform: translate3d(var(--px), var(--py), var(--z)); }
.rd-s b::after { content: ""; position: absolute; inset-block-start: 100%; left: 50%; width: 1.3cqh; height: 27cqh; margin-inline: -.65cqh; background: #5c6468; }
.rd-s b:nth-child(2n) { --px: calc(var(--k) * var(--cam) * -1.42); }

@media (max-width: 767px) {
	.ns-sig--road { min-height: 38rem; padding-block-start: 1rem; }
	.ns-sig--road .ns-sig__title { font-size: clamp(5.5rem, 31vw, 8.5rem); }
	.ns-sig--road .ns-sig__tagline { max-width: 20ch; }
	.ns-sig--road .ns-sig__art { background: linear-gradient(#0a1020, #0d1f2e 28%, #164049 42%, #a5683a 52%, #f0a64a 56%); }
	.rd-w { --hz: 56cqh; --cam: 26cqh; --k: .95; }
	.rd-moon { --hz: 56cqh; width: 15cqh; height: 15cqh; margin-inline: -7.5cqh; inset-block-start: calc(var(--hz) - 12cqh); }
	.rd-stars { height: 56cqh; }
	.rd-s b { width: 30cqh; margin-inline: -15cqh; font-size: 2.7cqh; }
}

/* touches: a run of centre-line dashes under section titles; cards pass by like a sign */
body.ns-sig-road .ns-cat-block__head .ns-section-title::after { content: ""; display: block; width: 4.5rem; height: .28rem; margin-block-start: .35rem; background: repeating-linear-gradient(90deg, #d9a400 0 1.1rem, transparent 0 1.6rem); }
body.ns-sig-road .ns-fc { transition: transform .25s ease-out; }
body.ns-sig-road .ns-fc:hover { transform: perspective(40rem) translateZ(1.2rem); }
body.ns-sig-road .ns-footer { border-block-start: .4rem solid; border-image: repeating-linear-gradient(90deg, #fde047 0 3rem, #1f2a30 0 4.5rem) 1; }