/*
 * NG Micro connected-property hero animation.
 * All motion is CSS-based so the hero autoplays without loading a video.
 */

.system-motion {
  --motion-time: 16s;
  min-height: 600px;
}

.system-motion .system-heading {
  animation: ngm-heading-in var(--motion-time) ease infinite;
}

.system-motion .live-pill {
  opacity: 0.55;
  animation: ngm-integrated-in var(--motion-time) ease infinite;
}

.system-motion .motion-stage {
  min-height: 0;
  position: relative;
  isolation: isolate;
}

.system-motion .motion-stage::before {
  content: "";
  z-index: -2;
  position: absolute;
  inset: 15% 20%;
  border-radius: 50%;
  background: rgba(29, 167, 230, 0.18);
  filter: blur(45px);
  animation: ngm-ambient-pulse 3.2s ease-in-out infinite;
}

.system-motion .motion-stage::after {
  content: "";
  z-index: -3;
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(142, 223, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 223, 255, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 78%);
  mask-image: radial-gradient(circle, #000 25%, transparent 78%);
}

.system-motion .motion-node {
  z-index: 5;
  position: absolute;
  width: 38%;
  height: 84px;
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(156, 223, 255, 0.24);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(25, 57, 76, 0.97), rgba(10, 32, 45, 0.97));
  box-shadow: 0 16px 32px rgba(2, 10, 15, 0.36);
  opacity: 0;
}

.system-motion .motion-node::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 38%);
  pointer-events: none;
}

.system-motion .motion-node::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #59d1ff;
  box-shadow: 0 0 0 5px rgba(29, 167, 230, 0.12), 0 0 16px #1da7e6;
  transform: translateY(-50%);
}

.system-motion .motion-access,
.system-motion .motion-video {
  top: 8%;
}

.system-motion .motion-network,
.system-motion .motion-intercom {
  bottom: 7%;
}

.system-motion .motion-access,
.system-motion .motion-network {
  left: 0;
}

.system-motion .motion-video,
.system-motion .motion-intercom {
  right: 0;
}

.system-motion .motion-access,
.system-motion .motion-network {
  animation: ngm-card-left var(--motion-time) cubic-bezier(0.2, 0.85, 0.25, 1) infinite;
}

.system-motion .motion-video {
  animation: ngm-video-card var(--motion-time) cubic-bezier(0.2, 0.85, 0.25, 1) infinite;
}

.system-motion .motion-network {
  animation: ngm-network-card var(--motion-time) cubic-bezier(0.2, 0.85, 0.25, 1) infinite;
}

.system-motion .motion-intercom {
  animation: ngm-intercom-card var(--motion-time) cubic-bezier(0.2, 0.85, 0.25, 1) infinite;
}

.system-motion .motion-access::after,
.system-motion .motion-network::after {
  right: -4px;
}

.system-motion .motion-video::after,
.system-motion .motion-intercom::after {
  left: -4px;
}

.system-motion .motion-mini {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid rgba(156, 223, 255, 0.14);
  background:
    radial-gradient(circle at 50% 50%, rgba(29, 167, 230, 0.24), transparent 56%),
    #092331;
}

.system-motion .motion-node-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 11px;
}

.system-motion .motion-node-copy b,
.system-motion .motion-node-copy small {
  display: block;
}

.system-motion .motion-node-copy b {
  color: #fff;
  font-size: 13px;
  font-weight: 750;
}

.system-motion .motion-node-copy small {
  margin-top: 3px;
  color: rgba(195, 222, 235, 0.72);
  font-size: 9px;
  line-height: 1.35;
}

/* Access-control mini scene. */
.system-motion .motion-door {
  position: absolute;
  top: 16px;
  left: 18%;
  width: 23px;
  height: 50px;
  border: 1px solid rgba(115, 216, 255, 0.72);
  background: rgba(29, 167, 230, 0.08);
}

.system-motion .motion-door::after {
  content: "";
  position: absolute;
  top: 25px;
  right: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #59d1ff;
}

.system-motion .motion-phone {
  position: absolute;
  right: 10%;
  bottom: 15px;
  width: 15px;
  height: 29px;
  border: 2px solid #83dcff;
  border-radius: 4px;
  background: #06141f;
  animation: ngm-phone-tap 2s ease-in-out infinite;
}

.system-motion .motion-phone::before {
  content: "";
  position: absolute;
  inset: 5px 2px;
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(29, 167, 230, 0.2), rgba(89, 209, 255, 0.65));
}

.system-motion .motion-access-wave {
  position: absolute;
  top: 40px;
  left: 43%;
  width: 33%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #59d1ff, transparent);
  filter: drop-shadow(0 0 5px #1da7e6);
  transform-origin: left;
  animation: ngm-access-scan 2s ease-in-out infinite;
}

/* Video-surveillance mini scene. */
.system-motion .motion-camera {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 36px;
  height: 21px;
  border: 2px solid #83dcff;
  border-radius: 7px 7px 11px 11px;
  transform: translateX(-50%);
}

.system-motion .motion-lens {
  position: absolute;
  top: 27px;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid #59d1ff;
  border-radius: 50%;
  transform: translateX(-50%);
  animation: ngm-lens-pulse 1.65s ease-out infinite;
}

.system-motion .motion-scan-cone {
  position: absolute;
  top: 39px;
  left: 50%;
  width: 48px;
  height: 34px;
  background: conic-gradient(from 154deg at 50% 0%, transparent, rgba(29, 167, 230, 0.38), transparent 26%);
  transform: translateX(-50%);
  animation: ngm-scan-sweep 2.2s ease-in-out infinite;
}

/* Network mini scene. */
.system-motion .motion-router {
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 40px;
  height: 15px;
  border: 1px solid #83dcff;
  border-radius: 4px;
  background: #071722;
  transform: translateX(-50%);
}

.system-motion .motion-router::before,
.system-motion .motion-router::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #59d1ff;
  animation: ngm-router-light 1.4s linear infinite;
}

.system-motion .motion-router::before {
  left: 7px;
}

.system-motion .motion-router::after {
  left: 15px;
  animation-delay: 0.45s;
}

.system-motion .motion-wifi {
  position: absolute;
  top: 13px;
  left: 50%;
  width: 44px;
  height: 36px;
  transform: translateX(-50%);
}

.system-motion .motion-wifi i {
  position: absolute;
  left: 50%;
  bottom: 0;
  border: 2px solid #59d1ff;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50% 0 0;
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  animation: ngm-wifi-ring 1.8s ease-out infinite;
}

.system-motion .motion-wifi i:nth-child(1) {
  width: 10px;
  height: 10px;
}

.system-motion .motion-wifi i:nth-child(2) {
  width: 23px;
  height: 23px;
  animation-delay: 0.3s;
}

.system-motion .motion-wifi i:nth-child(3) {
  width: 36px;
  height: 36px;
  animation-delay: 0.6s;
}

/* Intercom mini scene. */
.system-motion .motion-intercom-unit {
  position: absolute;
  top: 13px;
  left: 14%;
  width: 21px;
  height: 57px;
  border: 1px solid #83dcff;
  border-radius: 4px;
  background: #061722;
}

.system-motion .motion-intercom-unit::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 11px;
  height: 11px;
  border: 1px solid #59d1ff;
  border-radius: 50%;
}

.system-motion .motion-bars {
  position: absolute;
  top: 26px;
  right: 8%;
  left: 48%;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}

.system-motion .motion-bars i {
  width: 3px;
  height: 7px;
  border-radius: 3px;
  background: #59d1ff;
  box-shadow: 0 0 6px rgba(89, 209, 255, 0.65);
  animation: ngm-voice 1s ease-in-out infinite alternate;
}

.system-motion .motion-bars i:nth-child(2) { animation-delay: -0.2s; }
.system-motion .motion-bars i:nth-child(3) { animation-delay: -0.45s; }
.system-motion .motion-bars i:nth-child(4) { animation-delay: -0.1s; }
.system-motion .motion-bars i:nth-child(5) { animation-delay: -0.35s; }

