/* Bimbo Jones night banner: everything moves with CSS; a still frame when motion is reduced */
.nb { position: relative; width: 100%; aspect-ratio: 1600 / 640; min-height: 220px; overflow: hidden; background: #07060c; }
.nb-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nb-link { display: block; }

/* The neon: a dark layer over each lit part, so opacity 1 = switched off */
.nb-off { opacity: 0; pointer-events: none; }
.nb-off-main { animation: nb-ignite 2s linear both, nb-flicker 11s linear 2s infinite; }
.nb-off-buzz { animation: nb-ignite 2.6s linear both, nb-buzz 5.3s linear 2.6s infinite; }
@keyframes nb-ignite { 0%, 30% { opacity: 1; } 34% { opacity: .15; } 38% { opacity: 1; } 46% { opacity: .3; } 50% { opacity: .9; } 56% { opacity: 0; } 60% { opacity: .7; } 70%, 100% { opacity: 0; } }
@keyframes nb-flicker { 0%, 41%, 43.5%, 77%, 78.6%, 100% { opacity: 0; } 42% { opacity: .55; } 43% { opacity: .2; } 77.8% { opacity: .45; } }
@keyframes nb-buzz { 0%, 60%, 62%, 63%, 67%, 88%, 90.5%, 100% { opacity: 0; } 61% { opacity: .9; } 64%, 66% { opacity: .8; } 88.6%, 90% { opacity: 1; } }
@keyframes nb-soul-0 { 0%, 2.5% { opacity: 1; } 3%, 60% { opacity: 0; } 61%, 65% { opacity: 1; } 66%, 71% { opacity: 0; } 72%, 75% { opacity: 1; } 76%, 92% { opacity: 0; } 93%, 100% { opacity: 1; } }
.nb-off-soul0 { animation: nb-soul-0 6s linear infinite; }
@keyframes nb-soul-1 { 0%, 10.5% { opacity: 1; } 11%, 60% { opacity: 0; } 61%, 65% { opacity: 1; } 66%, 71% { opacity: 0; } 72%, 75% { opacity: 1; } 76%, 92% { opacity: 0; } 93%, 100% { opacity: 1; } }
.nb-off-soul1 { animation: nb-soul-1 6s linear infinite; }
@keyframes nb-soul-2 { 0%, 18.5% { opacity: 1; } 19%, 60% { opacity: 0; } 61%, 65% { opacity: 1; } 66%, 71% { opacity: 0; } 72%, 75% { opacity: 1; } 76%, 92% { opacity: 0; } 93%, 100% { opacity: 1; } }
.nb-off-soul2 { animation: nb-soul-2 6s linear infinite; }
@keyframes nb-soul-3 { 0%, 26.5% { opacity: 1; } 27%, 60% { opacity: 0; } 61%, 65% { opacity: 1; } 66%, 71% { opacity: 0; } 72%, 75% { opacity: 1; } 76%, 92% { opacity: 0; } 93%, 100% { opacity: 1; } }
.nb-off-soul3 { animation: nb-soul-3 6s linear infinite; }
.nb-off-open { animation: nb-open 7s linear infinite; }
@keyframes nb-open { 0%, 79%, 81%, 83%, 100% { opacity: 0; } 80%, 82% { opacity: 1; } }
.nb-bulbs-a { animation: nb-bulb 1.2s steps(1) infinite; }
.nb-bulbs-b { animation: nb-bulb 1.2s steps(1) -.6s infinite; }
@keyframes nb-bulb { 0% { opacity: 1; } 50%, 100% { opacity: .08; } }

/* Life on the street: dancers on the beat (120 BPM), a TV upstairs (and its cat), a cigarette */
.nb-j { transform-origin: 0 0; transform-box: view-box; }
.nb-lu-0 { transform: translate(463.7px, 323.0px) rotate(160.0deg) translate(-463.7px, -323.0px); animation: nb-lu-0 4s ease-in-out -0.3s infinite; }
@keyframes nb-lu-0 { 0% { transform: translate(463.7px, 323.0px) rotate(160.0deg) translate(-463.7px, -323.0px); } 25% { transform: translate(463.7px, 323.0px) rotate(118.0deg) translate(-463.7px, -323.0px); } 50% { transform: translate(463.7px, 323.0px) rotate(92.0deg) translate(-463.7px, -323.0px); } 75% { transform: translate(463.7px, 323.0px) rotate(148.0deg) translate(-463.7px, -323.0px); } 100% { transform: translate(463.7px, 323.0px) rotate(160.0deg) translate(-463.7px, -323.0px); } }
.nb-lf-0 { transform: translate(463.7px, 345.8px) rotate(12.0deg) translate(-463.7px, -345.8px); animation: nb-lf-0 4s ease-in-out -0.3s infinite; }
@keyframes nb-lf-0 { 0% { transform: translate(463.7px, 345.8px) rotate(12.0deg) translate(-463.7px, -345.8px); } 25% { transform: translate(463.7px, 345.8px) rotate(30.0deg) translate(-463.7px, -345.8px); } 50% { transform: translate(463.7px, 345.8px) rotate(46.0deg) translate(-463.7px, -345.8px); } 75% { transform: translate(463.7px, 345.8px) rotate(22.0deg) translate(-463.7px, -345.8px); } 100% { transform: translate(463.7px, 345.8px) rotate(12.0deg) translate(-463.7px, -345.8px); } }
.nb-ru-0 { transform: translate(492.3px, 323.0px) rotate(-96.0deg) translate(-492.3px, -323.0px); animation: nb-ru-0 4s ease-in-out -0.3s infinite; }
@keyframes nb-ru-0 { 0% { transform: translate(492.3px, 323.0px) rotate(-96.0deg) translate(-492.3px, -323.0px); } 25% { transform: translate(492.3px, 323.0px) rotate(-150.0deg) translate(-492.3px, -323.0px); } 50% { transform: translate(492.3px, 323.0px) rotate(-172.0deg) translate(-492.3px, -323.0px); } 75% { transform: translate(492.3px, 323.0px) rotate(-112.0deg) translate(-492.3px, -323.0px); } 100% { transform: translate(492.3px, 323.0px) rotate(-96.0deg) translate(-492.3px, -323.0px); } }
.nb-rf-0 { transform: translate(492.3px, 345.8px) rotate(-42.0deg) translate(-492.3px, -345.8px); animation: nb-rf-0 4s ease-in-out -0.3s infinite; }
@keyframes nb-rf-0 { 0% { transform: translate(492.3px, 345.8px) rotate(-42.0deg) translate(-492.3px, -345.8px); } 25% { transform: translate(492.3px, 345.8px) rotate(-14.0deg) translate(-492.3px, -345.8px); } 50% { transform: translate(492.3px, 345.8px) rotate(-6.0deg) translate(-492.3px, -345.8px); } 75% { transform: translate(492.3px, 345.8px) rotate(-34.0deg) translate(-492.3px, -345.8px); } 100% { transform: translate(492.3px, 345.8px) rotate(-42.0deg) translate(-492.3px, -345.8px); } }
.nb-sway-0 { transform: translate(478.0px, 374.1px) rotate(3.0deg) translate(-478.0px, -374.1px); animation: nb-sway-0 4s ease-in-out -0.3s infinite; }
@keyframes nb-sway-0 { 0% { transform: translate(478.0px, 374.1px) rotate(3.0deg) translate(-478.0px, -374.1px); } 25% { transform: translate(478.0px, 374.1px) rotate(-2.0deg) translate(-478.0px, -374.1px); } 50% { transform: translate(478.0px, 374.1px) rotate(-4.0deg) translate(-478.0px, -374.1px); } 75% { transform: translate(478.0px, 374.1px) rotate(1.0deg) translate(-478.0px, -374.1px); } 100% { transform: translate(478.0px, 374.1px) rotate(3.0deg) translate(-478.0px, -374.1px); } }
.nb-head-0 { transform: translate(478.0px, 316.3px) rotate(-6.0deg) translate(-478.0px, -316.3px); animation: nb-head-0 4s ease-in-out -0.3s infinite; }
@keyframes nb-head-0 { 0% { transform: translate(478.0px, 316.3px) rotate(-6.0deg) translate(-478.0px, -316.3px); } 25% { transform: translate(478.0px, 316.3px) rotate(4.0deg) translate(-478.0px, -316.3px); } 50% { transform: translate(478.0px, 316.3px) rotate(8.0deg) translate(-478.0px, -316.3px); } 75% { transform: translate(478.0px, 316.3px) rotate(-3.0deg) translate(-478.0px, -316.3px); } 100% { transform: translate(478.0px, 316.3px) rotate(-6.0deg) translate(-478.0px, -316.3px); } }
.nb-bob-0 { animation: nb-bob 0.25s ease-in-out -0.1s infinite alternate; }
.nb-lu-1 { transform: translate(537.7px, 323.0px) rotate(22.0deg) translate(-537.7px, -323.0px); animation: nb-lu-1 3s ease-in-out -1.1s infinite; }
@keyframes nb-lu-1 { 0% { transform: translate(537.7px, 323.0px) rotate(22.0deg) translate(-537.7px, -323.0px); } 30% { transform: translate(537.7px, 323.0px) rotate(26.0deg) translate(-537.7px, -323.0px); } 50% { transform: translate(537.7px, 323.0px) rotate(142.0deg) translate(-537.7px, -323.0px); } 80% { transform: translate(537.7px, 323.0px) rotate(42.0deg) translate(-537.7px, -323.0px); } 100% { transform: translate(537.7px, 323.0px) rotate(22.0deg) translate(-537.7px, -323.0px); } }
.nb-lf-1 { transform: translate(537.7px, 345.8px) rotate(-96.0deg) translate(-537.7px, -345.8px); animation: nb-lf-1 3s ease-in-out -1.1s infinite; }
@keyframes nb-lf-1 { 0% { transform: translate(537.7px, 345.8px) rotate(-96.0deg) translate(-537.7px, -345.8px); } 30% { transform: translate(537.7px, 345.8px) rotate(-92.0deg) translate(-537.7px, -345.8px); } 50% { transform: translate(537.7px, 345.8px) rotate(4.0deg) translate(-537.7px, -345.8px); } 80% { transform: translate(537.7px, 345.8px) rotate(-10.0deg) translate(-537.7px, -345.8px); } 100% { transform: translate(537.7px, 345.8px) rotate(-96.0deg) translate(-537.7px, -345.8px); } }
.nb-ru-1 { transform: translate(566.3px, 323.0px) rotate(-148.0deg) translate(-566.3px, -323.0px); animation: nb-ru-1 3s ease-in-out -1.1s infinite; }
@keyframes nb-ru-1 { 0% { transform: translate(566.3px, 323.0px) rotate(-148.0deg) translate(-566.3px, -323.0px); } 30% { transform: translate(566.3px, 323.0px) rotate(-40.0deg) translate(-566.3px, -323.0px); } 50% { transform: translate(566.3px, 323.0px) rotate(-24.0deg) translate(-566.3px, -323.0px); } 80% { transform: translate(566.3px, 323.0px) rotate(-20.0deg) translate(-566.3px, -323.0px); } 100% { transform: translate(566.3px, 323.0px) rotate(-148.0deg) translate(-566.3px, -323.0px); } }
.nb-rf-1 { transform: translate(566.3px, 345.8px) rotate(-2.0deg) translate(-566.3px, -345.8px); animation: nb-rf-1 3s ease-in-out -1.1s infinite; }
@keyframes nb-rf-1 { 0% { transform: translate(566.3px, 345.8px) rotate(-2.0deg) translate(-566.3px, -345.8px); } 30% { transform: translate(566.3px, 345.8px) rotate(8.0deg) translate(-566.3px, -345.8px); } 50% { transform: translate(566.3px, 345.8px) rotate(96.0deg) translate(-566.3px, -345.8px); } 80% { transform: translate(566.3px, 345.8px) rotate(92.0deg) translate(-566.3px, -345.8px); } 100% { transform: translate(566.3px, 345.8px) rotate(-2.0deg) translate(-566.3px, -345.8px); } }
.nb-sway-1 { transform: translate(552.0px, 374.1px) rotate(2.0deg) translate(-552.0px, -374.1px); animation: nb-sway-1 3s ease-in-out -1.1s infinite; }
@keyframes nb-sway-1 { 0% { transform: translate(552.0px, 374.1px) rotate(2.0deg) translate(-552.0px, -374.1px); } 30% { transform: translate(552.0px, 374.1px) rotate(-1.0deg) translate(-552.0px, -374.1px); } 50% { transform: translate(552.0px, 374.1px) rotate(-2.0deg) translate(-552.0px, -374.1px); } 80% { transform: translate(552.0px, 374.1px) rotate(1.0deg) translate(-552.0px, -374.1px); } 100% { transform: translate(552.0px, 374.1px) rotate(2.0deg) translate(-552.0px, -374.1px); } }
.nb-head-1 { transform: translate(552.0px, 316.3px) rotate(-6.0deg) translate(-552.0px, -316.3px); animation: nb-head-1 3s ease-in-out -1.1s infinite; }
@keyframes nb-head-1 { 0% { transform: translate(552.0px, 316.3px) rotate(-6.0deg) translate(-552.0px, -316.3px); } 30% { transform: translate(552.0px, 316.3px) rotate(3.0deg) translate(-552.0px, -316.3px); } 50% { transform: translate(552.0px, 316.3px) rotate(6.0deg) translate(-552.0px, -316.3px); } 80% { transform: translate(552.0px, 316.3px) rotate(-2.0deg) translate(-552.0px, -316.3px); } 100% { transform: translate(552.0px, 316.3px) rotate(-6.0deg) translate(-552.0px, -316.3px); } }
.nb-bob-1 { animation: nb-bob 0.25s ease-in-out -0.36s infinite alternate; }
.nb-lu-2 { transform: translate(943.7px, 323.0px) rotate(150.0deg) translate(-943.7px, -323.0px); animation: nb-lu-2 4s ease-in-out -2.2s infinite; }
@keyframes nb-lu-2 { 0% { transform: translate(943.7px, 323.0px) rotate(150.0deg) translate(-943.7px, -323.0px); } 50% { transform: translate(943.7px, 323.0px) rotate(172.0deg) translate(-943.7px, -323.0px); } 100% { transform: translate(943.7px, 323.0px) rotate(150.0deg) translate(-943.7px, -323.0px); } }
.nb-lf-2 { transform: translate(943.7px, 345.8px) rotate(26.0deg) translate(-943.7px, -345.8px); animation: nb-lf-2 4s ease-in-out -2.2s infinite; }
@keyframes nb-lf-2 { 0% { transform: translate(943.7px, 345.8px) rotate(26.0deg) translate(-943.7px, -345.8px); } 50% { transform: translate(943.7px, 345.8px) rotate(6.0deg) translate(-943.7px, -345.8px); } 100% { transform: translate(943.7px, 345.8px) rotate(26.0deg) translate(-943.7px, -345.8px); } }
.nb-ru-2 { transform: translate(972.3px, 323.0px) rotate(-166.0deg) translate(-972.3px, -323.0px); animation: nb-ru-2 4s ease-in-out -2.2s infinite; }
@keyframes nb-ru-2 { 0% { transform: translate(972.3px, 323.0px) rotate(-166.0deg) translate(-972.3px, -323.0px); } 50% { transform: translate(972.3px, 323.0px) rotate(-138.0deg) translate(-972.3px, -323.0px); } 100% { transform: translate(972.3px, 323.0px) rotate(-166.0deg) translate(-972.3px, -323.0px); } }
.nb-rf-2 { transform: translate(972.3px, 345.8px) rotate(-10.0deg) translate(-972.3px, -345.8px); animation: nb-rf-2 4s ease-in-out -2.2s infinite; }
@keyframes nb-rf-2 { 0% { transform: translate(972.3px, 345.8px) rotate(-10.0deg) translate(-972.3px, -345.8px); } 50% { transform: translate(972.3px, 345.8px) rotate(-32.0deg) translate(-972.3px, -345.8px); } 100% { transform: translate(972.3px, 345.8px) rotate(-10.0deg) translate(-972.3px, -345.8px); } }
.nb-sway-2 { transform: translate(958.0px, 374.1px) rotate(-5.0deg) translate(-958.0px, -374.1px); animation: nb-sway-2 4s ease-in-out -2.2s infinite; }
@keyframes nb-sway-2 { 0% { transform: translate(958.0px, 374.1px) rotate(-5.0deg) translate(-958.0px, -374.1px); } 50% { transform: translate(958.0px, 374.1px) rotate(5.0deg) translate(-958.0px, -374.1px); } 100% { transform: translate(958.0px, 374.1px) rotate(-5.0deg) translate(-958.0px, -374.1px); } }
.nb-head-2 { transform: translate(958.0px, 316.3px) rotate(-8.0deg) translate(-958.0px, -316.3px); animation: nb-head-2 4s ease-in-out -2.2s infinite; }
@keyframes nb-head-2 { 0% { transform: translate(958.0px, 316.3px) rotate(-8.0deg) translate(-958.0px, -316.3px); } 50% { transform: translate(958.0px, 316.3px) rotate(8.0deg) translate(-958.0px, -316.3px); } 100% { transform: translate(958.0px, 316.3px) rotate(-8.0deg) translate(-958.0px, -316.3px); } }
.nb-bob-2 { animation: nb-bob 0.5s ease-in-out -0.6s infinite alternate; }
.nb-lu-3 { transform: translate(1021.7px, 323.0px) rotate(164.0deg) translate(-1021.7px, -323.0px); animation: nb-lu-3 2s ease-in-out -0.7s infinite; }
@keyframes nb-lu-3 { 0% { transform: translate(1021.7px, 323.0px) rotate(164.0deg) translate(-1021.7px, -323.0px); } 22% { transform: translate(1021.7px, 323.0px) rotate(122.0deg) translate(-1021.7px, -323.0px); } 50% { transform: translate(1021.7px, 323.0px) rotate(166.0deg) translate(-1021.7px, -323.0px); } 75% { transform: translate(1021.7px, 323.0px) rotate(58.0deg) translate(-1021.7px, -323.0px); } 100% { transform: translate(1021.7px, 323.0px) rotate(164.0deg) translate(-1021.7px, -323.0px); } }
.nb-lf-3 { transform: translate(1021.7px, 345.8px) rotate(-48.0deg) translate(-1021.7px, -345.8px); animation: nb-lf-3 2s ease-in-out -0.7s infinite; }
@keyframes nb-lf-3 { 0% { transform: translate(1021.7px, 345.8px) rotate(-48.0deg) translate(-1021.7px, -345.8px); } 22% { transform: translate(1021.7px, 345.8px) rotate(-22.0deg) translate(-1021.7px, -345.8px); } 50% { transform: translate(1021.7px, 345.8px) rotate(-50.0deg) translate(-1021.7px, -345.8px); } 75% { transform: translate(1021.7px, 345.8px) rotate(-74.0deg) translate(-1021.7px, -345.8px); } 100% { transform: translate(1021.7px, 345.8px) rotate(-48.0deg) translate(-1021.7px, -345.8px); } }
.nb-ru-3 { transform: translate(1050.3px, 323.0px) rotate(-164.0deg) translate(-1050.3px, -323.0px); animation: nb-ru-3 2s ease-in-out -0.7s infinite; }
@keyframes nb-ru-3 { 0% { transform: translate(1050.3px, 323.0px) rotate(-164.0deg) translate(-1050.3px, -323.0px); } 22% { transform: translate(1050.3px, 323.0px) rotate(-152.0deg) translate(-1050.3px, -323.0px); } 50% { transform: translate(1050.3px, 323.0px) rotate(-166.0deg) translate(-1050.3px, -323.0px); } 75% { transform: translate(1050.3px, 323.0px) rotate(-54.0deg) translate(-1050.3px, -323.0px); } 100% { transform: translate(1050.3px, 323.0px) rotate(-164.0deg) translate(-1050.3px, -323.0px); } }
.nb-rf-3 { transform: translate(1050.3px, 345.8px) rotate(48.0deg) translate(-1050.3px, -345.8px); animation: nb-rf-3 2s ease-in-out -0.7s infinite; }
@keyframes nb-rf-3 { 0% { transform: translate(1050.3px, 345.8px) rotate(48.0deg) translate(-1050.3px, -345.8px); } 22% { transform: translate(1050.3px, 345.8px) rotate(36.0deg) translate(-1050.3px, -345.8px); } 50% { transform: translate(1050.3px, 345.8px) rotate(50.0deg) translate(-1050.3px, -345.8px); } 75% { transform: translate(1050.3px, 345.8px) rotate(78.0deg) translate(-1050.3px, -345.8px); } 100% { transform: translate(1050.3px, 345.8px) rotate(48.0deg) translate(-1050.3px, -345.8px); } }
.nb-sway-3 { transform: translate(1036.0px, 374.1px) rotate(0.0deg) translate(-1036.0px, -374.1px); animation: nb-sway-3 2s ease-in-out -0.7s infinite; }
@keyframes nb-sway-3 { 0% { transform: translate(1036.0px, 374.1px) rotate(0.0deg) translate(-1036.0px, -374.1px); } 22% { transform: translate(1036.0px, 374.1px) rotate(-2.0deg) translate(-1036.0px, -374.1px); } 50% { transform: translate(1036.0px, 374.1px) rotate(0.0deg) translate(-1036.0px, -374.1px); } 75% { transform: translate(1036.0px, 374.1px) rotate(2.0deg) translate(-1036.0px, -374.1px); } 100% { transform: translate(1036.0px, 374.1px) rotate(0.0deg) translate(-1036.0px, -374.1px); } }
.nb-head-3 { transform: translate(1036.0px, 316.3px) rotate(-4.0deg) translate(-1036.0px, -316.3px); animation: nb-head-3 2s ease-in-out -0.7s infinite; }
@keyframes nb-head-3 { 0% { transform: translate(1036.0px, 316.3px) rotate(-4.0deg) translate(-1036.0px, -316.3px); } 22% { transform: translate(1036.0px, 316.3px) rotate(2.0deg) translate(-1036.0px, -316.3px); } 50% { transform: translate(1036.0px, 316.3px) rotate(4.0deg) translate(-1036.0px, -316.3px); } 75% { transform: translate(1036.0px, 316.3px) rotate(-2.0deg) translate(-1036.0px, -316.3px); } 100% { transform: translate(1036.0px, 316.3px) rotate(-4.0deg) translate(-1036.0px, -316.3px); } }
.nb-bob-3 { animation: nb-bob 0.25s ease-in-out 0s infinite alternate; }
.nb-lu-4 { transform: translate(1089.7px, 323.0px) rotate(34.0deg) translate(-1089.7px, -323.0px); animation: nb-lu-4 3s ease-in-out -1.9s infinite; }
@keyframes nb-lu-4 { 0% { transform: translate(1089.7px, 323.0px) rotate(34.0deg) translate(-1089.7px, -323.0px); } 17% { transform: translate(1089.7px, 323.0px) rotate(42.0deg) translate(-1089.7px, -323.0px); } 34% { transform: translate(1089.7px, 323.0px) rotate(36.0deg) translate(-1089.7px, -323.0px); } 50% { transform: translate(1089.7px, 323.0px) rotate(34.0deg) translate(-1089.7px, -323.0px); } 67% { transform: translate(1089.7px, 323.0px) rotate(30.0deg) translate(-1089.7px, -323.0px); } 84% { transform: translate(1089.7px, 323.0px) rotate(62.0deg) translate(-1089.7px, -323.0px); } 100% { transform: translate(1089.7px, 323.0px) rotate(34.0deg) translate(-1089.7px, -323.0px); } }
.nb-lf-4 { transform: translate(1089.7px, 345.8px) rotate(-116.0deg) translate(-1089.7px, -345.8px); animation: nb-lf-4 3s ease-in-out -1.9s infinite; }
@keyframes nb-lf-4 { 0% { transform: translate(1089.7px, 345.8px) rotate(-116.0deg) translate(-1089.7px, -345.8px); } 17% { transform: translate(1089.7px, 345.8px) rotate(-122.0deg) translate(-1089.7px, -345.8px); } 34% { transform: translate(1089.7px, 345.8px) rotate(-116.0deg) translate(-1089.7px, -345.8px); } 50% { transform: translate(1089.7px, 345.8px) rotate(-114.0deg) translate(-1089.7px, -345.8px); } 67% { transform: translate(1089.7px, 345.8px) rotate(-110.0deg) translate(-1089.7px, -345.8px); } 84% { transform: translate(1089.7px, 345.8px) rotate(-86.0deg) translate(-1089.7px, -345.8px); } 100% { transform: translate(1089.7px, 345.8px) rotate(-116.0deg) translate(-1089.7px, -345.8px); } }
.nb-ru-4 { transform: translate(1118.3px, 323.0px) rotate(-30.0deg) translate(-1118.3px, -323.0px); animation: nb-ru-4 3s ease-in-out -1.9s infinite; }
@keyframes nb-ru-4 { 0% { transform: translate(1118.3px, 323.0px) rotate(-30.0deg) translate(-1118.3px, -323.0px); } 17% { transform: translate(1118.3px, 323.0px) rotate(-62.0deg) translate(-1118.3px, -323.0px); } 34% { transform: translate(1118.3px, 323.0px) rotate(-170.0deg) translate(-1118.3px, -323.0px); } 50% { transform: translate(1118.3px, 323.0px) rotate(-168.0deg) translate(-1118.3px, -323.0px); } 67% { transform: translate(1118.3px, 323.0px) rotate(-40.0deg) translate(-1118.3px, -323.0px); } 84% { transform: translate(1118.3px, 323.0px) rotate(-34.0deg) translate(-1118.3px, -323.0px); } 100% { transform: translate(1118.3px, 323.0px) rotate(-30.0deg) translate(-1118.3px, -323.0px); } }
.nb-rf-4 { transform: translate(1118.3px, 345.8px) rotate(112.0deg) translate(-1118.3px, -345.8px); animation: nb-rf-4 3s ease-in-out -1.9s infinite; }
@keyframes nb-rf-4 { 0% { transform: translate(1118.3px, 345.8px) rotate(112.0deg) translate(-1118.3px, -345.8px); } 17% { transform: translate(1118.3px, 345.8px) rotate(84.0deg) translate(-1118.3px, -345.8px); } 34% { transform: translate(1118.3px, 345.8px) rotate(-8.0deg) translate(-1118.3px, -345.8px); } 50% { transform: translate(1118.3px, 345.8px) rotate(-12.0deg) translate(-1118.3px, -345.8px); } 67% { transform: translate(1118.3px, 345.8px) rotate(116.0deg) translate(-1118.3px, -345.8px); } 84% { transform: translate(1118.3px, 345.8px) rotate(112.0deg) translate(-1118.3px, -345.8px); } 100% { transform: translate(1118.3px, 345.8px) rotate(112.0deg) translate(-1118.3px, -345.8px); } }
.nb-sway-4 { transform: translate(1104.0px, 374.1px) rotate(-2.0deg) translate(-1104.0px, -374.1px); animation: nb-sway-4 3s ease-in-out -1.9s infinite; }
@keyframes nb-sway-4 { 0% { transform: translate(1104.0px, 374.1px) rotate(-2.0deg) translate(-1104.0px, -374.1px); } 17% { transform: translate(1104.0px, 374.1px) rotate(2.0deg) translate(-1104.0px, -374.1px); } 34% { transform: translate(1104.0px, 374.1px) rotate(-3.0deg) translate(-1104.0px, -374.1px); } 50% { transform: translate(1104.0px, 374.1px) rotate(-2.0deg) translate(-1104.0px, -374.1px); } 67% { transform: translate(1104.0px, 374.1px) rotate(2.0deg) translate(-1104.0px, -374.1px); } 84% { transform: translate(1104.0px, 374.1px) rotate(1.0deg) translate(-1104.0px, -374.1px); } 100% { transform: translate(1104.0px, 374.1px) rotate(-2.0deg) translate(-1104.0px, -374.1px); } }
.nb-head-4 { transform: translate(1104.0px, 316.3px) rotate(-3.0deg) translate(-1104.0px, -316.3px); animation: nb-head-4 3s ease-in-out -1.9s infinite; }
@keyframes nb-head-4 { 0% { transform: translate(1104.0px, 316.3px) rotate(-3.0deg) translate(-1104.0px, -316.3px); } 17% { transform: translate(1104.0px, 316.3px) rotate(3.0deg) translate(-1104.0px, -316.3px); } 34% { transform: translate(1104.0px, 316.3px) rotate(-6.0deg) translate(-1104.0px, -316.3px); } 50% { transform: translate(1104.0px, 316.3px) rotate(-5.0deg) translate(-1104.0px, -316.3px); } 67% { transform: translate(1104.0px, 316.3px) rotate(2.0deg) translate(-1104.0px, -316.3px); } 84% { transform: translate(1104.0px, 316.3px) rotate(4.0deg) translate(-1104.0px, -316.3px); } 100% { transform: translate(1104.0px, 316.3px) rotate(-3.0deg) translate(-1104.0px, -316.3px); } }
.nb-bob-4 { animation: nb-bob 0.25s ease-in-out -0.22s infinite alternate; }
@keyframes nb-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.nb-tv { opacity: .12; animation: nb-tv 2.3s steps(1) infinite; }
@keyframes nb-tv { 0% { opacity: .12; } 18% { opacity: .3; } 31% { opacity: .08; } 47% { opacity: .22; } 63% { opacity: .14; } 80% { opacity: .34; } }
/* the cat in the TV window: a visit every ten minutes, the first a minute after the page opens.
   Marc, 29 October: never while the rainbow is up, so js/night-banner.js moves its visits clear of the rainbow's */
.nb-cat { transform: translateY(34px); animation: nb-cat 600s linear -540s infinite; }
@keyframes nb-cat { 0% { transform: translateY(34px); } .09% { transform: translateY(-3px); } .13%, 2.55% { transform: translateY(0); } 2.6% { transform: translateY(-2px); } 2.7%, 100% { transform: translateY(34px); } }
.nb-cat-head { transform-box: fill-box; transform-origin: 50% 85%; animation: nb-cat-head 600s ease-in-out -540s infinite; }
@keyframes nb-cat-head { 0%, .5% { transform: rotate(0); } .7%, 1.1% { transform: rotate(-14deg); } 1.3%, 1.6% { transform: rotate(0); } 1.8%, 2.2% { transform: rotate(12deg); } 2.4%, 100% { transform: rotate(0); } }
.nb-cat-tail { transform-box: fill-box; transform-origin: 0 100%; animation: nb-cat-tail 600s ease-in-out -540s infinite; }
@keyframes nb-cat-tail { 0%, .2% { transform: rotate(0); } .45% { transform: rotate(-22deg); } .7% { transform: rotate(10deg); } .95% { transform: rotate(-18deg); } 1.2% { transform: rotate(8deg); } 1.5% { transform: rotate(-20deg); } 1.8% { transform: rotate(12deg); } 2.1% { transform: rotate(-16deg); } 2.4%, 100% { transform: rotate(0); } }
.nb-cat-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: nb-cat-eyes 600s linear -540s infinite; }
@keyframes nb-cat-eyes { 0%, 1.49%, 1.54%, 2.19%, 2.23%, 100% { transform: scaleY(1); } 1.5%, 1.53%, 2.2%, 2.22% { transform: scaleY(.1); } }

