/* Homepage navbar readability */
header.navbar-container {
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.88), rgba(11, 18, 32, 0.58)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

.navbar-content.has-home-banner {
  background: rgba(14, 22, 38, 0.42) !important;
  border-radius: 18px !important;
  padding-inline: 18px !important;
}

header.navbar-container a,
.navbar-content.has-home-banner a,
.navbar-content.has-home-banner h1 {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

header.navbar-container .navbar-item a,
header.navbar-container .logo-title {
  border-radius: 10px;
}

header.navbar-container .navbar-item a:hover,
header.navbar-container .navbar-item a.active,
header.navbar-container .logo-title:hover,
.navbar-content.has-home-banner a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

/* Cursor trail and click feedback */
#renecho-cursor-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2147483000;
}

.renecho-click-ripple {
  position: fixed;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(245, 158, 77, 0.92);
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.35);
  animation: renecho-ripple 620ms ease-out forwards;
  z-index: 2147483001;
  box-shadow: 0 0 24px rgba(245, 158, 77, 0.34);
}

@keyframes renecho-ripple {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.6);
  }
}

.terminal-output.is-loading::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1em;
  margin-left: 0.2em;
  border-right: 2px solid currentColor;
  animation: terminal-loading-caret 900ms steps(1) infinite;
  vertical-align: -0.12em;
}

.terminal-source {
  display: block;
  margin-top: 4px;
  color: #8b93a7;
  font-size: 11px;
  text-decoration: none;
}

.terminal-source:hover {
  color: #f4b46a;
}

@keyframes terminal-loading-caret {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  #renecho-cursor-canvas,
  .renecho-click-ripple {
    display: none !important;
  }
}