/* slide 08 "To close" (#s9): the live negotiation in the phone, the tug of war beside it, the acceptance celebrated;
   all built and driven by s08_close.js (Jeremy 2026-10-10) */

/* the deals list: skeleton rows, the shimmer, the status chips, the tap on 3088 Evening Mist */
.scr > .cl-ovr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cl-ovr .cl-b{fill:#EFECE6}
.cl-ovr .cl-cc,.cl-ovr .cl-fi,.cl-ovr .cl-rp{transform-box:fill-box;transform-origin:center}
.cl-ovr .cl-cr{fill:rgba(47,107,255,.08);stroke:#2F6BFF;stroke-width:4;opacity:0}
.cl-ovr .cl-fo{fill:none;stroke:#2F6BFF;stroke-width:5;opacity:0}
.cl-ovr .cl-fg{fill:none;stroke:#5A8CFF;stroke-width:22;opacity:0}
.cl-ovr .cl-pr{opacity:0}
.cl-ovr .cl-fi{fill:rgba(255,255,255,.55);stroke:rgba(47,107,255,.9);stroke-width:4;opacity:0}
.cl-ovr .cl-rp{fill:none;stroke:#2F6BFF;stroke-width:4;opacity:0}

/* the counter screen's own layer: typing dots, the price dial, the counter in flight, the rings and the stamp */
.app .cl-c{position:absolute;inset:0;pointer-events:none;z-index:1}
.app .cl-dots{position:absolute;display:flex;gap:1.1cqw;align-items:center;height:8cqw;padding:0 3.2cqw;border-radius:3cqw;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.08);opacity:0;transition:opacity .18s}
.app .cl-dots.out{background:#2F55D4}
.app .cl-dots i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#9aa0a4;animation:cl-dot 1s ease-in-out infinite}
.app .cl-dots.out i{background:#fff}
.app .cl-dots i:nth-child(2){animation-delay:.15s}.app .cl-dots i:nth-child(3){animation-delay:.3s}
@keyframes cl-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-.9cqw);opacity:1}}
.app .cl-dial{position:absolute;background:#fff;border-radius:3.4cqw;padding:3cqw 4cqw 2.6cqw;box-shadow:0 1px 3px rgba(0,0,0,.06),0 0 0 1px rgba(47,85,212,.1);opacity:0;transition:box-shadow .3s}
.app .cl-dial.hot{box-shadow:0 1px 3px rgba(0,0,0,.06),0 0 0 1px rgba(47,85,212,.35),0 0 4cqw rgba(47,107,255,.18)}
.app .cl-dl{display:flex;justify-content:space-between;align-items:center}
.app .cl-dl > span:first-child{font-family:var(--app-serif);font-weight:600;font-size:4cqw}
.app .cl-dv{position:relative;display:block;width:24cqw;height:6.6cqw;overflow:hidden}
.app .cl-dv b{position:absolute;right:0;top:0;font-family:var(--app-serif);font-weight:600;font-size:5.4cqw;line-height:6.6cqw;color:#1b1c1e;font-variant-numeric:tabular-nums}
.app .cl-dv b + b{color:#2F55D4;transform:translateY(110%)}
.app .cl-rl{position:relative;height:6cqw;margin:2.4cqw 1cqw 1cqw;
  background:linear-gradient(#d6d2c9,#d6d2c9) center/100% 1px no-repeat,repeating-linear-gradient(90deg,#c9c4b9 0 1px,transparent 1px 3.6cqw) center/100% 2.6cqw no-repeat}
.app .cl-nd{position:absolute;top:0;bottom:0;left:100%;width:.8cqw;margin-left:-.4cqw;border-radius:99px;background:#2F55D4;box-shadow:0 0 2.4cqw rgba(47,107,255,.55)}
.app .cl-nd::after{content:"";position:absolute;left:50%;top:50%;width:3.4cqw;height:3.4cqw;border-radius:50%;background:#fff;border:.8cqw solid #2F55D4;transform:translate(-50%,-50%);box-sizing:border-box}
.app .cl-de{display:flex;justify-content:space-between;font-size:2.7cqw;color:#62666a;font-variant-numeric:tabular-nums}
.app .cl-fly{position:absolute;left:0;top:0;padding:1.4cqw 3cqw;border-radius:99px;background:#2F55D4;color:#fff;font-weight:600;font-size:3.4cqw;white-space:nowrap;
  box-shadow:0 0 4cqw rgba(47,107,255,.6);opacity:0;will-change:transform}
.app .cl-rg{position:absolute;width:8cqw;height:8cqw;border-radius:50%;border:.6cqw solid #1f9d55;box-shadow:0 0 3cqw rgba(61,220,132,.6);opacity:0;transform:translate(-50%,-50%)}
.app .cl-stamp{position:absolute;padding:.9cqw 2.4cqw;border:.7cqw solid #1f9d55;border-radius:1.4cqw;color:#1f9d55;background:rgba(232,246,238,.82);
  font-family:var(--tech);font-weight:700;font-size:3.4cqw;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;transform-origin:center}

/* the buzz: the phone shakes as the seller's counter lands (the translate property, so the phone's own transform stays) */
.bezel.cl-buzz{animation:cl-buzz .13s linear 3}
@keyframes cl-buzz{0%,100%{translate:0 0}25%{translate:-3px 0}50%{translate:3px 1px}75%{translate:-2px -1px}}

/* the phone's green glow on acceptance */
.phone .cl-pg{position:absolute;left:-30%;right:-30%;top:-10%;bottom:-10%;z-index:-1;pointer-events:none;opacity:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(61,220,132,.5),rgba(31,157,85,.22) 55%,rgba(31,157,85,0))}

/* the villa brightens: a warm additive light over the picture */
.cl-vg{position:fixed;z-index:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(ellipse 42% 46% at 58% 56%,rgba(255,214,160,.42),rgba(255,190,120,.16) 55%,rgba(255,190,120,0) 100%),
    radial-gradient(ellipse 70% 60% at 58% 60%,rgba(140,255,200,.10),rgba(140,255,200,0) 70%)}
/* the burst of rings and sparks, behind the copy */
.cl-cv{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* the tug of war beside the phone (desktop) */
.cl-tug{position:fixed;z-index:2;pointer-events:none;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.cl-tug.on{opacity:1;transform:none}
.cl-tug .cl-tk{font-family:var(--tech);text-transform:uppercase;letter-spacing:.28em;font-size:11px;font-weight:600;color:rgba(225,229,229,.74);text-shadow:0 1px 8px #000}
.cl-tr{position:relative;height:6px;border-radius:99px;background:rgba(225,229,229,.22);box-shadow:0 0 0 1px rgba(225,229,229,.2)}
.cl-ty{position:absolute;left:0;top:0;bottom:0;width:50%;border-radius:99px;background:linear-gradient(90deg,#2F55D4,#5A8CFF);box-shadow:0 0 14px rgba(47,107,255,.8),0 0 30px rgba(47,107,255,.35);transition:background .4s,box-shadow .4s}
.cl-ts{position:absolute;left:50%;right:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,rgba(225,229,229,.85),rgba(160,168,172,.55));box-shadow:0 0 12px rgba(225,229,229,.35);transition:opacity .4s}
.cl-tm{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(90,140,255,.55),0 0 18px rgba(90,140,255,.95),0 0 40px rgba(47,107,255,.6);transition:box-shadow .3s}
.cl-tug.pull-s .cl-tm{box-shadow:0 0 0 3px rgba(245,247,247,.6),0 0 18px rgba(245,247,247,.9),0 0 40px rgba(225,229,229,.45)}
.cl-te{display:flex;justify-content:space-between;font-family:var(--tech);font-weight:600;font-size:15px;letter-spacing:.04em;color:#f5f7f7;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px #000}
.cl-te em{display:block;font-style:normal;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(225,229,229,.6);margin-bottom:3px}
.cl-te span:last-child{text-align:right}
.cl-tug.pull-y .cl-te span:first-child,.cl-tug.lock .cl-te span:first-child{color:#9fbaff}
.cl-tug.pull-s .cl-te span:last-child{color:#fff}
.cl-ta{font-family:var(--tech);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#7CF0B0;opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s;text-shadow:0 0 12px rgba(61,220,132,.6)}
.cl-tug.lock .cl-ta{opacity:1;transform:none}
.cl-tug.lock .cl-te span:first-child{color:#7CF0B0}
.cl-tug.lock .cl-ty{background:linear-gradient(90deg,#1f9d55,#3ddc84);box-shadow:0 0 14px rgba(61,220,132,.8),0 0 30px rgba(31,157,85,.4)}
.cl-tug.lock .cl-ts{background:linear-gradient(90deg,rgba(61,220,132,.75),rgba(31,157,85,.45));box-shadow:0 0 16px rgba(61,220,132,.5)}
.cl-tug.lock .cl-tm{background:#eafff3;box-shadow:0 0 0 3px rgba(61,220,132,.7),0 0 18px rgba(61,220,132,.95),0 0 44px rgba(31,157,85,.6)}
.cl-tug.flash .cl-tr{animation:cl-flash .7s ease-out}
@keyframes cl-flash{0%{box-shadow:0 0 0 1px rgba(124,240,176,.9),0 0 60px 14px rgba(61,220,132,.75)}100%{box-shadow:0 0 0 1px rgba(225,229,229,.12),0 0 0 0 rgba(61,220,132,0)}}

@media (max-width:820px){ .cl-tug{display:none} }
@media not all{ .cl-tug,.cl-vg,.cl-cv,.phone .cl-pg{display:none} }