/* ============================================================
   SiloV · "מה קורה בשיחה" (#calls) · Sticky Scroll Reveal
   Port of Aceternity UI "Sticky Scroll Reveal" (see CALLS-STICKY-SOURCE.md)
   onto the page scroll: a reading column of five items that dim to .3 when
   inactive, and one sticky panel that shows the mockup of the active item.
   Atmosphere follows the hero: a far halo plane in the top left corner
   (moved by assets/hero-layers.js through .layer-act and data-parallax),
   a floor fade, then the content plane. Every class here carries the cs-
   prefix so the legacy .acc-* and .flow* rules never apply.
   No JS: html has no .cs-js, so items stay opaque, the first flow shows
   static (rows visible, bars filled, ring drawn) and nothing is sticky.
   ============================================================ */

/* ---- section ground and atmosphere (full section width) ---- */
#calls.cs-sec{ position:relative; background:#fff; z-index:0 }
#calls .cs-atmo{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
#calls .cs-plane{ position:absolute; pointer-events:none; will-change:transform }
/* far plane: a soft lavender halo in the top left corner, never behind the heading
   (the heading sits at the inline start, the right side in RTL) */
#calls .cs-plane-far{
  inset:-20% -10%;
  background:radial-gradient(34% 40% at 15% 24%, rgba(167,139,250,.22), rgba(167,139,250,.09) 42%, transparent 70%);
  filter:blur(44px);
}
/* floor: the section settles into the next ground over the last 220px, above every plane */
#calls .cs-floor{
  position:absolute; inset-inline:0; bottom:0; height:220px;
  background:linear-gradient(to bottom, rgba(247,244,255,0), #F7F4FF);
}
#calls > .container{ position:relative; z-index:2 }

/* no JS: site.js never adds .in to .reveal, so the head must not start hidden */
html:not(.cs-js) #calls .reveal{ opacity:1; --rv:0px; transform:none }

/* ---- two columns: the reading column at the inline start, the sticky panel at the inline end ---- */
#calls .cs-sticky{
  --cs-top:clamp(88px, 8vh + 16px, 110px);   /* the 72px sticky header plus breathing room */
  display:grid; grid-template-columns:minmax(0,1fr) minmax(460px,560px);
  gap:clamp(40px,5vw,72px); align-items:start;
}
#calls .cs-read{ grid-column:1; grid-row:1; min-width:0; padding-bottom:64px }
#calls .cs-stage-col{ grid-column:2; grid-row:1; align-self:stretch; min-width:0; position:relative }

/* ---- reading items: compact content-led blocks with room for the scene change ---- */
#calls .cs-item{
  display:flex; gap:22px; align-items:flex-start; justify-content:flex-start; flex-direction:column;
  min-height:clamp(300px,45vh,440px); padding-block:28px;
  transition:opacity .35s ease-out;
}
#calls .cs-item:first-child{ justify-content:flex-start; padding-top:8px }
#calls .cs-item-row{ display:flex; gap:22px; align-items:flex-start }
html.cs-js #calls .cs-item{ opacity:.3; cursor:pointer }          /* source: inactive .3 */
html.cs-js #calls .cs-item.is-active{ opacity:1; cursor:default } /* source: active 1 */
#calls .cs-chip{
  flex:0 0 56px; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; background:#fff; border:1px solid #E8E1FA;
  box-shadow:0 8px 18px -4px rgba(60,30,120,.18), inset 0 1px 0 rgba(255,255,255,.8);
}
#calls .cs-chip img{ width:28px; height:28px; display:block }
#calls .cs-body{ min-width:0; padding-top:6px }
#calls .cs-body h3{ font-size:clamp(1.3rem,1.7vw,1.5rem); line-height:1.25; letter-spacing:-.01em; color:#1E1A33; margin:0 0 6px }
#calls .cs-sub{ font-size:1.0625rem; font-weight:600; color:#6D3FE0; margin-bottom:12px }
#calls .cs-detail p{ margin:0 0 14px; color:#4A4566; font-size:1.0625rem; line-height:1.65; max-width:52ch }
#calls .cs-impact{
  display:inline-block; font-size:.9375rem; font-weight:600; color:#1E1A33; line-height:1.4;
  padding:8px 14px; border-radius:999px; background:#F7F4FF; border:1px solid #E8E1FA;
}

