.xlike-logo-shell {
  --xlike-logo-size: 56px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  box-sizing: border-box;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--xlike-logo-size);
  height: var(--xlike-logo-size);
  overflow: hidden;
  border: 1px solid rgba(126, 153, 255, 0.26);
  border-radius: 14px;
  background:
    radial-gradient(circle at 36% 18%, rgba(105, 240, 255, 0.13), transparent 36%),
    linear-gradient(145deg, rgba(17, 23, 54, 0.78), rgba(6, 9, 28, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -10px 22px rgba(25, 39, 92, 0.24),
    0 0 18px rgba(79, 109, 255, 0.18);
  transform-origin: 50% 60%;
  animation: xlike-logo-enter 800ms ease-out both;
}

.xlike-logo-shell::before {
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 42%);
  content: "";
  pointer-events: none;
}

.xlike-logo-mark {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: block;
  width: min(56px, calc(var(--xlike-logo-size) - 2px));
  max-height: calc(var(--xlike-logo-size) - 10px);
  overflow: visible;
  aspect-ratio: 330 / 128;
  line-height: 0;
}

.xlike-logo-mark::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("xlike-logo.webp") center / contain no-repeat;
  content: "";
  transform-origin: center;
  pointer-events: none;
}

.xlike-logo-mark::before {
  filter: brightness(0) saturate(100%) invert(24%) sepia(78%) saturate(926%) hue-rotate(166deg) brightness(82%) contrast(96%);
  opacity: 0.46;
  transform: translate(-3px, 3px) scale(1.018);
}

.xlike-logo-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.24));
  pointer-events: none;
  user-select: none;
}

.xlike-logo-edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  mix-blend-mode: screen;
  pointer-events: none;
}

.xlike-logo-mark .xlike-logo-edge {
  width: 100%;
  height: 100%;
}

.xlike-logo-edge-trace {
  fill: none;
  stroke: rgba(99, 224, 255, 0.14);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.xlike-logo-edge-spark {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(235, 255, 255, 0.98) 0 18%, rgba(91, 235, 255, 0.96) 34%, rgba(35, 190, 255, 0.72) 56%, rgba(35, 190, 255, 0) 74%);
  box-shadow:
    0 0 6px rgba(118, 244, 255, 0.9),
    0 0 13px rgba(39, 190, 255, 0.6);
  opacity: 0;
  offset-anchor: 50% 50%;
  offset-path: path("M 3.3 12 L 9 4 L 14.6 4.1 L 11.9 7.7 L 16.9 13.1 L 11.1 13.3 L 8.4 9.6 L 3.3 13.5 L 0.9 12.2 L 6.1 8.1 L 2.5 4.2 L 7.7 4.2 L 10.1 6.8 L 12.7 4 L 19.7 4 L 19.7 12 L 24.9 12 L 25.3 4 L 30.4 4 L 29.7 7.7 L 34.3 4 L 40.4 4 L 36.3 7.4 L 42.4 7.4 L 41.7 9.5 L 35.3 9.6 L 34.3 11.9 L 42.6 12 L 41.7 14.1 L 31.3 14.1 L 31.7 9.9 L 26.8 14.1 L 22.1 14.1 L 23 4.1 L 21.9 14.1 L 16.1 14.1 L 11.9 8.9 L 6.2 14.1 L 1.4 14.1 Z");
  offset-distance: 0%;
  offset-rotate: auto;
  pointer-events: none;
  will-change: offset-distance, opacity;
  animation: xlike-logo-edge-run 8s linear 1.15s infinite;
}

@keyframes xlike-logo-enter {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.88);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes xlike-logo-edge-run {
  0% {
    opacity: 0.82;
    offset-distance: 0%;
  }

  100% {
    opacity: 0.82;
    offset-distance: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xlike-logo-shell {
    animation: none;
  }

  .xlike-logo-edge,
  .xlike-logo-edge-spark {
    display: none;
  }
}