:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-fast: 180ms;
  --motion-medium: 420ms;
  --cursor-dot-size: 6px;
  --cursor-ring-size: 24px;
  --cursor-color: rgba(255, 255, 255, 0.92);
  --cursor-ring-border: rgba(255, 255, 255, 0.7);
  --motion-shadow: 0 18px 40px rgba(47, 65, 84, 0.12);
}

#navbar .navbar-nav .nav-link span {
  display: none;
}

#navbar .navbar-nav .nav-link {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

#navbar .navbar-nav .nav-link i {
  margin-right: 0;
  font-size: 1.05rem;
}

body.motion-enabled,
body.motion-enabled * {
  cursor: none !important;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 99999;
  transform: translate3d(-50%, -50%, 0);
  transition:
    opacity var(--motion-fast) ease,
    width var(--motion-fast) ease,
    height var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

.cursor-dot {
  width: var(--cursor-dot-size);
  height: var(--cursor-dot-size);
  border-radius: 999px;
  background: var(--cursor-color);
}

.cursor-ring {
  width: var(--cursor-ring-size);
  height: var(--cursor-ring-size);
  border-radius: 999px;
  border: 1px solid var(--cursor-ring-border);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(1px);
}

body.cursor-active .cursor-dot,
body.cursor-active .cursor-ring {
  opacity: 1;
}

body.cursor-hover .cursor-ring {
  width: 34px;
  height: 34px;
  border-color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.08);
}

#board,
.index-card,
.post-content img,
.note,
.tagcloud,
.links .card,
.about-info,
.post-content pre,
.post-content blockquote,
.post-content table {
  transition:
    transform var(--motion-medium) var(--motion-ease),
    box-shadow var(--motion-medium) var(--motion-ease),
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

.nav-link,
.page-link,
.post-content a,
.links .card-body,
.about-icons a,
.btn,
button {
  transition:
    transform var(--motion-fast) ease,
    color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.index-card:hover,
.links .card:hover,
.post-content img:hover,
.post-content pre:hover,
.post-content blockquote:hover {
  transform: translateY(-4px);
  box-shadow: var(--motion-shadow);
}

.nav-link:hover,
.about-icons a:hover,
.page-link:hover,
.btn:hover,
button:hover {
  transform: translateY(-2px);
}

.post-content a:not(.btn):hover {
  text-shadow: 0 0 18px rgba(255, 214, 102, 0.28);
}

.motion-fade {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 620ms var(--motion-ease),
    transform 620ms var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-down-bar .scroll-down-arrow {
  animation: floatArrow 2.6s ease-in-out infinite;
}

@keyframes floatArrow {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.75;
  }

  50% {
    transform: translateY(7px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .cursor-ring,
  .motion-fade,
  .scroll-down-bar .scroll-down-arrow,
  #board,
  .index-card,
  .post-content img,
  .note,
  .tagcloud,
  .links .card,
  .about-info,
  .post-content pre,
  .post-content blockquote,
  .post-content table,
  .nav-link,
  .page-link,
  .post-content a,
  .links .card-body,
  .about-icons a,
  .btn,
  button {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .motion-fade {
    opacity: 1;
  }
}

#waline .wl-md-preview-btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.22rem 0.48rem;
}

#waline .wl-md-preview-btn:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.95);
}

#waline .wl-md-preview-btn.is-active {
  border-color: rgba(82, 168, 236, 0.95);
  color: rgba(82, 168, 236, 0.95);
}

#waline .wl-md-preview-panel {
  display: none;
  margin-top: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(10, 16, 28, 0.48);
  overflow: hidden;
}

#waline .wl-md-preview-panel.is-visible {
  display: block;
}

#waline .wl-md-preview-title {
  padding: 0.56rem 0.82rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#waline .wl-md-preview-body {
  padding: 0.84rem 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.94rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

#waline .wl-md-preview-body code {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.08rem 0.3rem;
}