/*
  Shared site chrome: nav, cursor, scroll progress.
  Loaded by every page except index.html (the 3D village game).
  Sized + styled to match the existing About / Process / Contact nav exactly.
*/

/* Nav --------------------------------------------------------------- */
.nav{
  position:fixed;top:0;inset-inline:0;z-index:50;
  color:var(--paper);
  background:rgba(12,12,12,0.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  view-transition-name:site-nav;
}
.nav-inner{
  max-width:1500px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.5rem;
}
.nav a{color:inherit;text-decoration:none;}
.nav-logo{display:flex;align-items:center;gap:.65rem;}
.nav-logo img{width:28px;height:28px;}
.nav-logo .brand{font-size:1rem;line-height:1;}
.nav-links{display:none;gap:1.85rem;font-size:.92rem;}
@media (min-width:768px){ .nav-links{display:flex;} }
.nav-links a{transition:color .2s ease;}
.nav-links a:hover{color:var(--yellow);}
.nav-links .is-current{color:var(--yellow);}
.nav-right{display:flex;align-items:center;gap:.85rem;}
.nav .nav-cta{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem 1.05rem;border-radius:999px;
  font-size:.85rem;font-weight:500;
  background:var(--yellow);color:var(--ink);
  transition:background .2s ease, color .2s ease;
}
.nav .nav-game{background:transparent;color:var(--paper);border:1px solid rgba(255,255,255,0.35);}
.nav .nav-game:hover{background:var(--paper);color:var(--ink);}

/* Cursor (only on devices with hover + fine pointer) ---------------- */
@media (hover:hover) and (pointer:fine){ html, body{cursor:none;} }
.cursor-dot{
  position:fixed;top:0;left:0;width:6px;height:6px;
  background:var(--yellow);border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate3d(-50%,-50%,0);
  transition:width .25s ease, height .25s ease, background .25s ease, opacity .2s ease;
  will-change:transform;
}
.cursor-ring{
  position:fixed;top:0;left:0;width:32px;height:32px;
  border:1px solid rgba(254,198,5,0.55);border-radius:50%;
  pointer-events:none;z-index:9998;
  transform:translate3d(-50%,-50%,0);
  transition:width .3s cubic-bezier(0.2,0.8,0.2,1), height .3s cubic-bezier(0.2,0.8,0.2,1), border-color .25s ease, background .25s ease, opacity .2s ease;
  will-change:transform;
}
body.is-hover .cursor-dot{opacity:0;}
body.is-hover .cursor-ring{width:60px;height:60px;border-color:var(--yellow);background:rgba(254,198,5,0.10);}

/* Dark cursor on light/yellow surfaces.
   - .cursor-light is toggled by per-page ScrollTrigger (About / Process scroll into yellow sections).
   - .cursor-on-yellow is toggled by site-chrome.js when the pointer hovers a yellow element.
   Same visual outcome from both. */
body.cursor-light .cursor-dot,
body.cursor-on-yellow .cursor-dot{background:var(--ink);}
body.cursor-light .cursor-ring,
body.cursor-on-yellow .cursor-ring{border-color:rgba(12,12,12,0.55);}
body.cursor-light.is-hover .cursor-ring,
body.cursor-on-yellow.is-hover .cursor-ring{background:rgba(12,12,12,0.08);border-color:var(--ink);}
@media (hover:none){ .cursor-dot, .cursor-ring{display:none;} }

/* Scroll progress --------------------------------------------------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;
  background:rgba(255,255,255,0.06);
  z-index:60;
}
.scroll-progress > i{
  display:block;height:100%;background:var(--yellow);width:0%;
  will-change:width;
}
body.cursor-light .scroll-progress,
body.cursor-on-yellow .scroll-progress{background:rgba(12,12,12,0.08);}