feat: revamp portfolio with case studies, curriculo page, and local SEO

Adds dynamic case study and curriculo routes, project health monitoring
for live demo status, and strengthens local SEO (structured data,
service-area targeting for Garuva/Joinville/Curitiba, a dedicated
"criação de sites" service page) so search results better match the
professional title (Engenheiro da Computação) and experience (5 anos).

Co-Authored-By: Claude Sonnet 5 <[email protected]>

app/globals.css

@@ -28,7 +28,7 @@
   --white: #ffffff;
   --slash: #ccff00;
   --slash-dim: rgba(204, 255, 0, 0.16);
-  --meta: #595959;
+  --meta: #4a4a4a;
   --border: rgba(10, 10, 10, 0.1);
   --border-light: rgba(10, 10, 10, 0.06);
   --sp-1: 4px;
@@ -189,7 +189,7 @@ textarea {
 
 .ds-section-description {
   max-width: 58ch;
-  color: rgba(10, 10, 10, 0.62);
+  color: rgba(10, 10, 10, 0.74);
   font-size: 14px;
   line-height: 1.82;
 }
@@ -216,11 +216,10 @@ textarea {
 }
 
 .ds-card {
-  background: rgba(255, 255, 255, 0.74);
+  background: rgba(255, 255, 255, 0.92);
   padding: clamp(20px, 3vw, 28px);
   display: flex;
   flex-direction: column;
-  backdrop-filter: blur(10px);
 }
 
 .ds-panel {
@@ -555,45 +554,20 @@ textarea {
 
 /* Cinematic text gradient - hero heading */
 .cinematic-text-gradient {
-  background: linear-gradient(
-    135deg,
-    #ffffff 0%,
-    #ffffff 25%,
-    #ccff00 50%,
-    #ffffff 75%,
-    #a7a7a7 100%
-  );
-  background-size: 300% 300%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: textGradientShift 8s ease-in-out infinite;
+  color: #f4f2ed;
 }
 
-@keyframes textGradientShift {
-  0%,
-  100% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-}
-
-/* Glassmorphism cards */
+/* Solid surfaces avoid expensive backdrop blur during first paint. */
 .cinematic-glass {
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(10, 10, 10, 0.4);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(10, 10, 10, 0.78);
+  transition:
+    border-color 0.25s ease,
+    background 0.25s ease;
 }
-
 .cinematic-glass:hover {
-  border-color: rgba(204, 255, 0, 0.15);
-  background: rgba(10, 10, 10, 0.5);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
-    inset 0 0 0 1px rgba(204, 255, 0, 0.05);
+  border-color: rgba(204, 255, 0, 0.35);
+  background: rgba(10, 10, 10, 0.9);
 }
 
 /* Primary CTA - cinematic glow button */