/* Benevolve motion system
   One easing family site-wide; reveals are gated on .js-motion (set inline in
   <head> only when motion.js will run) so no-JS visitors and bots see everything. */

:root {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-dur: 0.65s;
  --m-rise: 28px;
}

@media (max-width: 767px) {
  :root {
    --m-rise: 16px;
  }
}

/* Cross-page crossfade (no-op in browsers without View Transitions) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation-duration: 0.18s;
}

::view-transition-new(root) {
  animation-duration: 0.26s;
}

/* Hover micro-interactions: quiet lifts on interactive cards and CTAs.
   Kept independent of the reveal attribute, which motion.js strips after
   the entrance finishes. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .js-motion :is(.dif-del-card, .say-aboutus-card, .for-your-container, .boxOuter > .box, .boxOuter > .boxCard, .blogOuter .card) {
    transition: transform 0.25s var(--m-ease), box-shadow 0.25s var(--m-ease);
  }

  .js-motion :is(.dif-del-card, .say-aboutus-card, .for-your-container, .boxOuter > .box, .boxOuter > .boxCard, .blogOuter .card):hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.1);
  }

  .js-motion :is(.quickDemo, .contactUsBtn, .submitBtn) {
    transition: transform 0.2s var(--m-ease);
  }

  .js-motion :is(.quickDemo, .contactUsBtn, .submitBtn):hover {
    transform: translateY(-2px);
  }
}

/* Reveal states — declared after the hover rules so the hidden state wins
   while an element still carries data-m */
.js-motion [data-m] {
  opacity: 0;
  transform: translateY(var(--m-rise));
  transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease);
  transition-delay: var(--m-delay, 0s);
}

.js-motion [data-m="scale"] {
  transform: translateY(12px) scale(0.97);
  transform-origin: center bottom;
}

.js-motion [data-m="fade"] {
  transform: none;
}

.js-motion [data-m].m-in {
  opacity: 1;
  transform: none;
}

/* Motion off = everything visible, instantly, always */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .js-motion [data-m] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}