/* =========================================================================
   Base / reset / layout — dark cosmic
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--void);
  color: var(--plaster);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
body { overflow: hidden; }

@media (pointer: fine) { body, a, button { cursor: none; } }

/* keyboard users: restore real cursor + hide custom one */
body.is-keyboard, body.is-keyboard a, body.is-keyboard button, body.is-keyboard input { cursor: auto !important; }
body.is-keyboard .CustomCursor { display: none; }

/* visible focus ring (WCAG 2.4.7) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

button { font-family: inherit; color: inherit; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

#app, .App { width: 100%; height: 100%; }
.App { position: relative; overflow: hidden; }

/* WebGL viewport */
.glviewer { position: fixed; inset: 0; z-index: var(--z-gl); }
.glviewer canvas { display: block; width: 100%; height: 100%; }

/* bottom vignette — deepen the void toward the floor */
.Museum__gradient-bottom {
  position: fixed; left: 0; bottom: 0; width: 100%; height: 60%;
  z-index: var(--z-grad); pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,15,0) 0%, rgba(11,11,15,0.55) 100%);
}
/* top vignette — frame the sky */
.Museum__gradient-top {
  position: fixed; left: 0; top: 0; width: 100%; height: 32%;
  z-index: var(--z-grad); pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,15,0.5) 0%, rgba(11,11,15,0) 100%);
}

.Museum { position: fixed; inset: 0; z-index: var(--z-ui); pointer-events: none; }
.Museum__Inner { position: absolute; inset: 0; }

[hidden] { display: none !important; }

/* language visibility — body carries .lang-zh or .lang-en */
.i18n-en { display: none; }
body.lang-en .i18n-zh { display: none; }
body.lang-en .i18n-en { display: revert; }

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