/* IM_404_ROBOT_SERVER_V1 */

.im-404-robot-server {
  margin-top: 18px;
  padding: 14px 12px 10px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  overflow: hidden;
}

.im-404-robot-server__svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.im-404-robot-server__caption {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
}

.im-404-robot {
  transform-origin: 190px 130px;
  animation: im404RobotFloat 3.2s ease-in-out infinite;
}

.im-404-robot__eye {
  transform-origin: center;
  animation: im404RobotBlink 4.8s infinite;
}

.im-404-robot__eye--right {
  animation-delay: .08s;
}

.im-404-robot__antenna-dot {
  animation: im404RobotPulse 1.8s ease-in-out infinite;
}

.im-404-robot__panel-bar {
  animation: im404RobotPanelBar 2.2s ease-in-out infinite;
}

.im-404-robot__arm--right {
  transform-origin: 235px 136px;
  animation: im404RobotWorkArm 1.8s ease-in-out infinite;
}

.im-404-robot__arm--left {
  transform-origin: 145px 136px;
  animation: im404RobotLeftArm 3.5s ease-in-out infinite;
}

.im-404-server {
  animation: im404ServerFloat 3.6s ease-in-out infinite;
}

.im-404-server-led {
  animation: im404LedBlink 1.5s infinite;
}

.im-404-server-led--2,
.im-404-server-led--5 {
  animation-delay: .35s;
}

.im-404-server-led--3,
.im-404-server-led--6 {
  animation-delay: .7s;
}

.im-404-server-led--4 {
  animation-delay: 1.05s;
}

.im-404-cable {
  stroke-dasharray: 8 8;
  animation: im404CableFlow 1.6s linear infinite;
}

.im-404-spark {
  transform-origin: center;
  animation: im404SparkPop 1.4s infinite;
}

.im-404-spark--2 {
  animation-delay: .25s;
}

.im-404-spark--3 {
  animation-delay: .5s;
}

.im-404-cloud {
  opacity: .8;
}

.im-404-cloud--one {
  animation: im404CloudMove 8s ease-in-out infinite;
}

.im-404-cloud--two {
  animation: im404CloudMove 9.5s ease-in-out infinite reverse;
}

@keyframes im404RobotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes im404ServerFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@keyframes im404RobotBlink {
  0%, 44%, 48%, 100% { transform: scaleY(1); }
  46% { transform: scaleY(.12); }
}

@keyframes im404RobotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: .65; }
}

@keyframes im404RobotPanelBar {
  0%, 100% { width: 22px; }
  50% { width: 12px; }
}

@keyframes im404RobotWorkArm {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-10deg); }
}

@keyframes im404RobotLeftArm {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(6deg); }
}

@keyframes im404LedBlink {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes im404CableFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -16; }
}

@keyframes im404SparkPop {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.35); }
}

@keyframes im404CloudMove {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .im-404-robot,
  .im-404-robot__eye,
  .im-404-robot__antenna-dot,
  .im-404-robot__panel-bar,
  .im-404-robot__arm--right,
  .im-404-robot__arm--left,
  .im-404-server,
  .im-404-server-led,
  .im-404-cable,
  .im-404-spark,
  .im-404-cloud {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .im-404-robot-server {
    margin-top: 14px;
    padding: 12px 10px 8px;
    border-radius: 16px;
  }

  .im-404-robot-server__caption {
    font-size: 12px;
  }
}

/* IM_404_ROBOT_SERVER_V2_START */
.im-404-robot-server {
  margin-top: 16px;
  padding: 12px 12px 14px;
  border-radius: 16px;
}

.im-404-robot-server__svg {
  max-height: 150px;
  object-fit: contain;
}

.im-404-robot-server__caption {
  max-width: 360px;
  margin: 6px auto 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  color: #475569;
}

@media (max-width: 768px) {
  .im-404-robot-server__svg {
    max-height: 132px;
  }

  .im-404-robot-server__caption {
    max-width: 300px;
    font-size: 12px;
  }
}
/* IM_404_ROBOT_SERVER_V2_END */