/* The landing page: a fixed 3D world, ten chapters laid over it, and a
   scroll track that drives both. */



/* ------------------------------------------------------------- loader */

.loader { position: fixed; inset: 0; z-index: 100; background: #000; color: var(--ink); }
.no-gl .loader, .ready .loader { display: none; }
.loader__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The wordmark sits exactly in the middle (.ring-mark, as in the ring between
   pages); the count and the Enter button sit under it, inside the ring. */
.loader__below { position: absolute; left: 0; right: 0; top: calc(50% + clamp(34px, 3.6vw, 46px)); display: grid; justify-items: center; gap: 14px; text-align: center; }
.loader__num { font-size: 12px; letter-spacing: .3em; color: var(--ink2); min-width: 4ch; text-align: center; }
.loader__enter { display: grid; justify-items: center; gap: 14px; }
/* On a phone the ring is smaller (ticks.js: 30vmin), so Enter waits just under it. */
@media (max-width: 760px), (pointer: coarse) { .loader__below { top: calc(50% + 30vmin + 34px); } }
.loader__enter[hidden] { display: none; }
.pill--enter { min-width: 150px; height: 52px; font-size: 15px; }
.loader__corner { position: absolute; }
.loader__corner--tl { top: 26px; left: var(--gutter); }
.loader__corner--tr { top: 26px; right: var(--gutter); }
.loader__corner--bl { bottom: 26px; left: var(--gutter); }
.loader__corner--br { bottom: 26px; right: var(--gutter); }

/* ----------------------------------------------------------------- HUD */

.hud--marks { inset: 14px; pointer-events: none; z-index: 1; }
.hud--marks i { position: absolute; width: 11px; height: 11px; }
.hud--marks i::before, .hud--marks i::after { content: ""; position: absolute; background: rgb(var(--ink-rgb) / .35); }
.hud--marks i::before { left: 5px; top: 0; width: 1px; height: 11px; }
.hud--marks i::after { top: 5px; left: 0; height: 1px; width: 11px; }
.hud--marks i:nth-child(1) { left: 0; top: 70px; } .hud--marks i:nth-child(2) { right: 0; top: 70px; }
.hud--marks i:nth-child(3) { left: 0; bottom: 60px; } .hud--marks i:nth-child(4) { right: 0; bottom: 60px; }

.hud--chapter { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.at-end .hud--chapter, .menu-open .hud--chapter, .pop-open .hud--chapter, .is-leaving .hud--chapter { opacity: 0; transform: translateY(12px); pointer-events: none; }
.hud--chapter { right: var(--gutter); bottom: 22px; display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 10px; align-items: center; text-align: right; }
.hud--chapter b { font-weight: 400; color: var(--ink); }
.hud__name { color: var(--ink); min-width: 12ch; }
.hud__progress { grid-column: 1 / -1; height: 1px; background: var(--line); overflow: hidden; }
.hud__progress b { display: block; height: 100%; background: var(--iris); transform: scaleX(0); transform-origin: 0 50%; }

/* Chapter ticks. On hover the name slides out of the tick, inside the button,
   so the cursor's pill wraps the name and the tick together. */
.ticks { position: fixed; right: calc(var(--gutter) - 6px); top: 50%; z-index: 40; transform: translateY(-50%); display: grid; justify-items: end; gap: 2px; }
.ticks button { position: relative; display: flex; justify-content: flex-end; align-items: center; min-width: 44px; height: 14px; }
.ticks button::after { content: ""; flex: none; width: 10px; height: 1px; background: rgb(var(--ink-rgb) / .35); transition: width .5s var(--ease), background-color .3s; }
.ticks button.is-on::after { width: 26px; background: var(--ink); }
.ticks button span { max-width: 0; overflow: hidden; white-space: nowrap; font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: max-width .55s var(--ease), margin .55s var(--ease), opacity .3s; }
@media (hover: hover) { .ticks button:hover span { max-width: 16ch; margin-right: 10px; opacity: 1; } }
.ticks button:focus-visible span { max-width: 16ch; margin-right: 10px; opacity: 1; }

/* Things pinned to the world: names at each person, and chat bubbles. */
.labels { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 4px; opacity: 0; will-change: transform, opacity; }
.tag b { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); padding: 5px 8px; border-radius: 4px; background: rgb(3 3 4 / .6); white-space: nowrap; }
.tag small { font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #bfe3ff; white-space: nowrap; padding: 4px 7px; border-radius: 4px; background: rgb(3 3 4 / .6); transition: opacity .4s; }
.tag--you b { background: var(--ink); color: #000; }
.tag--row { display: flex; align-items: center; gap: 4px; }
.tag--bill b { background: var(--iris); color: #000; }
/* A reminder landing at Kabir. */
.tag.is-ping small { animation: ping 1.2s var(--ease); }
@keyframes ping { 0% { background: rgb(191 227 255 / .95); color: #000; box-shadow: 0 0 24px rgb(160 200 255 / .6); } 100% { background: rgb(3 3 4 / .6); color: #bfe3ff; box-shadow: none; } }
.bubble { position: absolute; left: 0; top: 0; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #f2f3f7; color: #0a0a0c; font: 400 14px/1.3 var(--ranade); box-shadow: 0 12px 30px rgb(0 0 0 / .5); opacity: 0; }
.bubble--seen { white-space: nowrap; }
/* The ask nobody answers: seen by all five, inside the bubble so it never covers a name. */
.bubble--seen::after { content: "Seen by 5"; display: block; margin-top: 5px; text-align: right; font: 400 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6a6f80; }
.bubble--nudge { width: min(300px, 80vw); border-radius: 18px 18px 4px 18px; background: linear-gradient(120deg, #eaf4ff, #f3eaff); }
.bubble--nudge::before { content: "Sent by Mull"; display: block; margin-bottom: 4px; font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6a6f80; }

/* The friends on the hero's orbit (main.js): a name on each orb; the one you
   point at (--open) says where you stand with them, and what a click does. */
.tag--friend { transition: none; }
.tag--friend small, .tag--friend em { max-height: calc(var(--open, 0) * 2.2em); opacity: var(--open, 0); overflow: hidden; }
.tag--friend em { font: 400 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--ink2); padding: 0 6px; border-radius: 3px; background: rgb(3 3 4 / .6); }
.tag--friend em:empty { display: none; }

/* ---------------------------------------------------------- chapters */

.stage { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.ch { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 90px calc(var(--gutter) + 2vw); opacity: 0; will-change: opacity, transform; }
.ch.is-live > * { pointer-events: auto; }
.ch--left { align-items: flex-start; }
.ch--right { align-items: flex-end; }
/* The words' column grows with the screen, and stays clear of the shape beside it. */
.ch--right > * { width: min(max(36vw, 460px), 42vw, 720px); }
.ch--left > * { max-width: min(max(36vw, 480px), 42vw, 720px); }
.ch--center { align-items: center; text-align: center; }
.ch--center .ch__kicker { justify-content: center; }
.ch__title { font: 400 clamp(40px, 4.6vw, 82px)/1.02 var(--excon); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.ch__body { margin-top: 24px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; color: var(--ink2); max-width: 40ch; }
.ch--center .ch__body { margin-left: auto; margin-right: auto; }
.ch__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero. The headline is real text, set over its own letters in particles
   (the world lines them up with it), in spectral type (base.css): it burns in
   behind a front of light as the particles arrive, and catches the same
   light wherever the cursor is. The group orbits round it (main.js). */
.ch--hero { justify-content: space-between; padding-top: clamp(96px, 14vh, 160px); padding-bottom: clamp(70px, 10vh, 120px); }
.hero__head { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding-bottom: clamp(20px, 4vh, 48px); text-align: center; }
.hero__h1, .hero__light { font: 400 clamp(50px, min(10.2vw, 18.5vh), 236px)/.98 var(--excon); letter-spacing: -.05em; }
.hero__h1 span, .hero__light span { display: block; text-wrap: balance; }
.hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; width: 100%; }
.hero__foot .ch__body { margin: 0; max-width: 36ch; color: var(--ink); }
.hero__foot .ch__cta { margin: 0; }
.hero__soon { flex-basis: 100%; margin-top: -18px; }
.ch__hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; }
.ch__hint i { width: 1px; height: 26px; background: linear-gradient(transparent, var(--ink)); animation: hint 2.2s var(--ease-io) infinite; transform-origin: 50% 0; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: 50% 0; } 51% { transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }

.eq { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; font-size: 12px; color: var(--ink2); }
.eq b { font-weight: 400; color: var(--ink); }
.eq__res { flex-basis: 100%; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.eq__res b { font-family: var(--excon); font-size: 34px; letter-spacing: -.02em; text-transform: none; margin-left: 10px; vertical-align: -6px; background: var(--iris); -webkit-background-clip: text; background-clip: text; color: transparent; }

.card {
  margin-top: 30px; display: flex; align-items: center; gap: 16px; width: min(440px, 100%);
  padding: 16px 14px 16px 22px; border-radius: 22px;
  background: linear-gradient(176deg, var(--card-top), var(--card-bot)); box-shadow: 0 24px 60px var(--shadow), inset 0 0 0 1px var(--line);
  transition: box-shadow .6s var(--ease);
}
.card p { flex: 1; color: var(--ink); font-size: 15.5px; line-height: 1.35; }
.card small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink3); }
.card.is-done { box-shadow: 0 24px 60px var(--shadow), inset 0 0 0 1px rgb(191 227 255 / .45), 0 0 60px rgb(160 200 255 / .18); }
.card__hold {
  position: relative; flex: none; height: 46px; padding: 0 20px; border-radius: 999px; overflow: hidden;
  background: rgb(var(--ink-rgb) / .1); color: var(--ink); font: 500 14px/1 var(--ranade);
  touch-action: none; -webkit-touch-callout: none; transition: transform .3s var(--ease);
}
.card__hold span { position: relative; mix-blend-mode: difference; color: #fff; }
.card__fill { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.card__hold.is-holding { transform: scale(.96); }
.card.is-done .card__fill { background: var(--iris); }
.card--due p span { display: block; font: 400 26px/1.1 var(--excon); letter-spacing: -.02em; margin-top: 6px; }
.card--due small { margin: 0; }
.card__amt { font: 400 34px/1 var(--excon); letter-spacing: -.03em; color: var(--ink); }

.screens { margin-top: 30px; display: grid; }
/* The six screens: click one and the phone turns to it. */
.screens li { border-top: 1px solid var(--line); color: var(--ink3); font-size: 15px; transition: color .5s var(--ease), padding .5s var(--ease); }
.screens button { display: flex; gap: 16px; align-items: baseline; width: 100%; padding: 12px 0; text-align: left; color: inherit; font-size: inherit; line-height: 1.5; }
.screens li .mono { color: inherit; transition: color .5s var(--ease); }
.screens li:not(.is-on):hover { color: var(--ink2); padding-left: 4px; }
.screens li.is-on { color: var(--ink); padding-left: 10px; }
.screens li.is-on .mono { color: #bfe3ff; }
.shots-fallback { display: none; }

/* Questions, in a panel down the middle of the tunnel. */
.ch--faq .ch__title { font-size: clamp(36px, 3.6vw, 60px); }
.faq { margin-top: 30px; width: min(620px, 100%); text-align: left; padding: 8px 26px; border-radius: 24px; background: rgb(3 3 4 / .55); box-shadow: inset 0 0 0 1px var(--line); }
.qa + .qa { border-top: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font-size: 17px; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; flex: none; width: 12px; height: 12px; transition: transform .7s var(--ease); }
/* The cursor wraps the whole question (cursor.js); the sign turns as it does. */
@media (hover: hover) { .qa summary:hover i { transform: rotate(180deg); } }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: var(--ink); transition: transform .5s var(--ease); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: rotate(0); }
.qa__a { overflow: hidden; }
.qa__a p { padding: 0 0 20px; color: var(--ink2); line-height: 1.6; font-size: 15.5px; }

/* The end: the glass wordmark above, the ask below, the footer at the bottom. */
.ch--end { justify-content: flex-end; padding-bottom: 20px; }
.end { display: grid; justify-items: center; width: min(640px, 100%); margin-bottom: clamp(28px, 6vh, 64px); }
.end .ch__title { font-size: clamp(34px, 3.4vw, 58px); }
.end .ch__body { margin-top: 16px; }
.qr { margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.qr[hidden] { display: none; }
.qr > div { width: 84px; height: 84px; padding: 8px; border-radius: 12px; background: #fff; }
.qr svg { width: 100%; height: 100%; }
.track { position: relative; z-index: 1; pointer-events: none; }
/* A touch screen pages through the story a step per swipe (src/pager.js): the
   page never scrolls or bounces under a finger by itself. Pinching still zooms. */
html.pager, html.pager body { overscroll-behavior: none; }
html.pager body { touch-action: pinch-zoom; }
.stop { height: calc(var(--h) * 1vh); }

/* ------------------------------------------------------------ mobile */

@media (max-width: 760px) {
  .ticks, .hud--marks, .loader__corner--tr, .loader__corner--br { display: none; }
  .hud--chapter { bottom: 14px; }
  .hud--chapter .hud__name { display: none; }
  .stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 36%, rgb(3 3 4 / .72) 60%, rgb(3 3 4 / .94)); }
  .ch { justify-content: flex-end; align-items: stretch; text-align: left; padding: 0 var(--gutter) 70px; }
  .ch--right > *, .ch--left > * { width: auto; max-width: 100%; }
  .ch__title { font-size: clamp(32px, 8.6vw, 44px); }
  .ch__kicker { margin-bottom: 14px; }
  .ch__body { margin-top: 14px; font-size: 15.5px; }
  .ch__cta { margin-top: 20px; }
  .ch__cta .pill--lg { height: 52px; padding: 0 22px; font-size: 15px; }
  .ch__hint { display: none; }
  .ch--hero { justify-content: space-between; padding-top: 86px; }
  .hero__head { padding-bottom: 12px; }
  .hero__h1, .hero__light { font-size: clamp(44px, 14.4vw, 80px); }
  .hero__foot { gap: 18px; }
  .hero__soon { margin-top: 0; }
  .ch--app .ch__title { font-size: 28px; }
  .screens { margin-top: 14px; }
  .screens li { display: none; border: 0; padding: 0; }
  .screens li.is-on { display: flex; padding: 0; }
  .card { margin-top: 18px; }
  .eq { margin-top: 16px; }
  .ch--faq, .ch--end { text-align: center; align-items: center; }
  .ch--faq { justify-content: center; padding-top: 70px; }
  .faq { padding: 4px 18px; }
  .qa summary { font-size: 15.5px; padding: 14px 0; }
  .end .ch__title { font-size: 30px; }
}

/* A phone in Safari shows much less than its screen (the bars stay put while
   the story pages), so on a short one the words are set tighter, to leave
   their shapes room above them (the world fits each shape into it). */
@media (max-width: 760px) and (max-height: 720px) {
  .ch { padding-bottom: 54px; }
  .ch__title { font-size: clamp(27px, 7.4vw, 34px); }
  .ch__kicker { margin-bottom: 10px; }
  .ch__body { margin-top: 10px; font-size: 14.5px; line-height: 1.5; }
  .ch__cta { margin-top: 16px; }
  .ch__cta .pill--lg { height: 46px; }
  .hero__h1, .hero__light { font-size: clamp(40px, 12.6vw, 60px); }
  .hero__foot { gap: 12px; }
  .card { margin-top: 14px; padding: 12px 12px 12px 18px; }
  .card--due p span { font-size: 22px; }
  .card__amt { font-size: 28px; }
  .eq { margin-top: 12px; }
  .eq__res { padding-top: 10px; }
  .eq__res b { font-size: 28px; }
  .end .ch__title { font-size: 26px; }
  .end .ch__body { font-size: 14px; }
  .end .notify { margin-top: 16px; }
  .notify__msg { margin-top: 8px; }
  .share { margin-top: 10px; gap: 4px 14px; }
  .share .mono { flex-basis: 100%; text-align: center; }
  .ch--end { padding-bottom: 12px; }
  .end { margin-bottom: 16px; }
  .endfoot { padding-top: 12px; gap: 8px; }
}
/* An iPhone SE in Safari: 550 or so tall. The hero's line about the launch and
   the end's paragraph give way (both are said again elsewhere). */
@media (max-width: 760px) and (max-height: 600px) {
  .hero__soon, .end .ch__body { display: none; }
  .ch__body { font-size: 14px; }
}

/* Tablets held upright: the world stands its shapes in the top of the view,
   as on a phone, so the words go underneath, at a tablet's size. */
@media (min-width: 761px) and (orientation: portrait) {
  .stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 46%, rgb(3 3 4 / .7) 66%, rgb(3 3 4 / .94)); }
  .ch { justify-content: flex-end; align-items: flex-start; padding: 0 calc(var(--gutter) + 2vw) 100px; }
  .ch--right > *, .ch--left > * { width: auto; max-width: min(620px, 100%); }
  .ch--center { align-items: center; }
  .ch--hero { justify-content: space-between; padding-top: 120px; }
  .ch--faq { justify-content: center; padding-top: 90px; }
  .ch--app .ch__title { font-size: clamp(36px, 5vw, 52px); }
  .screens li { display: none; border: 0; }
  .screens li.is-on { display: flex; }
}

/* A phone on its side: the side-by-side layout, but only 360 to 520 pixels
   tall, so everything is set tighter, and the hero keeps just its buttons. */
@media (max-height: 520px) and (orientation: landscape) {
  .ch { padding-top: 66px; padding-bottom: 40px; }
  .ch__title { font-size: clamp(26px, 3.6vw, 40px); }
  .ch__kicker { margin-bottom: 10px; }
  .ch__body { margin-top: 10px; font-size: 14px; line-height: 1.5; }
  .ch__cta { margin-top: 14px; }
  .ch__cta .pill--lg { height: 44px; padding: 0 20px; font-size: 14px; }
  .ch__hint, .hero__soon, .hero__foot .ch__body { display: none; }
  .ch--hero { padding-top: 66px; padding-bottom: 34px; }
  .hero__h1, .hero__light { font-size: min(8vw, 17vh); }
  .hero__foot { justify-content: center; }
  .card { margin-top: 14px; padding: 10px 10px 10px 16px; }
  .eq { margin-top: 12px; }
  .eq__res { padding-top: 8px; }
  .eq__res b { font-size: 26px; }
  .screens { margin-top: 12px; }
  .screens li { display: none; border: 0; }
  .screens li.is-on { display: flex; }
  .ch--faq .ch__title { font-size: 28px; }
  .faq { margin-top: 12px; }
  .qa summary { padding: 9px 0; font-size: 14.5px; }
  .ch--end { padding-bottom: 10px; }
  .end { margin-bottom: 10px; }
  .end .ch__title { font-size: 28px; }
  .end .ch__body { display: none; }
  .end .notify { margin-top: 12px; }
  .share { margin-top: 8px; }
  .hud--chapter { bottom: 12px; }
}

/* ------------------------------------------ no WebGL: a plain, readable page */

.no-gl .stage { position: static; pointer-events: auto; }
.no-gl .stage::before, .no-gl .track, .no-gl .labels, .no-gl .ticks, .no-gl .hud--chapter, .no-gl .hud--marks { display: none; }
.no-gl .ch { position: relative; inset: auto; opacity: 1; min-height: 80vh; padding-top: 120px; padding-bottom: 60px; }
.no-gl .ch > *, .no-gl .ch.is-live > * { pointer-events: auto; }
.no-gl .shots-fallback { display: flex; gap: 16px; overflow-x: auto; max-width: 100%; margin-top: 30px; padding-bottom: 10px; }
.no-gl .shots-fallback img { width: 220px; flex: none; border-radius: 26px; }
.no-gl .hud--top { background: linear-gradient(var(--bg) 55%, transparent); }
body { background: radial-gradient(1200px 800px at 80% 10%, #0c1020, transparent 60%), var(--bg); }