/* Marc, 29 October: every 20 minutes a rainbow fades in over 30 s, stays 3 minutes and fades out over 30 s.
   js/night-banner.js sets its delay from the clock, so everyone sees it at :00, :20 and :40 past the hour.
   Without the script it comes 15 minutes after the page opens, clear of the cat */
.nb-rainbow { opacity: 0; mix-blend-mode: screen; pointer-events: none; animation: nb-rainbow 1200s linear -300s infinite; }
@keyframes nb-rainbow { 0% { opacity: 0; animation-timing-function: ease-in-out; } 2.5%, 17.5% { opacity: 1; animation-timing-function: ease-in-out; } 20%, 100% { opacity: 0; } }
.nb-ember { opacity: .5; animation: nb-ember 4.5s ease-in-out infinite; }
@keyframes nb-ember { 0%, 60%, 100% { opacity: .45; } 70% { opacity: 1; } 78% { opacity: .9; } }
.nb-steam { opacity: 0; transform-box: fill-box; transform-origin: 50% 80%; animation: nb-steam 6s ease-out infinite; }
.nb-steam-1 { animation-delay: -1.5s; }
.nb-steam-2 { animation-delay: -3s; }
.nb-steam-3 { animation-delay: -4.5s; }
@keyframes nb-steam { 0% { transform: translate(0, 0) scale(.45); opacity: 0; } 18% { opacity: .32; } 100% { transform: translate(-30px, -150px) scale(2); opacity: 0; } }