.system-motion .motion-links {
  z-index: 2;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.system-motion .motion-links path {
  fill: none;
  stroke: #1da7e6;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(29, 167, 230, 0.68));
  animation: ngm-link-draw var(--motion-time) ease infinite;
}

.system-motion .motion-links circle {
  fill: #59d1ff;
  opacity: 0;
  filter: drop-shadow(0 0 7px #1da7e6);
  animation: ngm-link-dot var(--motion-time) ease infinite;
}

.system-motion .motion-logo {
  z-index: 4;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 28px)) rotateX(12deg) scale(0.74);
  transform-origin: center;
  filter: drop-shadow(0 17px 20px rgba(2, 10, 15, 0.58));
  animation: ngm-logo-arrive var(--motion-time) cubic-bezier(0.18, 0.86, 0.24, 1) infinite;
}

.system-motion .motion-logo::before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: -30% -24%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 167, 230, 0.25), rgba(29, 167, 230, 0.06) 45%, transparent 72%);
  animation: ngm-logo-glow 2.8s ease-in-out infinite;
}

.system-motion .motion-logo-symbol {
  position: relative;
  width: 100%;
  filter:
    drop-shadow(0 2px 0 rgba(151, 230, 255, 0.28))
    drop-shadow(0 7px 8px rgba(0, 9, 15, 0.78));
}

.system-motion .motion-logo-symbol img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.system-motion .motion-logo-symbol::after {
  content: "";
  position: absolute;
  right: 3%;
  bottom: -3px;
  left: 3%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(89, 209, 255, 0.9), transparent);
  box-shadow: 0 0 12px rgba(29, 167, 230, 0.72);
  transform: scaleX(0);
  animation: ngm-logo-line var(--motion-time) ease infinite;
}

.system-motion .motion-logo-type {
  width: 172%;
  margin-top: 1px;
  text-align: center;
}

.system-motion .motion-logo-type strong,
.system-motion .motion-logo-type span {
  display: block;
  white-space: nowrap;
}

.system-motion .motion-logo-type strong {
  color: #f4f7f8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(23px, 3.1vw, 34px);
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.05;
  text-shadow:
    0 1px 0 #fff,
    0 3px 0 #6f7c85,
    0 7px 12px rgba(0, 8, 13, 0.76);
}

.system-motion .motion-logo-type span {
  margin-top: 7px;
  color: #d7e6ed;
  font-family: "Arial Narrow", "Avenir Next Condensed", "Segoe UI", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-shadow: 0 2px 7px rgba(0, 7, 12, 0.88);
}

.system-motion .motion-process {
  z-index: 7;
  position: relative;
  padding-top: 17px;
  border-top: 1px solid rgba(154, 223, 255, 0.18);
}

