diff --git a/app/components/Hero.module.css b/app/components/Hero.module.css
deleted file mode 100644
index 757d502..0000000
--- a/app/components/Hero.module.css
+++ /dev/null
@@ -1,214 +0,0 @@
-.hero {
-  position: relative;
-  z-index: 2;
-  display: grid;
-  min-height: min(31rem, calc((100dvh - var(--header-height)) * 0.63));
-  grid-template-columns: minmax(13rem, 0.7fr) minmax(20rem, 1fr);
-  align-content: start;
-  align-items: start;
-  gap: clamp(1rem, 3.5vw, 3rem);
-  padding-block: clamp(1rem, 2.5vh, 2rem) 0;
-}
-
-.portraitCard,
-.introCard {
-  border: 1px solid oklch(1 0 0 / 18%);
-  box-shadow: 0 1.5rem 4rem oklch(0.04 0.03 260 / 34%);
-  backdrop-filter: blur(18px) saturate(130%);
-}
-
-.portraitCard {
-  width: min(100%, 21rem);
-  padding: clamp(0.75rem, 2vw, 1rem);
-  justify-self: center;
-  background: oklch(0.15 0.035 258 / 62%);
-  border-radius: var(--radius-xl);
-  transform: rotate(-1.5deg);
-}
-
-.portrait {
-  position: relative;
-  display: grid;
-  aspect-ratio: 4 / 5;
-  overflow: hidden;
-  color: oklch(0.94 0.025 210 / 84%);
-  background-color: oklch(0.22 0.05 255);
-  background-image:
-    radial-gradient(circle at 50% 32%, oklch(0.78 0.12 210 / 60%), transparent 18%),
-    linear-gradient(145deg, oklch(0.32 0.12 225), oklch(0.18 0.06 275) 58%, oklch(0.27 0.1 335));
-  background-position: center;
-  background-size: cover;
-  border-radius: calc(var(--radius-xl) - 0.45rem);
-  place-items: center;
-}
-
-.portrait span {
-  font-family: var(--font-geist-mono), monospace;
-  font-size: clamp(3.25rem, 7vw, 5.75rem);
-  font-weight: 700;
-  letter-spacing: -0.12em;
-  text-shadow: 0 0.25rem 2rem oklch(0.05 0.03 260 / 45%);
-}
-
-.portraitCaption {
-  padding: 0.65rem 0.3rem 0.1rem;
-  margin: 0;
-  color: oklch(0.88 0.035 215);
-  font-family: var(--font-geist-mono), monospace;
-  font-size: 0.73rem;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
-
-.introCard {
-  max-width: 42rem;
-  padding: clamp(1.35rem, 3vw, 2.75rem);
-  color: oklch(0.97 0.015 210);
-  background:
-    linear-gradient(145deg, oklch(0.18 0.045 260 / 82%), oklch(0.12 0.035 265 / 68%)),
-    radial-gradient(circle at 100% 0, oklch(0.72 0.16 165 / 20%), transparent 22rem);
-  border-radius: var(--radius-xl);
-}
-
-.eyebrow {
-  margin-bottom: 0.85rem;
-  color: oklch(0.82 0.15 195);
-  font-family: var(--font-geist-mono), monospace;
-  font-size: 0.78rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.14em;
-}
-
-.introCard h1 {
-  max-width: 12ch;
-  margin-bottom: 1.15rem;
-  font-size: clamp(2.25rem, 4.3vw, 4rem);
-  line-height: 0.98;
-  letter-spacing: -0.065em;
-  text-wrap: balance;
-}
-
-.intro,
-.detail {
-  max-width: 57ch;
-  color: oklch(0.83 0.035 218);
-  line-height: 1.75;
-}
-
-.intro {
-  margin-bottom: 0.65rem;
-  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
-}
-
-.detail {
-  margin-bottom: 1.25rem;
-  font-size: 0.9rem;
-}
-
-.focusList {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.65rem;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.focusList li {
-  padding: 0.55rem 0.8rem;
-  color: oklch(0.9 0.045 210);
-  font-family: var(--font-geist-mono), monospace;
-  font-size: 0.72rem;
-  background: oklch(1 0 0 / 7%);
-  border: 1px solid oklch(1 0 0 / 14%);
-  border-radius: 999px;
-}
-
-@media (max-width: 48rem) {
-  .hero {
-    min-height: min(32rem, calc((100dvh - var(--header-height)) * 0.63));
-    grid-template-columns: minmax(8rem, 0.42fr) minmax(0, 1fr);
-    gap: 1rem;
-    padding-block: clamp(0.85rem, 2vh, 1.5rem) 0;
-  }
-
-  .portraitCard {
-    width: min(100%, 11rem);
-    transform: rotate(-1.5deg);
-  }
-
-  .portraitCaption {
-    font-size: 0.55rem;
-    line-height: 1.35;
-  }
-
-  .introCard {
-    padding: clamp(1rem, 3vw, 1.5rem);
-  }
-
-  .introCard h1 {
-    max-width: 12ch;
-    font-size: clamp(2rem, 8vw, 3.1rem);
-  }
-
-  .intro,
-  .detail {
-    line-height: 1.55;
-  }
-
-  .focusList {
-    gap: 0.45rem;
-  }
-
-  .focusList li {
-    padding: 0.45rem 0.65rem;
-  }
-}
-
-@media (max-width: 30rem) {
-  .hero {
-    grid-template-columns: minmax(5.5rem, 0.32fr) minmax(0, 1fr);
-    gap: 0.75rem;
-  }
-
-  .portraitCard {
-    width: min(100%, 7.75rem);
-    padding: 0.55rem;
-    transform: none;
-  }
-
-  .portraitCaption {
-    display: none;
-  }
-
-  .introCard {
-    padding: 0.9rem;
-  }
-
-  .eyebrow {
-    margin-bottom: 0.55rem;
-    font-size: 0.65rem;
-  }
-
-  .introCard h1 {
-    margin-bottom: 0.75rem;
-    font-size: clamp(1.65rem, 7vw, 2.15rem);
-    letter-spacing: -0.045em;
-  }
-
-  .intro {
-    margin-bottom: 0.55rem;
-    font-size: 0.82rem;
-  }
-
-  .detail {
-    margin-bottom: 0.85rem;
-    font-size: 0.78rem;
-  }
-
-  .focusList li {
-    font-size: 0.62rem;
-  }
-}
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
deleted file mode 100644
index df266ad..0000000
--- a/app/components/Hero.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-import PageContainer from './PageContainer'
-import styles from './Hero.module.css'
-
-export default function Hero() {
-  return (
-    <PageContainer className={styles.hero}>
-      <div className={styles.portraitCard}>
-        <div className={styles.portrait} role="img" aria-label="Initials placeholder for Alper.">
-          <span aria-hidden="true">AM</span>
-        </div>
-        <p className={styles.portraitCaption}>Based in Istanbul &middot; Building for the web</p>
-      </div>
-
-      <div className={styles.introCard}>
-        <p className={styles.eyebrow}>Hello, I&apos;m Alper</p>
-        <h1>I turn thoughtful ideas into dependable software.</h1>
-        <p className={styles.intro}>
-          I&apos;m a software engineer focused on building clear, useful digital experiences. I enjoy working across
-          product, interface, and engineering to take ideas from an early sketch to polished, maintainable software.
-        </p>
-        <p className={styles.detail}>
-          This is where I share selected projects, engineering notes, and the experiments that keep me curious.
-        </p>
-
-        <ul className={styles.focusList} aria-label="Areas of focus">
-          <li>Product engineering</li>
-          <li>Web interfaces</li>
-          <li>Cloud systems</li>
-        </ul>
-      </div>
-    </PageContainer>
-  )
-}
diff --git a/app/components/MainWrapper.module.css b/app/components/MainWrapper.module.css
index 309cef5..1d9e823 100644
--- a/app/components/MainWrapper.module.css
+++ b/app/components/MainWrapper.module.css
@@ -1,29 +1,42 @@
 .main {
   grid-row: 2;
   min-width: 0;
-  animation: page-enter 520ms 70ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation: shell-enter 620ms 90ms cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
 :global(html.intro-pending) .main {
   opacity: 0;
   animation: none;
-  transform: translateY(1rem);
+  transform: translateY(0.65rem);
 }
 
 :global(html.intro-revealed) .main {
-  animation: page-reveal 520ms 70ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation: shell-reveal 620ms 90ms cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
-@keyframes page-enter {
+@keyframes shell-enter {
   from {
     opacity: 0;
-    transform: translateY(1rem);
+    filter: blur(0.45rem);
+    transform: translateY(0.65rem);
   }
 }
 
-@keyframes page-reveal {
+@keyframes shell-reveal {
   from {
     opacity: 0;
-    transform: translateY(1rem);
+    filter: blur(0.45rem);
+    transform: translateY(0.65rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .main,
+  :global(html.intro-revealed) .main {
+    animation: none;
+  }
+
+  :global(html.intro-pending) .main {
+    transform: none;
   }
 }
diff --git a/app/components/ParallaxScene.tsx b/app/components/ParallaxScene.tsx
index 95c4f6e..aa3ec35 100644
--- a/app/components/ParallaxScene.tsx
+++ b/app/components/ParallaxScene.tsx
@@ -4,7 +4,6 @@ import { useLenis } from 'lenis/react'
 import { useEffect, useRef } from 'react'
 import gsap from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
-import Hero from './Hero'
 import Parallax from './Parallax'
 import styles from './Parallax.module.css'
 
@@ -86,7 +85,6 @@ export default function ParallaxScene() {
       </picture>
       <Parallax scrollSpeed={-1} tabletScrollSpeed={-0.55} mobileScrollSpeed={-0.35} />
       <Parallax scrollSpeed={1.5} tabletScrollSpeed={0.35} mobileScrollSpeed={0.05} />
-      <Hero />
     </div>
   )
 }
diff --git a/app/favicon.ico b/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/app/favicon.ico and /dev/null differ
diff --git a/app/template.module.css b/app/template.module.css
new file mode 100644
index 0000000..c557c7f
--- /dev/null
+++ b/app/template.module.css
@@ -0,0 +1,28 @@
+.pageTransition {
+  min-width: 0;
+  animation: route-enter 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes route-enter {
+  from {
+    opacity: 0;
+    filter: blur(0.55rem);
+    transform: translateY(0.8rem) scale(0.992);
+  }
+
+  62% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pageTransition {
+    animation: none;
+  }
+}
diff --git a/app/template.tsx b/app/template.tsx
new file mode 100644
index 0000000..e38a151
--- /dev/null
+++ b/app/template.tsx
@@ -0,0 +1,9 @@
+import styles from './template.module.css'
+
+export default function Template({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return <div className={styles.pageTransition}>{children}</div>
+}