/* The people on the pitch pages (crowd.js): Noor, Sam and Jules from the
   landing's shared page, out on the site itself. Their pointers keep to the
   margins, follow the page as it scrolls, now and then select a line, and on
   the landing page edit its title. Lars, 2026-10-28: "as if we're in a zoo,
   in their territory". Drawn exactly as the app draws a pointer
   (pn-ui shared/pointer.js), at the app's own size. */

/* Two layers: one fixed to the window for hands at rest, one the size of the
   body that scrolls with it for everything on the text (crowd.js says why). */
.cr-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.cr-paper { position: absolute; left: 0; top: 0; width: 100%; z-index: 40; pointer-events: none; overflow: hidden; }

.cr-ptr { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .5s ease; will-change: transform; }
.cr-ptr.cr-on { opacity: 1; }
.cr-ptr svg { display: block; width: 20px; height: 23.6px; margin: -1.2px 0 0 -1.6px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); transition: transform .12s ease; transform-origin: 1.6px 1.2px; }
.cr-ptr path { fill: var(--c); }
.cr-ptr.cr-press svg { transform: scale(.84); }
.cr-ptr b {
  position: absolute; left: 13px; top: 20px; padding: 2.5px 8px 3px; border-radius: 4px 10px 10px 10px;
  background: var(--c); color: #0c0c0e; font: 650 11.5px/1.3 var(--body); white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  transform-origin: 0 0; transition: transform .3s cubic-bezier(.3, .7, .2, 1), opacity .25s ease;
}
/* A hand at rest folds its name away; it comes back when the hand moves. */
.cr-ptr.cr-quiet b { transform: scale(.4); opacity: 0; }

/* What somebody has selected: their colour over each line of it. */
.cr-band { position: absolute; left: 0; top: 0; background: var(--c); opacity: .26; border-radius: 3px; transition: opacity .35s ease; }
.cr-band.cr-gone { opacity: 0; }

/* A marquee somebody drags, and each line it reaches lit as a block: the app's
   block selection, a pill 10px past the words with its 8px corner, in the
   person's colour instead of the accent (editor.css, --sel-fill). */
.cr-box {
  position: absolute; left: 0; top: 0; border-radius: 3px; transition: opacity .3s ease;
  border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent);
}
.cr-pill { position: absolute; left: 0; top: 0; background: var(--c); opacity: .2; border-radius: 8px; animation: cr-in .15s ease-out; transition: opacity .35s ease; }
@keyframes cr-in { from { opacity: 0; } }
.cr-box.cr-gone, .cr-pill.cr-gone { opacity: 0; }

/* The landing title's word somebody edits, and a phrase somebody retypes. */
.cr-swap { font-style: normal; border-radius: .08em; transition: background-color .15s ease; }
.cr-swap.cr-sel { background: color-mix(in srgb, var(--c) 34%, transparent); }
.cr-caret {
  position: relative; display: inline-block; width: max(2px, .025em); height: .78em; margin: 0 -.02em 0 .02em; vertical-align: -.05em;
  border-radius: 2px; background: var(--c); opacity: 0; transition: opacity .2s ease;
}
.cr-caret.cr-on { opacity: 1; }
.cr-caret.cr-small { width: 2px; height: 1.05em; vertical-align: -.2em; }
.cr-caret::after {
  content: attr(data-who); position: absolute; left: 0; bottom: 100%; margin-bottom: 3px; padding: 2px 7px; border-radius: 4px 4px 4px 0;
  background: var(--c); color: #0c0c0e; font: 650 13px/1.35 var(--body); letter-spacing: 0; white-space: nowrap;
}
.cr-caret.cr-small::after { font-size: 11px; padding: 1px 5px; margin-bottom: 1px; }

/* The button that sends them away: always in the corner, over everything but
   the bar. A pointer in a no-entry sign; once they are gone, the pointer alone. */
.cr-toggle {
  --cr-gap: #141a24;
  position: fixed; left: 16px; bottom: 16px; z-index: 45; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
  background: rgba(20, 26, 36, .7); border: 1px solid var(--rim);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: color .2s ease, transform .2s ease;
}
.cr-toggle:hover { color: var(--ink); transform: scale(1.07); }
.cr-toggle:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.cr-toggle svg { width: 22px; height: 22px; display: block; }
.cr-toggle.cr-off { color: var(--ice); }

/* What they say: a white balloon over the pointer, turned inward near the right edge. */
.cr-say {
  position: absolute; left: 12px; bottom: calc(100% + 6px); padding: 6px 10px; border-radius: 12px 12px 12px 3px;
  background: #fff; color: #0c0c0e; font: 650 13px/1.25 var(--body); white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4); transform-origin: 0 100%;
  animation: cr-say .3s cubic-bezier(.3, .7, .2, 1.35);
}
.cr-say.cr-left { left: auto; right: 4px; border-radius: 12px 12px 3px 12px; transform-origin: 100% 100%; }
@keyframes cr-say { from { transform: scale(.3); opacity: 0; } }

/* The Easter egg: a toy gun slides in from the corner, turns on its grip to each
   of them, and they tumble off the bottom of the window. */
.cr-gun { position: absolute; width: 70px; height: 44px; transform: translate(-130px, 150px) rotate(-30deg); transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.cr-gun.cr-in { transform: none; }
.cr-gun i { position: absolute; inset: 0; transform-origin: 15px 33px; transition: transform .24s cubic-bezier(.3, .7, .2, 1); }
.cr-gun svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); transform-origin: 15px 33px; }
.cr-gun .cr-flash { opacity: 0; }
.cr-gun.cr-fire .cr-flash { animation: cr-flash .16s ease-out; }
.cr-gun.cr-fire svg { animation: cr-kick .2s ease-out; }
@keyframes cr-flash { from { opacity: 1; } }
@keyframes cr-kick { 30% { transform: translateX(-6px) rotate(-10deg); } }
.cr-bang {
  position: absolute; padding: 4px 8px; border-radius: 6px; background: #ffd34d; color: #0c0c0e;
  font: 800 15px/1 var(--display); letter-spacing: .02em; white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-8deg); animation: cr-bang .65s ease-out forwards;
}
@keyframes cr-bang { 0% { scale: .3; opacity: 0; } 18% { scale: 1.18; opacity: 1; } 70% { scale: 1; opacity: 1; } 100% { scale: 1; opacity: 0; } }
.cr-ptr.cr-dead { transition: none; animation: cr-fall 1.3s cubic-bezier(.45, 0, .85, .55) forwards; }
.cr-ptr.cr-dead path { animation: cr-hit .28s steps(2); }
@keyframes cr-fall { 0% { transform: none; } 14% { transform: translate(6px, -16px) rotate(-22deg); } 100% { transform: translate(70px, 110vh) rotate(230deg); opacity: 0; } }
@keyframes cr-hit { 0%, 50% { fill: #fff; } }

@media (prefers-reduced-motion: reduce) {
  .cr-layer, .cr-paper { display: none; }
}