feat: implement EnvelopeReveal component for letter interactions and integrate into reader workflow

frontend/src/components/ui/DrawerSection.tsx

@@ -20,12 +20,12 @@ export function DrawerSection({
   return (
     <div
       id={id}
-      className={`overflow-visible join-item group flex flex-col transition-colors ${isOpen ? "bg-base-300/30" : ""}`}
+      className={`join-item group flex flex-col transition-colors duration-3000 ease-in-out ${isOpen ? "bg-base-300/30" : ""}`}
     >
       <div
-        className={`transition-normal duration-1000 ease-in-out bg-neutral/10 ${
+        className={`transition-all duration-2000 ease-in-out bg-neutral/10 ${
           isOpen
-            ? "opacity-100 py-3 border-b border-base-content/5"
+            ? "max-h-125 opacity-100 py-3 border-b border-base-content/5 overflow-visible"
             : "max-h-0 opacity-0 pointer-events-none"
         }`}
       >
@@ -35,11 +35,11 @@ export function DrawerSection({
       <button
         type="button"
         onClick={onClick}
-        className={`w-full p-[24px_28px] cursor-pointer flex items-center gap-5 transition-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40`}
+        className={`w-full p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40`}
       >
         <div className="flex-1">
           <div
-            className={`font-sans text-xs tracking-[0.2em] uppercase transition-colors duration-300 ${
+            className={`font-sans text-xs tracking-[0.2em] uppercase transition-colors duration-800 ${
               isOpen
                 ? "text-base-content"
                 : "text-base-content/40 group-hover:text-base-content/80"

frontend/src/components/ui/EnvelopeReveal.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+
+export interface EnvelopeRevealProps {
+  recipient?: string;
+  date?: string;
+  onRevealComplete: () => void;
+}
+
+export function EnvelopeReveal({
+  recipient,
+  date,
+  onRevealComplete,
+}: EnvelopeRevealProps) {
+  const [revealLetter, setRevealLetter] = useState(false);
+
+  const handleClick = () => {
+    setRevealLetter(true);
+    setTimeout(() => {
+      onRevealComplete();
+    }, 1000);
+  };
+
+  return (
+    <div className="max-w-4xl m-8 mx-auto space-y-8 h-screen w-screen flex items-center justify-center">
+      <div className="flex items-center justify-center transition-all duration-1000">
+        <div
+          id="env-top"
+          className="z-4 transition-transform duration-2000 absolute peer h-40 w-54 -mt-30 bg-base-200 mask mask-triangle-2 scale-x-234 has-checked:scale-y-[-1] has-checked:-translate-y-full has-checked:z-1 has-checked:duration-1000"
+        >
+          <input
+            type="checkbox"
+            className=" transition-all checkbox duration-1000 absolute h-full w-full bg-transparent z-100 text-transparent"
+          />
+        </div>
+        <div
+          id="letter"
+          className={`max-w-4xl m-8 mx-auto space-y-8 transition-all peer-has-checked:duration-2000 duration-500 h-65 w-105 bg-paper peer-has-checked:mb-24 hover:mb-54 cursor-pointer ${revealLetter ? "w-screen h-screen z-101" : "peer-has-checked:z-1"}`}
+          onClick={handleClick}
+        ></div>
+
+        <div
+          id="env-right"
+          className="absolute h-70 w-105 bg-base-300 mask mask-triangle-3 -mr-48 z-3"
+        ></div>
+        <div
+          id="env-left"
+          className="absolute h-70 w-105 bg-base-300 mask mask-triangle-4 -ml-48 z-3"
+        ></div>
+        <div
+          id="env-bottom"
+          className="absolute h-70 w-45 bg-base-200 mask mask-triangle-2 scale-y-[-1] -mb-31 scale-x-240 z-3"
+        ></div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ui/LetterItem.tsx

@@ -31,7 +31,7 @@ export function LetterItem({
     <button
       type="button"
       onClick={handleNavigate}
-      className={`${isLocked ? "pointer-events-none" : ""} p-4 border-base-content/3 flex items-start gap-4 hover:bg-base-300 transition-all duration-100 group text-left cursor-pointer w-9/12 mx-auto hover:scale-120 hover:h-24 hover:-translate-y-3 hover:pb-4 hover:border-x-5 hover:border-t-5 border-t-2 hover:-mb-2`}
+      className={`${isLocked ? "pointer-events-none" : ""} p-4 border-base-content/3 flex items-start gap-4 hover:bg-base-300 transition-all delay-75 duration-100 group text-left cursor-pointer w-9/12 mx-auto hover:scale-120 hover:h-24 hover:-translate-y-3 hover:pb-4 hover:border-x-5 hover:border-t-5 border-t-2 hover:-mb-2`}
     >
       <div className="text-[0.85rem] italic text-base-content/40 flex-1 truncate group-hover:text-base-content/60 transition-none animate-[opacity_200ms_linear_forwards]">
         {preview}