/* ============================================================================
   Peria · Glass System — shared design language for all four surfaces.
   Globe → Country → Wall → Plan. "Midnight glass" (dark, primary) +
   "daylight glass" (light). Tokens/glass/keyframes/chrome live here so every
   page stays consistent; page-specific layout stays inline per page.
   Theme flips on html[data-theme="light"] (driven by assets/theme.js).
   ============================================================================ */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --accent: #59D9EF;                 /* Pulse — the single luminous accent (chat-widget reads this) */
  --accent-2: #7dd3fc;
  --accent-3: #a78bfa;
  --void: #05070d;
  --deep-1: #0a1120;
  --deep-2: #101a2e;

  --paper: #05070d;
  --ink: rgba(237,242,250,0.96);
  --ink-bright: rgba(240,246,253,0.98);
  --ink-2: rgba(226,235,248,0.70);
  --ink-3: rgba(217,228,244,0.45);
  --ink-4: rgba(217,228,244,0.30);

  --line: rgba(255,255,255,0.14);
  --line-chrome: rgba(255,255,255,0.16);
  --hair: rgba(255,255,255,0.08);

  --gem: rgba(250,204,120,0.9);
  --gem-glow: rgba(250,204,120,0.55);
  --gem-ink: rgba(250,224,160,0.95);
  --gem-line: rgba(250,204,120,0.4);
  --gem-bg: rgba(250,204,120,0.07);

  /* glass fills (frost gradient over a tinted base) */
  --g1: linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)), rgba(10,15,26,0.60);
  --g2: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)), rgba(10,15,26,0.66);
  --g3: linear-gradient(155deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04)), rgba(12,18,30,0.72);
  --g1-bd: rgba(255,255,255,0.14);
  --g2-bd: rgba(255,255,255,0.20);
  --g3-bd: rgba(255,255,255,0.26);
  --g1-sh: 0 12px 32px rgba(3,6,12,0.35);
  --g2-sh: 0 28px 70px rgba(2,5,10,0.55);
  --g3-sh: 0 48px 120px rgba(1,3,8,0.65);
  --g1-bevel: inset 0 1px 0 rgba(255,255,255,0.18);
  --g2-bevel: inset 0 1px 0 rgba(255,255,255,0.30);
  --g3-bevel: inset 0 1px 0 rgba(255,255,255,0.40);

  --tint: rgba(89,217,239,0.13);       /* accent-tinted glass */
  --tint-bd: rgba(89,217,239,0.45);
  --tint-ink: #c8f4fd;

  --scrim: rgba(4,7,13,0.5);
  --vignette: rgba(3,5,10,0.5);
  --grain: 0.03;

  --cta: linear-gradient(160deg,#7ce4f6,#45cbe4);
  --cta-hover: linear-gradient(160deg,#8deaf9,#54d3ea);
  --cta-ink: #04222b;
  --cta-bd: rgba(160,235,250,0.7);
  --cta-glow: 0 10px 30px rgba(89,217,239,0.25);

  --ease-glass: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.28, 0.44, 1);
}

