/* natyspace — shared look for every page (loaded after each page's own <style>).
   Page include (before </head>):  <link rel="stylesheet" href="site.css">  +  <script src="site.js" defer></script>
   (prefix ../ or ../../ in subfolders). Each page's <html> carries data-ns="<section id>". */

:root{
  --ns-bg:#0a0b0f;
  --ns-text:#e8eaef;
  --ns-border:#262936;
  /* section colours = planet colours */
  --ns-space:#22d3ee;
  --ns-sun:#ffb347;         /* NATY in NATYSPACE = colour of the sun */
  --ns-golf:#4ade80;
  --ns-drums:#22d3ee;
  --ns-lp:#b8bcc8;          /* LP = grey moon */
}

/* ---------- one space background for all pages ---------- */
html{
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(167,139,250,.14), transparent 70%),
    radial-gradient(ellipse 50% 45% at 85% 80%, rgba(34,211,238,.10), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 50%, #10121a, var(--ns-bg) 75%) fixed !important;
  background-color:var(--ns-bg) !important;
}
body{background:transparent !important;background-image:none !important}
#ns-stars{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}   /* below the big planet */

/* arriving on a page: fade in from the dark */
@keyframes ns-in{from{opacity:0}}
body{animation:ns-in .6s ease both}

/* ---------- background in the colour of the planet ---------- */
html[data-ns="golf"]{
  background:
    radial-gradient(ellipse 55% 45% at 80% 15%, rgba(123,224,160,.10), transparent 70%),
    radial-gradient(ellipse 90% 75% at 50% 45%, #11402a, #07170f 70%, #040b07) fixed !important;
  background-color:#040b07 !important}
html[data-ns="drums"]{
  background:
    radial-gradient(ellipse 55% 45% at 15% 85%, rgba(129,140,248,.16), transparent 70%),
    radial-gradient(ellipse 90% 75% at 50% 45%, #0c3446, #08101f 70%, #05070d) fixed !important;
  background-color:#05070d !important}
html[data-ns="lp"]{
  background:
    radial-gradient(ellipse 55% 45% at 85% 20%, rgba(200,205,220,.07), transparent 70%),
    radial-gradient(ellipse 90% 75% at 50% 45%, #2b2d35, #111217 70%, #08090b) fixed !important;
  background-color:#08090b !important}

/* ---------- top left: NATYSPACE → home (every page) ---------- */
.ns-brand{position:fixed;top:1.2rem;left:1.2rem;z-index:1000;height:44px;display:flex;align-items:center;
  font-family:'Bowlby One',system-ui,sans-serif;font-weight:400;font-size:1.3rem;line-height:1;
  text-transform:uppercase;letter-spacing:.01em;color:var(--ns-sun);text-decoration:none;transition:opacity .2s,transform .2s}
.ns-brand span{color:var(--ns-text)}
.ns-brand:hover{transform:translateY(-1px)}
html.playing .ns-brand,html.playing .ns-burger,html.playing .ns-menu{display:none}   /* LP game mode */

/* ---------- top centre: page name, e.g. GOLFPLANET ---------- */
.ns-title{display:flex !important;align-items:center !important;justify-content:center;gap:0 !important;
  font-family:'Bowlby One',system-ui,sans-serif !important;text-transform:uppercase;color:var(--acc) !important;text-shadow:none !important}
[data-ns-title]{min-height:1em}
.ns-title span{color:var(--ns-text)}

/* ---------- big planet rising from the bottom (SVG drawn by site.js) ---------- */
.ns-bigplanet{--r:250vw;position:fixed;z-index:-1;left:0;right:0;top:75vh;bottom:0;pointer-events:none;
  /* arc of a huge circle (radius --r, set by site.js), soft edge, no outline */
  -webkit-mask-image:radial-gradient(circle var(--r) at 50% var(--r),#000 calc(var(--r) - 80px),transparent var(--r));
          mask-image:radial-gradient(circle var(--r) at 50% var(--r),#000 calc(var(--r) - 80px),transparent var(--r))}
.ns-bigplanet svg{display:block;width:100%;height:100%}

.ns-planet{width:32px;height:32px;border-radius:50%;position:relative;flex:none;display:inline-block}
.ns-planet.golf{
  background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.35),transparent 40%),
    repeating-linear-gradient(-35deg,rgba(255,255,255,.07) 0 10%,transparent 10% 20%),
    radial-gradient(circle at 40% 40%,#7be0a0,#2fa864 45%,#136b3e 80%,#0a3d24);
  box-shadow:inset -.12em -.12em .25em rgba(0,0,0,.45),0 0 .4em rgba(80,220,140,.45)}
.ns-planet.golf::after{content:"";position:absolute;left:56%;top:24%;width:6%;min-width:1.5px;height:32%;background:#fff}
.ns-planet.golf::before{content:"";position:absolute;left:62%;top:24%;width:0;height:0;border-style:solid;border-width:.09em 0 .09em .18em;border-color:transparent transparent transparent #ff4d6d;z-index:1}
.ns-planet.drums{
  background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.4),transparent 38%),
    radial-gradient(circle at 40% 40%,#8ff0ff,#22d3ee 35%,#818cf8 70%,#4c1d95);
  box-shadow:inset -.12em -.12em .25em rgba(0,0,0,.45),0 0 .4em rgba(34,211,238,.45)}
.ns-planet.lp{
  background:radial-gradient(circle at 30% 34%,#7a7e88 0 11%,transparent 12%),radial-gradient(circle at 64% 62%,#7f838d 0 14%,transparent 15%),
    radial-gradient(circle at 38% 36%,#eceef3,#b4b8c1 45%,#7c808a 80%,#545862);
  box-shadow:inset -.12em -.12em .25em rgba(0,0,0,.45),0 0 .4em rgba(200,205,220,.4)}

/* ---------- hamburger menu (top right) ---------- */
.ns-burger{position:fixed;top:1.2rem;right:1.2rem;z-index:1000;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0;
  background:rgba(10,11,15,.72);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.25);transition:background .2s,transform .2s}
.ns-burger:hover{background:rgba(10,11,15,.88);transform:translateY(-1px)}
.ns-burger:focus-visible,.ns-brand:focus-visible{outline:2px solid var(--ns-space);outline-offset:2px}
.ns-burger i{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ns-text);
  transition:transform .3s cubic-bezier(.5,1.6,.5,1),opacity .2s}
.ns-burger i:nth-child(1){transform:translateY(-6px)}
.ns-burger i:nth-child(3){transform:translateY(6px)}
.ns-open .ns-burger i:nth-child(1){transform:rotate(45deg)}
.ns-open .ns-burger i:nth-child(2){opacity:0}
.ns-open .ns-burger i:nth-child(3){transform:rotate(-45deg)}

.ns-menu{position:fixed;top:calc(1.2rem + 52px);right:1.2rem;z-index:999;min-width:220px;padding:10px;
  border-radius:14px;background:rgba(14,16,22,.94);border:1px solid var(--ns-border);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.45);
  font-family:'Inter',-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;
  transition:opacity .2s,transform .2s}
.ns-open .ns-menu{opacity:1;transform:none;pointer-events:auto}
.ns-menu ul{list-style:none;margin:0;padding:0}
.ns-menu ul ul{margin-left:22px;border-left:1px solid #353948;padding-left:6px}
.ns-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;text-decoration:none;cursor:pointer;
  color:var(--ns-text);font-family:'Bowlby One',system-ui,sans-serif;font-weight:400;font-size:1.05rem;line-height:1;
  text-transform:uppercase;letter-spacing:.01em;transition:background .15s}
.ns-menu a:hover{background:#1c1f2a}
.ns-menu a b{font-weight:400;color:var(--c)}
.ns-menu a b span{color:var(--ns-text)}                 /* same style as the page titles: GOLFPLANET … */
.ns-menu a .ns-planet{width:16px;height:16px;font-size:14px;box-shadow:none}
.ns-menu a .ns-planet::before,.ns-menu a .ns-planet::after{display:none}
.ns-menu a[aria-current="page"]{background:rgba(255,255,255,.07)}
.ns-menu a[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);margin-left:auto}
.ns-menu li.ns-sep{height:1px;background:var(--ns-border);margin:6px 4px}

/* flight to a planet (home → section) */
.ns-zoom{position:fixed;z-index:2000;border-radius:50%;pointer-events:none;will-change:transform;
  transition:transform 1.3s cubic-bezier(.6,0,.85,.4)}
.ns-black{position:fixed;inset:0;z-index:2001;opacity:0;pointer-events:none;transition:opacity .4s ease 1s}
html.ns-flying #system .orbit,html.ns-flying #system .body,html.ns-flying .hint,
html.ns-flying .ns-brand,html.ns-flying .ns-burger{opacity:0;transition:opacity .35s}

@media (max-width:600px){
  .ns-brand{font-size:.95rem}
  /* page title goes below NATYSPACE / menu so they don't collide */
  .site-tagline.ns-title{top:4.6rem !important}
  .topbar .ns-title{padding-top:3rem}
  html[data-ns="lp"] .topbar .ns-title{padding-top:0}   /* LP topbar already leaves room */
}
@media (prefers-reduced-motion:reduce){
  body{animation:none}
  .ns-burger i,.ns-menu{transition:none}
}