personal handwriting font added

Author: f1zzy22

poetry.html

@@ -6,8 +6,16 @@
   <title>Scrapbook Wall | Daniel Han</title>
   <link rel="icon" type="image/png" href="images/f1zzyicon.png">
   <link rel="stylesheet" href="styles.css">
-  <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
   <style>
+    /* CUSTOM HANDWRITING FONT */
+    @font-face {
+        font-family: 'F1zzyFont';
+        src: url('fonts/f1zzyfont.ttf') format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+
     body { overflow: hidden; background: #0a0a0a; margin: 0; }
 
     .section-title {
@@ -33,12 +41,18 @@
         border-image: linear-gradient(to bottom right, #8b5a2b, #6f4e37, #4e3621) 1; 
         box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 0 100px rgba(0,0,0,0.3); 
         border-radius: 4px;
-        overflow: hidden; 
     }
 
     .polaroid {
         position: absolute;
-        background: #fdfdfd;
+        background-color: #f1e7d0; 
+        background-image: 
+            linear-gradient(rgba(0,0,0,0.01) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(0,0,0,0.01) 1px, transparent 1px),
+            linear-gradient(25deg, transparent 65%, rgba(181, 153, 110, 0.1) 75%, transparent 85%),
+            radial-gradient(circle at 20% 30%, rgba(204, 178, 140, 0.15) 0%, transparent 40%),
+            radial-gradient(circle at 70% 80%, rgba(190, 160, 120, 0.1) 0%, transparent 50%);
+        background-size: 100% 100%;
         padding: 12px 12px 55px 12px; 
         box-shadow: 2px 5px 15px rgba(0,0,0,0.4);
         width: 200px;
@@ -57,22 +71,21 @@
         background: #fff; 
         padding: 15px;
         height: 180px; 
-        display: block; /* Changed from flex to block */
+        display: block; 
         overflow: hidden; 
         border: 1px solid #ddd;
         position: relative;
-        transition: background 1.2s ease, border-color 1.2s ease, height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: background 1.2s ease, border-color 1.2s ease, height 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 1.2s ease;
     }
 
     .develop-prompt {
-        font-family: 'Nanum Pen Script', cursive;
+        font-family: 'F1zzyFont', cursive; 
         color: #bbb;
-        font-size: 1.4rem;
+        font-size: 3.6rem; 
         transition: opacity 0.5s ease;
         pointer-events: none;
         text-align: center;
-        line-height: 1.2;
-        /* Absolute centering so padding doesn't push it */
+        line-height: 0.6;
         position: absolute;
         top: 50%;
         left: 50%;
@@ -81,62 +94,153 @@
     }
 
     .develop-prompt span { display: block; }
-
     .polaroid.expanded .develop-prompt { display: none; }
 
+    /* =========================================================
+       PHOTOREALISTIC 3D ANCIENT SCROLL (EXPANDED STATE)
+       ========================================================= */
+
+    /* Hide the modern tape and caption when it turns into a scroll */
+    .polaroid.expanded .polaroid-caption,
+    .polaroid.expanded .tape {
+        display: none !important;
+    }
+
+    /* Master Container - Acts as the invisible anchor for the 3D rolls */
+    .polaroid.expanded {
+        top: 50% !important;
+        left: 50% !important;
+        transform: translate(-50%, -50%) rotate(0deg) !important;
+        width: 80vw !important; 
+        max-width: 900px !important; 
+        height: 80vh !important;
+        z-index: 10000 !important; 
+        cursor: default;
+        
+        /* Strip all Polaroid formatting */
+        background: transparent !important;
+        background-image: none !important;
+        box-shadow: none !important;
+        padding: 0 !important;
+        
+        /* Global drop shadow for the entire scroll structure */
+        filter: drop-shadow(0 40px 50px rgba(0,0,0,0.8));
+    }
+
+    /* TOP 3D ROLL - Simulates the cylindrical top of the scroll */
+    .polaroid.expanded::before {
+        content: "";
+        position: absolute;
+        top: -15px;
+        left: -1.5%;
+        width: 103%;
+        height: 55px;
+        /* Complex 3D cylinder lighting */
+        background: linear-gradient(to bottom, #d4a76a 0%, #f4d39f 20%, #c49250 55%, #6a421b 90%, #301a05 100%);
+        border-radius: 8px / 25px;
+        box-shadow: inset 0 0 15px rgba(60, 30, 5, 0.5), 0 15px 25px rgba(0,0,0,0.7);
+        z-index: 10;
+        pointer-events: none;
+    }
+
+    /* BOTTOM 3D ROLL - Simulates the cylindrical bottom of the scroll */
+    .polaroid.expanded::after {
+        content: "";
+        position: absolute;
+        bottom: -15px;
+        left: -1.5%;
+        width: 103%;
+        height: 55px;
+        /* Reverse 3D cylinder lighting */
+        background: linear-gradient(to top, #d4a76a 0%, #f4d39f 20%, #c49250 55%, #6a421b 90%, #301a05 100%);
+        border-radius: 8px / 25px;
+        box-shadow: inset 0 0 15px rgba(60, 30, 5, 0.5), 0 -15px 25px rgba(0,0,0,0.7);
+        z-index: 10;
+        pointer-events: none;
+    }
+
+    /* THE PARCHMENT SHEET */
     .polaroid.expanded .polaroid-photo {
-        background: #111;
-        border-color: #222;
-        height: 400px;
+        height: 100% !important;
+        max-height: none !important;
         overflow-y: auto; 
+        overflow-x: hidden;
+        padding: 70px 80px !important; /* Forces text inside the scroll boundaries */
+        
+        background-color: #e4c28f !important; /* Deep aged yellow/brown base */
+        background-image: 
+            /* Heavy dark edge burns */
+            linear-gradient(to right, rgba(50,20,0,0.8) 0%, rgba(50,20,0,0.1) 6%, transparent 15%, transparent 85%, rgba(50,20,0,0.1) 94%, rgba(50,20,0,0.8) 100%),
+            /* Deep grunge blotches and coffee rings */
+            radial-gradient(ellipse at 10% 20%, rgba(90, 45, 10, 0.3) 0%, transparent 45%),
+            radial-gradient(ellipse at 85% 85%, rgba(70, 35, 5, 0.4) 0%, transparent 55%),
+            radial-gradient(circle at 45% 50%, rgba(120, 70, 20, 0.2) 0%, transparent 75%),
+            radial-gradient(circle at 75% 30%, rgba(50, 20, 0, 0.2) 0%, transparent 35%),
+            /* Inline SVG Fractal Noise for hyper-realistic paper grain/fibers */
+            url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.3"/></svg>') !important;
+        
+        border: none !important;
+        
+        /* Ragged physically torn paper edges (Left and Right) */
+        clip-path: polygon(
+            0.5% 0%, 99.5% 0%, 
+            100% 5%, 99.2% 12%, 100% 22%, 99.5% 35%, 100% 45%, 99.1% 58%, 100% 68%, 99.4% 78%, 100% 88%, 99.6% 96%, 100% 100%, 
+            0% 100%, 
+            0.4% 96%, 0% 88%, 0.6% 78%, 0% 68%, 0.9% 58%, 0% 45%, 0.5% 35%, 0% 22%, 0.8% 12%, 0% 5%
+        );
     }
 
+    /* Custom Scrollbar for the Parchment */
+    .polaroid.expanded .polaroid-photo::-webkit-scrollbar { width: 8px; }
+    .polaroid.expanded .polaroid-photo::-webkit-scrollbar-track { background: transparent; }
+    .polaroid.expanded .polaroid-photo::-webkit-scrollbar-thumb { background: rgba(80, 40, 10, 0.5); border-radius: 4px; }
+    .polaroid.expanded .polaroid-photo::-webkit-scrollbar-thumb:hover { background: rgba(80, 40, 10, 0.8); }
+
+    /* REALISTIC INK TEXT */
     .poem-body { 
         color: #fff; 
-        line-height: 1.7; 
-        font-size: 0.8rem;
-        font-family: 'Inter', sans-serif;
+        line-height: 0.7; 
+        font-size: 2rem;
+        font-family: 'F1zzyFont', sans-serif; 
         white-space: pre-line; 
         margin: 0;
         opacity: 0; 
         filter: blur(5px);
-        transition: opacity 1.5s ease 0.3s, filter 1.5s ease 0.3s;
+        transition: opacity 1.5s ease 0.3s, filter 1.5s ease 0.3s, color 1.5s ease, text-shadow 1.5s ease;
     }
 
     .polaroid.expanded .poem-body {
         opacity: 1;
         filter: blur(0);
-        font-size: 1rem;
+        font-size: 5.5rem; 
+        
+        /* Deep charcoal black ink with a slight bleed/blur into the paper */
+        color: #111; 
+        text-shadow: 0px 0px 3px rgba(0,0,0,0.4); 
     }
 
     .polaroid.closing .poem-body {
         transition: none !important;
         opacity: 0 !important;
     }
 
+    /* POLAROID BASE CAPTION */
     .polaroid-caption { 
         position: absolute;
         bottom: 8px; 
         left: 0;
         width: 100%;
         padding: 0 10px; 
         box-sizing: border-box; 
-        color: #333; 
-        font-size: 1.2rem; 
+        color: #4a3721; 
+        font-size: 2.5rem; 
         line-height: 1.1; 
-        font-family: 'Nanum Pen Script', cursive;
+        font-family: 'F1zzyFont', cursive; 
         text-align: center;
-        opacity: 0.8;
-    }
-
-    .polaroid.expanded {
-        top: 50% !important;
-        left: 50% !important;
-        transform: translate(-50%, -50%) rotate(0deg) !important;
-        width: 450px;
-        z-index: 10000 !important; 
-        cursor: default;
-        box-shadow: 0 30px 60px rgba(0,0,0,0.8);
+        opacity: 0.85;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .close-btn {