html[data-theme="light"] {
  --paper: #edf2f9;
  --ink: rgba(22,32,50,0.96);
  --ink-bright: rgba(12,22,40,0.98);
  --ink-2: rgba(45,58,80,0.70);
  --ink-3: rgba(73,88,110,0.45);
  --ink-4: rgba(73,88,110,0.30);

  --line: rgba(40,62,90,0.18);
  --line-chrome: rgba(40,62,90,0.18);
  --hair: rgba(40,62,90,0.12);

  --g1: linear-gradient(165deg, rgba(255,255,255,0.62), rgba(255,255,255,0.38)), rgba(255,255,255,0.60);
  --g2: linear-gradient(160deg, rgba(255,255,255,0.66), rgba(255,255,255,0.40)), rgba(255,255,255,0.66);
  --g3: linear-gradient(155deg, rgba(255,255,255,0.72), rgba(255,255,255,0.45)), rgba(255,255,255,0.72);
  --g1-bd: rgba(40,62,90,0.18);
  --g2-bd: rgba(40,62,90,0.22);
  --g3-bd: rgba(40,62,90,0.28);
  --g1-sh: 0 12px 32px rgba(50,72,110,0.18);
  --g2-sh: 0 28px 70px rgba(50,72,110,0.24);
  --g3-sh: 0 48px 120px rgba(50,72,110,0.30);
  --g1-bevel: inset 0 1px 0 rgba(255,255,255,0.55);
  --g2-bevel: inset 0 1px 0 rgba(255,255,255,0.65);
  --g3-bevel: inset 0 1px 0 rgba(255,255,255,0.7);

  --tint: rgba(89,217,239,0.16);
  --tint-bd: rgba(89,217,239,0.55);
  --tint-ink: #0a5566;

  --scrim: rgba(215,226,240,0.5);
  --vignette: rgba(150,168,195,0.35);
}

/* ---- Base --------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; background:var(--paper); }
body {
  font-family:'Geist', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
::selection { background:rgba(89,217,239,0.28); }
.mono { font-family:'Geist Mono', ui-monospace, monospace; }
.ja   { font-family:'Shippori Mincho', serif; }

/* ---- Keyframes ---------------------------------------------------------- */
@keyframes orbBreathe { 0%,100%{ box-shadow:0 0 22px rgba(89,217,239,0.30), 0 0 64px rgba(89,217,239,0.10), inset 0 1px 0 rgba(255,255,255,0.30);} 50%{ box-shadow:0 0 34px rgba(89,217,239,0.5), 0 0 96px rgba(89,217,239,0.18), inset 0 1px 0 rgba(255,255,255,0.38);} }
@keyframes coreSwirl { 0%{ transform:translate(-50%,-50%) rotate(0deg);} 100%{ transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes shimmer { 0%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} }
@keyframes typingDot { 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }
@keyframes sealRing { 0%{ transform:scale(.55); opacity:.85;} 100%{ transform:scale(1.75); opacity:0;} }
@keyframes selBeacon { 0%,100%{ box-shadow:0 0 0 5px rgba(89,217,239,0.22), 0 0 26px rgba(89,217,239,0.75);} 50%{ box-shadow:0 0 0 3px rgba(89,217,239,0.08), 0 0 12px rgba(89,217,239,0.35);} }
@keyframes riseIn { 0%{ opacity:0; transform:translateY(14px);} 100%{ opacity:1; transform:translateY(0);} }
@keyframes threadFlow { 0%{ background-position:0 0;} 100%{ background-position:0 56px;} }

/* ---- Glass elevation classes ------------------------------------------- */
.g1 { background:var(--g1); border:1px solid var(--g1-bd); box-shadow:var(--g1-sh), var(--g1-bevel);
      -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border-radius:16px; }
.g2 { background:var(--g2); border:1px solid var(--g2-bd); box-shadow:var(--g2-sh), var(--g2-bevel);
      -webkit-backdrop-filter:blur(32px) saturate(180%); backdrop-filter:blur(32px) saturate(180%); border-radius:20px; }
.g3 { background:var(--g3); border:1px solid var(--g3-bd); box-shadow:var(--g3-sh), var(--g3-bevel);
      -webkit-backdrop-filter:blur(44px) saturate(190%); backdrop-filter:blur(44px) saturate(190%); border-radius:26px; }

/* ---- Atmosphere (fixed layers behind content) -------------------------- */
.hk-atmos { position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 108%, rgba(56,120,190,0.14), transparent 62%),
    radial-gradient(ellipse 40% 30% at 82% -6%, rgba(103,232,249,0.05), transparent 70%),
    radial-gradient(ellipse 46% 34% at 12% 4%, rgba(139,120,250,0.05), transparent 70%); }
