/*! dm-demo · © 2026 Bruno Silva · brsilva.co · All rights reserved. Unauthorised copying or reuse is prohibited. */
/* dm-demo: a post's comments flood in, every one gets an auto-reply, and a
   floating per-contact bill meter races up; it ends on a split against DMloop.
   Laid out in design units (--u = component width / --W), so the phone and the
   floating meter scale together and nothing reflows mid-animation.
   Wide (component ≥ 440 px): the meter overhangs the phone by 40% of its width.
   Narrow: the overhang shrinks so the component always fits its container.
   The default CSS is the END frame (no-JS and reduced-motion both show it);
   dm-demo.js sets the start state and runs the loop. */

.dm-demo{
  --bs-brsilva-co-2026:1;   /* signature: intentionally unused; keep */
  --dm-ink:#17191c;
  --dm-violet:#5b3fd0;
  --dm-sienna:#5d2a1a;
  --dm-coral:#f2a07e;
  --dm-screen:#0e0e11;
  --dm-sheet:#1b1b20;
  --dm-text:#f4f4f6;
  --dm-muted:#a2a5ae;
  width:100%;
  max-width:504px;
  container-type:inline-size;
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.dm-demo *,.dm-demo *::before,.dm-demo *::after{box-sizing:border-box}

.dm-demo__stage{
  --W:400;                       /* total design width: phone 360 + overhang 40 */
  --u:calc(100cqw / var(--W));
  --m:calc(var(--u) * 1.1);      /* meter type unit */
  position:relative;
  width:100%;
  height:calc(var(--u) * 640);
  user-select:none;
}
@container (min-width: 440px){
  .dm-demo__stage{--W:504;--m:var(--u)}   /* phone 360 + overhang 144 (40%) */
}

/* ---------- phone: the post ---------- */
.dm-demo__phone{position:absolute;left:0;top:0;width:calc(var(--u) * 360);height:calc(var(--u) * 640);overflow:hidden;isolation:isolate;border-radius:calc(var(--u) * 24);background:var(--dm-screen);color:var(--dm-text);
  box-shadow:rgba(4,23,43,.05) 0 0 0 1px,rgba(0,0,0,.1) 0 20px 25px -5px,rgba(0,0,0,.1) 0 8px 10px -6px}

.dm-demo__head{position:absolute;left:0;right:0;top:0;height:calc(var(--u) * 56);display:flex;align-items:center;gap:calc(var(--u) * 10);padding:0 calc(var(--u) * 14)}
.dm-demo__me{display:block;flex:none;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:50%;object-fit:cover;background:#2a2a30}
.dm-demo__handle{font-size:calc(var(--u) * 14.5);line-height:1;font-weight:600;letter-spacing:-.005em}

.dm-demo__img{position:absolute;left:0;right:0;top:calc(var(--u) * 56);height:calc(var(--u) * 420);overflow:hidden;background:#2a2a30}
.dm-demo__photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.dm-demo__bubble{position:absolute;left:50%;top:calc(var(--u) * 30);transform:translateX(-50%);white-space:nowrap;text-align:center;padding:calc(var(--u) * 9) calc(var(--u) * 16);border-radius:calc(var(--u) * 14);background:var(--dm-violet);color:#fff;font-size:calc(var(--u) * 15);line-height:calc(var(--u) * 20);font-weight:600;box-shadow:0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(0,0,0,.25)}
.dm-demo__bubble strong{font-weight:750;letter-spacing:.02em}

.dm-demo__actions{position:absolute;left:0;right:0;top:calc(var(--u) * 476);height:calc(var(--u) * 48);display:flex;align-items:center;gap:calc(var(--u) * 14);padding:0 calc(var(--u) * 14)}
.dm-demo__actions svg{width:calc(var(--u) * 24);height:calc(var(--u) * 24);fill:none;stroke:var(--dm-text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dm-demo__meta{position:absolute;left:calc(var(--u) * 14);right:calc(var(--u) * 14);top:calc(var(--u) * 526);font-size:calc(var(--u) * 13);line-height:calc(var(--u) * 20);white-space:nowrap;overflow:hidden}
.dm-demo__meta span{display:block}
.dm-demo__meta .dm-demo__dim{color:var(--dm-muted)}

/* ---------- comments sheet (end frame: down, so the photo shows under the split) ---------- */
.dm-demo__sheet{position:absolute;left:0;right:0;top:calc(var(--u) * 56);height:calc(var(--u) * 584);border-radius:calc(var(--u) * 20) calc(var(--u) * 20) 0 0;background:var(--dm-sheet);transform:translateY(100%);box-shadow:0 calc(var(--u) * -6) calc(var(--u) * 24) rgba(0,0,0,.35);will-change:transform}
.dm-demo__grab{position:absolute;left:50%;top:calc(var(--u) * 8);width:calc(var(--u) * 36);height:calc(var(--u) * 4);margin-left:calc(var(--u) * -18);border-radius:99px;background:#4a4c55}
.dm-demo__stitle{position:absolute;left:0;right:0;top:calc(var(--u) * 18);text-align:center;font-size:calc(var(--u) * 13.5);line-height:calc(var(--u) * 20);font-weight:600}
/* the list runs down to the composer; new rows enter at the bottom, below the floating meter */
.dm-demo__view{position:absolute;left:0;right:0;top:calc(var(--u) * 48);height:calc(var(--u) * 476);overflow:hidden;border-top:1px solid #2a2b31}
.dm-demo__list{position:absolute;inset:0}
.dm-demo__add{position:absolute;left:calc(var(--u) * 12);right:calc(var(--u) * 12);bottom:calc(var(--u) * 12);height:calc(var(--u) * 40);border-radius:999px;background:#25252b;color:var(--dm-muted);font-size:calc(var(--u) * 13.5);line-height:calc(var(--u) * 40);padding:0 calc(var(--u) * 16);white-space:nowrap}
/* a fixed pool of rows, recycled; each is placed with a transform only */
.dm-demo__row{position:absolute;left:0;right:0;top:0;height:calc(var(--u) * 54);white-space:nowrap;opacity:0;will-change:transform,opacity;contain:layout paint}
.dm-demo__row--r{height:calc(var(--u) * 46)}
.dm-demo__av{position:absolute;left:calc(var(--u) * 14);top:calc(var(--u) * 10);display:grid;place-items:center;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:50%;background:var(--av,#e3d9fb);color:var(--dm-ink);font-size:calc(var(--u) * 11);font-weight:650}
.dm-demo__avimg{position:absolute;left:calc(var(--u) * 54);top:calc(var(--u) * 6);display:none;width:calc(var(--u) * 22);height:calc(var(--u) * 22);border-radius:50%;object-fit:cover;background:#2a2a30}
.dm-demo__row--r .dm-demo__av{display:none}
.dm-demo__row--r .dm-demo__avimg{display:block}
.dm-demo__name{position:absolute;left:calc(var(--u) * 54);top:calc(var(--u) * 9);font-size:calc(var(--u) * 12.5);line-height:calc(var(--u) * 16);font-weight:600}
.dm-demo__name i{font-style:normal;font-weight:450;color:var(--dm-muted);margin-left:calc(var(--u) * 6)}
.dm-demo__txt{position:absolute;left:calc(var(--u) * 54);top:calc(var(--u) * 27);font-size:calc(var(--u) * 14);line-height:calc(var(--u) * 18)}
.dm-demo__row--r .dm-demo__name{left:calc(var(--u) * 86);top:calc(var(--u) * 4)}
.dm-demo__row--r .dm-demo__txt{left:calc(var(--u) * 86);top:calc(var(--u) * 21)}
.dm-demo__at{color:#b9a8ff}
.dm-demo__caret{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--dm-text)}
.dm-demo__heart{position:absolute;right:calc(var(--u) * 18);top:calc(var(--u) * 19);width:calc(var(--u) * 15);height:calc(var(--u) * 15);fill:none;stroke:var(--dm-muted);stroke-width:1.8}
.dm-demo__row--r .dm-demo__heart{display:none}

/* tap indicator */
.dm-demo__tap{position:absolute;left:0;top:0;width:calc(var(--u) * 44);height:calc(var(--u) * 44);border-radius:50%;background:rgba(255,255,255,.32);border:1.5px solid rgba(255,255,255,.75);box-shadow:0 0 0 calc(var(--u) * 6) rgba(255,255,255,.08);opacity:0;pointer-events:none;z-index:5}

/* ---------- floating bill meter ---------- */
.dm-demo__meter{position:absolute;z-index:2;left:calc(var(--u) * 120);top:calc(var(--u) * 288);width:calc(var(--u) * 280);height:calc(var(--u) * 192);overflow:hidden;isolation:isolate;border-radius:calc(var(--u) * 20);color:var(--dm-ink);
  box-shadow:0 0 0 1px rgba(4,23,43,.05),0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
@container (min-width: 440px){
  .dm-demo__meter{left:calc(var(--u) * 133);width:calc(var(--u) * 371);height:calc(var(--u) * 128)}
}
.dm-demo__front{position:absolute;inset:0;background:var(--dm-coral)}
.dm-demo__ftext{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--m) * 10);padding:0 calc(var(--m) * 16) calc(var(--m) * 3);opacity:0}
.dm-demo__cap{font-size:calc(var(--m) * 12.5);line-height:calc(var(--m) * 16);font-weight:600;white-space:nowrap}
.dm-demo__nums{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--m) * 6);white-space:nowrap}
.dm-demo__label{display:block;font-size:calc(var(--m) * 12);line-height:calc(var(--m) * 16);font-weight:500;color:#383b42}
.dm-demo__people{display:block;margin-top:calc(var(--m) * 3);font-size:calc(var(--m) * 17);line-height:calc(var(--m) * 22);font-weight:600;letter-spacing:-.01em}
[data-dm-people],.dm-demo__bill{font-variant-numeric:tabular-nums}
.dm-demo__billbox{position:relative;display:inline-block;transform-origin:left bottom}
.dm-demo__bill{font-family:'Source Serif 4',Georgia,serif;font-size:calc(var(--m) * 32);line-height:1;font-weight:700;letter-spacing:-.01em;color:var(--dm-sienna)}
@container (min-width: 440px){
  .dm-demo__nums{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:calc(var(--m) * 12)}
  .dm-demo__billbox{transform-origin:right bottom}
}
.dm-demo__prog{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u) * 3);background:rgba(23,25,28,.1);opacity:0;z-index:2}
.dm-demo__prog i{position:absolute;inset:0;background:rgba(23,25,28,.55);transform-origin:left center}

/* the final split, inside the floating card: stacked when narrow, side by side when wide */
.dm-demo__split{position:absolute;inset:0}
.dm-demo__side{position:absolute;left:0;right:0;display:flex;flex-direction:column;justify-content:center;padding:0 calc(var(--m) * 16);white-space:nowrap}
.dm-demo__side--them{top:0;height:50%;color:var(--dm-ink)}
.dm-demo__side--us{--rev:1;top:50%;bottom:0;background:var(--dm-violet);color:#fff;transform:translateY(calc((1 - var(--rev)) * 100%))}
@container (min-width: 440px){
  .dm-demo__side{top:0;bottom:0;height:auto;width:50%}
  .dm-demo__side--them{left:0;right:auto}
  .dm-demo__side--us{left:auto;right:0;top:0;transform:translateX(calc((1 - var(--rev)) * 100%))}
}
.dm-demo__k{font-size:calc(var(--m) * 12);line-height:calc(var(--m) * 16);font-weight:650;letter-spacing:.01em}
.dm-demo__side--them .dm-demo__k{color:#383b42;white-space:normal}   /* may wrap to 2 lines in the half-width split */
.dm-demo__p{font-size:calc(var(--m) * 13);line-height:calc(var(--m) * 18);font-weight:500;margin-top:calc(var(--m) * 2)}
.dm-demo__amt{margin-top:calc(var(--m) * 2);font-size:calc(var(--m) * 12);line-height:calc(var(--m) * 28);font-weight:500}
.dm-demo__amt b{font-family:'Source Serif 4',Georgia,serif;font-size:calc(var(--m) * 26);font-weight:700;color:var(--dm-sienna);letter-spacing:-.01em;margin-right:calc(var(--m) * 4)}
.dm-demo__side--us .dm-demo__k{letter-spacing:.02em}
.dm-demo__side--us .dm-demo__p{color:#ebe5ff}
.dm-demo__side--us .dm-demo__amt b{color:#fff;margin-right:0}