/* ============================================================
 WASILBOX · WITHOUT / WITH WASIL compare slider (v39) — scoped to .wbcmp
 Loads after site.css; uses site vars (--lime, --ink, --cream, --disp)
 ============================================================ */
/* ================= v33 · COMPARE SLIDER — WITHOUT / WITH WASIL (scoped .wbcmp) ================= */
.wbcmp { background:var(--cream); padding:90px 0 100px; color:var(--ink); overflow:hidden; }
.wbcmp-wrap { width:min(1180px, 92vw); margin:0 auto; }
.wbcmp-head { text-align:center; margin-bottom:34px; }
.wbcmp-kicker { display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#5a6b12; font-weight:700; margin-bottom:12px; }
.wbcmp-kicker i { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px var(--lime); }
.wbcmp-head h2 { font-family:var(--disp); font-size:clamp(28px,4vw,52px); line-height:1.15; margin:0 0 12px; font-weight:800; }
.wbcmp-head h2 em { font-style:normal; background:linear-gradient(transparent 60%, var(--lime) 60%); }
.wbcmp-head p { margin:0 auto; max-width:640px; font-size:clamp(15px,1.3vw,19px); line-height:1.7; color:#5b5b57; }

.wbcmp-stage { position:relative; height:560px; border-radius:28px; overflow:hidden; box-shadow:0 40px 90px rgba(10,17,19,.25); user-select:none; touch-action:pan-y; perspective:1400px; }
.wbcmp-layer { position:absolute; inset:0; }
.wbcmp-layer.a { background:radial-gradient(80% 80% at 50% 30%, #2a2f36, #131619 70%); color:#e7e4dc; }
.wbcmp-layer.b { background:radial-gradient(80% 80% at 50% 30%, #1d2a12, #0b1114 70%); color:#f4f2ec; clip-path:inset(0 0 0 50%); }
[dir="rtl"] .wbcmp-layer.b { clip-path:inset(0 0 0 50%); }
.wbcmp-scene { position:absolute; inset:0; display:grid; grid-template-columns:1fr 300px 1fr; align-items:center; padding:0 3%; gap:2%; transform-style:preserve-3d; transition:transform .25s; direction:ltr; }
[dir="rtl"] .wbcmp-scene > * { direction:rtl; }
.wbcmp-tag { position:absolute; top:22px; left:24px; right:auto; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; font-weight:800; font-size:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); z-index:3; }
.wbcmp-layer.b .wbcmp-tag { left:auto; right:24px; background:rgba(212,236,90,.12); border-color:rgba(212,236,90,.45); color:var(--lime); }
.wbcmp-clock { position:absolute; top:22px; left:50%; transform:translateX(-50%); font-family:var(--disp); font-size:16px; letter-spacing:.06em; color:#bbb; z-index:3; }
.wbcmp-layer.b .wbcmp-clock { color:var(--lime); }

/* metrics column */
.wbcmp-metrics { display:flex; flex-direction:column; gap:12px; }
.wbcmp-met { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:14px 16px; backdrop-filter:blur(4px); }
.wbcmp-met small { display:block; font-size:12px; color:#a8a49c; margin-bottom:4px; }
.wbcmp-met b { font-family:var(--disp); font-size:clamp(22px,2.4vw,34px); line-height:1; }
.wbcmp-layer.a .wbcmp-met b.bad { color:#ff7a7a; }
.wbcmp-layer.b .wbcmp-met { border-color:rgba(212,236,90,.25); } .wbcmp-layer.b .wbcmp-met b { color:var(--lime); }
.wbcmp-leave { display:flex; gap:6px; margin-top:6px; min-height:34px; }
.wbcmp-av { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; color:#0b1114; background:#ddd; animation:wbcmp-in .35s; position:relative; }
.wbcmp-av.gone { animation:wbcmp-gone .8s forwards; }
.wbcmp-av.book { background:var(--lime); }
@keyframes wbcmp-in { from { transform:scale(.5); opacity:0 } to { transform:none; opacity:1 } }
@keyframes wbcmp-gone { to { transform:translateY(-24px) scale(.6); opacity:0 } }

/* phone */
.wbcmp-phone { width:260px; height:440px; border-radius:34px; background:#111; padding:10px; box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 0 2px #222; justify-self:center; transform:translateZ(40px); }
.wbcmp-screen { position:absolute; inset:10px; border-radius:26px; overflow:hidden; background:#e5ddd5; color:#0b1114; display:flex; flex-direction:column; }
.wbcmp-phone { position:relative; }
.wbcmp-top { background:#075e54; color:#fff; padding:12px 12px 8px; font-size:12px; display:flex; align-items:center; gap:8px; }
.wbcmp-top .av { width:26px; height:26px; border-radius:50%; background:#cfd8dc; color:#0b1114; display:grid; place-items:center; font-weight:800; font-size:11px; }
.wbcmp-layer.b .wbcmp-top .av { background:var(--lime); }
.wbcmp-top small { display:block; opacity:.8; font-size:10px; }
.wbcmp-msgs { flex:1; padding:10px 8px; display:flex; flex-direction:column; gap:6px; justify-content:flex-end; overflow:hidden; }
.wbcmp-m { max-width:84%; padding:7px 9px; border-radius:11px; font-size:12px; line-height:1.5; animation:wbcmp-pop .35s cubic-bezier(.2,.9,.3,1.3); position:relative; }
.wbcmp-m.in { background:#fff; align-self:flex-start; border-start-start-radius:4px; }
.wbcmp-m.out { background:#dcf8c6; align-self:flex-end; border-start-end-radius:4px; }
.wbcmp-m .t { display:block; font-size:9px; color:#888; text-align:end; margin-top:2px; }
.wbcmp-m .t.tick { color:#34b7f1; }
.wbcmp-m .ai { display:inline-flex; gap:3px; font-size:9px; color:#3a6b00; font-weight:700; }
.wbcmp-m.unread::after { content:''; position:absolute; top:-4px; inset-inline-end:-4px; width:9px; height:9px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 8px #ff4d4d; }
.wbcmp-typing { display:inline-flex; gap:3px; padding:6px 9px; background:#dcf8c6; border-radius:11px; align-self:flex-end; }
.wbcmp-typing i { width:5px; height:5px; border-radius:50%; background:#6b8f3a; animation:wbcmp-blink 1s infinite; } .wbcmp-typing i:nth-child(2) { animation-delay:.15s } .wbcmp-typing i:nth-child(3) { animation-delay:.3s }
@keyframes wbcmp-blink { 0%,80%,100% { opacity:.25 } 40% { opacity:1 } }
@keyframes wbcmp-pop { from { opacity:0; transform:translateY(8px) scale(.96) } to { opacity:1; transform:none } }
.wbcmp-badge { position:absolute; top:-10px; inset-inline-end:-10px; min-width:34px; height:34px; border-radius:17px; background:#ff4d4d; color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px; padding:0 8px; box-shadow:0 8px 20px rgba(255,77,77,.5); z-index:2; transform:scale(1); transition:transform .15s; }
.wbcmp-badge.pop { transform:scale(1.25); }
.wbcmp-layer.b .wbcmp-badge { background:var(--lime); color:#0b1114; box-shadow:0 8px 20px rgba(212,236,90,.5); }

/* characters */
.wbcmp-char { justify-self:center; transform:translateZ(20px); width:min(260px, 100%); }
.wbcmp-char svg { width:100%; height:auto; overflow:visible; }
@keyframes wbcmp-breathe { 0%,100% { transform:scaleY(1) } 50% { transform:scaleY(1.03) } }
.wbcmp .wasil { animation:wbcmp-float 3s ease-in-out infinite; }
@keyframes wbcmp-float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-10px) } }
.wbcmp .eye { animation:wbcmp-eye 4s infinite; transform-origin:center; }
@keyframes wbcmp-eye { 0%,92%,100% { transform:scaleY(1) } 95% { transform:scaleY(.1) } }
.wbcmp .glow { filter:drop-shadow(0 0 10px #D4EC5A); }

/* handle */
.wbcmp-handle { position:absolute; top:0; bottom:0; left:50%; width:0; z-index:5; cursor:ew-resize; }
.wbcmp-handle::before { content:''; position:absolute; top:0; bottom:0; left:-1px; width:2px; background:var(--lime); box-shadow:0 0 18px rgba(212,236,90,.8); }
.wbcmp-knob { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:var(--lime); color:#0b1114; display:grid; place-items:center; font-weight:900; font-size:20px; box-shadow:0 14px 34px rgba(212,236,90,.5), 0 0 0 6px rgba(212,236,90,.25); transition:transform .15s; letter-spacing:-2px; }
.wbcmp-stage.drag .wbcmp-knob { transform:translate(-50%,-50%) scale(1.08); }
/* v51 · SITE7-07: the handle is a slider the keyboard can take — its focus ring goes round the knob (the handle is a 0-wide line) */
.wbcmp-handle:focus { outline:none; }
.wbcmp-handle:focus-visible .wbcmp-knob { outline:3px solid #fff; outline-offset:8px; }
.wbcmp-hint { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); font-size:12px; color:#ccc; background:rgba(0,0,0,.35); padding:6px 12px; border-radius:999px; z-index:5; pointer-events:none; transition:opacity .4s; }
.wbcmp-stage.touched .wbcmp-hint { opacity:0; }

.wbcmp-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px; }
.wbcmp-stats { display:flex; gap:10px; flex-wrap:wrap; }
.wbcmp-stat { background:#fff; border:1px solid #e6e3dc; border-radius:14px; padding:10px 14px; font-size:14px; display:flex; align-items:center; gap:8px; }
.wbcmp-stat b { color:#3a6b00; }
.wbcmp-btn { font:inherit; font-weight:700; background:var(--ink); color:#fff; border:0; border-radius:999px; padding:14px 26px; text-decoration:none; }
.wbcmp-btn:hover { background:#000; }

@media (max-width: 900px) {
  .wbcmp-stage { height:720px; }
  .wbcmp-scene { grid-template-columns:1fr; grid-template-rows:auto 360px auto; align-content:start; padding:96px 5% 20px; gap:8px; }   /* fixed phone row: both layers' phones line up at the handle */
  .wbcmp-char { width:120px; justify-self:start; }
  .wbcmp-layer.b .wbcmp-char { justify-self:end; }
  .wbcmp-phone { width:220px; height:360px; }
  .wbcmp-metrics { flex-direction:row; }
  .wbcmp-met { flex:1; padding:10px 12px; } .wbcmp-met b { font-size:20px; }
  .wbcmp-leave { display:none; }
  /* v42 · SITE-26: the caption sits under the tags (one line), the scene starts 10px lower to leave it room */
  .wbcmp-scene { padding-top:106px; }
  .wbcmp-hint { top:68px; bottom:auto; white-space:nowrap; line-height:1.3; }
  /* v43 · SITE2-06: "Without Wasil" ran under the clock on phones (English) — the clock moves above the two tags */
  .wbcmp-clock { top:8px; font-size:13px; }
  .wbcmp-tag { top:32px; }
  .wbcmp-hint { top:80px; }
  .wbcmp-scene { padding-top:118px; }
}

/* ================= v39 · data streams, Wasil's opening head, the tired lone agent ================= */
.wbcmp-flow { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; transform:translateZ(41px); z-index:4; }
/* Wasil: lid hinges open toward the phone, revealing a glowing core + rays */
.wbcmp .wasil .wsl-lid { transform-origin:50px 56px; transition:transform .55s cubic-bezier(.2,.9,.3,1.2); }
.wbcmp .wbcmp-char.open .wasil .wsl-lid { transform:rotate(-38deg); }
.wbcmp .wasil .wsl-core { opacity:0; transition:opacity .35s; }
.wbcmp .wbcmp-char.open .wasil .wsl-core { opacity:1; }
.wbcmp .wasil .wsl-core ellipse { filter:blur(2px); }
.wbcmp .wasil .wsl-ray { stroke:#D4EC5A; stroke-width:3; stroke-linecap:round; stroke-dasharray:4 7; animation:wbcmp-ray 1.1s linear infinite; }
@keyframes wbcmp-ray { to { stroke-dashoffset:-22 } }
.wbcmp .wbcmp-char.open .wasil .eye ellipse { filter:drop-shadow(0 0 14px #D4EC5A) drop-shadow(0 0 3px #fff); }
/* the tired agent: breathing, nodding off, sweating, notifications piling up around him */
.wbcmp .ag-body { animation:wbcmp-breathe 4s ease-in-out infinite; transform-origin:50% 100%; }
.wbcmp .ag-head { transform-origin:130px 104px; animation:wbcmp-nod 5s ease-in-out infinite; }
@keyframes wbcmp-nod { 0%,100% { transform:rotate(0) } 38% { transform:rotate(6deg) translateY(3px) } 46% { transform:rotate(5deg) translateY(3px) } 54% { transform:rotate(-1.5deg) } }
.wbcmp .ag-sweat { animation:wbcmp-sweat 3.2s ease-in infinite; }
@keyframes wbcmp-sweat { 0% { opacity:0; transform:translateY(0) } 15% { opacity:1 } 100% { opacity:0; transform:translateY(16px) } }
.wbcmp .ag-nb { opacity:0; transform-origin:50% 100%; animation:wbcmp-nb 5.4s ease-in-out infinite; animation-delay:var(--d, 0s); }
@keyframes wbcmp-nb { 0% { opacity:0; transform:scale(.5) translateY(6px) } 12% { opacity:1; transform:none } 70% { opacity:1; transform:translateY(-3px) } 88%,100% { opacity:0; transform:translateY(-12px) } }
/* the agent's slow replies */
.wbcmp-typing.slow { background:#ececec; } .wbcmp-typing.slow i { background:#9a9a9a; animation-duration:2.2s; }
.wbcmp-m.out.slow { background:#f1efe9; } .wbcmp-m.slow .ai { color:#7a7a72; } .wbcmp-m.slow .t.tick { color:#9a9a9a; }
@media (max-width: 900px) {
  .wbcmp .wasil .wsl-lid { transform-origin:210px 56px; }
  .wbcmp .wbcmp-char.open .wasil .wsl-lid { transform:rotate(28deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wbcmp-flow { display:none; }
  .wbcmp .wasil .wsl-lid, .wbcmp .wasil .wsl-core { transition:none; }
  .wbcmp .ag-head, .wbcmp .ag-sweat, .wbcmp .ag-body, .wbcmp .ag-nb, .wbcmp .wasil .wsl-ray { animation:none; }
  .wbcmp .ag-nb { opacity:1; }
}