.marker-highlight {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  transition: background-size 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.35s;
}
.reveal:not(.visible) .marker-highlight {
  background-size: 0% 100%;
}


.howto-step .step-num {
  position: relative;
  z-index: 1;
}
.howto-step.visible .step-num {
  animation: lm-stamp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}
@keyframes lm-stamp {
  0% {
    opacity: 0;
    transform: scale(1.4) rotate(-8deg);
    box-shadow: none;
  }
  60% {
    opacity: 1;
    transform: scale(0.92) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}


.lm-step-line {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  clip-path: inset(0 0 100% 0);
}
.lm-step-line path {
  fill: none;
  stroke: var(--ink-pure);
  stroke-opacity: 0.35;
  stroke-width: 2;
  stroke-dasharray: 6 7;
  stroke-linecap: round;
}
@media (max-width: 767px) {
  .lm-step-line {
    display: none;
  }
}


.lm-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  z-index: 60;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}



.lm-login-card.lm-flash {
  animation: lm-flash 0.6s ease-out 0.6s 2;
}
@keyframes lm-flash {
  0% {
    outline: 3px solid var(--pink);
    outline-offset: 2px;
  }
  100% {
    outline: 3px solid transparent;
    outline-offset: 14px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .marker-highlight,
  .reveal:not(.visible) .marker-highlight {
    background-size: 100% 100%;
    transition: none;
  }
  .howto-step.visible .step-num,
  .lm-login-card.lm-flash {
    animation: none;
  }
  .lm-step-line {
    display: none;
  }
}