/* immersive.css, home + lab portal pages.
   Brand rules: base is #222. The rainbow lives only in the logo chip.
   No gradient hover streaks. Minimal borders. Sen throughout. */

/* ------------------------------------------------------------------ fonts */
@font-face { font-family: 'Sen'; src: url('fonts/Sen/static/Sen-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Sen'; src: url('fonts/Sen/static/Sen-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Sen'; src: url('fonts/Sen/static/Sen-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Sen'; src: url('fonts/Sen/static/Sen-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

/* ------------------------------------------------------------------ tokens */
:root {
  --header-h: 88px;
  --bg: #222;
  --ink: #ffffff;                        /* pure white, reserved for emphasis */
  --ink-warm: #e7e1d8;                   /* warm off-white, body */
  --ink-dim: rgba(231,225,216,0.60);
  --ink-faint: rgba(231,225,216,0.34);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--ink-warm);
  font-family: 'Sen', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
}
a { color: inherit; }
::selection { background: rgba(255,255,255,0.16); }

/* film grain — toggled ON */
.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ------------------------------------------------------------------ logo (from neuroscientific.shop) */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  z-index: 50;
  pointer-events: none;
}
.nav-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-logo-link {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* The glyph itself is painted with the animated rainbow via an alpha mask, so
   everything outside the line-art is truly transparent (no square) at any size. */
.brand-logo-chip {
  display: inline-block;
  width: 56px;
  height: 34px;
  background: linear-gradient(90deg, #EE2B7B, #F25C4E, #F7931A, #4CAF50, #2F80ED, #EE2B7B, #F25C4E, #F7931A, #4CAF50, #2F80ED, #EE2B7B, #F25C4E, #F7931A, #4CAF50, #2F80ED, #EE2B7B);
  background-size: 300% 100%;
  animation: gradient 4s linear infinite;
  -webkit-mask: url('logo_mask.png') center / contain no-repeat;
          mask: url('logo_mask.png') center / contain no-repeat;
}
.brand-logo-backdrop, .brand-logo-stencil { display: none; }
@keyframes gradient { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.brand-logo-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

/* ------------------------------------------------------------------ hero (home) */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  /* reserve room for the logo up top; the copy centers in the rest. On short
     screens the copy stays full size and its lower lines fall past the fold,
     revealed by scrolling (never shrunk, never overlapping the logo). */
  padding: max(28vh, 150px) clamp(18px, 4vw, 56px) 8vh;
}
.hero-copy {
  margin: auto 0;
  width: min(95vw, 1240px);
  text-align: center;
}
.hero-title {
  margin: 0;
  font-size: clamp(3.75rem, 9vw, 6.75rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
}
/* nouns take the IntoMind gamut, in order: pink, gold, blue */
.hero-title .nn--pink { color: #EE2B7B; }
.hero-title .nn--gold { color: #F7931A; }
.hero-title .nn--blue { color: #2F80ED; }
/* line breaks: phone gets 4 short lines; wide desktop collapses to 2 */
@media (min-width: 1200px) {
  .hero-title .br-mobile { display: none; }
}
/* short viewports: keep the text full size; hide the scroll cue since the copy
   now overflows past the fold and is revealed by scrolling */
@media (max-height: 560px) {
  .hero-cue { display: none; }
}
.hero-sub {
  margin: 20px auto 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.55vw, 1.22rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-dim);
}
.hero-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  color: var(--ink-faint);
  animation: bob 2s ease-in-out infinite;
}
.hero-cue svg { display: block; width: 100%; height: 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .hero-cue { animation: none; } }

/* the single logo that animates from centre to corner (JS-driven transform).
   A large native chip so scaling stays crisp instead of upscaling a small bitmap. */
.hero-logo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  transform-origin: top left;
  will-change: transform;
  text-decoration: none;
}
.hero-logo .brand-logo-chip { width: 216px; height: 131px; }
.hero-logo:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

/* ------------------------------------------------------------------ stage (home) */
.stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }

/* ------------------------------------------------------------------ portals */
.portals {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.portal {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 clamp(32px, 6vw, 104px) clamp(64px, 13vh, 148px);
  text-decoration: none;
  color: var(--ink);
}
.portal--compute { justify-content: flex-end; text-align: right; }

.portal__label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 32ch;
  opacity: 0;
  transform: translateY(12px);
  animation: rise 1.1s var(--ease) forwards;
}
.portal--fab .portal__label { animation-delay: 0.4s; }
.portal--compute .portal__label { animation-delay: 0.55s; align-items: flex-end; }
@keyframes rise { to { opacity: 1; transform: none; } }

.portal__name {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: opacity 0.5s var(--ease);
}
.portal__hint {
  font-size: clamp(0.92rem, 1.35vw, 1.05rem);
  font-weight: 400;
  color: var(--ink-dim);
  max-width: 28ch;
  transition: color 0.5s var(--ease);
}
.portal__enter {
  margin-top: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.4s var(--ease), gap 0.4s var(--ease);
}
.portal--compute .portal__enter { flex-direction: row-reverse; }
.portal__arrow { transition: transform 0.4s var(--ease); display: inline-block; }
.portal--compute .portal__arrow { transform: scaleX(-1); }

/* quiet hover: brighten this side, gently recede the other. no color, no lines. */
.portals:hover .portal__name { opacity: 0.5; }
.portals:hover .portal:hover .portal__name { opacity: 1; }
.portal:hover .portal__enter { color: var(--ink); gap: 15px; }
.portal--fab:hover .portal__arrow { transform: translateX(4px); }
.portal--compute:hover .portal__arrow { transform: scaleX(-1) translateX(4px); }

.portal:focus-visible { outline: none; }
.portal:focus-visible .portal__name { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; text-decoration-color: var(--ink-faint); }

/* ------------------------------------------------------------------ no-js */
.nojs {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 48px;
  font-size: 1.2rem;
}

/* ------------------------------------------------------------------ footer */
.site-footer {
  position: relative;
  z-index: 4;
  background: var(--bg);
}
.foot-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 32px 52px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "signup nav" "legal legal";
  gap: 30px 40px;
  align-items: start;
}

/* signup */
.signup { grid-area: signup; max-width: 440px; }
.signup__label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.signup__row { display: flex; gap: 12px; align-items: stretch; }
.signup__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.24);
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  padding: 9px 2px;
  transition: border-color 0.3s var(--ease);
}
.signup__input::placeholder { color: var(--ink-faint); }
.signup__input:focus { outline: none; border-bottom-color: rgba(255,255,255,0.7); }
.signup__input.is-error { border-bottom-color: #F25C4E; }

.signup__btn {
  flex: 0 0 auto;
  background: transparent;
  color: var(--ink);
  border: none;
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 2px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}
.signup__btn:hover { opacity: 1; }
.signup__btn:disabled { opacity: 0.4; cursor: default; }
.signup__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* honeypot */
.signup__hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.signup__msg {
  min-height: 1.2em;
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: var(--ink-dim);
}
.signup__msg.is-error { color: #F25C4E; }
.signup__msg.is-ok { color: var(--ink); }

/* footer nav, quiet, no gradient underline */
.foot-nav {
  grid-area: nav;
  display: flex;
  gap: 30px;
  align-items: center;
  padding-top: 30px;
}
.foot-link {
  text-decoration: none;
  color: var(--ink-faint);
  font-size: 0.96rem;
  transition: color 0.3s var(--ease);
}
.foot-link:hover { color: var(--ink); }
.foot-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.foot-legal {
  grid-area: legal;
  margin: 0;
  padding-top: 26px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.7;
  max-width: 62ch;
}

/* ------------------------------------------------------------------ responsive */
/* portals stack only in PORTRAIT, matching the 3D objects (three-app stacks
   them when the viewport is portrait). In landscape both stay side by side. */
@media (orientation: portrait) {
  .portals { grid-template-columns: none; grid-template-rows: 1fr 1fr; }
  .portal { align-items: flex-end; padding: 0 26px 44px; }
  .portal--compute { justify-content: flex-start; text-align: left; }
  .portal--compute .portal__label { align-items: flex-start; }
  .portal--compute .portal__enter { flex-direction: row; }
  .portal--compute .portal__arrow { transform: none; }
  .portal--compute:hover .portal__arrow { transform: translateX(4px); }
}

@media (max-width: 820px) {
  .foot-inner { grid-template-columns: 1fr; grid-template-areas: "signup" "nav" "legal"; gap: 26px; }
  .foot-nav { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .portal__label { animation: none; opacity: 1; transform: none; }
  .brand-logo-backdrop { animation: none; }
}

/* ================================================================== lab pages */
body.lab { display: block; }

.lab-bg { position: fixed; inset: 0; z-index: -1; background: var(--bg); }
.lab-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.lab-stage #gl { position: absolute; inset: 0; width: 100%; height: 100%; }

/* soft flat scrim so scrolling content fades beneath the fixed logo (no gradient hue) */
body.lab .navbar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--bg) 45%, rgba(34,34,34,0));
  z-index: -1; pointer-events: none;
}

.lab-main { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.lab-hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--header-h);
  max-width: 40ch;
}
body.lab-compute .lab-hero { margin-left: auto; text-align: right; align-items: flex-end; }

.lab-back {
  position: absolute;
  top: calc(var(--header-h) + 10px);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.lab-back:hover { color: var(--ink); gap: 13px; }
body.lab-compute .lab-back { right: 32px; flex-direction: row-reverse; }

.lab-title {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
  color: var(--ink);
}
.lab-lede {
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
}

.lab-section { position: relative; padding: clamp(72px, 13vh, 148px) 0; }
.lab-section__label {
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 44px;
}

/* capabilities, plain columns, no boxes, no borders */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 44px 48px;
}
.cap__name { font-size: 1.22rem; font-weight: 700; margin: 0 0 10px; }
.cap__note { font-size: 0.98rem; line-height: 1.55; color: var(--ink-dim); margin: 0; max-width: 34ch; }

.lab-north { max-width: 62ch; }
.lab-north p { font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.5; color: var(--ink); margin: 0; }
.lab-north .domains {
  margin-top: 32px;
  display: flex; flex-wrap: wrap;
  gap: 10px 26px;
}
.domain {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

@media (max-width: 820px) {
  .lab-hero, body.lab-compute .lab-hero {
    max-width: none; margin: 0; text-align: left; align-items: flex-start; min-height: 90svh;
  }
  body.lab-compute .lab-back { left: 32px; right: auto; flex-direction: row; }
}

/* ================================================================== static pages (about, careers, invest) */
/* same quiet system as the labs, but the hero does not command a full viewport */
body.page .lab-hero {
  min-height: 0;
  padding-top: calc(var(--header-h) + clamp(44px, 10vh, 120px));
}
body.page .lab-main { min-height: 72svh; }

.prose { max-width: 62ch; }
.prose p {
  font-size: clamp(1rem, 1.45vw, 1.14rem);
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 0 0 1.3em;
}
.prose p:last-child { margin-bottom: 0; }
.prose a {
  color: var(--ink-warm);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--ink-faint);
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.prose a:hover { color: var(--ink); text-decoration-color: var(--ink-dim); }