/* Shared motion and problem-summary polish for AI product pages. */

.problem-summary-section {
  padding-top: 48px;
  padding-bottom: 28px;
}

.problem-summary-head {
  margin-bottom: 30px;
}

.problem-summary-head .section-lede {
  margin-top: 42px;
}

.problem-title-mark {
  position: relative;
  display: inline-block;
  isolation: isolate;
  white-space: nowrap;
}

.problem-title-mark__text {
  position: relative;
  z-index: 1;
}

.problem-title-mark__underline {
  position: absolute;
  left: 50%;
  top: 0.68em;
  z-index: 0;
  width: min(92%, 238px);
  height: auto;
  transform: translateX(-50%) rotate(-1deg);
  opacity: 0.64;
  pointer-events: none;
}

.product-motion-ready .hero h1,
.product-motion-ready .hero-subtitle,
.product-motion-ready .hero-actions,
.product-motion-ready .reveal,
.product-motion-ready .motion-watch,
.product-motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(var(--motion-x, 0), var(--motion-y, 18px), 0) scale(var(--motion-scale, 1));
  filter: blur(var(--motion-blur, 7px));
  transition:
    opacity var(--motion-duration, 760ms) cubic-bezier(0.16, 1, 0.3, 1) var(--motion-delay, 0ms),
    transform var(--motion-duration, 760ms) cubic-bezier(0.16, 1, 0.3, 1) var(--motion-delay, 0ms),
    filter var(--motion-duration, 760ms) cubic-bezier(0.16, 1, 0.3, 1) var(--motion-delay, 0ms);
  will-change: opacity, transform, filter;
}

.product-motion-ready .hero-bg-motion,
.product-motion-ready .hero-visual-wrap {
  opacity: 0;
  filter: blur(var(--motion-blur, 10px));
  transition:
    opacity var(--motion-duration, 900ms) cubic-bezier(0.16, 1, 0.3, 1) var(--motion-delay, 0ms),
    filter var(--motion-duration, 900ms) cubic-bezier(0.16, 1, 0.3, 1) var(--motion-delay, 0ms);
  will-change: opacity, filter;
}

.product-motion-ready .hero h1 {
  --motion-y: 8px;
  --motion-blur: 8px;
  --motion-duration: 820ms;
  --motion-delay: 80ms;
}

.product-motion-ready .hero-subtitle {
  --motion-y: 10px;
  --motion-blur: 7px;
  --motion-duration: 860ms;
  --motion-delay: 260ms;
}

.product-motion-ready .hero-actions {
  --motion-y: 12px;
  --motion-blur: 5px;
  --motion-scale: 0.985;
  --motion-duration: 720ms;
  --motion-delay: 440ms;
}

.product-motion-ready .hero-bg-motion {
  --motion-blur: 9px;
  --motion-duration: 980ms;
  --motion-delay: 180ms;
}

.product-motion-ready .hero-visual-wrap {
  --motion-blur: 11px;
  --motion-duration: 980ms;
  --motion-delay: 650ms;
}

.product-motion-ready .hero.is-visible h1,
.product-motion-ready .hero.is-visible .hero-subtitle,
.product-motion-ready .hero.is-visible .hero-actions,
.product-motion-ready .hero.is-visible .hero-bg-motion,
.product-motion-ready .hero.is-visible .hero-visual-wrap,
.product-motion-ready .reveal.is-visible,
.product-motion-ready .motion-watch.is-visible,
.product-motion-ready .motion-reveal.is-visible,
.product-motion-ready .motion-group.is-visible .motion-reveal,
.product-motion-ready .motion-watch.is-visible .motion-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.product-motion-ready .motion-watch.is-visible,
.product-motion-ready .reveal.is-visible,
.product-motion-ready .hero.is-visible h1,
.product-motion-ready .hero.is-visible .hero-subtitle,
.product-motion-ready .hero.is-visible .hero-actions,
.product-motion-ready .hero.is-visible .hero-bg-motion,
.product-motion-ready .hero.is-visible .hero-visual-wrap {
  will-change: auto;
}

@media (max-width: 980px) {
  .problem-summary-head .section-lede {
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-motion-ready .hero h1,
  .product-motion-ready .hero-subtitle,
  .product-motion-ready .hero-actions,
  .product-motion-ready .hero-bg-motion,
  .product-motion-ready .hero-visual-wrap,
  .product-motion-ready .reveal,
  .product-motion-ready .motion-watch,
  .product-motion-ready .motion-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}