html[data-theme="light"] .hk-atmos {
  background:
    radial-gradient(ellipse 70% 50% at 50% 108%, rgba(125,170,230,0.30), transparent 62%),
    radial-gradient(ellipse 40% 30% at 82% -6%, rgba(80,180,215,0.14), transparent 70%),
    radial-gradient(ellipse 46% 34% at 12% 4%, rgba(139,120,250,0.12), transparent 70%); }
.hk-vignette { position:fixed; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(ellipse 130% 105% at 50% 46%, transparent 55%, var(--vignette) 100%); }
.hk-grain { position:fixed; inset:0; pointer-events:none; z-index:4; opacity:var(--grain); }

/* ---- Shared chrome ------------------------------------------------------ */
/* wordmark */
.hk-wordmark { user-select:none; }
.hk-wordmark .m { font-size:12px; font-weight:500; letter-spacing:0.4em; text-transform:uppercase; color:var(--ink-2); }
.hk-wordmark .s { margin-top:4px; font-size:9px; font-weight:400; letter-spacing:0.32em; text-transform:uppercase; color:var(--ink-4); }

/* search pill */
.hk-search { position:relative; width:min(300px,34vw); }
.hk-search .mag { position:absolute; left:16px; top:50%; transform:translateY(-50%); opacity:.5; color:var(--ink); display:flex; }
.hk-search input { width:100%; box-sizing:border-box; font-family:'Geist',sans-serif; font-size:13.5px; font-weight:300;
  padding:12px 50px 12px 40px; border-radius:999px; border:1px solid var(--line-chrome); background:var(--g1);
  color:var(--ink); outline:none; box-shadow:var(--g1-sh), var(--g1-bevel);
  transition:border-color .25s var(--ease-glass), box-shadow .25s var(--ease-glass), background .25s var(--ease-glass); }
.hk-search input:hover { border-color:rgba(255,255,255,0.32); box-shadow:0 16px 44px rgba(3,6,12,0.48), var(--g1-bevel); }
html[data-theme="light"] .hk-search input:hover { border-color:rgba(40,62,90,0.34); box-shadow:0 16px 44px rgba(50,72,110,0.26), var(--g1-bevel); }
.hk-search input:focus { border-color:rgba(89,217,239,0.55); box-shadow:inset 0 0 24px rgba(89,217,239,0.08), 0 0 28px rgba(89,217,239,0.12), inset 0 1px 0 rgba(255,255,255,0.2); }
.hk-kbd { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-family:'Geist Mono',monospace; font-size:10px;
  color:var(--ink-3); border:1px solid var(--line); border-radius:7px; padding:3px 6px; background:rgba(255,255,255,0.04); }

/* round glass buttons: avatar / theme toggle */
.hk-round { width:40px; height:40px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-family:'Geist',sans-serif; font-size:14px; color:var(--ink); background:var(--g1);
  border:1px solid var(--line-chrome); box-shadow:var(--g1-sh), var(--g1-bevel);
  transition:border-color .22s var(--ease-glass), transform .22s var(--ease-glass); }
.hk-round:hover { border-color:rgba(89,217,239,0.5); transform:translateY(-1px); }

/* back pill */
.hk-back { display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:500; letter-spacing:0.25em;
  text-transform:uppercase; color:var(--ink-3); text-decoration:none; cursor:pointer; padding:8px 15px; border-radius:999px;
  background:var(--g1); border:1px solid var(--line-chrome); box-shadow:var(--g1-bevel);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  transition:color .22s var(--ease-glass), border-color .22s var(--ease-glass), background .22s var(--ease-glass), transform .3s var(--ease-spring), box-shadow .22s var(--ease-glass); }
.hk-back:hover { color:var(--ink); border-color:rgba(89,217,239,0.55); transform:translateX(-3px); box-shadow:0 0 22px rgba(89,217,239,0.16), var(--g1-bevel); }
.hk-back:active { transform:translateX(-5px) scale(0.98); }

