/* Home page (website, 2026-11-13): the OB13 Connectome from the left to the centre, CIPHER on the right.
   The documentation card opens inside the Connectome's area, so it never covers CIPHER's face. */
:root { --ink: #eef6ff; --ink-2: #a9bfd9; --ink-3: #6f88a8; --signal: #5fd6ff;
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif; --body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--ink); overflow: hidden; font-family: var(--body); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; border-radius: 8px; }

#cx { position: fixed; left: 0; top: 0; width: 66vw; height: 100vh; border: 0; display: block; background: #000; }
#cx { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%); mask-image: linear-gradient(to right, #000 82%, transparent 100%); }   /* anything drifting toward CIPHER dissolves; no hard edge */
#cipher { position: fixed; right: 2vw; bottom: 0; height: 72vh; aspect-ratio: 992 / 1184; max-width: 32vw; pointer-events: none;   /* three quarters of his earlier size (Loy, 2026-11-13) */
  opacity: 0; transition: opacity 1.2s ease; }
#cipher.on { opacity: 1; }

.topbar { position: fixed; top: 0; left: 0; padding: 26px 36px; pointer-events: none; }
.brand { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none;
  background: rgba(10, 24, 44, .55); border: 1px solid rgba(159, 216, 255, .3); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 20px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }

.welcome { position: fixed; left: 36px; bottom: 44px; width: min(440px, 32vw); text-align: left; pointer-events: none; }   /* lower left, under the Connectome, off CIPHER */
.welcome .eyebrow { margin: 0 0 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2);
  text-shadow: 0 0 8px #000, 0 0 16px #000; }
.welcome h1 { margin: 0; font-family: var(--body); font-weight: 600; font-size: clamp(28px, 2.7vw, 44px); line-height: 1.08; letter-spacing: -.01em;
  text-shadow: 0 0 18px rgba(0,0,0,.95), 0 0 34px rgba(0,0,0,.8), 0 0 22px rgba(95, 214, 255, .25); }
.enter { pointer-events: auto; display: inline-block; margin-top: 20px; padding: 13px 54px; border-radius: 999px; font-family: var(--display); font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, rgba(40, 90, 170, .55), rgba(8, 26, 60, .75)); border: 1px solid rgba(150, 210, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 18px -10px rgba(95,214,255,.6), 0 0 22px rgba(95,214,255,.25), 0 8px 26px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .2s ease, box-shadow .2s ease; }
.enter:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px -10px rgba(95,214,255,.8), 0 0 30px rgba(95,214,255,.4), 0 8px 26px rgba(0,0,0,.5); }
.byline { margin: 16px 0 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); text-shadow: 0 0 8px #000; }
.copyright { position: fixed; left: 36px; bottom: 14px; margin: 0; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: var(--ink-3); }

@media (max-width: 860px) { #cx { -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 860px) {   /* phone: the Connectome fills the screen, CIPHER smaller at the lower right, welcome at the top */
  #cx { width: 100vw; }
  #cipher { height: 46vh; max-width: 58vw; }
  .welcome { top: 76px; bottom: auto; left: 16px; right: 16px; width: auto; }
  .welcome h1 { font-size: 26px; } .enter { margin-top: 12px; padding: 10px 36px; } .byline { display: none; }
}
@media (prefers-reduced-motion: reduce) { #cipher { transition: none; } .enter { transition: none; } }

.welcome { transition: opacity .45s ease, transform .45s ease; }
body.card-open .welcome { opacity: 0; transform: translateY(10px); pointer-events: none; }
body.card-open .welcome .enter { pointer-events: none; }
@media (max-width: 860px) { body.card-open #cipher { opacity: 0; } }   /* phone: no room beside the card, so CIPHER steps out while it is open */

/* The entrance (Loy, 2026-11-13): CIPHER large in the centre, the camera dives into his head, a passage of light through his mind,
   and it all ends in just the Connectome, full width. Plays once per page load; reduced motion and Skip go straight to the end. */
#tunnel { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; opacity: 1; z-index: 7; }
body.intro #cipher { right: auto; left: 50%; bottom: 0; height: 100vh; max-width: none; transform-origin: 50% 16%; translate: -50% 0; z-index: 6; will-change: transform, opacity; }
body.intro #cx { opacity: 0; }
body.intro .welcome, body.intro .topbar, body.intro .copyright { opacity: 0; pointer-events: none; }
body.intro .welcome .enter, body.intro .brand { pointer-events: none; }
.welcome, .topbar, .copyright { transition: opacity .9s ease; }
.skip { position: fixed; right: 26px; bottom: 22px; z-index: 10; padding: 9px 18px; border-radius: 999px; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; background: rgba(10, 24, 44, .45);
  border: 1px solid rgba(159, 216, 255, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .5s ease; }
.skip:hover { color: var(--ink); border-color: rgba(159, 216, 255, .5); }
body:not(.intro) .skip { opacity: 0; pointer-events: none; }
/* after the entrance: just the Connectome, full width, no CIPHER */
body.done #cx { width: 100vw; -webkit-mask-image: none; mask-image: none; }
body.done #cipher, body.done #tunnel { display: none; }
@media (max-width: 860px) {
  body.intro #cipher { height: min(100vh, 125vw); }                         /* phone: his whole head fits the screen before the dive */
  .welcome { top: auto; bottom: 34px; }                                      /* phone: welcome at the foot, clear of the map's bar and bulbs */
  .copyright { bottom: 10px; font-size: .58rem; }
}

/* Loy's soma close-up (from her reference clip, a 6-second excerpt, unaltered): the head zoom crossfades into it, the soma centred */
#soma { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; pointer-events: none; opacity: 0; z-index: 6;
  transform-origin: 65.6% 44.5%; will-change: transform, opacity; }
body.done #soma { display: none; }

/* the opening shot: CIPHER with shoulders and chest, full page, edges melting into the night */
#idle { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: contain; pointer-events: none; z-index: 6; will-change: transform, opacity;
  -webkit-mask-image: radial-gradient(ellipse 62% 72% at 50% 45%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 62% 72% at 50% 45%, #000 62%, transparent 100%); }
body.done #idle { display: none; }