.sampling-animation-scene {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: "Source Sans Pro", "Sourcesanspro", sans-serif;
}

.sampling-animation-scene .sampling-svg-title {
  fill: #2e3639;
  font-size: 15px;
  font-weight: 600;
}

.sampling-animation-scene .sampling-svg-label {
  fill: #106668;
  font-size: 14px;
  font-weight: 600;
}

.sampling-animation-scene .sampling-tablet {
  transform: translateX(0);
  transition: transform .8s cubic-bezier(.2,.75,.2,1);
}

.sampling-animation-scene .sampling-form {
  transition: opacity .6s ease;
}

.sampling-animation-scene .sampling-active-field {
  transition: stroke .35s ease, fill .35s ease;
}

.sampling-animation-scene .sampling-typing-line {
  transform-box: fill-box;
  transform-origin: left center;
}

.sampling-animation-scene .sampling-caret {
  opacity: 0;
}

.product-animation[data-product-animation="sampling"][data-phase="0"] .sampling-typing-line {
  animation: sampling-fill-field 2.4s cubic-bezier(.22,.6,.3,1) both;
  animation-play-state: paused;
}

.product-animation[data-product-animation="sampling"][data-phase="0"] .sampling-caret {
  animation: sampling-caret-blink .9s steps(1,end) infinite;
  animation-play-state: paused;
}

.product-animation[data-product-animation="sampling"].is-running[data-phase="0"] .sampling-typing-line,
.product-animation[data-product-animation="sampling"].is-running[data-phase="0"] .sampling-caret {
  animation-play-state: running;
}

.sampling-animation-scene .sampling-step-dot {
  transition: fill .45s ease .15s;
}

.sampling-animation-scene .sampling-step-check,
.sampling-animation-scene .sampling-saved-photo {
  opacity: 0;
  transition: opacity .4s ease;
}

.sampling-animation-scene .sampling-empty-photo {
  opacity: 1;
  transition: opacity .3s ease;
}

.sampling-animation-scene .sampling-photo-card,
.sampling-animation-scene .sampling-protocol,
.sampling-animation-scene .sampling-send {
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

.sampling-animation-scene .sampling-photo-card {
  transform: translate(23px,12px) scale(.88);
  transition: opacity .35s ease, transform .75s cubic-bezier(.18,.8,.22,1);
}

.sampling-animation-scene .sampling-photo-confirmation {
  opacity: 0;
  transition: opacity .3s ease;
}

.sampling-animation-scene .sampling-protocol {
  transform: translate(-76px,12px) rotate(-3deg);
  transition: opacity .35s ease, transform .9s cubic-bezier(.2,.78,.22,1);
}

.sampling-animation-scene .sampling-send {
  transform: translate(-6px,5px) scale(.7);
  transition: opacity .35s ease, transform .5s cubic-bezier(.18,.8,.22,1);
}

.product-animation[data-product-animation="sampling"][data-phase="1"] .sampling-active-field,
.product-animation[data-product-animation="sampling"][data-phase="2"] .sampling-active-field {
  fill: #f5f8f7;
  stroke: #e4ece9;
}

.product-animation[data-product-animation="sampling"][data-phase="1"] .sampling-photo-card {
  opacity: 1;
  transform: translate(0,0) scale(1);
}

.product-animation[data-product-animation="sampling"][data-phase="1"] .sampling-photo-confirmation {
  opacity: 1;
  transition-delay: 1s;
}

.product-animation[data-product-animation="sampling"][data-phase="1"] .sampling-step-dot--photo,
.product-animation[data-product-animation="sampling"][data-phase="2"] .sampling-step-dot--photo,
.product-animation[data-product-animation="sampling"][data-phase="2"] .sampling-step-dot--protocol {
  fill: #106668;
}

.product-animation[data-product-animation="sampling"][data-phase="1"] .sampling-step-check--photo,
.product-animation[data-product-animation="sampling"][data-phase="2"] .sampling-step-check,
.product-animation[data-product-animation="sampling"][data-phase="2"] .sampling-saved-photo {
  opacity: 1;
}

.product-animation[data-product-animation="sampling"][data-phase="2"] .sampling-empty-photo {
  opacity: 0;
}

.product-animation[data-product-animation="sampling"][data-phase="2"] .sampling-tablet {
  transform: translateX(-18px);
}

.product-animation[data-product-animation="sampling"][data-phase="2"] .sampling-form {
  opacity: .8;
}

.product-animation[data-product-animation="sampling"][data-phase="2"] .sampling-photo-card {
  opacity: 0;
  transform: translate(-112px,5px) scale(.52);
}

.product-animation[data-product-animation="sampling"][data-phase="2"] .sampling-protocol {
  opacity: 1;
  transform: translate(0,0) rotate(0);
  transition-delay: .18s;
}

.product-animation[data-product-animation="sampling"][data-phase="2"] .sampling-send {
  opacity: 1;
  transform: translate(0,0) scale(1);
  transition-delay: .8s;
}

@keyframes sampling-fill-field {
  0%, 8% { transform: scaleX(.14); opacity: .6; }
  70%, 100% { transform: scaleX(1); opacity: 1; }
}

@keyframes sampling-caret-blink {
  0%, 45% { opacity: .85; }
  46%, 100% { opacity: 0; }
}


@media (prefers-reduced-motion: reduce) {
  .sampling-animation-scene *,
  .product-animation[data-product-animation="sampling"] .sampling-phase-copy {
    animation: none !important;
    transition: none !important;
  }
  .product-animation[data-product-animation="sampling"] .sampling-typing-line {
    transform: none;
    opacity: 1;
  }
  .product-animation[data-product-animation="sampling"] .sampling-caret {
    opacity: 0;
  }
}