/* ===== ISPM Desenvolvedor — programming theme overlays ===== */

/* Hero canvas — matrix rain over gradient */
.code-hero {
  position: relative;
  background: radial-gradient(ellipse at 20% 30%, #1a1d35 0%, #0a0e27 60%, #050818 100%);
  overflow: hidden;
}
.code-hero canvas {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0.55;
  z-index: 0;
}
.code-hero .container { position: relative; z-index: 1; }

/* Inner page banners — code-themed gradients (replaces .jpg backgrounds) */
.code-banner {
  background:
    linear-gradient(135deg, rgba(10,14,39,0.92) 0%, rgba(26,29,53,0.92) 100%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(193,255,114,0.06) 79px 80px),
    repeating-linear-gradient(0deg,  transparent 0 79px, rgba(193,255,114,0.04) 79px 80px),
    radial-gradient(circle at 80% 20%, rgba(193,255,114,0.18) 0%, transparent 40%),
    #0a0e27;
  position: relative;
  overflow: hidden;
}
.code-banner::before {
  content: "{ }  </>  ();  []  =>  console.log()  function()  if  else  return  npm  git  laravel  vue  python  api  json";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: 700;
  color: rgba(193,255,114,0.07);
  white-space: pre-wrap;
  word-spacing: 30px;
  line-height: 38px;
  padding: 30px;
  pointer-events: none;
}
.code-banner > .container { position: relative; z-index: 1; }

/* Code-style decorative element */
.code-snippet {
  font-family: 'Courier New', monospace;
  background: #0a0e27;
  color: #C1FF72;
  padding: 1.25rem 1.5rem;
  border-radius: 8px;
  border-left: 3px solid #C1FF72;
  font-size: 0.95rem;
  line-height: 1.7;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.code-snippet .keyword { color: #ffd166; }
.code-snippet .string { color: #a5e8ff; }
.code-snippet .comment { color: #6c7591; }
.code-snippet .fn { color: #ff9b85; }

/* Cursor blink for hero text */
.code-cursor::after {
  content: "_";
  display: inline-block;
  margin-left: 4px;
  color: #C1FF72;
  animation: codeBlink 1s steps(2) infinite;
}
@keyframes codeBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}