/* All content stays visible by default. Scroll effects are finite Web Animations. */
:root {
  --motion-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-feedback: cubic-bezier(0.22, 0.68, 0, 1.01);
}
[data-product-motion] {
  overflow: hidden;
  border-radius: 8px;
}
[data-reveal='rule'] {
  transform-origin: left center;
}
html[dir='rtl'] [data-reveal='rule'] {
  transform-origin: right center;
}
.co-service-row {
  position: relative;
}
.motion-rule {
  position: absolute;
  inset-inline-start: 0;
  top: -1px;
  width: 72px;
  height: 2px;
  background: var(--amber);
  pointer-events: none;
}
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #627987;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 22px;
}
.motion-toggle[hidden] {
  display: none;
}
.motion-toggle:disabled {
  cursor: default;
  color: var(--hero-muted);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
/* Keep interaction hit areas and CTA alignment stationary. Only the image moves. */
:root body :is(.home-product, .solutions-card, .product-related-card):hover {
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-motion-state='running'] [data-product-motion] img {
    transition: transform 380ms var(--motion-out);
  }
  html[data-motion-state='running'] :is(.button, .button-dark) {
    transition: transform 180ms var(--motion-feedback);
  }
  html[data-motion-state='running']
    :is(
      .text-link,
      .solutions-card-link,
      .product-card-link,
      .product-text-link,
      .co-text-link,
      .solutions-services-link
    )
    img {
    transition: transform 220ms var(--motion-out);
  }
  @media (hover: hover) and (pointer: fine) {
    html[data-motion-state='running']:not([data-input='keyboard'])
      :is(.button, .button-dark):hover {
      transform: translateY(-2px);
    }
    html[data-motion-state='running']:not([data-input='keyboard'])
      :is(.button, .button-dark):active {
      transform: translateY(1px) scale(0.98);
    }
    html[data-motion-state='running']:not([data-input='keyboard'])
      :is(
        .text-link,
        .solutions-card,
        .product-related-card,
        .product-text-link,
        .co-text-link,
        .solutions-services-link,
        .home-product
      ):hover
      :is(
        .text-link img,
        .solutions-card-link img,
        .product-card-link img,
        .product-arrow,
        .co-arrow
      ),
    html[data-motion-state='running']:not([data-input='keyboard'])
      :is(.text-link, .solutions-services-link):hover
      > img {
      /* rtl.css uses the individual scale property, mirroring this translation too. */
      transform: translate(4px, -4px);
    }
  }
}
html[data-motion-state='paused'],
html[data-input='keyboard'] {
  scroll-behavior: auto;
}
html[data-motion-state='paused'] *,
html[data-motion-state='paused'] *::before,
html[data-motion-state='paused'] *::after,
html[data-input='keyboard'] *,
html[data-input='keyboard'] *::before,
html[data-input='keyboard'] *::after {
  transition: none !important;
}
html[data-motion-state='paused'] :is(.home-core-glass, .home-core-symbol) {
  animation: none;
}
html[data-motion-state='paused'] .home-core::before {
  transform: none;
}
@media print {
  .motion-toggle {
    display: none;
  }
}