/* Movement changes compositing, never layout or the pre-rendered panel blur. */
html:not(.motion-ready) [data-sketch-draw] {
  visibility: hidden;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
}

.motion-enabled [data-sketch-draw] {
  stroke-dasharray: 100 100;
}

.motion-enabled [data-sketch-draw][data-sketch-state="hidden"] {
  visibility: hidden;
  stroke-dashoffset: 100;
}

.motion-enabled .site-shell .page {
  transform: none !important;
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.6, 1), visibility 280ms !important;
  will-change: auto;
}

.motion-enabled .page:not(.is-active) *,
.motion-enabled .page:not(.is-active) *::before,
.motion-enabled .page:not(.is-active) *::after,
.motion-suspended .page *,
.motion-suspended .page *::before,
.motion-suspended .page *::after {
  animation-play-state: paused !important;
}

.motion-enabled [data-motion-pending] {
  opacity: 0;
}

.motion-enabled .page:not(.is-active) *,
.motion-suspended .site-shell .page,
.motion-suspended .page *,
.motion-suspended .page *::before,
.motion-suspended .page *::after {
  transition: none !important;
}

.motion-enabled .app-card,
.motion-enabled .app-heading {
  isolation: isolate;
}

.motion-card-light {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.motion-card-glint {
  position: absolute;
  inset: -40% -25%;
  opacity: 0;
  background: linear-gradient(112deg, transparent 30%, rgba(220, 231, 248, 0.055) 48%, rgba(245, 249, 255, 0.08) 52%, transparent 73%);
}

.motion-enabled .app-process::after {
  display: none;
}

.motion-enabled .app-design-visual {
  display: block;
  animation: none;
  will-change: auto;
  transform: scale(1.025);
}

.motion-enabled .app-cta,
.motion-enabled .app-contact-card {
  transition: border-color 650ms ease, background-color 650ms ease, box-shadow 650ms ease;
}

.motion-enabled .app-cta::before {
  opacity: 0.045;
  transform: scaleX(0.25);
  transition: opacity 700ms ease, transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-enabled .app-cta-icon {
  transition: color 600ms ease, border-color 600ms ease, background-color 600ms ease;
}

.motion-enabled .app-cta-icon svg {
  transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-enabled .app-cta:hover,
.motion-enabled .app-cta:focus-visible {
  transform: none;
  border-color: rgba(225, 234, 247, 0.22);
  background-color: rgba(13, 16, 22, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.22);
}

.motion-enabled .app-cta:hover::before,
.motion-enabled .app-cta:focus-visible::before {
  opacity: 0.095;
  transform: scaleX(1);
}

.motion-enabled .app-page .app-cta:hover .app-cta-icon,
.motion-enabled .app-page .app-cta:focus-visible .app-cta-icon {
  transform: none;
  color: #e3eafa;
  background: rgba(219, 230, 252, 0.055);
  border-color: rgba(218, 229, 246, 0.3);
  box-shadow: none;
}

.motion-enabled .app-cta:hover .app-cta-icon svg,
.motion-enabled .app-cta:focus-visible .app-cta-icon svg {
  transform: translateX(3px);
}

.motion-enabled .app-cta:active .app-cta-icon svg {
  transform: translateX(5px);
}

.motion-enabled .app-contact-card:hover,
.motion-enabled .app-contact-card:focus-visible {
  transform: none;
  border-color: rgba(229, 237, 248, 0.23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 38px rgba(0, 0, 0, 0.28);
}

.motion-enabled .app-contact-card > i {
  transition: opacity 650ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-enabled .app-contact-card:hover > i,
.motion-enabled .app-contact-card:focus-visible > i {
  opacity: 0.75;
  transform: translate(3px, -3px);
}

.motion-enabled .app-cta:focus-visible,
.motion-enabled .app-contact-card:focus-visible {
  outline: 2px solid rgba(195, 211, 245, 0.72);
  outline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
  .motion-enabled .app-card-compact,
  .motion-enabled .app-feature-card {
    transition: border-color 650ms ease;
  }

  .motion-enabled .app-card-compact:hover,
  .motion-enabled .app-feature-card:hover {
    transform: none;
    border-color: rgba(221, 232, 248, 0.2);
  }

  .motion-enabled .app-card-design:not(.app-brand-showcase) .app-design-visual {
    translate: var(--art-x, 0px) var(--art-y, 0px);
    transition: translate 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .page *,
  .motion-enabled .page *::before,
  .motion-enabled .page *::after {
    animation: none !important;
    transition: none !important;
  }

  .motion-enabled .site-shell .page {
    transition: none !important;
  }

  .motion-enabled [data-motion-pending] { opacity: 1; }
  .motion-card-light { display: none; }
}