/* zoom cluster */
.hk-zoom { display:flex; flex-direction:column; gap:7px; }
.hk-zoom button { width:36px; height:36px; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-family:'Geist',sans-serif; font-weight:300; font-size:17px; color:var(--ink-2); background:var(--g1);
  border:1px solid var(--line-chrome); box-shadow:var(--g1-sh), var(--g1-bevel);
  transition:all .22s var(--ease-spring); }
.hk-zoom button.fit { font-size:9px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.hk-zoom button:hover { border-color:rgba(89,217,239,0.6); color:var(--ink-bright); box-shadow:0 0 20px rgba(89,217,239,0.2), var(--g1-bevel); transform:scale(1.08); }
.hk-zoom button.fit:hover { transform:scale(1.06); }
.hk-zoom button:active { transform:scale(0.92); border-color:rgba(89,217,239,0.75);
  background:linear-gradient(165deg, rgba(89,217,239,0.16), rgba(89,217,239,0.05)); box-shadow:0 0 26px rgba(89,217,239,0.3); }

/* status + hint lines */
.hk-status { font-size:10.5px; font-weight:400; letter-spacing:0.26em; text-transform:uppercase; color:var(--ink-4);
  white-space:nowrap; pointer-events:none; }
.hk-hint { display:inline-flex; align-items:center; gap:8px; font-size:10px; font-weight:400; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--ink-4); pointer-events:none; transition:opacity .6s ease; }

/* buttons */
.hk-pulse { font-family:'Geist',sans-serif; font-size:14px; font-weight:500; letter-spacing:0.01em; color:var(--cta-ink);
  cursor:pointer; border:1px solid var(--cta-bd); border-radius:999px; padding:13px 26px; background:var(--cta); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; box-shadow:var(--cta-glow), inset 0 1px 0 rgba(255,255,255,0.55);
  transition:transform .22s var(--ease-spring), box-shadow .22s var(--ease-glass); }
.hk-pulse:hover { transform:translateY(-2px) scale(1.02); background:var(--cta-hover); box-shadow:0 16px 40px rgba(89,217,239,0.38), inset 0 1px 0 rgba(255,255,255,0.6); }
.hk-pulse:active { transform:scale(0.97); }
.hk-ghost { font-family:'Geist',sans-serif; font-size:13px; font-weight:400; color:var(--ink); cursor:pointer;
  border:1px solid var(--line-chrome); border-radius:999px; padding:12px 24px; background:rgba(255,255,255,0.05); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:all .22s var(--ease-glass); }
html[data-theme="light"] .hk-ghost { background:rgba(255,255,255,0.55); }
.hk-ghost:hover { border-color:rgba(89,217,239,0.5); box-shadow:0 0 24px rgba(89,217,239,0.14); }
.hk-ghost:active { transform:scale(0.97); }

/* filter / facet chips */
.hk-chip { font-family:'Geist',sans-serif; font-size:12.5px; font-weight:400; color:var(--ink-2); cursor:pointer;
  border:1px solid rgba(255,255,255,0.15); border-radius:999px; padding:9px 14px; background:rgba(255,255,255,0.05);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  transition:all .2s var(--ease-spring); }
html[data-theme="light"] .hk-chip { border-color:rgba(40,62,90,0.18); background:rgba(255,255,255,0.5); }
.hk-chip:hover { border-color:rgba(89,217,239,0.6); color:var(--ink-bright); transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(2,5,10,0.4), 0 0 18px rgba(89,217,239,0.2); }
.hk-chip:active { transform:translateY(0) scale(0.97); }
.hk-chip.on { color:var(--tint-ink); border-color:var(--tint-bd); background:var(--tint); box-shadow:0 0 20px rgba(89,217,239,0.12); font-weight:500; }

/* scrim */
.hk-scrim { position:fixed; inset:0; background:var(--scrim); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:0.001ms !important; animation-iteration-count:1 !important; }
}