/* SPDX-License-Identifier: ńL-1.0 */
/* Core runtime & layout. No Spatial Sense rules here. */

/* ─── Reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── Design tokens ─────────────────────────────────────────────────── */
:root{
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:1.25rem; --fs-2xl:1.5rem; --fs-3xl:2rem; --fs-4xl:3rem;

  /* UI motion */
  --ui-fade-duration:.6s;
  --ui-fade-ease:ease;

  /* Glass defaults (tabs, etc.). The bar enforces 5px locally. */
  --sense-blur: 5px;
  --sense-border: rgba(255,255,255,0.06);
  --sense-tint: rgba(10,10,10,0.20);

  /* Header geometry */
  --n-home-h:40px;
  --n-msg-gap:14px;
}

/* ─── Fonts ─────────────────────────────────────────────────────────── */
@font-face{font-family:Inter;src:url("/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("/fonts/Inter-Medium.woff2")  format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("/fonts/Inter-Light.woff2")   format("woff2");font-weight:300;font-style:normal;font-display:swap}

/* ─── Root containers ───────────────────────────────────────────────── */
/* IMPORTANT: avoid ancestor opacity animations while the bar is visible. */
html.n{
  width:100%;height:100%;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background:#000;color:#fff;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0)
          env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  overflow:hidden;position:fixed;
}
body.nOS{
  width:100%;height:100%;position:fixed;top:0;left:0;background:#000;color:#fff;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0)
          env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
  z-index:0;
}

/* ─── Boot / connecting ─────────────────────────────────────────────── */
#nSystemInit.nSpatial{
  position:fixed;inset:0;width:100vw;height:calc(var(--vh,1vh)*100);
  z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.nConnecting{
  display:flex;align-items:center;justify-content:center;
  width:111px;height:121px;border:.09091em solid #fff;border-radius:45px;
  -webkit-backdrop-filter:blur(.61px);backdrop-filter:blur(.61px);
  background:transparent;opacity:0;
  transition:opacity 1.2s ease-in;
  animation:fadeInSpinner 1.2s ease-in 2.8s forwards,nSpin 2.99s linear 5.2s infinite;
  will-change:transform;backface-visibility:hidden;z-index:40;
}
@keyframes fadeInSpinner{from{opacity:0}to{opacity:1}}
@keyframes nSpin{to{transform:rotate(360deg)}}
.nConnecting.explode{animation:explodeOut .88s ease-out forwards;pointer-events:none}
@keyframes explodeOut{
  0%{transform:scale(1);opacity:1;filter:blur(0)}
  50%{transform:scale(1.1);opacity:.9;filter:blur(2px)}
  80%{transform:scale(1.2);opacity:.2;filter:blur(6px)}
  100%{transform:scale(.8);opacity:0;filter:blur(10px)}
}

/* ─── Scene canvas ──────────────────────────────────────────────────── */
#nSpatialCanvas{
  position:absolute;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;
  display:block;opacity:0;animation:fadeInCanvas 1s ease forwards;animation-delay:2.4s;
}
@keyframes fadeInCanvas{from{opacity:0}to{opacity:1}}

/* ─── Interface shell ───────────────────────────────────────────────── */
.nInterface{
  position:relative;inset:0;z-index:100;width:100%;height:100%;
  display:none; opacity:1; visibility:hidden; pointer-events:none;
  flex-direction:column;justify-content:space-between;
}
.nInterface.visible{display:flex;visibility:visible;pointer-events:auto}
.nInterface > .nHeader,.nInterface > .nAPI,.nInterface > .nMeta{
  opacity:0; transform:translateY(6px);
  transition:opacity var(--ui-fade-duration) var(--ui-fade-ease),
             transform var(--ui-fade-duration) var(--ui-fade-ease);
}
.nInterface.visible > .nHeader{opacity:1;transform:none;transition-delay:.20s}
.nInterface.visible > .nAPI   {opacity:1;transform:none;transition-delay:.60s}
.nInterface.visible > .nMeta  {opacity:1;transform:none;transition-delay:.80s}

/* ─── Header & Logo ────────────────────────────────────────────────── */
.nHeader{position:absolute;top:75%;left:50%;right:0%;padding:0;pointer-events:auto;z-index:100}
.nHome{position:relative;display:inline-flex;align-items:center}
.nHome img{height:var(--n-home-h);width:auto;display:block}

/* ─── Notification bar (single element; centered under logo) ───────── */
/* Small text; adaptive spawn from logo (left-top origin); 5px blur */
#nNotify.nMessage,
.nMessage--logo{ /* alias legacy class to the same behavior */
  position:absolute;
  top:calc(var(--n-home-h) + var(--n-msg-gap));
  left:50%;
  transform:translateX(-50%) translateY(-8px) scale(.96);
  transform-origin:left top;

  max-width:min(560px,92vw);
  display:inline-flex;align-items:flex-start;gap:10px;
  padding:10px 14px;
  border-radius:24px;

  -webkit-backdrop-filter:saturate(1.4) blur(5px) !important;
  backdrop-filter:saturate(1.4) blur(5px) !important;
  background-color:var(--sense-tint);
  border:1px solid var(--sense-border);
  box-shadow:0 18px 50px rgba(0,0,0,.35);

  color:#fff;text-align:left;white-space:normal;word-break:break-word;
  pointer-events:none;
  opacity:0;visibility:hidden;
  z-index:120;
}

/* Show/Hide (animated) */
#nNotify.show, .nMessage--logo.show{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1);
  animation:nMsgInLogo .26s var(--ui-fade-ease) both;
}
#nNotify.hide, .nMessage--logo.hide{
  opacity:0;visibility:hidden;
  transform:translateX(-50%) translateY(-8px) scale(.96);
  animation:nMsgOutLogo .18s ease both;
}

/* Safety gates */
#nNotify[aria-hidden="true"],
#nNotify:empty{display:none !important}
.nMessage--logo[aria-hidden="true"],
.nMessage--logo:empty{display:none !important}

/* Small text for notification center */
.nMsgTitle{font-weight:500;font-size:13px;line-height:16px;margin-right:.25rem !important}
.nMsgText {font-weight:300;font-size:12px;line-height:15px;opacity:.92 !important}

/* Adaptive spawn-from-logo keyframes */
@keyframes nMsgInLogo{
  0%  {opacity:0;transform:translateX(-50%) translateY(-10px) scale(.94)}
  60% {opacity:1;transform:translateX(-50%) translateY(0)     scale(1.01)}
  100%{opacity:1;transform:translateX(-50%) translateY(0)     scale(1)}
}
@keyframes nMsgOutLogo{
  0%  {opacity:1;transform:translateX(-50%) translateY(0)     scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-8px)  scale(.96)}
}

/* ─── API ──────────────────────────────────────────────────────────── */
.nAPI{
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 64px);
  width:90%;left:5%;color:#fff;text-align:center;font-size:var(--fs-base);
  max-width:90vw;padding:.1rem;display:flex;justify-content:center;z-index:80
}
.nAPI a{color:#fff;text-decoration:none}
@media (min-width:768px){.nAPI{width:80%;left:10%;font-size:1.1rem}}
@media (min-width:1024px){.nAPI{width:60%;left:20%;font-size:1.2rem}}
.nAPI__dropped{display:none;opacity:0}
.nSpatial.nonSpatial .nAPI__dropped{display:flex!important;opacity:1!important}
.nSpatial.nonSpatial .nAPI__connected{display:none!important}

/* Visually hide API status (still announced by screen readers) */
#nAPI .nAPI__connected,
#nAPI .nAPI__dropped{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ─── Footer / meta ─────────────────────────────────────────────────── */
/* Hard-hide NIM year & Location */
#NIM,
#nLocation,
#nLocationStatus{display:none !important;visibility:hidden !important;opacity:0 !important}

.nMeta{
  position:fixed;bottom:15px;left:0;width:100%;
  font-family:Inter,system-ui,sans-serif;font-weight:400;
  font-size:clamp(.7rem,1vw,.75rem);color:#fff;z-index:1000;
  padding:0 1rem;background:transparent
}
.nData{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;text-align:left}

/* Footer links map / dock */
.nMap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}
.nLinks{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:.25rem;column-gap:1rem;width:100%;white-space:nowrap}
.nLinks.hidden{display:none!important}
.nLink,.nMode{color:#fff;font:inherit;background:none;border:none;cursor:pointer;padding:0;text-decoration:none;white-space:nowrap}
.nLink:hover,.nMode:hover{text-shadow:0 0 4px rgba(255,255,255,.5)}
body[data-tabs="dock"] .nMap{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);left:50%;transform:translateX(-50%);z-index:1200;width:auto;display:flex;align-items:center;justify-content:center}
body[data-tabs="dock"] .nMap .nLinks{-webkit-backdrop-filter:saturate(1.4) blur(var(--sense-blur));backdrop-filter:saturate(1.4) blur(var(--sense-blur));background-color:var(--sense-tint);border:1px solid var(--sense-border);background-clip:padding-box;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex!important;align-items:center;gap:.75rem;padding:8px 12px;border-radius:24px}

/* Dynamic panel (if used) */
#nDynamicPanel.nPanel{display:none;position:absolute;top:0;left:0;width:100%;background:rgba(0,0,0,.85);padding:1rem;text-align:center;color:#fff;font-size:clamp(.85rem,1.25vw,1rem);z-index:1100;pointer-events:auto}
#nDynamicPanel.nPanel.active{display:block}

/* Responsive tweaks */
@media (max-width:1079px){
  .nData{flex-direction:row;justify-content:space-between}
  .nMap{flex-direction:column;gap:.75rem}
  .nLinks{justify-content:center}
}
@media (min-width:1080px){
  .nData{flex-direction:row;justify-content:unset;align-items:center;padding:0 2rem;text-align:left}
  .nMap{flex-direction:row;justify-content:flex-end;align-items:center;gap:.75rem}
  .nLinks{justify-content:flex-end}
}

/* ─── Utilities & motion ───────────────────────────────────────────── */
.hidden{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
.visible{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.invisible{opacity:0!important;pointer-events:none!important;visibility:hidden!important}
.fade-in{animation:nFadeIn .22s ease forwards}
.fade-out{animation:nFadeOut .22s ease forwards}
@keyframes nFadeIn{from{opacity:0}to{opacity:1}}
@keyframes nFadeOut{from{opacity:1}to{opacity:0}}

/* Backdrop fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #nNotify, .nMessage--logo{ background-color:rgba(22,22,22,.72) !important; }
  body[data-tabs="dock"] .nMap .nLinks{ background-color:rgba(22,22,22,.72); }
}

/* NOTE: No @media (prefers-reduced-motion:reduce) kill-switch.
   Motion remains enabled by product requirement. */