/* Sellerfy site motion: scroll reveals, card lifts, live timeline. Loaded on every page.
   Everything here is gated on html.sf-motion, which assets/motion.js sets only when the
   browser supports IntersectionObserver and the visitor has not asked for reduced motion. */

html.sf-motion .rv {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .75s cubic-bezier(.2, .7, .2, 1), translate .75s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--rv-d, 0ms);
}
html.sf-motion .rv.rv-in { opacity: 1; translate: 0 0; }
html.sf-motion .rv.rv-x { translate: -22px 0; }
html.sf-motion .rv.rv-x.rv-in { translate: 0 0; }

/* Cards lift a little under the pointer */
html.sf-motion .sf-pcard,
html.sf-motion .sf-card,
html.sf-motion .sf-shot,
html.sf-motion .sf-trial,
html.sf-motion .g-card,
html.sf-motion .mi-card {
  transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s cubic-bezier(.2, .7, .2, 1), border-color .35s ease;
}
html.sf-motion .sf-pcard:hover,
html.sf-motion a.sf-card:hover,
html.sf-motion .sf-shot:hover,
html.sf-motion .g-card:hover,
html.sf-motion .mi-card:hover {
  translate: 0 -5px;
  box-shadow: 0 28px 50px -28px rgba(76, 29, 149, .55);
}
html.sf-motion .sf-btn,
html.sf-motion .mi-btn { transition: translate .25s ease, box-shadow .25s ease, filter .25s ease; }
html.sf-motion .sf-btn:hover,
html.sf-motion .mi-btn:hover { translate: 0 -2px; filter: brightness(1.06); }

/* Live rows: a worklist card whose rows arrive one by one and whose total counts up */
html.sf-motion [data-live-rows] .lr { opacity: 0; translate: -14px 0; transition: opacity .55s ease, translate .55s cubic-bezier(.2, .7, .2, 1); }
html.sf-motion [data-live-rows].lr-on .lr { opacity: 1; translate: 0 0; }
html.sf-motion [data-live-rows] .lr-hi { display: inline-block; }
html.sf-motion [data-live-rows].lr-on .lr .lr-hi { animation: lrpop .5s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: inherit; }
@keyframes lrpop { 0% { scale: .6; opacity: 0; } 100% { scale: 1; opacity: 1; } }

/* Live timeline: one case, found to paid */
.tl .dot .n { display: inline; }
.tl .st.done .dot .n { display: none; }
.tl .dot svg { display: none; }
.tl .st.done .dot svg { display: block; }
html.sf-motion .tl .st:not(:last-child)::after { background: rgba(255, 255, 255, .14); transition: background-color .6s ease; }
html.sf-motion .tl .st.done::after { background: #34D399; }
html.sf-motion .tl .dot { transition: background-color .4s ease, box-shadow .4s ease, scale .4s cubic-bezier(.2, .9, .3, 1.4); }
html.sf-motion .tl .st.now .dot { animation: tlpulse 1.4s ease-out infinite; }
html.sf-motion .tl .st.done.pop .dot { animation: tlpop .55s cubic-bezier(.2, .9, .3, 1.4) both; }
html.sf-motion .tl b, html.sf-motion .tl span.d, html.sf-motion .tl .when { transition: color .4s ease, opacity .4s ease; }
html.sf-motion .tl .st:not(.done):not(.now) b { color: rgba(255, 255, 255, .55); }
html.sf-motion .tl .st:not(.done):not(.now) span.d { opacity: .55; }
html.sf-motion [data-tl-amount] { transition: opacity .5s ease, scale .5s cubic-bezier(.2, .9, .3, 1.4), text-shadow .5s ease; }
html.sf-motion [data-tl-amount].pending { opacity: .35; scale: .92; }
html.sf-motion [data-tl-amount].paid { opacity: 1; scale: 1; text-shadow: 0 0 22px rgba(134, 239, 172, .75); }
html.sf-motion .tl.fade { opacity: .45; transition: opacity .35s ease; }
html.sf-motion .tl { transition: opacity .35s ease; }
@keyframes tlpulse {
  0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
  100% { box-shadow: 0 0 0 14px rgba(168, 85, 247, 0), inset 0 1px 0 rgba(255, 255, 255, .25); }
}
@keyframes tlpop { 0% { scale: .55; } 60% { scale: 1.18; } 100% { scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.sf-motion .rv { opacity: 1; translate: none; transition: none; }
}

@media print {
  html.sf-motion .rv,
  html.sf-motion [data-live-rows] .lr,
  html.sf-motion [data-live-rows] .lr-hi {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Google Calendar booking popup: its iframe has no background of its own, so give it an opaque light canvas (same fix as ds/styles.css). */
iframe[src*="calendar.google.com/calendar/appointments"] { background: #fff !important; color-scheme: light; border-radius: 14px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }