/* Shared motion: short, finite transitions with no scroll hijacking. */
:root{--motion-ease:cubic-bezier(.22,.68,.28,1);--reveal-distance:16px;--reveal-duration:480ms}
@media(min-width:801px){
  .homepage .hero .actions{justify-content:flex-start}
  .homepage .case-copy .text-link,.homepage .solution-body .text-link,.homepage .igaming .button,
  .homepage .contact .text-link,.homepage .contact form .button,
  .internal-page .case-copy .text-link,.internal-page .gaming-hero .button{margin-left:0;margin-right:auto;align-self:flex-start}
  .homepage .contact .contact-number{width:fit-content;margin-left:0;margin-right:auto;text-align:left}
}
.js-motion{transition:opacity var(--reveal-duration) var(--motion-ease),transform var(--reveal-duration) var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.js-motion.reveal-ready:not(.in-view){opacity:0;transform:translateY(var(--reveal-distance))}
.js-motion.in-view{opacity:1;transform:none}
.js-motion:focus-within{opacity:1!important;transform:none!important;transition-delay:0ms}
.button,.nav-cta{transition:background-color 180ms ease,transform 180ms var(--motion-ease)}
.button .icon,.text-link .icon,.hero-link .icon,.back .icon{transition:transform 180ms var(--motion-ease)}
.case-image img{transition:transform 420ms var(--motion-ease)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .button:hover .icon,.text-link:hover .icon,.hero-link:hover .icon{transform:translate(2px,-2px)}
  .back:hover .icon{transform:translateX(-3px)}
  .case-image:hover img{transform:scale(1.025)}
}
@media(hover:none){
  .button:hover,.button.primary:hover,.button.light:hover,.button.dark:hover,.button.orange:hover,.case-image:hover img,.case-image:hover .image-arrow{transform:none}
}
@media(prefers-reduced-motion:no-preference){
  .hero-content,.inner-hero,.gaming-hero>.wrap{animation:onside-arrive 420ms var(--motion-ease) both}
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:180ms;animation-timing-function:ease-out}
  .solution[open] .solution-body{animation:onside-content 220ms ease-out}
  @supports (interpolate-size:allow-keywords) and selector(::details-content){
    .solution{interpolate-size:allow-keywords}
    .solution::details-content{block-size:0;overflow:clip;transition:block-size 300ms var(--motion-ease),content-visibility 300ms allow-discrete}
    .solution[open]::details-content{block-size:auto}
  }
}
@keyframes onside-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes onside-content{from{opacity:.4}to{opacity:1}}
@media(max-width:800px){
  :root{--reveal-distance:8px;--reveal-duration:340ms}
  .js-motion{transition-delay:0ms}
  .header nav{display:flex;flex-direction:column;align-items:stretch;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity 180ms ease,transform 180ms var(--motion-ease),visibility 0s 180ms}
  .header nav.open{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
  .hero-content,.inner-hero,.gaming-hero>.wrap{animation-duration:300ms}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:120ms}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js-motion.reveal-ready:not(.in-view){opacity:1;transform:none}
  .button:hover,.case-image:hover img,.case-image:hover .image-arrow{transform:none!important}
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}
@media print{.js-motion.reveal-ready:not(.in-view){opacity:1;transform:none}}