.system-motion .motion-process-line {
  position: absolute;
  top: 29px;
  right: 7%;
  left: 7%;
  height: 2px;
  background: linear-gradient(90deg, rgba(29, 167, 230, 0.25), #1da7e6, rgba(29, 167, 230, 0.25));
  transform: scaleX(0);
  transform-origin: left;
  animation: ngm-process-line var(--motion-time) ease infinite;
}

.system-motion .motion-steps {
  z-index: 2;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.system-motion .motion-step {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: rgba(198, 221, 232, 0.72);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.42;
}

.system-motion .motion-step b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #59d1ff;
  color: #04151f;
  font-size: 9px;
  font-weight: 800;
}

.system-motion .motion-step:nth-child(1) { animation: ngm-step-one var(--motion-time) ease infinite; }
.system-motion .motion-step:nth-child(2) { animation: ngm-step-two var(--motion-time) ease infinite; }
.system-motion .motion-step:nth-child(3) { animation: ngm-step-three var(--motion-time) ease infinite; }
.system-motion .motion-step:nth-child(4) { animation: ngm-step-four var(--motion-time) ease infinite; }

@keyframes ngm-heading-in {
  0%, 3% { opacity: 0; transform: translateY(-12px); }
  8%, 93% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-card-left {
  0%, 8% { opacity: 0; transform: translate(-35px, -24px) scale(0.95); }
  13%, 93% { opacity: 1; transform: translate(0, 0) scale(1); }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-video-card {
  0%, 20% { opacity: 0; transform: translate(35px, -24px) scale(0.95); }
  25%, 93% { opacity: 1; transform: translate(0, 0) scale(1); }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-network-card {
  0%, 32% { opacity: 0; transform: translate(-35px, 24px) scale(0.95); }
  37%, 93% { opacity: 1; transform: translate(0, 0) scale(1); }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-intercom-card {
  0%, 44% { opacity: 0; transform: translate(35px, 24px) scale(0.95); }
  49%, 93% { opacity: 1; transform: translate(0, 0) scale(1); }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-logo-arrive {
  0%, 52% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 28px)) rotateX(12deg) scale(0.74);
    filter: blur(6px) saturate(0.65) drop-shadow(0 17px 20px rgba(2, 10, 15, 0.58));
  }
  59%, 93% {
    opacity: 1;
    transform: translate(-50%, -50%) rotateX(0) scale(1);
    filter: blur(0) saturate(1.08) drop-shadow(0 17px 20px rgba(2, 10, 15, 0.58));
  }
  98%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 17px 20px rgba(2, 10, 15, 0.58));
  }
}

@keyframes ngm-link-draw {
  0%, 55% { opacity: 0; stroke-dashoffset: 1; }
  63%, 93% { opacity: 1; stroke-dashoffset: 0; }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-link-dot {
  0%, 61% { opacity: 0; }
  65%, 93% { opacity: 1; }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-process-line {
  0%, 65% { opacity: 0; transform: scaleX(0); }
  88%, 93% { opacity: 1; transform: scaleX(1); }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-step-one {
  0%, 66% { opacity: 0.42; transform: translateY(0); }
  70%, 93% { opacity: 1; transform: translateY(-3px); color: #fff; }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-step-two {
  0%, 72% { opacity: 0.42; transform: translateY(0); }
  76%, 93% { opacity: 1; transform: translateY(-3px); color: #fff; }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-step-three {
  0%, 78% { opacity: 0.42; transform: translateY(0); }
  82%, 93% { opacity: 1; transform: translateY(-3px); color: #fff; }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-step-four {
  0%, 84% { opacity: 0.42; transform: translateY(0); }
  88%, 93% { opacity: 1; transform: translateY(-3px); color: #fff; }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-integrated-in {
  0%, 58% { opacity: 0.55; transform: translateX(0); }
  64%, 93% { opacity: 1; transform: translateX(0); box-shadow: 0 0 24px rgba(29, 167, 230, 0.18); }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-ambient-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes ngm-logo-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes ngm-logo-line {
  0%, 56% { opacity: 0; transform: scaleX(0); }
  63%, 93% { opacity: 1; transform: scaleX(1); }
  98%, 100% { opacity: 0; }
}

@keyframes ngm-phone-tap {
  0%, 100% { transform: translateX(0) rotate(-4deg); }
  50% { transform: translateX(-7px) rotate(-8deg); }
}

@keyframes ngm-access-scan {
  0%, 100% { opacity: 0; transform: scaleX(0.15); }
  45%, 65% { opacity: 1; transform: scaleX(1); }
}

@keyframes ngm-lens-pulse {
  0% { box-shadow: 0 0 0 0 rgba(89, 209, 255, 0.52); }
  100% { box-shadow: 0 0 0 11px rgba(89, 209, 255, 0); }
}

@keyframes ngm-scan-sweep {
  0%, 100% { opacity: 0.42; transform: translateX(-50%) rotate(-13deg); }
  50% { opacity: 0.85; transform: translateX(-50%) rotate(13deg); }
}

@keyframes ngm-router-light {
  0%, 35% { opacity: 0.18; }
  50%, 75% { opacity: 1; }
  100% { opacity: 0.18; }
}

@keyframes ngm-wifi-ring {
  0% { opacity: 0; transform: translateX(-50%) rotate(45deg) scale(0.35); }
  45% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) rotate(45deg) scale(1); }
}

@keyframes ngm-voice {
  from { height: 7px; opacity: 0.55; }
  to { height: 27px; opacity: 1; }
}

@media (max-width: 1080px) {
  .system-motion .motion-node {
    width: 40%;
    grid-template-columns: 35% 1fr;
  }

  .system-motion .motion-node-copy {
    padding-inline: 8px;
  }

  .system-motion .motion-node-copy b {
    font-size: 12px;
  }
}

@media (max-width: 620px) {
  .system-motion {
    min-height: 500px;
    padding: 22px 14px 17px;
  }

  .system-motion .motion-stage {
    min-height: 340px;
  }

  .system-motion .motion-node {
    width: 43%;
    height: 64px;
    grid-template-columns: 36% 1fr;
  }

  .system-motion .motion-access,
  .system-motion .motion-video {
    top: 5%;
  }

  .system-motion .motion-network,
  .system-motion .motion-intercom {
    bottom: 5%;
  }

  .system-motion .motion-node-copy {
    padding-inline: 6px;
  }

  .system-motion .motion-node-copy b {
    font-size: 10px;
  }

  .system-motion .motion-node-copy small {
    font-size: 7px;
  }

  .system-motion .motion-door {
    top: 12px;
    width: 18px;
    height: 39px;
  }

  .system-motion .motion-door::after {
    top: 19px;
  }

  .system-motion .motion-phone {
    right: 7%;
    bottom: 11px;
    width: 12px;
    height: 23px;
    border-width: 1px;
  }

  .system-motion .motion-access-wave {
    top: 31px;
  }

  .system-motion .motion-camera {
    top: 15px;
    width: 29px;
    height: 17px;
    border-width: 1px;
  }

  .system-motion .motion-lens {
    top: 20px;
    width: 10px;
    height: 10px;
    border-width: 1px;
  }

  .system-motion .motion-scan-cone {
    top: 30px;
    width: 38px;
    height: 27px;
  }

  .system-motion .motion-wifi {
    top: 8px;
    transform: translateX(-50%) scale(0.76);
  }

  .system-motion .motion-router {
    bottom: 9px;
    width: 32px;
    height: 12px;
  }

  .system-motion .motion-intercom-unit {
    top: 9px;
    width: 17px;
    height: 45px;
  }

  .system-motion .motion-intercom-unit::before {
    left: 3px;
    width: 9px;
    height: 9px;
  }

  .system-motion .motion-bars {
    top: 19px;
    height: 25px;
  }

  .system-motion .motion-bars i {
    width: 2px;
  }

  .system-motion .motion-logo {
    width: 46%;
  }

  .system-motion .motion-logo-type {
    width: 190%;
  }

  .system-motion .motion-logo-type strong {
    font-size: clamp(20px, 7.5vw, 26px);
  }

  .system-motion .motion-logo-type span {
    margin-top: 5px;
    font-size: 7px;
    letter-spacing: 0.025em;
  }

  .system-motion .motion-process {
    padding-top: 14px;
  }

  .system-motion .motion-process-line {
    top: 25px;
  }

  .system-motion .motion-step {
    gap: 5px;
    font-size: 7px;
    letter-spacing: 0.03em;
  }

  .system-motion .motion-step b {
    width: 22px;
    height: 22px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .system-motion .system-heading,
  .system-motion .live-pill,
  .system-motion .motion-node,
  .system-motion .motion-logo,
  .system-motion .motion-stage::before,
  .system-motion .motion-logo::before,
  .system-motion .motion-logo-symbol::after,
  .system-motion .motion-process-line,
  .system-motion .motion-step,
  .system-motion .motion-phone,
  .system-motion .motion-access-wave,
  .system-motion .motion-lens,
  .system-motion .motion-scan-cone,
  .system-motion .motion-router::before,
  .system-motion .motion-router::after,
  .system-motion .motion-wifi i,
  .system-motion .motion-bars i,
  .system-motion .motion-links path,
  .system-motion .motion-links circle {
    animation: none !important;
  }

  .system-motion .system-heading,
  .system-motion .live-pill,
  .system-motion .motion-node,
  .system-motion .motion-logo,
  .system-motion .motion-links path,
  .system-motion .motion-links circle,
  .system-motion .motion-logo-symbol::after,
  .system-motion .motion-process-line,
  .system-motion .motion-step {
    opacity: 1;
  }

  .system-motion .motion-node {
    transform: none;
  }

  .system-motion .motion-logo {
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 17px 20px rgba(2, 10, 15, 0.58));
  }

  .system-motion .motion-links path {
    stroke-dashoffset: 0;
  }

  .system-motion .motion-logo-symbol::after,
  .system-motion .motion-process-line {
    transform: scaleX(1);
  }

  .system-motion .motion-step {
    color: #fff;
  }
}