@media (min-width:1181px) and (prefers-reduced-motion:no-preference){
    .uee-process__card{
      transform-origin:center center;
      will-change:translate, scale, opacity, filter;
    }

    /* Sequence starts: all cards become secondary. */
    .uee-process.is-sequence-running .uee-process__card{
      scale:1;
      opacity:.30 !important;
      filter:saturate(.55) brightness(1.045) !important;
      box-shadow:none !important;
      transform:none !important;
      transition:
        opacity .16s ease,
        filter .16s ease,
        scale .22s cubic-bezier(.22,.61,.36,1),
        box-shadow .22s ease !important;
    }

    /* The current 01 -> 10 card becomes the visual focus. */
    .uee-process.is-sequence-running .uee-process__card.is-seq-active{
      scale:1.05;
      opacity:1 !important;
      filter:none !important;
      z-index:30;
      box-shadow:0 10px 26px rgba(7,89,255,.11) !important;
    }

    /* Make the active number a touch clearer, without overdoing it. */
    .uee-process.is-sequence-running .uee-process__card.is-seq-active .uee-process__number{
      transform:scale(1.03);
      box-shadow:0 5px 12px rgba(7,89,255,.18);
    }

    /* While the sequence is running, mouse hover must not overpower it. */
    .uee-process.is-sequence-running .uee-process__grid:hover .uee-process__card,
    .uee-process.is-sequence-running .uee-process__grid .uee-process__card:hover{
      transform:none !important;
    }

    .uee-process.is-sequence-running .uee-process__card:hover .uee-process__icon,
    .uee-process.is-sequence-running .uee-process__card:hover .uee-process__name,
    .uee-process.is-sequence-running .uee-process__card:hover .uee-process__desc{
      transform:none !important;
    }
  }