fix(motion): eliminate residual mobile Portfolio flicker

index.html

@@ -10,6 +10,14 @@
     <!-- Apple Touch Icon (para iOS) -->
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 
+    <link
+      rel="preload"
+      href="/src/assets/fonts/Inter-latin.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
     <!-- Meta para Android y navegadores -->
     <meta name="theme-color" content="#000000" />
     <meta name="mobile-web-app-capable" content="yes" />

src/Components/PortfolioSection.tsx

@@ -97,7 +97,7 @@ export default function PortfolioSection() {
             >
               <motion.div
                 data-nojs-visible
-                className="group h-full overflow-hidden rounded-2xl bg-white/95 backdrop-blur border border-gray-200/80 shadow-md transition-all duration-300 motion-reduce:transition-none hover:-translate-y-1 hover:shadow-lg"
+                className="group h-full overflow-hidden rounded-2xl bg-white/95 backdrop-blur border border-gray-200/80 shadow-md transition-shadow duration-300 motion-reduce:transition-none hover:-translate-y-1 hover:shadow-lg"
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.45, delay: 0.05 * index }}

src/__tests__/repositoryHygiene.test.ts

@@ -120,7 +120,7 @@ describe("repository hygiene", () => {
     for (const face of interFaces) {
       expect(face).toContain('font-family: "Inter"');
       expect(face).toContain("font-style: normal");
-      expect(face).toContain("font-display: swap");
+      expect(face).toContain("font-display: optional");
       expect(face).toContain('format("woff2")');
       expect(face.replace(/\s+/g, " ")).toContain(
         `unicode-range: ${latinUnicodeRange}`,
@@ -141,6 +141,23 @@ describe("repository hygiene", () => {
     expect(license).toContain("SIL OPEN FONT LICENSE Version 1.1");
   });
 
+  it("preloads the self-hosted Inter file before application styles", () => {
+    const indexHtml = fs.readFileSync(repositoryPath("index.html"), "utf8");
+    const interPreloads =
+      indexHtml.match(
+        /<link\s+[^>]*rel="preload"[^>]*href="\/src\/assets\/fonts\/Inter-latin\.woff2"[^>]*>/g,
+      ) ?? [];
+    const interPreload = interPreloads[0] ?? "";
+
+    expect(interPreloads).toHaveLength(1);
+    expect(interPreload).toContain('as="font"');
+    expect(interPreload).toContain('type="font/woff2"');
+    expect(interPreload).toMatch(/\scrossorigin(?:\s|\/>)/);
+    expect(indexHtml.indexOf(interPreload)).toBeLessThan(
+      indexHtml.indexOf('src="/src/main.tsx"'),
+    );
+  });
+
   it("removes only the confirmed dead modules and starter asset", () => {
     const removedPaths = [
       "src/Components/GallerySection.tsx",

src/index.css

@@ -2,7 +2,7 @@
   font-family: "Inter";
   font-style: normal;
   font-weight: 300;
-  font-display: swap;
+  font-display: optional;
   src: url("./assets/fonts/Inter-latin.woff2") format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
     U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -13,7 +13,7 @@
   font-family: "Inter";
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
+  font-display: optional;
   src: url("./assets/fonts/Inter-latin.woff2") format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
     U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -24,7 +24,7 @@
   font-family: "Inter";
   font-style: normal;
   font-weight: 500;
-  font-display: swap;
+  font-display: optional;
   src: url("./assets/fonts/Inter-latin.woff2") format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
     U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -35,7 +35,7 @@
   font-family: "Inter";
   font-style: normal;
   font-weight: 600;
-  font-display: swap;
+  font-display: optional;
   src: url("./assets/fonts/Inter-latin.woff2") format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
     U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -46,7 +46,7 @@
   font-family: "Inter";
   font-style: normal;
   font-weight: 700;
-  font-display: swap;
+  font-display: optional;
   src: url("./assets/fonts/Inter-latin.woff2") format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
     U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,

src/test/NoJsVisibility.test.tsx

@@ -69,7 +69,7 @@ const approvedFiles = {
   },
   "src/Components/PortfolioSection.tsx": {
     baselineHash:
-      "89839bc9444158bb1e1a70a093876d1ca60ba583e388f63f8f578f6503c2101b",
+      "c44668e5f882394ab72307105fb20f748a4216cf749aac1f3019500066957b8b",
     markers: 4,
   },
   "src/Components/SobreMiSection.tsx": {

src/test/TransitionServicesIntro.test.tsx

@@ -229,16 +229,22 @@ describe("TransitionServicesIntro portfolio bridge", () => {
       "/portfolio",
       "/portfolio",
     ]);
+    cardLinks.forEach((link) => {
+      expect(link).not.toHaveClass("transition-transform");
+      expect(link).not.toHaveClass("hover:-translate-y-1");
+    });
     cards.forEach((card) => {
       expect(card).toHaveClass(
         "backdrop-blur",
         "shadow-md",
-        "transition-all",
+        "transition-shadow",
         "duration-300",
         "motion-reduce:transition-none",
         "hover:-translate-y-1",
         "hover:shadow-lg",
       );
+      expect(card).not.toHaveClass("transition-all");
+      expect(card).not.toHaveClass("transition-transform");
     });
 
     expect(portfolioSource).toContain('<section\n      id="portfolio"');