/* Motion enhancement for the marketing page. All content is visible by default. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.motion-word-clip {
  display: inline-block;
  max-width: 100%;
  overflow: clip;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.motion-word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.motion-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.motion-button-label {
  position: relative;
  z-index: 1;
  display: block;
  overflow: clip;
  overflow-wrap: anywhere;
}
.motion-button-text, .motion-button-copy { display: block; }
.motion-button-copy { position: absolute; inset: 0; transform: translateY(130%); }

@media (prefers-reduced-motion: no-preference) {
  .motion-button { transition: transform 280ms var(--motion-ease); }
  .motion-button::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(247, 244, 239, .24);
    transform: translateY(101%);
    transition: transform 450ms var(--motion-ease);
    pointer-events: none;
  }
  .motion-button-text, .motion-button-copy {
    transition: transform 450ms var(--motion-ease);
  }
  .motion-button:focus-visible::before { transform: translateY(0); }
  .motion-button:focus-visible .motion-button-text { transform: translateY(-130%); }
  .motion-button:focus-visible .motion-button-copy { transform: translateY(0); }
  .cta-link { position: relative; }
  .cta-link::after {
    content: '';
    position: absolute;
    height: 2px;
    bottom: -2px;
    left: 0;
    right: 0;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 400ms var(--motion-ease);
  }
  .cta-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
  @media (hover: hover) and (pointer: fine) {
    .motion-button:hover { transform: translateY(-2px); }
    .motion-button:hover::before { transform: translateY(0); }
    .motion-button:hover .motion-button-text { transform: translateY(-130%); }
    .motion-button:hover .motion-button-copy { transform: translateY(0); }
    .cta-link:hover::after { transform: scaleX(1); transform-origin: left; }
  }
  .motion-button:active { transform: translateY(0) scale(.98); }
}

@media (prefers-reduced-motion: reduce), print {
  .motion-word, [data-motion-enter], [data-motion-report],
  [data-motion-sequence] > *, .range-band {
    transform: none !important;
    opacity: 1 !important;
  }
  .motion-button-copy { display: none; }
  .motion-button-text { transform: none !important; }
  .motion-button::before, .cta-link::after { display: none; }
}