/* ---- the sticky panel: photo ground, veil, halo, floating white card ---- */
#calls .cs-stage{
  position:sticky; top:var(--cs-top);
  height:clamp(560px, calc(100vh - var(--cs-top) - 32px), 660px);
  border-radius:28px; overflow:hidden; isolation:isolate;
  background:#D6C8FF; border:1px solid #E8E1FA;
  box-shadow:0 8px 18px -4px rgba(60,30,120,.18), 0 40px 80px -40px rgba(60,30,120,.3), inset 0 1px 0 rgba(255,255,255,.8);
}
/* ground: the owner's call screen photo, tinted lavender by luminosity blending against the panel colour */
#calls .cs-ground{
  position:absolute; inset:-6%;
  background:url("photos/calls-phone-screen.webp") 60% 22% / cover no-repeat;
  mix-blend-mode:luminosity; opacity:.62; filter:blur(1.5px);
}
/* veil: blurred light edges so the panel stays clean; the centre may stay darker */
#calls .cs-veil{
  position:absolute; inset:0;
  background:radial-gradient(70% 66% at 50% 46%, rgba(247,244,255,0) 42%, rgba(247,244,255,.62) 76%, #F7F4FF 100%);
}
#calls .cs-halo{
  position:absolute; width:76%; aspect-ratio:1; top:-28%; inset-inline-end:-24%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(167,139,250,.32), transparent);
  filter:blur(40px);
}
#calls .cs-card{
  position:absolute; inset:38px 34px; display:grid;
  background:#fff; border-radius:20px; border:1px solid rgba(255,255,255,.95); overflow:hidden;
  box-shadow:0 8px 18px -4px rgba(60,30,120,.18), 0 30px 60px -24px rgba(60,30,120,.32), inset 0 1px 0 rgba(255,255,255,.8);
}

/* ---- flows: stacked in one grid cell, crossfade 400ms ---- */
#calls .cs-flow{
  grid-area:1/1; min-width:0; min-height:0;
  display:flex; flex-direction:column; gap:12px; padding:18px 22px 16px;
  color:#1E1A33;
}
html:not(.cs-js) #calls .cs-flow:not(.is-active){ visibility:hidden }
html.cs-js #calls .cs-flow{ opacity:0; transform:scale(.95); pointer-events:none; transition:opacity .4s ease-out, transform .4s ease-out }
html.cs-js #calls .cs-flow.is-active{ opacity:1; transform:none; pointer-events:auto }
html.cs-js #calls .cs-flow.is-leaving{ opacity:0; transform:scale(.97) }

/* header row */
#calls .cs-head{ display:flex; align-items:center; gap:10px; font-size:.9375rem; line-height:1.3 }
#calls .cs-head b{ flex:1; min-width:0; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#calls .cs-dur{
  flex:none; font-variant-numeric:tabular-nums; direction:ltr; font-size:.8125rem; color:#4A4566;
  padding:3px 9px; border-radius:999px; background:#F7F4FF; border:1px solid #E8E1FA;
}
#calls .cs-live{ flex:none; position:relative; width:9px; height:9px; border-radius:50%; background:#22C55E }
#calls .cs-live::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(34,197,94,.5); opacity:0 }
#calls .cs-stage.is-live .cs-flow.is-active .cs-live::after{ animation:cs-pulse 1.6s ease-out infinite }
@keyframes cs-pulse{ 0%{ transform:scale(.55); opacity:.9 } 100%{ transform:scale(1.45); opacity:0 } }

