diff --git a/index.html b/index.html
index 3cba081..ace4346 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,10 @@
   <link rel="stylesheet" href="/fonts/fonts.css" />
   <link rel="stylesheet" href="/fa/css/all.min.css" />
   <link rel="stylesheet" href="style.css" />
+
+  <!-- Runs before the body paints, so the pre-reveal styles in style.css apply
+       from the very first frame instead of flashing. -->
+  <script>document.documentElement.classList.add('js');</script>
 </head>
 <body>
   <!-- CANVAS BACKGROUND -->
@@ -47,7 +51,7 @@
     <!-- HERO -->
     <section id="home" class="hero">
       <div class="hero-content">
-        <h1 class="hero-name" >Nikolaj Gade</h1>
+        <h1 class="hero-name"><span class="hero-name-static">Nikolaj Gade</span></h1>
         <p class="hero-role">Software Developer</p>
         <p class="hero-pronouns">they/them · he/him</p>
 
@@ -368,6 +372,6 @@
     <p>This website was built by a horde of angry rats masquerading as a software developer</p>
   </footer>
 
-  <script src="script.js"></script>
+  <script src="script.js" defer></script>
 </body>
 </html>
diff --git a/script.js b/script.js
index 9609200..24c367c 100644
--- a/script.js
+++ b/script.js
@@ -34,7 +34,8 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
   const fullName = nameEl.textContent.trim();
   nameEl.textContent = '';
 
-  // Hide hero elements that reveal after typing
+  // Hide hero elements that reveal after typing. They're already hidden by the
+  // .js pre-reveal block in style.css; this just adds the transition.
   restEls.forEach(el => el.classList.add('fade-up'));
 
   startHeroTypewriter(nameEl, fullName, restEls);
@@ -194,6 +195,7 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
 
 // ── Scroll fade-in ─────────────────────────────────────────────
 (function () {
+  // Keep this list in sync with the .js pre-reveal block in style.css
   const targets = document.querySelectorAll(
     '.section-header, .about-grid, .skill-card, .timeline-item, ' +
     '.project-card, .edu-card'
diff --git a/style.css b/style.css
index e6a2008..f4c9259 100644
--- a/style.css
+++ b/style.css
@@ -146,6 +146,24 @@ main { position: relative; z-index: 1; }
 .fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
 .fade-up.visible { opacity: 1; transform: none; }
 
+/* Pre-reveal state. script.js adds .fade-up at runtime, which is too late to stop
+   these from painting first, so hide them here instead. Selectors mirror the
+   queries in script.js — change both together. */
+.js .hero-name-static { visibility: hidden; }
+.js .hero-role:not(.visible),
+.js .hero-pronouns:not(.visible),
+.js .hero-links:not(.visible),
+.js .hero-visual:not(.visible),
+.js .section-header:not(.visible),
+.js .about-grid:not(.visible),
+.js .skill-card:not(.visible),
+.js .timeline-item:not(.visible),
+.js .project-card:not(.visible),
+.js .edu-card:not(.visible) {
+  opacity: 0;
+  transform: translateY(28px);
+}
+
 /* Hero typewriter cursor */
 .hero-cursor {
   display: inline-block;
