/* Small, finite movements for the existing X10Pay design.
   No hidden reveal classes: content is readable even if JavaScript fails. */
:root {
  --motion-ease: cubic-bezier(.22,.61,.36,1);
}

/* Automatic suspension is independent of the visitor's manual pause choice.
   Cover scene roots and pseudo-elements as well as animated descendants. */
[data-animated-visual]:is(.is-paused, .is-motion-idle),
[data-animated-visual]:is(.is-paused, .is-motion-idle)::before,
[data-animated-visual]:is(.is-paused, .is-motion-idle)::after,
[data-animated-visual]:is(.is-paused, .is-motion-idle) *,
[data-animated-visual]:is(.is-paused, .is-motion-idle) *::before,
[data-animated-visual]:is(.is-paused, .is-motion-idle) *::after {
  animation-play-state: paused !important;
}

.product-card:focus-within,
.scenario-card:focus-within,
.fees-product:focus-within {
  box-shadow: 0 0 0 2px var(--blue), 0 1rem 2.8rem #0c112a0a;
}

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .login,
  .theme-toggle,
  .language-switch a,
  .solutions-links a,
  .scenario-options a,
  .contact-channel {
    transition: transform 200ms var(--motion-ease), background-color 180ms ease,
      color 180ms ease, box-shadow 220ms ease;
  }

  .btn .arrow,
  .text-link .arrow,
  .contact-channel > .arrow {
    transition: transform 200ms var(--motion-ease);
  }

  .btn:focus-visible .arrow,
  .text-link:focus-visible .arrow,
  .contact-channel:focus-visible > .arrow {
    transform: translateX(3px);
  }

  .btn:active,
  .login:active,
  .theme-toggle:active,
  .language-switch a:active {
    transform: translateY(1px);
  }

  .product-card,
  .industry-card,
  .company-card,
  .fees-product,
  .scenario-card,
  .merchant-object {
    transition: transform 240ms var(--motion-ease),
      box-shadow 240ms ease;
  }

  .solutions-links:not([hidden]) {
    transform-origin: 50% 0;
    animation: x10-menu-in 180ms var(--motion-ease) both;
  }

  .faq-list details[open] > p {
    animation: x10-answer-in 240ms var(--motion-ease) both;
  }

  .faq-list summary,
  .field input,
  .field select {
    transition: background-color 180ms ease, border-color 180ms ease,
      box-shadow 180ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .btn:hover,
    .login:hover {
      transform: translateY(-2px);
    }

    .btn:hover .arrow,
    .text-link:hover .arrow,
    .contact-channel:hover > .arrow {
      transform: translateX(3px);
    }

    .product-card:hover,
    .industry-card:hover,
    .company-card:hover,
    .fees-product:hover,
    .scenario-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 1rem 2.8rem #0c112a0c;
    }

    [data-theme=dark] .product-card:hover,
    [data-theme=dark] .industry-card:hover,
    [data-theme=dark] .company-card:hover,
    [data-theme=dark] .fees-product:hover,
    [data-theme=dark] .scenario-card:hover {
      box-shadow: 0 1rem 2.8rem #0003;
    }

    .contact-channel:hover,
    .scenario-options a:hover {
      transform: translateX(2px);
    }

    .btn:hover:active,
    .login:hover:active {
      transform: translateY(0);
      transition-duration: 100ms;
    }

    .product-card:hover:focus-within,
    .scenario-card:hover:focus-within,
    .fees-product:hover:focus-within {
      box-shadow: 0 0 0 2px var(--blue), 0 1rem 2.8rem #0c112a0a;
    }
  }

  @media (max-width: 920px) {
    .site-nav.is-open {
      transform-origin: 50% 0;
      animation: x10-menu-in 180ms var(--motion-ease) both;
    }
  }
}

@keyframes x10-menu-in {
  from { opacity: .8; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes x10-answer-in {
  from { opacity: .8; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .solutions-links,
  .site-nav,
  .faq-list details > p { animation: none !important; }
  .btn, .login, .theme-toggle, .language-switch a,
  .solutions-links a, .scenario-options a, .contact-channel,
  .product-card, .industry-card, .company-card, .fees-product,
  .scenario-card, .merchant-object, .faq-list summary,
  .field input, .field select { transition: none !important; }
}

@media print {
  [data-animated-visual],
  [data-animated-visual] *,
  [data-animated-visual] *::before,
  [data-animated-visual] *::after { animation: none !important; }
}