.hero-with-route-motion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-with-route-motion > :not(.sureshow-route-motion) {
  position: relative;
  z-index: 2;
}

.sureshow-route-motion {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.82;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.12) 36%, rgba(0, 0, 0, 0.9) 58%, rgba(0, 0, 0, 0.96) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.12) 36%, rgba(0, 0, 0, 0.9) 58%, rgba(0, 0, 0, 0.96) 100%);
}

.sureshow-route-motion svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ss-route-line,
.ss-route-path {
  fill: none;
  stroke: #0d6dff;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
  opacity: 0.3;
}

.ss-route-line.is-soft,
.ss-route-path.is-soft {
  stroke: #7cb7ff;
  stroke-width: 1.1;
  stroke-dasharray: 4 9;
  opacity: 0.22;
}

.ss-route-halo,
.ss-moving-dot-halo {
  fill: rgba(13, 109, 255, 0.1);
}

.ss-route-dot,
.ss-moving-dot {
  fill: #f8c34a;
  filter: drop-shadow(0 0 12px rgba(248, 195, 74, 0.36));
  transform-box: fill-box;
  transform-origin: center;
  animation: ss-dot-confirm 8.4s ease-in-out infinite;
}

.ss-route-dot.is-traveler,
.ss-moving-dot.is-traveler {
  animation: none;
  opacity: 0.9;
}

.ss-moving-dot-halo {
  animation: none;
  fill: rgba(248, 195, 74, 0.22);
  filter: blur(0.4px);
}

.ss-route-dot.dot-two {
  animation-delay: 1.1s;
}

.ss-route-dot.dot-three {
  animation-delay: 2.2s;
}

.ss-route-dot.dot-four {
  animation-delay: 3.1s;
}

.ss-route-check {
  fill: #22c55e;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ss-check-arrive 8.4s ease-in-out infinite;
}

.ss-route-check.check-two {
  animation-delay: 1.1s;
}

.ss-route-check.check-three {
  animation-delay: 2.2s;
}

.ss-route-pin {
  filter: drop-shadow(0 18px 30px rgba(13, 109, 255, 0.18));
  transform-box: fill-box;
  transform-origin: center;
  animation: ss-pin-pulse 8.4s ease-in-out infinite;
}

.ss-route-ring,
.ss-beacon-ring {
  fill: none;
  stroke: #0d6dff;
  stroke-width: 1;
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: ss-ring-pulse 8.4s ease-in-out infinite;
}

.ss-route-ring.ring-two,
.ss-beacon-ring.ring-two {
  animation-delay: 0.32s;
  opacity: 0.14;
}

.ss-route-ring.ring-three,
.ss-beacon-ring.ring-three {
  animation-delay: 0.64s;
  opacity: 0.1;
}

.ss-clock-minute,
.ss-pin-clock-minute {
  transform-box: fill-box;
  transform-origin: 50% 85%;
  animation: ss-minute-hand 8.4s ease-in-out infinite;
}

.ss-clock-hour,
.ss-pin-clock-hour {
  transform-box: fill-box;
  transform-origin: 50% 85%;
  animation: ss-hour-hand 8.4s ease-in-out infinite;
}

.ss-product-backlight {
  position: relative;
}

.ss-product-backlight::before {
  content: "";
  position: absolute;
  inset: 10% 3% 4%;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 68% 58%, rgba(13, 109, 255, 0.2), transparent 48%),
    radial-gradient(circle at 42% 48%, rgba(34, 197, 94, 0.13), transparent 40%);
  filter: blur(28px);
  opacity: 0.9;
}

.ss-glass-card {
  box-shadow:
    0 28px 72px rgba(10, 27, 61, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.62);
}

@keyframes ss-dot-confirm {
  0%, 36% {
    fill: #f8c34a;
    opacity: 0.66;
    transform: scale(0.96);
  }
  48%, 100% {
    fill: #22c55e;
    opacity: 0.88;
    transform: scale(1);
  }
}

@keyframes ss-check-arrive {
  0%, 42% {
    opacity: 0;
    transform: scale(0.8);
  }
  52%, 84% {
    opacity: 0.72;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes ss-pin-pulse {
  0%, 48% {
    transform: scale(1);
  }
  60%, 76% {
    transform: scale(1.035);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ss-ring-pulse {
  0%, 48% {
    opacity: 0.06;
    transform: scale(0.96);
  }
  66% {
    opacity: 0.18;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.06;
    transform: scale(1.12);
  }
}

@keyframes ss-minute-hand {
  0%, 100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

@keyframes ss-hour-hand {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

@media (max-width: 920px) {
  .sureshow-route-motion {
    opacity: 0.46;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.26) 42%, rgba(0, 0, 0, 0.82) 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.26) 42%, rgba(0, 0, 0, 0.82) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-route-dot,
  .ss-route-check,
  .ss-route-pin,
  .ss-route-ring,
  .ss-clock-minute,
  .ss-clock-hour {
    animation: none;
  }

  .ss-route-dot {
    fill: #22c55e;
    opacity: 0.78;
  }

  .ss-route-check {
    opacity: 0.38;
  }
}