/* ChatUp motion layer
   Everything here only applies when <html> has the "motion" class, which is added
   in the page head unless the visitor has asked their device for reduced motion.
   motion.js writes progress values (0 to 1) as CSS variables; they are tied to the
   scroll position, so every animation plays forwards scrolling down and backwards
   scrolling up. Only opacity and transforms move, which keeps it smooth in Safari. */

/* the old one-off entrance animations are replaced by scroll-linked ones */
.motion .rv,.motion .mk-rv,.motion .hl-now,.motion .hand,.motion .reply{animation:none!important}

/* ---------- 5. generic reveal ---------- */
.motion .rv{opacity:var(--p,1);translate:0 calc((1 - var(--p,1)) * 18px)}

/* headlines: words go from pale to solid, one after another */
.motion .w{display:inline-block;white-space:pre;
  --wl:clamp(0, calc((var(--hp,1) * (var(--n) + 3) - var(--i)) / 3), 1);
  opacity:calc(.16 + .84 * var(--wl));translate:0 calc((1 - var(--wl)) * .28em)}
.motion .mk-rv{background-size:calc(var(--mkp,1) * 100%) 100%}

/* ---------- 1. hero: an email becomes a conversation ---------- */
.motion .hero-art .hl{background-size:calc(var(--hl,1) * 100%) 100%}
.motion .hero-art .hand{opacity:var(--hand,1);translate:calc((1 - var(--hand,1)) * -14px) calc((1 - var(--hand,1)) * 8px)}
.motion .hero-art .reply{position:relative;opacity:var(--rep,1);
  translate:0 calc((1 - var(--rep,1)) * 28px);scale:calc(.97 + .03 * var(--rep,1));transform-origin:100% 100%}
.motion .hero-art .reply::before{content:"";position:absolute;top:-6px;left:-6px;width:16px;height:16px;border-radius:50%;
  background:var(--cta);box-shadow:0 0 0 3px var(--paper);
  scale:clamp(0, calc((var(--rep,1) - .82) * 5.6), 1)}
@media (min-width:861px){
  .motion .hero-art .mail{filter:blur(calc((1 - var(--k,1)) * 1.2px));opacity:calc(.62 + .38 * var(--k,1));
    translate:0 calc((1 - var(--k,1)) * 18px)}
}

/* ---------- 2. how it works: pinned timeline ---------- */
.motion .steps .card{opacity:calc(.35 + .65 * clamp(0, var(--c,1), 1));translate:0 calc((1 - var(--c,1)) * 14px)}
.motion .steps .card.result{scale:calc(.97 + .03 * var(--c,1));transform-origin:50% 100%}
.motion .steps .card .n{opacity:calc(.35 + .65 * clamp(0, var(--c,1), 1))}
.tline{display:none}
@media (min-width:1101px) and (min-height:720px){
  .motion #how{padding-top:0}
  .motion .pinwrap{position:relative}
  .motion .pin{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:112px 0 40px}
  .motion .pinspace{height:150vh}
  .motion .tline{display:block;position:relative;height:16px;margin:0 0 22px}
  .motion .tl-track{position:absolute;top:7px;height:2px;left:35px;right:calc((100% - 60px) / 4 - 35px);background:var(--line2);border-radius:2px;overflow:hidden}
  .motion .tl-fill{position:absolute;inset:0;background:var(--green);transform-origin:0 50%;transform:scaleX(var(--tl,0))}
  .motion .tl-dots{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .motion .tl-dots span{position:relative;width:16px;height:16px;margin-left:27px;border-radius:50%;background:var(--paper);border:2px solid var(--line2)}
  .motion .tl-dots span::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--green);
    opacity:clamp(0, var(--c,0), 1);scale:clamp(0, var(--c,0), 1.2)}
  .motion .tl-dots span:last-child::after{background:var(--ink);box-shadow:0 0 0 4px var(--cta)}
}

/* ---------- 3. why it works: template vs researched ---------- */
.motion .cmp.bad .x{background-image:linear-gradient(#A8412E,#A8412E);background-repeat:no-repeat;
  background-position:0 58%;background-size:calc(var(--x,1) * 100%) 2px}
.motion .cmp.bad .msg{opacity:calc(1 - .38 * var(--bd,1))}
.motion .cmp.bad .ticks>div,.motion .cmp.good .ticks>div{opacity:calc(.2 + .8 * var(--t,1));translate:calc((1 - var(--t,1)) * -10px) 0}
.motion .cmp .w{--wl:clamp(0, calc((var(--g,1) * (var(--n) + 6) - var(--i)) / 6), 1);
  display:inline;translate:none;opacity:calc(.2 + .8 * var(--wl))}
.motion .cmp.good .hl{background-size:calc(var(--ghl,1) * 100%) 100%}
.motion .cmp .note{opacity:var(--nt,1)}
.motion .cmp.good{translate:0 calc((1 - var(--gl,1)) * 30px)}

/* ---------- 4. guarantee: three conversations arrive ---------- */
.convos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cv{display:flex;gap:12px;align-items:flex-start;background:rgba(245,247,251,.06);border:1px solid rgba(245,247,251,.14);
  border-radius:18px 18px 18px 4px;padding:16px 18px}
.cv .cn{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--marker);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:15px}
.cv small{display:block;font-size:13px;color:var(--dim);margin-bottom:4px}
.cv p{font-size:16px;line-height:1.45;color:var(--paper)}
.motion .cv{opacity:clamp(0, var(--b,1), 1);translate:0 calc((1 - var(--b,1)) * -14px);scale:calc(.97 + .03 * var(--b,1))}
.motion .cv .cn{scale:calc(.8 + .2 * var(--b,1))}
@media (max-width:860px){
  .convos{grid-template-columns:1fr;gap:10px}
  .cv{padding:12px 14px}.cv p{font-size:15px}
}

/* ---------- 6. booking: rises and settles ---------- */
.motion .bookbox{opacity:calc(.3 + .7 * var(--bk,1));translate:0 calc((1 - var(--bk,1)) * 36px);scale:calc(.985 + .015 * var(--bk,1))}

/* elements that are animated get a compositor hint only while motion is on */
.motion .rv,.motion .steps .card,.motion .cv,.motion .bookbox,.motion .hero-art .reply,.motion .hero-art .mail{will-change:opacity,translate}

/* guarantee headline: "no fee." stays readable (light) until its marker arrives, then turns dark on the highlight */
@supports (color: color-mix(in srgb, red 50%, blue)){
  .motion .gbox h2 .mk{color:color-mix(in srgb, var(--ink) calc(var(--mkp,1) * 100%), var(--paper))}
}