/* waveform strip: the Lottie fills it (slice); the fallback is a thin lavender line */
#calls .cs-wave{
  position:relative; flex:none; height:var(--cs-wave-h,104px); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,#F9F7FF,#EFE9FE); border:1px solid #E8E1FA;
}
#calls .cs-wave::before{
  content:""; position:absolute; inset-inline:14px; top:50%; height:1px;
  background:linear-gradient(to right, transparent, #A78BFA 28%, #A78BFA 72%, transparent);
  transition:opacity .3s ease-out;
}
#calls .cs-wave.is-ready::before{ opacity:0 }
#calls .cs-wave svg{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block }
#calls .cs-flow[data-scene="calendar"] .cs-wave,
#calls .cs-flow[data-scene="track"] .cs-wave{ --cs-wave-h:44px }

/* the four timed rows */
#calls .cs-rows{ display:flex; flex-direction:column; gap:7px; position:relative }
#calls .cs-row{
  display:flex; align-items:center; gap:12px; font-size:.9375rem; line-height:1.35;
  padding:7px 12px; border-radius:12px; background:#FBFAFF; border:1px solid #F0EBFE;
}
#calls .cs-row .cs-t{ flex:none; min-width:40px; font-variant-numeric:tabular-nums; text-align:start; font-size:.8125rem; font-weight:700; color:#6D3FE0 }
#calls .cs-row .cs-txt{ min-width:0 }
html.cs-js #calls .cs-flow:not(.is-in) .cs-row{ opacity:0; transform:translateY(8px) }
html.cs-js #calls .cs-flow.is-in .cs-row{ opacity:1; transform:none; transition:opacity .3s ease-out, transform .3s ease-out; transition-delay:calc(var(--i,0) * 60ms + 120ms) }

/* calendar scene: a thin time column and slot chips, the last slot is the booked one */
#calls .cs-flow[data-scene="calendar"] .cs-rows{ gap:6px }
#calls .cs-flow[data-scene="calendar"] .cs-row{ background:transparent; border:0; padding:0; gap:0; align-items:stretch }
#calls .cs-flow[data-scene="calendar"] .cs-row .cs-t{
  min-width:52px; display:flex; align-items:center; color:#4A4566; font-weight:600;
  border-inline-end:1px solid #DDD2FB; padding-inline-end:10px; margin-inline-end:12px;
}
#calls .cs-flow[data-scene="calendar"] .cs-row .cs-txt{
  flex:1; padding:9px 12px; border-radius:10px; background:#EFE9FE; color:#1E1A33;
  border-inline-start:3px solid #A78BFA;
}
#calls .cs-flow[data-scene="calendar"] .cs-row:last-child .cs-txt{ background:#7C4DEE; color:#fff; border-inline-start-color:#5B2ED6; font-weight:600 }

/* track scene: steps on a vertical progress line that fills */
#calls .cs-flow[data-scene="track"] .cs-rows{ padding-inline-start:28px; gap:9px }
#calls .cs-flow[data-scene="track"] .cs-rows::before,
#calls .cs-flow[data-scene="track"] .cs-rows::after{
  content:""; position:absolute; inset-inline-start:7px; top:12px; bottom:12px; width:2px; border-radius:2px;
}
#calls .cs-flow[data-scene="track"] .cs-rows::before{ background:#E8E1FA }
#calls .cs-flow[data-scene="track"] .cs-rows::after{ background:#7C4DEE; transform-origin:top; transform:scaleY(1) }
html.cs-js #calls .cs-flow[data-scene="track"]:not(.is-in) .cs-rows::after{ transform:scaleY(0) }
html.cs-js #calls .cs-flow[data-scene="track"].is-in .cs-rows::after{ transition:transform .9s ease-out .15s }
#calls .cs-flow[data-scene="track"] .cs-row{ position:relative; background:transparent; border:0; padding:4px 0 }
#calls .cs-flow[data-scene="track"] .cs-row::before{
  content:""; position:absolute; inset-inline-start:-27px; top:50%; width:12px; height:12px; margin-top:-6px;
  border-radius:50%; background:#7C4DEE; border:2px solid #7C4DEE; box-sizing:border-box;
}
html.cs-js #calls .cs-flow[data-scene="track"]:not(.is-in) .cs-row::before{ background:#fff }
html.cs-js #calls .cs-flow[data-scene="track"].is-in .cs-row::before{ transition:background-color .3s ease-out; transition-delay:calc(var(--i,0) * 200ms + 200ms) }
#calls .cs-flow[data-scene="track"] .cs-row:last-child .cs-txt{ font-weight:600 }

/* the agent's line as a chat bubble */
#calls .cs-bubble{
  position:relative; align-self:flex-start; max-width:94%;
  background:#7C4DEE; color:#fff; padding:10px 14px; border-radius:16px; border-start-start-radius:4px;
  font-size:.9375rem; line-height:1.45; box-shadow:0 8px 18px -6px rgba(60,30,120,.35);
}
html.cs-js #calls .cs-flow:not(.is-in) .cs-bubble{ opacity:0; transform:translateY(8px) scale(.97) }
html.cs-js #calls .cs-flow.is-in .cs-bubble{ opacity:1; transform:none; transition:opacity .3s ease-out .42s, transform .3s ease-out .42s }

/* analytics: three score bars and the ring. DOM order stays head, wave, rows, analytics, quote, footer
   (the old section's order); flex order paints the quote above the analytics block. */
#calls .cs-an{ order:1 }
#calls .cs-foot{ order:2 }
#calls .cs-an{
  margin-top:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center;
  padding:12px 14px; border-radius:14px; background:#FBFAFF; border:1px solid #F0EBFE;
}
#calls .cs-bars{ display:flex; flex-direction:column; gap:10px; min-width:0 }
#calls .cs-bar-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; font-size:.8125rem; color:#4A4566 }
#calls .cs-bar-row b{ font-weight:600; color:#1E1A33; white-space:nowrap; min-width:80px }
#calls .cs-bar{ position:relative; height:6px; border-radius:999px; background:#EFE9FE; overflow:hidden }
#calls .cs-bar i{ position:absolute; inset-block:0; inset-inline-start:0; width:var(--w); border-radius:inherit; background:#7C4DEE; transform-origin:right center }
[dir="ltr"] #calls .cs-bar i{ transform-origin:left center }
html.cs-js #calls .cs-flow:not(.is-in) .cs-bar i{ transform:scaleX(0) }
html.cs-js #calls .cs-flow.is-in .cs-bar i{ transform:none; transition:transform .9s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 80ms + 200ms) }
#calls .cs-bar-row em{ font-style:normal; font-variant-numeric:tabular-nums; direction:ltr; font-weight:700; color:#1E1A33; min-width:22px; text-align:end }
#calls .cs-ring{ position:relative; width:84px; display:grid; justify-items:center; gap:2px; text-align:center }
#calls .cs-ring svg{ width:72px; height:72px; transform:rotate(-90deg); display:block }
#calls .cs-rbg{ fill:none; stroke:#EFE9FE; stroke-width:4 }
#calls .cs-rfg{ fill:none; stroke:#7C4DEE; stroke-width:4; stroke-linecap:round; stroke-dasharray:119.38; stroke-dashoffset:calc(119.38 * (1 - var(--p,0))) }
html.cs-js #calls .cs-flow:not(.is-in) .cs-rfg{ stroke-dashoffset:119.38 }
html.cs-js #calls .cs-flow.is-in .cs-rfg{ transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1) .2s }
#calls .cs-count{ position:absolute; top:25px; left:0; right:0; font-weight:700; font-size:1.25rem; line-height:1; color:#1E1A33; font-variant-numeric:tabular-nums }
#calls .cs-ring small{ font-size:.75rem; color:#4A4566; line-height:1.2 }

/* footer line */
#calls .cs-foot{ display:flex; align-items:center; gap:10px; font-size:.875rem; line-height:1.35; padding-top:12px; border-top:1px solid #E8E1FA }
#calls .cs-foot .cs-txt{ min-width:0 }
#calls .cs-tick{ flex:none; position:relative; width:18px; height:18px; border-radius:50%; background:#7C4DEE }
#calls .cs-tick::after{ content:""; position:absolute; left:6px; top:3px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) }
#calls .cs-saved{ margin-inline-start:auto; flex:none; font-size:.75rem; font-weight:600; color:#6D3FE0; background:#EFE9FE; padding:4px 10px; border-radius:999px; white-space:nowrap }

/* ---- 1024 to 1279: narrower panel ---- */
@media (max-width:1279px) and (min-width:1024px){
  #calls .cs-sticky{ grid-template-columns:minmax(0,1fr) minmax(420px,480px); gap:40px }
  #calls .cs-card{ inset:30px 26px }
  #calls .cs-flow{ padding:18px 18px 16px; gap:12px }
  #calls .cs-wave{ --cs-wave-h:92px }
  #calls .cs-body h3{ font-size:1.3rem }
}

/* Mobile: automatic decorative card stack, no controls or layout changes. */
#calls .cs-mobile-visual{ display:none }
@media (max-width:1023px){
  #calls .cs-sticky, #calls .cs-desktop-hint{ display:none }
  #calls .cs-mobile-visual{ display:block; position:relative; height:220px; overflow:hidden; isolation:isolate; border:1px solid #E8DDF8; border-radius:24px; background:radial-gradient(ellipse at 50% 0,#E7DAFA,transparent 80%),#F7F3FD; pointer-events:none }
  #calls .cs-mini-card{ position:absolute; inset:25px 16px 39px; padding:13px 15px; overflow:hidden; border:1px solid #E7DDF4; border-radius:18px; background:#fff; box-shadow:0 9px 22px -16px rgba(66,31,120,.38); transform-origin:center top; transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .65s ease; will-change:transform }
  #calls .cs-mini-card[data-depth="0"]{ z-index:3; transform:translateY(0) scale(1); opacity:1 }
  #calls .cs-mini-card[data-depth="1"]{ z-index:2; transform:translateY(-8px) scale(.94); opacity:.75 }
  #calls .cs-mini-card[data-depth="2"]{ z-index:1; transform:translateY(-16px) scale(.88); opacity:.45 }
  #calls .cs-mini-head{ display:flex; align-items:center; gap:10px; color:#302044; font-size:1rem; line-height:1.3; margin-bottom:10px }
  #calls .cs-mini-icon{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:10px; background:#F1E9FC; color:#8050D2 }
  #calls .cs-mini-icon svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
  #calls .cs-mini-spark{ margin-inline-start:auto; width:6px; height:6px; border-radius:50%; background:#B398E3 }
  #calls .cs-mini-voice{ height:40px; display:flex; align-items:center; justify-content:center; gap:4px; overflow:hidden }
  #calls .cs-mini-voice i{ display:block; width:4px; height:var(--bar); border-radius:6px; background:linear-gradient(#A986EC,#7949CF); transform:scaleY(.55); animation:cs-mini-voice 1.1s ease-in-out var(--delay) infinite alternate; animation-play-state:paused }
  #calls .cs-mini-card.is-active .cs-mini-voice i{ animation-play-state:running }
  #calls .cs-mini-quote{ width:max-content; max-width:100%; margin:6px auto 0; padding:5px 14px; border-radius:10px 3px 10px 10px; background:#F0E8FB; color:#7044B7; font-size:.875rem; line-height:1.3 }
  #calls .cs-mini-checkrow{ display:flex; align-items:center; gap:8px; margin-top:10px; padding:7px 8px; border-radius:9px; background:#FAF7FE; color:#655276; font-size:.8125rem; line-height:1.3 }
  #calls .cs-mini-checkrow i, #calls .cs-mini-done{ flex:none; display:block; width:17px; height:17px; border-radius:50%; background:#8B5DDA; position:relative }
  #calls .cs-mini-checkrow i::after, #calls .cs-mini-done::after{ content:""; position:absolute; top:4px; left:6px; width:4px; height:6px; border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(45deg) }
  #calls .cs-mini-checkrow em{ margin-inline-start:auto; flex:0 1 34px; height:3px; border-radius:3px; background:#D6C3F1 }
  #calls .cs-mini-appointment{ display:flex; align-items:center; gap:10px; padding:11px 9px; border:1px solid #EADFF7; border-radius:12px; background:#FAF7FF; color:#563777 }
  #calls .cs-mini-calendar{ display:grid; place-items:center; flex:none; width:38px; height:42px; border:1px solid #E2D3F4; border-top:5px solid #A27BE0; border-radius:8px; background:#fff }
  #calls .cs-mini-calendar svg{ width:24px; height:24px; stroke:#9267D5; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
  #calls .cs-mini-appointment b{ display:block; font-size:.875rem; line-height:1.3 }
  #calls .cs-mini-appointment small{ display:block; font-size:.75rem; margin-top:4px; color:#8B769F }
  #calls .cs-mini-done{ margin-inline-start:auto }
  #calls .cs-mini-steps{ position:absolute; bottom:11px; inset-inline:16px; display:flex; justify-content:center; gap:18px; color:#9B89B2; font-size:.6875rem; line-height:1.3 }
  #calls .cs-mini-steps span::before{ content:""; display:inline-block; width:4px; height:4px; margin-inline-end:5px; border-radius:50%; background:currentColor; vertical-align:middle }
  #calls .cs-mini-steps .is-active, #calls .is-still .cs-mini-steps span{ color:#8050D2 }
  #calls .cs-mobile-visual.is-off .cs-mini-card{ transition:none; will-change:auto }
  #calls .cs-mobile-visual.is-off .cs-mini-voice i{ animation-play-state:paused }
  #calls .cs-plane-far{ background:radial-gradient(60% 34% at 30% 14%, rgba(167,139,250,.14), transparent 72%) }
  #calls .cs-floor{ height:100px }
}
@keyframes cs-mini-voice{ to{ transform:scaleY(1) } }

/* ---- reduced motion: everything static in its final state ---- */
@media (prefers-reduced-motion:reduce){
  #calls .cs-plane{ transform:none !important }
  #calls .cs-item{ transition:none }
  html.cs-js #calls .cs-flow{ transition:none; transform:none }
  html.cs-js #calls .cs-flow.is-leaving{ transform:none }
  html.cs-js #calls .cs-flow.is-in .cs-row,
  html.cs-js #calls .cs-flow.is-in .cs-bubble,
  html.cs-js #calls .cs-flow.is-in .cs-bar i,
  html.cs-js #calls .cs-flow.is-in .cs-rfg,
  html.cs-js #calls .cs-flow[data-scene="track"].is-in .cs-rows::after,
  html.cs-js #calls .cs-flow[data-scene="track"].is-in .cs-row::before{ transition:none }
  #calls .cs-live::after{ animation:none !important }
  #calls .cs-wave::before{ transition:none }
}
html.a11y-nomotion #calls .cs-plane{ transform:none !important }
html.a11y-nomotion #calls .cs-item{ transition:none }
html.a11y-nomotion.cs-js #calls .cs-flow{ transition:none; transform:none }
html.a11y-nomotion.cs-js #calls .cs-flow.is-in .cs-row,
html.a11y-nomotion.cs-js #calls .cs-flow.is-in .cs-bubble,
html.a11y-nomotion.cs-js #calls .cs-flow.is-in .cs-bar i,
html.a11y-nomotion.cs-js #calls .cs-flow.is-in .cs-rfg,
html.a11y-nomotion.cs-js #calls .cs-flow[data-scene="track"].is-in .cs-rows::after,
html.a11y-nomotion.cs-js #calls .cs-flow[data-scene="track"].is-in .cs-row::before{ transition:none }
html.a11y-nomotion #calls .cs-live::after{ animation:none !important }