/* The neighbourhood chart (homepage section two). Dark stage, warm glow from the Milky Way's centre, frosted cards.
   Sizes inside the chart use cqw (one per cent of the chart's width), so the whole picture scales as one. */
.nb-stage{position:relative;overflow:hidden;background:#020304;isolation:isolate;min-height:100svh;display:flex;align-items:center;color:var(--ink,#f3eee7)}
.nb-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 92% 48%,rgba(255,150,80,.16),transparent 70%),
             radial-gradient(45% 55% at 62% 50%,rgba(70,110,200,.10),transparent 70%),
             radial-gradient(120% 80% at 50% 120%,rgba(20,24,40,.9),transparent 60%)}
.nb-wrap{width:100%;max-width:1520px;margin:0 auto;padding:clamp(28px,5vh,64px) clamp(20px,4vw,72px);
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);grid-template-areas:"head chart" "body chart";grid-template-rows:auto 1fr;
  column-gap:clamp(20px,3vw,56px);align-items:center}
.nb-head{grid-area:head;align-self:end}
.nb-body{grid-area:body;align-self:start}
.nb-chart{grid-area:chart}
.nb-kicker{margin:0 0 12px;font:400 11px/1 var(--mono,"Geist Mono",monospace);letter-spacing:.24em;text-transform:uppercase;color:var(--star,#ffa552)}
.nb-title{margin:0 0 18px;max-width:14ch;font:400 clamp(38px,4.4vw,66px)/.98 var(--serif,"Instrument Serif",Georgia,serif);letter-spacing:-.01em}
.nb-text{margin:0 0 22px;max-width:44ch;font:300 16px/1.6 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.84)}
.nb-key{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px}
.nb-key li{position:relative;padding-left:22px;font:400 12.5px/1.4 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.62)}
.nb-key li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;border-radius:50%;border:1px solid rgba(243,238,231,.45)}
.nb-key li:nth-child(2)::before{background:radial-gradient(circle,#ffd27a 0 30%,transparent 34%);border-color:rgba(255,210,122,.6)}
.nb-key li:nth-child(3)::before{background:radial-gradient(circle,rgba(255,160,90,.9),transparent 70%);border:0}
.nb-key li:nth-child(4)::before{background:radial-gradient(circle at 35% 35%,#9cc6ff,#2b5aa8);border:0}
.nb-credit{margin:18px 0 0;max-width:46ch;font:400 10.5px/1.45 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.38)}

/* 1. The chart itself: a square that scales as one piece */
.nb-chart{position:relative;width:100%;max-width:min(900px,92svh);aspect-ratio:1;justify-self:center;container-type:inline-size}
.nb-svg,.nb-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nb-layer{pointer-events:none}
.nb-ring{fill:none;stroke:rgba(243,238,231,.13);stroke-width:1}
.nb-bezel{fill:none;stroke:rgba(243,238,231,.16);stroke-width:1}
.nb-tick{stroke:rgba(243,238,231,.2);stroke-width:1}.nb-tick-long{stroke:rgba(255,200,150,.42)}
.nb-ring-label{fill:rgba(243,238,231,.4);font:400 13px var(--mono,"Geist Mono",monospace);letter-spacing:.06em}
.nb-gc{fill:rgba(255,200,150,.7);font:400 14px var(--mono,"Geist Mono",monospace);letter-spacing:.08em;text-transform:uppercase}
.nb-solar{fill:rgba(255,214,140,.05);stroke:rgba(255,214,140,.45);stroke-width:1.2;stroke-dasharray:2 5}
.nb-orbit{fill:none;stroke:rgba(243,238,231,.18);stroke-width:1}
.nb-sun{fill:#ffd27a;filter:drop-shadow(0 0 8px #ffb547) drop-shadow(0 0 20px rgba(255,170,60,.7))}
.nb-solar-label{fill:rgba(255,214,140,.85);font:400 14px var(--mono,"Geist Mono",monospace);letter-spacing:.14em;text-transform:uppercase}
.nb-proxima{fill:#ff8a6a;filter:drop-shadow(0 0 5px #ff6a4a)}
.nb-proxima-label{fill:rgba(243,238,231,.5);font:400 12px var(--sans,"Geist",Arial,sans-serif)}
.nb-beam{stroke-width:1.6;stroke-dasharray:1 9;stroke-linecap:round;opacity:.7;animation:nbBeam 2.4s linear infinite}
.nb-beam-base{stroke-width:1;opacity:.14}
@keyframes nbBeam{to{stroke-dashoffset:-20}}   /* the dashes run from each star towards Earth: its light coming to us */
.nb-pulse{fill:none;stroke:rgba(150,200,255,.55);stroke-width:2;filter:drop-shadow(0 0 6px rgba(150,200,255,.8));opacity:0}

/* 2. Things that go round: Earth round the Sun, each planet round its star */
.nb-orbiter{position:absolute;width:0;height:0;animation:nbSpin var(--t) linear infinite;animation-delay:var(--d,0s)}
.nb-planet{position:absolute;left:calc(var(--r) * var(--ps,1));top:0;width:calc(var(--w) * var(--ps,1));aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  box-shadow:0 0 1.2cqw rgba(140,190,255,.3)}
.nb-planet img{display:block;width:100%;height:100%;border-radius:50%}
/* The night side. The orbit turns the whole planet, and its star is always on the left in the planet's own frame,
   so this one shadow keeps the dark side facing away from the star all the way round. */
.nb-planet::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 50%,transparent 38%,rgba(2,4,10,.55) 62%,rgba(2,4,10,.92) 82%);
  box-shadow:inset .25cqw 0 .4cqw rgba(255,255,255,.08)}
@keyframes nbSpin{to{transform:rotate(360deg)}}
.nb-earth-orbit .nb-planet{box-shadow:0 0 1.4cqw rgba(110,170,255,.6)}
.nb-you{position:absolute;transform:translate(-50%,0);white-space:nowrap;font:500 1.25cqw/1 var(--sans,"Geist",Arial,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:#9cc6ff}
.nb-you b{font-weight:500;padding:.5cqw 1cqw;border-radius:99px;border:1px solid rgba(156,198,255,.5);background:rgba(10,20,40,.55)}

/* 3. A home: the star, its planets, the label */
.nb-system{all:unset;position:absolute;pointer-events:none;width:9cqw;height:9cqw;transform:translate(-50%,-50%);border-radius:50%}
.nb-system:focus-visible{outline:1px solid var(--ink,#f3eee7);outline-offset:4px}
.nb-system .nb-orbiter{left:50%;top:50%}
.nb-star{position:absolute;left:50%;top:50%;width:1.6cqw;height:1.6cqw;transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:0 0 1cqw .3cqw var(--c),0 0 4cqw 1.2cqw color-mix(in srgb,var(--c) 45%,transparent);transition:box-shadow .5s}
.nb-system::before{content:"";position:absolute;left:50%;top:50%;width:7cqw;height:7cqw;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.nb-system.lit .nb-star{box-shadow:0 0 1.4cqw .6cqw var(--c),0 0 7cqw 3cqw color-mix(in srgb,var(--c) 60%,transparent)}
.nb-system.open .nb-star{box-shadow:0 0 1.4cqw .6cqw var(--c),0 0 6cqw 2.4cqw color-mix(in srgb,var(--c) 55%,transparent)}
.nb-label{position:absolute;pointer-events:auto;cursor:pointer;--x:-50%;--y:0%;transform:translate(var(--x),var(--y));display:grid;gap:.35cqw;text-align:center;white-space:nowrap}
.nb-label[data-pos=above]{--y:-100%}
.nb-label[data-side=end]{--x:-90%;text-align:right}
.nb-label[data-side=start]{--x:-10%;text-align:left}
.nb-label small{font:400 1.15cqw/1 var(--mono,"Geist Mono",monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.nb-label b{font:400 2.6cqw/1 var(--serif,"Instrument Serif",Georgia,serif);color:var(--ink,#f3eee7)}
.nb-label .nb-dist,.nb-story{grid-area:4/1;font:400 1.3cqw/1.2 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.6);transition:opacity .5s,transform .5s}
.nb-story{font-style:normal;font-size:1.55cqw;color:var(--ink,#f3eee7);opacity:0;transform:translateY(.4cqw);text-shadow:0 0 1.2cqw color-mix(in srgb,var(--c) 70%,transparent)}
.nb-label.telling .nb-dist{opacity:0;transform:translateY(-.4cqw)}
.nb-label.telling .nb-story{opacity:1;transform:none}

/* 4. The card */
.nb-card{position:absolute;z-index:4;left:1%;top:3%;width:min(300px,40cqw);padding:18px 20px;border-radius:16px;
  background:rgba(12,14,18,.78);border:1px solid color-mix(in srgb,var(--c) 45%,rgba(243,238,231,.14));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,.5)}
.nb-card-eyebrow{margin:0;font:400 10.5px/1.4 var(--mono,"Geist Mono",monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.nb-card h3{margin:4px 0 10px;font:400 30px/1 var(--serif,"Instrument Serif",Georgia,serif)}
.nb-card ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.nb-card li{display:flex;align-items:center;gap:10px;font:400 14px/1.3 var(--sans,"Geist",Arial,sans-serif)}
.nb-card li img{width:26px;height:26px;border-radius:50%}
.nb-card p{margin:0 0 8px;font:300 13.5px/1.5 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.82)}
.nb-card a{display:inline-block;margin-top:4px;font:500 11px/1 var(--sans,"Geist",Arial,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--c);text-decoration:none}
.nb-card a:hover{text-decoration:underline}

/* 5. Phones: the chart on top, full width, words beneath; the card sits under the chart */
@media (max-width:860px){
  .nb-wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "chart" "body";grid-template-rows:auto;padding-top:56px}
  .nb-chart{max-width:none;--ps:1.3}
  .nb-system{width:13cqw;height:13cqw}
  .nb-title{font-size:34px;max-width:none;margin-bottom:0}
  .nb-ring-label,.nb-proxima-label{font-size:20px}
  .nb-gc,.nb-solar-label{font-size:20px}
  .nb-label small{font-size:1.9cqw}.nb-label b{font-size:3.7cqw}.nb-label .nb-dist,.nb-story{font-size:2.1cqw}
  .nb-inset{display:none}.nb-zoom{display:none}
  .nb-you{font-size:1.9cqw}
  .nb-card{left:50%;top:auto;bottom:-8px;width:min(340px,92cqw);transform:translate(-50%,100%)}
}
@media (prefers-reduced-motion:reduce){ .nb-orbiter,.nb-beam,.nb-star::before,.nb-star::after,.nb-grain{animation:none} }
@media (max-width:860px){ .nb-label[data-pos=below]{margin-top:2cqw} .nb-label[data-pos=above]{margin-top:-1.5cqw} }
/* Pointing: the chart works out which home is nearest, so the whole orbit area and the label are targets. */
.nb-chart.nb-pointing{cursor:pointer}
.nb-system.open .nb-orbiter{animation-play-state:paused}
.nb-system.open::before{border-color:var(--c);box-shadow:0 0 2cqw color-mix(in srgb,var(--c) 40%,transparent)}
.nb-lead{stroke-width:1.2;stroke-dasharray:3 4;opacity:0;transition:opacity .25s;pointer-events:none}

/* 6. Cinema: lens flares on the stars, film grain, a sky that drifts behind the chart */
.nb-star::before,.nb-star::after{content:"";position:absolute;left:50%;top:50%;width:9cqw;height:.18cqw;border-radius:50%;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 70%,#fff) 50%,transparent);opacity:.55;animation:nbFlare 6s ease-in-out infinite}
.nb-star::after{width:5cqw;transform:translate(-50%,-50%) rotate(90deg);opacity:.35;animation-delay:-3s}
@keyframes nbFlare{50%{opacity:.18}}
.nb-system.lit .nb-star::before{width:16cqw;opacity:.9}
.nb-sky{inset:-30px;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.nb-grain{position:absolute;inset:-50%;z-index:5;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:nbGrain .9s steps(4) infinite}
@keyframes nbGrain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* 7. The Milky Way inset and its zoom lines */
.nb-inset{position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(14,16,26,.85) 60%,rgba(2,3,4,0) 71%)}
.nb-inset canvas{display:block;width:100%;height:100%;border-radius:50%;
  -webkit-mask:radial-gradient(circle,#000 62%,transparent 71%);mask:radial-gradient(circle,#000 62%,transparent 71%)}
.nb-inset p{position:absolute;left:50%;top:100%;width:150%;margin:.4cqw 0 0;transform:translateX(-50%);text-align:center;
  font:400 1.05cqw/1.35 var(--mono,"Geist Mono",monospace);letter-spacing:.06em;color:rgba(243,238,231,.5)}
.nb-zoom{stroke:rgba(156,198,255,.28);stroke-width:1;stroke-dasharray:2 5}

/* 8. The opening: the homes are there from the first frame; the rings, rim and beams draw out from Earth */
.nb-pre .nb-ring,.nb-pre .nb-beam-base,.nb-pre .nb-bezel{stroke-dasharray:1 1;stroke-dashoffset:-1}
.nb-pre .nb-beam,.nb-pre .nb-ring-label,.nb-pre .nb-tick,.nb-pre .nb-zoom,.nb-pre .nb-inset{opacity:0}
.nb-intro .nb-ring,.nb-intro .nb-beam-base,.nb-intro .nb-bezel{stroke-dasharray:1 1;animation:nbDraw 1.5s cubic-bezier(.3,.6,.2,1) both;animation-delay:calc(var(--i,0) * .18s)}
.nb-intro .nb-bezel{animation-duration:2.2s;animation-delay:.3s}
.nb-intro .nb-beam,.nb-intro .nb-ring-label,.nb-intro .nb-tick,.nb-intro .nb-zoom,.nb-intro .nb-inset{animation:nbFade 1.2s ease both;animation-delay:calc(.5s + var(--i,0) * .18s)}
.nb-intro .nb-beam{animation:nbFade 1s ease 1.1s both,nbBeam 2.4s linear infinite}
.nb-intro .nb-star{animation:nbPop 1.4s ease .9s both}
@keyframes nbDraw{from{stroke-dashoffset:-1}to{stroke-dashoffset:0}}
@keyframes nbFade{from{opacity:0}}
@keyframes nbPop{30%{box-shadow:0 0 2cqw 1cqw var(--c),0 0 12cqw 5cqw color-mix(in srgb,var(--c) 70%,transparent)}}