perf: optimize portfolio runtime delivery

Replace the blocking asset loader with progressive rendering, defer expensive media and Three.js work, and reduce hydration and animation costs. Move deployment from a static Nginx export to the standalone Next.js runtime with optimized dynamic images.

src/styles/globals.css

@@ -1,14 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
 @import './tokens.css';
 
-@font-face {
-  font-family: 'IRANYekanXVF';
-  src: url('/fonts/IRANYekanXVF.ttf') format('truetype-variations');
-  font-style: normal;
-  font-weight: 100 1000;
-  font-display: swap;
-}
-
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
@@ -25,24 +16,12 @@ html[data-theme="dark"] {
   color-scheme: dark;
 }
 
-@font-face {
-  font-family: 'Peyda';
-  src: url('/fonts/PeydaWeb-Black.woff2') format('woff2');
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-}
-
-html[data-site-loading='true'] {
-  overflow: hidden;
-}
-
 body {
   width: 100%;
   min-width: 320px;
   background-color: var(--bg-page);
   color: var(--text-primary);
-  font-family: 'IRANYekanXVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: var(--font-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-synthesis: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -57,7 +36,7 @@ html[dir='rtl'] body {
 .ltr-token {
   direction: ltr;
   unicode-bidi: isolate;
-  font-family: 'IRANYekanXVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: var(--font-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
 /* Master 1440px Fixed Canvas */
@@ -87,6 +66,45 @@ html[dir='rtl'] body {
   position: relative;
 }
 
+[data-deferred-render] {
+  content-visibility: auto;
+  contain: layout style paint;
+}
+
+#projects { contain-intrinsic-size: auto 800px; }
+#experience { contain-intrinsic-size: auto 2085px; }
+#skills { contain-intrinsic-size: auto 1240px; }
+#education { contain-intrinsic-size: auto 480px; }
+#milestones { contain-intrinsic-size: auto 1670px; }
+#footer { contain-intrinsic-size: auto 615px; }
+
+@media (max-width: 1024px) {
+  #projects { contain-intrinsic-size: auto 750px; }
+  #experience { contain-intrinsic-size: auto 2310px; }
+  #skills { contain-intrinsic-size: auto 1400px; }
+  #education { contain-intrinsic-size: auto 575px; }
+  #milestones { contain-intrinsic-size: auto 1835px; }
+  #footer { contain-intrinsic-size: auto 575px; }
+}
+
+@media (max-width: 768px) {
+  #projects { contain-intrinsic-size: auto 730px; }
+  #experience { contain-intrinsic-size: auto 2790px; }
+  #skills { contain-intrinsic-size: auto 1880px; }
+  #education { contain-intrinsic-size: auto 1010px; }
+  #milestones { contain-intrinsic-size: auto 2340px; }
+  #footer { contain-intrinsic-size: auto 500px; }
+}
+
+@media (max-width: 650px) {
+  #projects { contain-intrinsic-size: auto 750px; }
+  #experience { contain-intrinsic-size: auto 3780px; }
+  #skills { contain-intrinsic-size: auto 3385px; }
+  #education { contain-intrinsic-size: auto 1010px; }
+  #milestones { contain-intrinsic-size: auto 3690px; }
+  #footer { contain-intrinsic-size: auto 475px; }
+}
+
 @media (max-width: 650px) {
   .section-header {
     margin-bottom: var(--space-6);
@@ -158,63 +176,19 @@ html[dir='rtl'] .section-underline {
   transform-origin: right center;
 }
 
-/* One-time viewport reveals. Content remains visible when JavaScript is unavailable. */
-html[data-motion-ready='true'] [data-reveal] {
-  opacity: 0;
-  transform: translateY(1rem);
-  transition:
-    opacity var(--motion-duration-reveal) var(--motion-ease-out),
-    transform var(--motion-duration-reveal) var(--motion-ease-out);
-  transition-delay: var(--reveal-delay, 0ms);
-  will-change: opacity, transform;
-}
-
-html[data-motion-ready='true'] [data-reveal='soft'] {
-  transform: translateY(0.625rem);
-}
-
-html[data-motion-ready='true'] [data-reveal='scale'] {
-  transform: translateY(0.5rem) scale(0.97);
-}
-
-html[data-motion-ready='true'] [data-reveal='image'] {
-  transform: translateY(0.5rem) scale(0.985);
-}
-
-html[data-motion-ready='true'] [data-reveal][data-visible='true'] {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  will-change: auto;
-}
-
-html[data-motion-ready='true'] [data-visible='true'] .section-underline {
-  animation: motionUnderline 500ms var(--motion-ease-out) 120ms both;
-}
-
-@keyframes motionUnderline {
-  from {
-    opacity: 0;
-    transform: scaleX(0.25);
-  }
-  to {
-    opacity: 1;
-    transform: scaleX(1);
-  }
-}
-
 /* Keep the original Latin display face and use Peyda for Persian text. */
 .font-display {
-  font-family: 'Pacifico', cursive;
+  font-family: var(--font-display), cursive;
   font-weight: 400;
 }
 
 html[lang='fa'] .font-display {
-  font-family: 'Peyda', 'IRANYekanXVF', sans-serif;
+  font-family: var(--font-display), var(--font-body), sans-serif;
   font-weight: 900;
 }
 
 html[lang='fa'] .section-title {
-  font-family: 'Peyda', 'IRANYekanXVF', sans-serif;
+  font-family: var(--font-display), var(--font-body), sans-serif;
   font-weight: 900;
 }
 
@@ -230,7 +204,7 @@ html[lang='fa'] .section-title {
   font-size: var(--font-size-button);
   line-height: var(--line-height-button);
   font-weight: 600;
-  font-family: 'IRANYekanXVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: var(--font-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   cursor: pointer;
   text-decoration: none;
   transition: