/* experience.css — Living Brain WebGL layer, integrated BEHIND the full site content. */

/* ---- Fit to screen: no horizontal scroll, no zoom ---- */
/* IMPORTANT: never put overflow-x on html/body — it computes overflow-y to `auto`
   and breaks document scrolling. Clip the wide marquee band on #mk-root instead. */
html, body {
  max-width: 100%;
  touch-action: pan-y;            /* allow vertical scroll only — kills pinch/double-tap zoom */
  -webkit-text-size-adjust: 100%; /* stop iOS auto text inflation */
  overscroll-behavior-x: none;
}
#mk-root { overflow-x: clip; }    /* clip wide bands (marquees) so they never widen the page */

/* ---- Light theme: the WebGL brain (additive glow, needs black) is hidden.
   Background is the light gradient + soft aurora blobs; text is dark on light. ---- */
.brain-stage { display: none !important; }
#mk-hero-canvas { display: none !important; }

#mk-root {
  position: relative;
  z-index: 1;
}

/* ---- Loader ---- */
#brain-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity 0.85s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#brain-loader.done { opacity: 0; pointer-events: none; }

/* Crawler / slow-WebGL failsafe: the overlay must never trap the page.
   If loader.finish() hasn't cleared it (WebGL stall, module never loaded,
   crawler snapshot before boot), fade it out on its own. */
#brain-loader { animation: mkLoaderFailsafe 0.6s ease 2.2s forwards; }
@keyframes mkLoaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* No-JS guard: if support.js never hydrates (plain fetch + screenshot tool),
   the inline opacity:0 on reveal elements would render the page blank.
   Show content instead. Removed the instant JS runs, so real-user
   scroll-reveal is untouched. */
html.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }
.loader-mark { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: #f5f5f7; display: inline-flex; align-items: baseline; }
.loader-mark .lm-b {
  font-family: 'Sacramento', cursive;
  font-size: 42px;
  margin-left: -1px;
  padding-right: 7px;
  background: linear-gradient(105deg, #8fb0ff, #2997ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.loader-pct { font-variant-numeric: tabular-nums; color: #a1a1a6; font-size: 14px; letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
  #brain-loader { transition: none; animation-delay: 2.2s; animation-duration: 0.01s; }
}