/* The pool scene, shared by /business (its held opener) and the home (#business, played once on entry).
   One pool pin on a real street splits into twenty spots that fill one by one, each ending in a photo with a
   timestamp (all labelled Example). Uses the shared tokens, pill, chip and plate. JS: pages/business.js. */

/* ---------- the opener: held 250vh on desktop ---------- */
.pool { height: 250vh; height: 250svh; --halo: var(--map); --tk-fs: clamp(38px, min(3.9vw, 6.2vh), 56px); }
.pool .frame { background: var(--map); }
.pool-map { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
/* the type side of the map is quieted, the street side stays full strength */
.pool-map::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--map) 0, var(--map) 28%, color-mix(in srgb, var(--map) 0%, transparent) 50%); }
.pool-stage { position: absolute; inset: 0; z-index: 2; }
.mk-pool { z-index: 3; }
.mk-pool .tk-b { text-transform: uppercase; letter-spacing: .08em; }
html.motion .pool:not(.is-in) .mk-pool .tk { opacity: 0; }
html.motion .pool.is-in .mk-pool .tk { animation: pin-drop .55s var(--out) both; }

/* twenty spots: open (dashed) until someone takes one, then a category colour with their initial */
.ps-list { position: absolute; inset: 0; }
.ps { --d: clamp(34px, 5vh, 46px); position: absolute; left: var(--ax); top: var(--ay); width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; background: #fff; border: 2.5px dashed var(--ink); display: grid; place-items: center; padding-top: calc(var(--d) * .06); font: 800 calc(var(--d) * .46)/1 var(--display); color: transparent; opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.3);
  transition: transform .6s var(--out) calc(var(--k, 0) * .025s), opacity .2s var(--out) calc(var(--k, 0) * .025s), background-color .25s var(--out), color .25s var(--out); }
.pool[data-split] .ps { opacity: 1; transform: none; }
.ps.is-in { background: var(--c); color: var(--fg, var(--ink)); border-style: solid; box-shadow: 0 calc(var(--d) * .1) calc(var(--d) * .2) -.1em rgba(18,18,18,.35); }
html.motion .pool[data-split] .ps.is-in { animation: ps-take .35s var(--out); }
@keyframes ps-take { from { transform: scale(1.4); } }

/* the photo each spot sends back: a grey slot, the spot and the time */
.proofs { position: absolute; inset: 0; }
.proof { --w: clamp(124px, 11.6vw, 168px); position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); width: var(--w); margin: calc(var(--w) * -.48) 0 0 calc(var(--w) / -2); display: grid; gap: 7px; padding: 7px 7px 9px; background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(18,18,18,.12); opacity: 0; transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(.12); transition: transform .65s var(--out) calc(var(--k, 0) * .12s), opacity .25s var(--out) calc(var(--k, 0) * .12s); }
.pool[data-proof] .proof { opacity: 1; transform: rotate(var(--r)); }
.shot { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 4px; color: rgba(18,18,18,.42); background: #D6D1C6 repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 7px, transparent 7px 14px); }
.shot svg { width: 30%; height: auto; }
.proof-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 0 2px; font: 600 13px/1 var(--text); }
.proof-cap span { color: var(--mute); font-variant-numeric: tabular-nums; }
.proof .ex { position: absolute; top: -10px; left: -8px; rotate: -4deg; font-size: 10px; padding: 5px 6px 4px; }

/* the map's own live chip, counting the example spots as they fill */
.pool-count { z-index: 3; right: var(--gutter); }
.pool-count b { min-width: 1.2em; text-align: right; }

/* type over the quiet side of the map */
.pool-in { position: relative; z-index: 4; height: 100%; display: flex; flex-direction: column; align-items: flex-start; padding-top: calc(var(--nav-h) + clamp(20px, 4.4vh, 48px)); pointer-events: none; }
.pool-in > * { pointer-events: auto; }
.pool-h { font: 800 var(--fs-inner)/.92 var(--display); letter-spacing: -.035em; }
.pool-lead { margin-top: clamp(16px, 2.6vh, 28px); max-width: 36ch; font-weight: 600; }
.pool-acts { margin-top: clamp(18px, 3vh, 30px); }
.pool-steps { position: absolute; left: 0; right: 0; bottom: clamp(24px, 5.4vh, 52px); z-index: 4; pointer-events: none; }
.pool-beats { position: relative; height: 92px; }
.pb { position: absolute; left: 0; bottom: 0; display: flex; align-items: flex-start; gap: 16px; width: min(460px, 36vw); opacity: 0; transform: translateY(18px); transition: opacity .3s var(--in), transform .4s var(--in); }
.pb.is-on { opacity: 1; transform: none; transition: opacity .5s var(--out) .1s, transform .5s var(--out) .1s; }
.pb .pill { flex: none; font-size: 20px; padding: .26em .5em .12em; border-width: 2.5px; margin-top: 4px; }
.pb-copy { display: grid; gap: 6px; }
.pb-copy b { font: 800 clamp(28px, 2.8vw, 40px)/1 var(--display); letter-spacing: -.02em; }
.pb-copy span { font-size: 17px; line-height: 1.35; color: #333; }

@media (max-width: 959px) {
  .pool { height: auto; --tk-fs: 32px; }
  .pool .frame { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; }
  .pool-in { order: 1; height: auto; padding-top: calc(var(--nav-h) + 32px); padding-bottom: 26px; }
  .pool-h { letter-spacing: -.04em; }
  .pool-lead { max-width: none; font-size: 17px; }
  .pool-map { order: 2; position: relative; inset: auto; height: min(150vw, 640px); border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); }
  .pool-map::after { display: none; }
  .ps { --d: 30px; }
  .proof { --w: 104px; left: calc(var(--fxp, var(--fx)) * 100%); top: calc(var(--fyp, var(--fy)) * 100%); }
  .proof.ph-off { display: none; }
  .proof-cap { font-size: 11px; }
  .pool-count { bottom: 14px; }
  .pool-steps { order: 3; position: static; padding-top: 30px; padding-bottom: 44px; pointer-events: auto; }
  .pool-beats { height: auto; display: grid; gap: 22px; }
  .pb { position: static; width: auto; opacity: 1; transform: none; }
  .pb-copy b { font-size: 28px; }
  .pb-copy span { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ps, .proof, .pb, .pb.is-on { transition-duration: .2s !important; transition-delay: 0s !important; }
  .ps, .proof { transform: none !important; }
}
@media (prefers-contrast: more) {
  .proof { box-shadow: 0 0 0 2px var(--ink); }
}