/* The cars and the camper cruise at a steady speed with the wheels turning to match (no hopping, no rumble).
   The reflections in the paint stay put while the car moves under them. */
.nb-car-l { transform: translateX(2600px); animation: nb-drive-l 20s linear -5s infinite; }
@keyframes nb-drive-l { 0%, 5% { transform: translateX(2600px); } 38%, 100% { transform: translateX(-100px); } }
.nb-slide-l { transform: translateX(2780.5px); animation: nb-slide-l 20s linear -5s infinite; }
@keyframes nb-slide-l { 0%, 5% { transform: translateX(2780.5px); } 38%, 100% { transform: translateX(-106.9px); } }
.nb-spin-l { animation: nb-spin 0.517s linear infinite; }
.nb-car-p { transform: translateX(1100px); animation: nb-drive-p 40s linear -5s infinite; }
@keyframes nb-drive-p { 0%, 31% { transform: translateX(2600px); } 47%, 100% { transform: translateX(-100px); } }
.nb-slide-p { transform: translateX(1176.4px); animation: nb-slide-p 40s linear -5s infinite; }
@keyframes nb-slide-p { 0%, 31% { transform: translateX(2780.5px); } 47%, 100% { transform: translateX(-106.9px); } }
.nb-spin-p { animation: nb-spin 0.482s linear infinite; }
.nb-car-r { transform: translateX(-1100px); animation: nb-drive-r 40s linear -5s infinite; }
@keyframes nb-drive-r { 0% { transform: translateX(-1100px); } 22%, 100% { transform: translateX(1700px); } }
.nb-slide-r { transform: translateX(1088.0px); animation: nb-slide-r 40s linear -5s infinite; }
@keyframes nb-slide-r { 0% { transform: translateX(1088.0px); } 22%, 100% { transform: translateX(-1681.5px); } }
.nb-spin-r { animation: nb-spin 0.719s linear infinite; }
.nb-car-v { transform: translateX(1110px); animation: nb-drive-v 40s linear -5s infinite; }
@keyframes nb-drive-v { 0%, 26% { transform: translateX(-1040px); } 61%, 100% { transform: translateX(1700px); } }
.nb-slide-v { transform: translateX(-1097.9px); animation: nb-slide-v 40s linear -5s infinite; }
@keyframes nb-slide-v { 0%, 26% { transform: translateX(1028.7px); } 61%, 100% { transform: translateX(-1681.5px); } }
.nb-spin-v { animation: nb-spin 1.006s linear infinite; }
.nb-car-s { transform: translateX(110px); animation: nb-drive-s 40s linear -5s infinite; }
@keyframes nb-drive-s { 0%, 67% { transform: translateX(-1150px); } 96%, 100% { transform: translateX(1700px); } }
.nb-slide-s { transform: translateX(-108.8px); animation: nb-slide-s 40s linear -5s infinite; }
@keyframes nb-slide-s { 0%, 67% { transform: translateX(1137.5px); } 96%, 100% { transform: translateX(-1681.5px); } }
.nb-spin-s { animation: nb-spin 0.985s linear infinite; }
@keyframes nb-spin { to { transform: rotate(360deg); } }

.nb.is-paused * { animation-play-state: paused !important; }
/* the rainbow and the cat keep time with the clock, so they never meet */
.nb.is-paused .nb-rainbow, .nb.is-paused .nb-cat, .nb.is-paused .nb-cat-head, .nb.is-paused .nb-cat-tail, .nb.is-paused .nb-cat-eyes { animation-play-state: running !important; }
@media (prefers-reduced-motion: reduce) {
  .nb * { animation: none !important; }
}