:root {
  --spear-guide-google: cubic-bezier(0.4, 0, 0.2, 1);
}

.spear-detail-guide-sweep {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.spear-detail-guide-sweep__line {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  backface-visibility: hidden;
  pointer-events: none;
}

.spear-detail-guide-sweep__line--horizontal {
  top: var(--spear-guide-y, 50%);
  left: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
}

.spear-detail-guide-sweep__line--vertical {
  top: 0;
  left: var(--spear-guide-x, 76%);
  width: 1px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: center top;
}

.spear-detail-guide-sweep__line--solid {
  background: rgba(216, 28, 42, 0.94);
  box-shadow: 0 0 8px rgba(202, 24, 38, 0.28);
}

.spear-detail-guide-sweep__line--horizontal.spear-detail-guide-sweep__line--dotted {
  background: repeating-linear-gradient(
    90deg,
    rgba(216, 28, 42, 0.94) 0 4px,
    transparent 4px 11px
  );
}

.spear-detail-guide-sweep__line--vertical.spear-detail-guide-sweep__line--dotted {
  background: repeating-linear-gradient(
    180deg,
    rgba(216, 28, 42, 0.94) 0 4px,
    transparent 4px 11px
  );
}

.spear-detail-guide-sweep__line--horizontal.is-guide-sweeping {
  animation: spear-guide-sweep-x var(--spear-guide-duration, 1880ms)
    var(--spear-guide-google) both;
}

.spear-detail-guide-sweep__line--vertical.is-guide-sweeping {
  animation: spear-guide-sweep-y var(--spear-guide-duration, 1960ms)
    var(--spear-guide-google) both;
}

@keyframes spear-guide-sweep-x {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  16% {
    opacity: 0.94;
  }
  56% {
    opacity: 0.74;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes spear-guide-sweep-y {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  16% {
    opacity: 0.94;
  }
  56% {
    opacity: 0.74;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spear-detail-guide-sweep__line.is-guide-sweeping {
    animation-duration: 1ms !important;
  }
}