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

/* ─── Reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
::selection{background:rgba(255,255,255,.18);color:#fff}

/* ─── 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:.24s;
  --ui-fade-ease:cubic-bezier(.2,.8,.2,1);

  /* Pure glass defaults (blur only; no tint) */
  --sense-blur: 5px;
  --sense-border: rgba(255,255,255,0.06);

  /* Header geometry */
  --n-home-h:40px;

  /* Notification tokens */
  --notify-maxw: min(520px, 92vw);
  --notify-top: calc(env(safe-area-inset-top,0px) + var(--n-home-h) + 18px);
  --notify-bottom: calc(env(safe-area-inset-bottom,0px) + 14px);
  --notify-blur: saturate(1.4) blur(var(--sense-blur));
  --notify-border: var(--sense-border);
  --notify-shadow: 0 18px 50px rgba(0,0,0,.35);
  --notify-fallback-bg: rgba(22,22,22,.86); /* a11y-safe contrast */

  /* Response dock */
  --response-maxw: min(760px, 92vw);

  /* Keyboard underlay */
  --kb-h: 0px;
  --kb-op: 0;
}

/* ─── 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 ───────────────────────────────────────────────── */
html{
  width:100%;height:100%;
  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;overscroll-behavior:none;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
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;
}

/* ─── NoScript ──────────────────────────────────────────────────────── */
.nNoScript{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:#000;color:#fff;z-index:99999
}

/* ─── Boot / connecting ─────────────────────────────────────────────── */
#nSystemInit,
#nSystemInit.nSpatial,
#nSystemInit.nSpatialUI{
  position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;
  z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:1; pointer-events:auto;
}

/* Spinner pinned center; stable exit */
.nConnecting{
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%) translateZ(0);
  display:flex;align-items:center;justify-content:center;
  width:111px;height:121px;
  background:transparent; opacity:1;
  transition:opacity 0.6s ease-in;
  animation:fadeInSpinner 0.8s ease-in forwards;
  will-change:transform,opacity; backface-visibility:hidden; z-index:40; pointer-events:none;
}
.nConnecting::before{
  content:"";
  position:absolute; inset:0;
  border:.09091em solid #fff; border-radius:45px;
  -webkit-backdrop-filter:blur(.61px); backdrop-filter:blur(.61px);
  transform-origin: center center;
  animation:nSpin 2.99s linear 0.8s infinite;
  will-change:transform;
}
@keyframes fadeInSpinner{from{opacity:0}to{opacity:1}}
@keyframes nSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.nConnecting.explode{
  animation: explodeOut .88s ease-out forwards;
  pointer-events:none
}
@keyframes explodeOut{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1;filter:blur(0)}
  50%{transform:translate(-50%,-50%) scale(1.1);opacity:.9;filter:blur(2px)}
  80%{transform:translate(-50%,-50%) scale(1.2);opacity:.2;filter:blur(6px)}
  100%{transform:translate(-50%,-50%) scale(.8);opacity:0;filter:blur(10px)}
}

/* Scene canvas */
#nSpatialCanvas{
  position:absolute; inset:0;
  width:100vw; height:100vh; height:100dvh;
  z-index:0; pointer-events:none !important;
  display:block; opacity:0;
  transition: opacity 0.35s ease;
}
body.scene-visible #nSpatialCanvas{ 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.hidden{display:none !important}
.nInterface.visible{display:flex;visibility:visible;pointer-events:auto}

/* Staggered fade for header/API/footer */
.nInterface > .nHeader, .nInterface > .nAPI, .nInterface > .nMeta{
  opacity:0; transform:translateY(6px); visibility:hidden;
  transition:opacity var(--ui-fade-duration) var(--ui-fade-ease),
             transform var(--ui-fade-duration) var(--ui-fade-ease),
             visibility 0s linear var(--ui-fade-duration);
}
.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; visibility:visible;
  transition-delay:1.00s;
  transition-duration:.36s;
}

/* ─── Header & Logo (top-centered by design choice) ─────────────────── */
.nHeader{
  position:fixed;
  /*top:calc(env(safe-area-inset-top,0px) + 12px);*/
  top:77%;
  left:50%; transform:translateX(-50%);
  padding:0; pointer-events:auto; z-index:100;
}
.nHome{position:relative;display:inline-flex;align-items:center;justify-content:center}
.nHome img{height:var(--n-home-h);width:auto;display:block}

/* ─── Notification: pure blur, no tint; title BELOW text ───────────── */
/* Wrapper deliberately NON-interactive to avoid intercepting clicks.
   Re-enable on actionable children (links/buttons). */
