/* Shared motion layer for sections without their own entrance system. */
.motion-live-section {
  isolation: isolate;
}

.section-live-ambient {
  position: absolute;
  z-index: 0;
  top: var(--live-top, 24%);
  left: 4%;
  width: 24%;
  height: clamp(110px, 13vw, 190px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--live-color, rgba(53, 108, 255, .1)), transparent 70%);
  filter: blur(15px);
  opacity: .58;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(.88);
  animation: site-live-drift var(--live-duration, 18s) ease-in-out infinite alternate;
  animation-delay: var(--live-delay, 0s);
  animation-play-state: paused;
  will-change: transform, opacity;
}

.motion-live-section.motion-live-active .section-live-ambient {
  animation-play-state: running;
}

.client-results .result-card::before,
.crm-flow::before,
.faq-card::before {
  background-size: 220% 220%;
  animation: site-accent-flow 7s linear infinite;
}

@keyframes site-live-drift {
  0% { opacity: .34; transform: translate3d(0, -8px, 0) scale(.88); }
  45% { opacity: .62; transform: translate3d(145%, 13px, 0) scale(1.08); }
  100% { opacity: .4; transform: translate3d(295%, -5px, 0) scale(.94); }
}

@keyframes site-accent-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

.site-motion-ready .motion-reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 30px, 0) rotateX(4deg);
  transform-origin: 50% 100%;
  transition:
    opacity .72s var(--motion-delay, 0ms) ease,
    filter .72s var(--motion-delay, 0ms) ease,
    transform .78s var(--motion-delay, 0ms) cubic-bezier(.2, .75, .2, 1);
  will-change: opacity, filter, transform;
}

.site-motion-ready .motion-reveal.motion-reveal--left {
  transform: translate3d(-28px, 12px, 0) rotateY(-4deg);
}

.site-motion-ready .motion-reveal.motion-reveal--right {
  transform: translate3d(28px, 12px, 0) rotateY(4deg);
}

.site-motion-ready .motion-reveal.motion-reveal--scale {
  transform: translate3d(0, 24px, 0) scale(.975) rotateX(3deg);
}

.site-motion-ready .motion-reveal.motion-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .result-card,
  .tpcase {
    --motion-tilt-x: 0deg;
    --motion-tilt-y: 0deg;
    transform: perspective(950px) rotateX(var(--motion-tilt-x)) rotateY(var(--motion-tilt-y));
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
  }

  .result-card {
    transition: transform .25s ease, border-color .28s ease, box-shadow .28s ease;
  }

  .result-card:hover {
    transform: perspective(950px) translate3d(0, -6px, 14px) rotateX(var(--motion-tilt-x)) rotateY(var(--motion-tilt-y));
  }

  .result-card__header,
  .result-card__shift,
  .result-card blockquote {
    transform: translateZ(16px);
  }

  .tpcase {
    border-radius: 16px;
    transition: transform .25s ease, box-shadow .3s ease;
  }

  .tpcase:hover {
    box-shadow: 0 28px 58px rgba(18, 40, 82, .2);
    transform: perspective(950px) translate3d(0, -7px, 16px) rotateX(var(--motion-tilt-x)) rotateY(var(--motion-tilt-y));
  }

  .tpcase-content {
    transform: translateZ(24px);
  }

  .tpbrand-active-4 .tpbrand-item-4 img {
    transform: perspective(700px) translate3d(0, 0, 0);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease, opacity .28s ease;
  }

  .tpbrand-active-4 .tpbrand-item-4 img:hover {
    box-shadow: 0 18px 34px rgba(25, 55, 108, .13);
    transform: perspective(700px) translate3d(0, -6px, 15px) rotateX(-4deg) rotateY(4deg) scale(1.035);
  }
}

@media (max-width: 767px) {
  .site-motion-ready .motion-reveal {
    filter: blur(3px);
    transform: translate3d(0, 20px, 0) rotateX(2deg);
  }

  .site-motion-ready .motion-reveal.motion-reveal--left,
  .site-motion-ready .motion-reveal.motion-reveal--right {
    transform: translate3d(0, 20px, 0);
  }

  .site-motion-ready .motion-reveal.motion-reveal--scale {
    transform: translate3d(0, 18px, 0) scale(.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-live-ambient,
  .client-results .result-card::before,
  .crm-flow::before,
  .faq-card::before {
    animation: none !important;
  }

  .site-motion-ready .motion-reveal,
  .site-motion-ready .motion-reveal.motion-visible {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .result-card,
  .tpcase,
  .tpbrand-active-4 .tpbrand-item-4 img {
    transform: none !important;
    transition: none !important;
  }
}