/* One motion language for all nine product landings. Colors remain product-specific. */
body {
  --motion-time: 280ms;
  --motion-ease: cubic-bezier(.2,.7,.2,1);
  --card-active-shadow: 0 20px 45px color-mix(in srgb,var(--product) 23%,transparent);
}
body .motion-card {
  transform-origin: center;
  transition: transform var(--motion-time) var(--motion-ease),
    box-shadow var(--motion-time) var(--motion-ease),
    border-color var(--motion-time) ease,opacity 550ms ease;
  transition-delay: 0s;
}
body .motion-card.reveal-ready:not(.is-visible) {transform:translateY(24px)}
body .motion-card.reveal-ready.is-visible {transform:none}
/* Animate the complete screenshot frame, never crop or zoom its photograph. */
body .preview-card .preview-device,
body .preview-card .preview-device:hover {transform:none;transition:box-shadow var(--motion-time) var(--motion-ease)}
body .motion-control,
body .feature-explorer [role=tab][aria-selected=true] {
  transform:none;
  transition:transform var(--motion-time) var(--motion-ease),
    box-shadow var(--motion-time) var(--motion-ease),
    border-color var(--motion-time) ease,background-position 450ms ease,background-color var(--motion-time) ease;
}
body .button:before {transition:left 450ms var(--motion-ease)}
body :is(.text-link,.preview-enlarge,.hero-link,.existing-account,.conversion-login,.landing-products a,.section-nav a:not(.section-trial)) {
  transition:color var(--motion-time) ease,text-decoration-color var(--motion-time) ease,background-color var(--motion-time) ease;
  text-underline-offset:5px;
}
body .faq-list summary>span {transition:transform var(--motion-time) var(--motion-ease)}
body .faq-list summary {transition:color var(--motion-time) ease}
@media(hover:hover) and (pointer:fine) {
  body .motion-card:is(:hover,:focus-within),
  body .motion-card.reveal-ready.is-visible:is(:hover,:focus-within) {
    transform:translateY(-6px) scale(1.015);
    border-color:var(--product);
    box-shadow:var(--card-active-shadow);
  }
  body .preview-card:is(:hover,:focus-within),
  body .preview-card.reveal-ready.is-visible:is(:hover,:focus-within) {box-shadow:none}
  body .preview-card:is(:hover,:focus-within) .preview-device {box-shadow:var(--card-active-shadow)}
  body .motion-control:is(:hover,:focus-visible),
  body .feature-explorer [role=tab][aria-selected=true]:is(:hover,:focus-visible) {
    transform:translateY(-3px);
    box-shadow:0 0 0 5px color-mix(in srgb,var(--product) 10%,transparent),0 12px 30px color-mix(in srgb,var(--product) 30%,transparent);
    background-position:100% 0;
  }
  body :is(.text-link,.preview-enlarge,.hero-link,.existing-account,.conversion-login,.section-nav a:not(.section-trial)):hover {text-decoration:underline}
  body .faq-list summary:hover {color:var(--product-dark)}
}
body .motion-control:active {transform:translateY(0) scale(.98)}
/* Touch screens keep stable cards and show a brief press response on controls. */
@media(hover:none),(pointer:coarse) {
  body .motion-card:hover,
  body .motion-card.reveal-ready.is-visible:hover,
  body .motion-control:hover,
  body .feature-explorer [role=tab][aria-selected=true] {transform:none}
  body .motion-control:active {transform:scale(.98)}
  body .button:hover:before {left:-70%}
}
/* Pausing means no hover zoom, lift, entrance or animated scrolling. */
html.motion-paused body :is(.motion-card,.motion-control,.preview-device),
html.reduce-motion body :is(.motion-card,.motion-control,.preview-device) {
  transform:none!important;transition:none!important;animation:none!important;
}
html.motion-paused body .reveal-ready,
html.reduce-motion body .reveal-ready {opacity:1;transform:none!important}
html.motion-paused body .button:before,
html.reduce-motion body .button:before {display:none}
@media(prefers-reduced-motion:reduce) {
  body :is(.motion-card,.motion-control,.preview-device) {transform:none!important;transition:none!important;animation:none!important}
  body .reveal-ready {opacity:1;transform:none!important}
  body .button:before {display:none}
}