#nNotify.nMessage{
  position:fixed; left:50%; transform:translateX(-50%) translateZ(0);
  max-width:var(--notify-maxw); min-height:48px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:12px 16px; border-radius:25px;
  background-color:transparent; border:0px solid var(--notify-border);
  -webkit-backdrop-filter:var(--notify-blur); backdrop-filter:var(--notify-blur);
  box-shadow:var(--notify-shadow); color:#fff; text-align:center;
  white-space:normal; word-break:break-word; hyphens:auto;
  pointer-events:none; opacity:0; visibility:hidden; z-index:2147483644; /* below dock */
  will-change:opacity,transform;
  transition:
    opacity var(--ui-fade-duration) var(--ui-fade-ease),
    transform var(--ui-fade-duration) var(--ui-fade-ease),
    visibility 0s linear calc(var(--ui-fade-duration));
}
#nNotify.nMessage a,
#nNotify.nMessage button{ pointer-events:auto; }

html.notify-top    #nNotify.nMessage{ top:var(--notify-top); }
html.notify-bottom #nNotify.nMessage{ bottom:var(--notify-bottom); }

#nNotify.show{
  opacity:1; visibility:visible; transform:translateX(-50%) translateZ(0);
  transition-delay:0s,0s,0s;
}
#nNotify.hide{
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-6px) translateZ(0);
  transition-delay:0s,0s,0s;
}

/* Content: text first, title second (below) */
.nMsgText { order:1; font-weight:400; font-size:13px; line-height:16px; opacity:.98; }
.nMsgTitle{ order:2; font-weight:600; font-size:12px; line-height:15px; opacity:.9; margin-top:4px; }

/* Fallback when blur unsupported */
html.no-blur #nNotify.nMessage,
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #nNotify.nMessage{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background-color:var(--notify-fallback-bg) !important;
  }
}

/* ─── API status block (present but visually hidden) ────────────────── */
.nAPI{
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 64px);
  left:50%; transform:translateX(-50%);
  width:90%; max-width:90vw; color:#fff; text-align:center;
  font-size:var(--fs-base); padding:.1rem; display:flex; justify-content:center; z-index:80;
}
@media (min-width:768px){.nAPI{width:80%;max-width:80vw}}
@media (min-width:1024px){.nAPI{width:60%;max-width:60vw}}
.nAPI__dropped{display:none;opacity:0}

/* Screen-reader only for the two live regions */
#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;
}

/* ─── Response Dock (new + legacy) — positioning only here ─────────── */
#nResponseDock.nResponseDock,
#nAnswerDock.nAnswerDock{
  position:fixed;
  left:40%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 300px);
  transform:translateX(-50%);
  max-width:var(--response-maxw);
  width:clamp(280px, 72vw, var(--response-maxw));
  pointer-events:none; opacity:0; transition:opacity .18s ease;
  z-index:2147483645; /* above notify; below SenseGroup */
}
#nResponseDock.nResponseDock.visible,
#nAnswerDock.nAnswerDock.visible{ opacity:1; }

/* Compact height: nudge dock upward */
@media (max-height:640px){
  #nResponseDock.nResponseDock,
  #nAnswerDock.nAnswerDock{
    bottom:calc(env(safe-area-inset-bottom,0px) + 56px);
  }
}

/* ─── Fade-in only for nHome (logo) after splash ───────────────────── */
.nHome{ opacity:0; will-change:opacity; }
.nInterface.visible .nHome{
  animation: nHomeFade var(--ui-fade-duration) var(--ui-fade-ease) forwards;
  /* stagger so it lands after .nHeader’s own reveal */
  animation-delay: .28s;
}
@keyframes nHomeFade{ from{ opacity:0 } to{ opacity:1 } }

/* ─── Keyboard underlay (shared, not Sense-specific) ────────────────── 
.nKeyboardUnderlay{
  position:fixed; left:0; right:0; bottom:0; height:var(--kb-h);
  opacity:var(--kb-op); z-index:60; pointer-events:none;
  transition:opacity .18s ease, backdrop-filter .2s ease;
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  background: linear-gradient(to top, rgba(255,255,255,.22), rgba(255,255,255,.06) 60%, rgba(255,255,255,0));
  box-shadow: 0 -12px 30px rgba(0,0,0,.16);
}*/

/* ─── Footer / meta ─────────────────────────────────────────────────── */
#NIM, #nLocation, #nLocationStatus{ display:none !important; }

.nMeta{
  position:fixed; bottom:20px; left:0; width:100%;
  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 — pure blur (no tint) */
.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) + 20px);
  left:50%; transform:translateX(-50%); z-index:1200;
  width:auto; display:flex; align-items:center; justify-content:center;
}
body[data-tabs="dock"] .nMap .nLinks{
  display:none !important;
}

/* 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 & a11y ─────────────────────────────────────────────── */
.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 fallbacks */
html.no-blur #nNotify.nMessage{ background-color:var(--notify-fallback-bg) !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #nNotify.nMessage{ background-color:var(--notify-fallback-bg) !important; }
  body[data-tabs="dock"] .nMap .nLinks{ background-color:rgba(22,22,22,.72); }
}

/* NOTE: Motion remains enabled by product requirement. */