/* ==========================================================
   motion.css: small, on-brand animations (vanilla, no libraries)
   1. Before/after slider (service pages)
   2. Paw prints across "How Booking Works" (Home)
   3. Bubbles on "Request an Appointment" buttons
   4. Wagging pup (thank-you page)
   5. Fade/float-in of photos on scroll
   Everything is off under prefers-reduced-motion.
   ========================================================== */

/* ---------- 1. Before / after slider ---------- */
.ba-figure{text-align:center}
.ba-frame{display:block!important;width:min(100%, calc(600px * var(--ar)));margin:0 auto}
.ba{position:relative;z-index:1;width:100%;aspect-ratio:var(--ar);overflow:hidden;border-radius:4px;background:#F6E9DF;box-shadow:0 30px 60px -30px rgba(58,40,35,.35);
  touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;--pos:50%}
.ba .ba-img{position:absolute;z-index:1;inset:0;border-radius:0;box-shadow:none;width:100%!important;height:100%!important;max-height:none!important;max-width:none!important;
  object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba-contain .ba-img{object-fit:contain}
.ba .ba-before{z-index:2;background:#F6E9DF}
.ba .ba-handle{z-index:3}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;pointer-events:none}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(58,40,35,.12),0 0 14px rgba(58,40,35,.25)}
.ba-knob{position:absolute;top:50%;left:0;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--rose);
  border:3px solid #fff;box-shadow:0 8px 20px -6px rgba(58,40,35,.45);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.ba-knob svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ba.is-dragging .ba-knob{transform:scale(1.08)}
.ba-range{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:50%;top:50%}
.ba:has(.ba-range:focus-visible) .ba-knob{outline:3px solid var(--ink);outline-offset:3px}
.ba-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;width:min(100%, calc(600px * var(--ar, 1)));
  margin:40px auto 0;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep)}
.ba-hint{font-weight:500;color:var(--ink-2);letter-spacing:.12em}
@media (max-width:980px){ .ba-frame,.ba-caption{width:min(100%, calc(520px * var(--ar)))} .ba-caption{margin-top:30px} }
@media (max-width:760px){ .ba-knob{width:42px;height:42px;margin:-21px 0 0 -21px} .ba-caption{font-size:11px} }

/* gallery tile version */
.g-ba .ba{box-shadow:none;border-radius:2px}
.g-ba .ba-knob{width:40px;height:40px;margin:-20px 0 0 -20px}
.g-ba .ba-knob svg{width:18px;height:18px}

/* ---------- 2. Paw prints across the booking steps (Home) ---------- */
.steps.has-pawwalk{position:relative}
.paw-walk{position:absolute;inset:0;pointer-events:none;z-index:2}
.paw-walk i{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:0;background:var(--rose-deep,#B8735E);
  transform:rotate(var(--r)) scale(.4);transition:opacity .35s ease-out,transform .35s cubic-bezier(.3,1.6,.5,1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.2' rx='6' ry='5.2'/%3E%3Cellipse cx='4.6' cy='9.6' rx='2.4' ry='2.9' transform='rotate(-18 4.6 9.6)'/%3E%3Cellipse cx='9.2' cy='5.4' rx='2.4' ry='3' transform='rotate(-6 9.2 5.4)'/%3E%3Cellipse cx='14.8' cy='5.4' rx='2.4' ry='3' transform='rotate(6 14.8 5.4)'/%3E%3Cellipse cx='19.4' cy='9.6' rx='2.4' ry='2.9' transform='rotate(18 19.4 9.6)'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.2' rx='6' ry='5.2'/%3E%3Cellipse cx='4.6' cy='9.6' rx='2.4' ry='2.9' transform='rotate(-18 4.6 9.6)'/%3E%3Cellipse cx='9.2' cy='5.4' rx='2.4' ry='3' transform='rotate(-6 9.2 5.4)'/%3E%3Cellipse cx='14.8' cy='5.4' rx='2.4' ry='3' transform='rotate(6 14.8 5.4)'/%3E%3Cellipse cx='19.4' cy='9.6' rx='2.4' ry='2.9' transform='rotate(18 19.4 9.6)'/%3E%3C/svg%3E") center/contain no-repeat}
.paw-walk i.on{opacity:var(--o,.5);transform:rotate(var(--r)) scale(1)}
.paw-walk i.gap{background:#FEF6EF}
.step-num.pulse{animation:step-pulse .6s ease-out}
@keyframes step-pulse{0%{box-shadow:0 0 0 0 rgba(184,115,94,.45)}100%{box-shadow:0 0 0 14px rgba(184,115,94,0)}}
@media (max-width:760px){ .paw-walk i{width:16px;height:16px;margin:-8px 0 0 -8px} }

/* ---------- 3. Button bubbles ---------- */
.btn-bubbles{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.btn-bubble{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff 0 12%,rgba(255,255,255,0) 26%),
             radial-gradient(circle at 50% 50%,rgba(255,255,255,.22) 0 52%,rgba(240,170,196,.45) 74%,rgba(190,110,95,.7) 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95),0 0 0 1px rgba(150,80,66,.35),0 2px 6px rgba(120,60,50,.15)}

/* ---------- 4. Wagging pup (thank-you) ---------- */
.pup-wrap{width:230px;margin:0 auto 14px}
.pup-wrap svg{display:block;width:100%;height:auto;overflow:visible}
.pup-tail{transform-box:view-box;transform-origin:170px 209px;animation:pup-wag 2.6s ease-in-out infinite}
.pup-head{transform-box:view-box;transform-origin:130px 140px;animation:pup-tilt 5.2s ease-in-out infinite}
.pup-eyes{transform-box:fill-box;transform-origin:center;animation:pup-blink 4.6s infinite}
@keyframes pup-wag{0%,56%,100%{transform:rotate(0)}6%,18%,30%,42%{transform:rotate(-16deg)}12%,24%,36%,48%{transform:rotate(12deg)}}
@keyframes pup-tilt{0%,40%,100%{transform:rotate(0)}50%,70%{transform:rotate(-6deg)}}
@keyframes pup-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@media (max-width:760px){ .pup-wrap{width:168px} }

/* ---------- 5. Photo fade/float-in ---------- */
.js-motion .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease-out,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0ms)}
.js-motion .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .paw-walk{display:none}
  .pup-tail,.pup-head,.pup-eyes,.step-num.pulse{animation:none!important}
  .btn-bubbles{display:none}
  .js-motion .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .ba-knob{transition:none}
}