.glass {
  backdrop-filter: blur(16px);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(0, 255, 136, 0.2);
}
.glow {
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.15);
}
.link-hover:hover {
  color: #00ff88;
}
@keyframes grid-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.bg-grid-emerald {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23234'%20 stroke-width='1'%3E%3Cpath d='M60 0v60H0V0zM30 0v60M0 30h60'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  animation: grid-scroll 40s linear infinite;
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient 8s ease infinite;
}

@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Optional: floating particles (super lightweight) */
#particles-bg {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(52, 211, 153, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 40% 40%, rgba(52, 211, 153, 0.05) 0%, transparent 40%);
  animation: float 20s ease-in-out infinite alternate;
}

@keyframes float {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(30px, -30px) rotate(5deg); }
}

/* -------- Project content typography (Gutenberg + dark mode) -------- */
.prose {
  max-width: 100%;
  color: #e5e7eb;
  font-size: 1rem;
  line-height: 1.75;
}

.prose-invert {
  color: #e5e7eb;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5 {
  color: #f9fafb;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.prose p {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.prose ul,
.prose ol {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
}

.prose li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.prose a {
  color: #22c55e;
  text-decoration: underline;
}

.prose a:hover {
  color: #4ade80;
}

.prose strong {
  color: #f9fafb;
  font-weight: 600;
}

.prose code {
  background-color: #020617;
  border-radius: 0.25rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.95em;
}

.prose pre {
  background-color: #020617;
  border-radius: 0.75rem;
  border: 1px solid #1f2937;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.7);
  margin: 1.75rem 0;
}