:root {
            --bg-color-start: #0f172a; /* Even darker slate-950 */
            --bg-color-mid: #1e293b;   /* slate-800/900 */
            --bg-color-end: #334155;     /* slate-700 */
            --text-color: #e2e8f0;    /* slate-200 */
            --text-dim: #94a3b8;      /* slate-400 */
            --accent-color: #f5b041;  /* A richer, warmer gold/amber */
            --accent-hover: #f7c873; /* Lighter gold for hover */
            --card-bg: #1a2433; /* Darker, more distinct card background */
            --seal-color: #d97706; /* Deeper amber for seal */
        }

        body {
            font-family: 'Lato', sans-serif; /* Changed primary font */
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
            overflow-x: hidden; /* Prevent horizontal scroll, allow vertical for letter */
            background: linear-gradient(160deg, var(--bg-color-start), var(--bg-color-mid), var(--bg-color-end));
            background-size: 400% 400%;
            animation: gradientBG 20s ease infinite;
            position: relative;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Enhanced Animation Styles */
        .envelope-wrapper {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .letter-header h1 {
            font-family: 'Cormorant Garamond', serif; /* New heading font */
            color: var(--accent-color);
            font-size: 3.25rem; /* Larger, more impactful */
            text-align: center;
            margin-bottom: 2.5rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.4);
            background: linear-gradient(90deg, #f5b041, #f7c873, #f5b041);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shineText 4s linear infinite;
        }

        @keyframes shineText {
            0% { background-position: 0%; }
            100% { background-position: 200%; }
        }

        .letter-content p, .poem-section p {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInStagger 0.6s ease forwards;
        }

        .letter-content p:nth-child(1) { animation-delay: 0.2s; }
        .letter-content p:nth-child(2) { animation-delay: 0.4s; }
        .letter-content p:nth-child(3) { animation-delay: 0.6s; }
        .letter-content p:nth-child(4) { animation-delay: 0.8s; }
        .letter-content p:nth-child(5) { animation-delay: 1s; }
        .letter-content p:nth-child(6) { animation-delay: 1.2s; }
        .poem-section p:nth-child(2) { animation-delay: 1.4s; }
        .poem-section p:nth-child(3) { animation-delay: 1.6s; }
        .poem-section p:nth-child(4) { animation-delay: 1.8s; }
        .poem-section p:nth-child(5) { animation-delay: 2s; }

        @keyframes fadeInStagger {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .letter-closing p:first-child {
            animation: glow 3s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 0 0 5px var(--accent-color); }
            to { text-shadow: 0 0 20px var(--accent-hover); }
        }

        .letter-container, .envelope {
            box-shadow: 0 0 25px rgba(245, 176, 65, 0.25), 0 10px 30px rgba(0,0,0,0.4);
        }

        #particleCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        .content-wrapper {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            perspective: 1500px; /* For 3D effects on envelope */
        }

        .letter-container {
            background-color: var(--card-bg);
            border-radius: 20px; /* Softer, larger radius */
            padding: 3rem 2.5rem; /* More spacious padding */
            box-shadow: 0 25px 50px -12px rgba(0,0,0, 0.35); /* Deeper shadow */
            width: 100%;
            max-width: 800px; /* Slightly wider */
            opacity: 0;
            transform: translateY(60px) scale(0.9);
            animation: revealLetter 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
            margin-top: 3rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            max-height: 80vh; /* Allow scrolling for long content */
            overflow-y: auto; /* Enable vertical scrollbar if needed */
        }
        /* Custom scrollbar for letter container */
        .letter-container::-webkit-scrollbar {
            width: 8px;
        }
        .letter-container::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.05);
            border-radius: 10px;
        }
        .letter-container::-webkit-scrollbar-thumb {
            background: var(--accent-color);
            border-radius: 10px;
        }
        .letter-container::-webkit-scrollbar-thumb:hover {
            background: var(--accent-hover);
        }


        @keyframes revealLetter {
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .letter-content p, .letter-content blockquote {
            margin-bottom: 1.75rem;
            line-height: 1.9; 
            font-size: 1.1rem; 
            font-weight: 300; /* Lighter for Lato */
            color: var(--text-dim); /* Softer text color for body */
        }
        .letter-content p.greeting-main { /* Specific style for first lines */
            color: var(--text-color);
            font-weight: 400;
        }


        .letter-content p strong {
            color: var(--accent-color);
            font-weight: 700;
        }
        .letter-content em {
            color: var(--accent-hover); /* Brighter emphasis */
            font-style: italic;
        }

        .poem-section {
            margin: 3rem 0;
            padding-left: 2.5rem;
            border-left: 5px solid var(--accent-color);
            position: relative;
        }
        .poem-section::before { /* Decorative element for poem */
            content: '📜';
            position: absolute;
            left: -20px;
            top: -15px;
            font-size: 1.8rem;
            opacity: 0.7;
            transform: rotate(-15deg);
        }

        .poem-section p {
            font-style: italic;
            color: #d1d5db; /* Lighter slate for poem */
            margin-bottom: 1.25rem;
            line-height: 1.8;
            font-weight: 400;
        }
        
        .letter-closing {
            margin-top: 3rem;
            text-align: center;
        }
        .letter-closing p:first-child { /* "With warmest wishes" */
            font-family: 'Great Vibes', cursive; /* New signature font */
            font-size: 2.8rem;
            color: var(--accent-color);
            margin-bottom: 0.5rem;
        }
         .letter-closing p:last-child { /* "Your Friend" */
            font-family: 'Lato', sans-serif;
            font-size: 1.1rem;
            color: var(--text-dim);
            font-weight: 300;
        }

        /* GOATED Envelope Styles */
        .envelope-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
            transition: opacity 1s ease-out, transform 1s ease-out;
            position: relative;
        }

        .envelope {
            position: relative;
            width: 320px; 
            height: 210px;
            background-color: #404c64; /* Slightly more textured color */
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.05) inset;
            transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
            transform-style: preserve-3d; /* For 3D flap effect */
        }
        .envelope:hover {
            transform: scale(1.08) rotateY(5deg) rotateX(2deg); /* Subtle 3D hover */
            box-shadow: 0 15px 30px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08) inset;
        }

        .envelope-flap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 105px; /* Half height */
            background-image: linear-gradient(to bottom, #5c6a82, #4a5568); /* Gradient for depth */
            clip-path: polygon(0 0, 100% 0, 50% 98%); /* Sharper point */
            transform-origin: top center;
            transition: transform 1s cubic-bezier(0.68, -0.6, 0.32, 1.6); /* More dramatic open */
            z-index: 20;
            border-bottom: 1px solid rgba(0,0,0,0.2);
        }

        .envelope-body {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #404c64;
            border-radius: 0 0 12px 12px;
            overflow: hidden;
        }
        
        .envelope-seal {
            position: absolute;
            top: 85px; 
            left: 50%;
            transform: translateX(-50%) translateZ(5px); /* Slight Z for depth */
            width: 40px;
            height: 40px;
            background-color: var(--seal-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem; /* Larger emoji */
            color: #fff;
            font-weight: bold;
            z-index: 25;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3), 0 0 0 2px rgba(255,255,255,0.1) inset;
            transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.4s ease;
        }
        .envelope.opening .envelope-seal {
            transform: translateX(-50%) translateZ(5px) scale(0.2);
            opacity: 0;
        }

        .envelope.open .envelope-flap {
            transform: rotateX(-180deg) translateZ(1px); /* Flap opens back */
        }

        .letter-preview-in-envelope {
            position: absolute;
            bottom: 0;
            left: 5%;
            width: 90%;
            height: 90%; 
            background-color: #f0e6d2; /* Creamy paper color */
            border-radius: 8px 8px 0 0;
            box-shadow: inset 0 3px 6px rgba(0,0,0,0.15);
            transform: translateY(95%); /* Mostly hidden */
            transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.6s; /* Smoother, delayed slide */
            z-index: 5; 
            padding: 10px; /* Show some lines */
        }
        .letter-preview-in-envelope::before { /* Mock lines on paper */
            content: "";
            position: absolute;
            top: 20px; left: 10px; right: 10px; height: 1px; background: #ccc0ae;
            box-shadow: 0 10px 0 #ccc0ae, 0 20px 0 #ccc0ae, 0 30px 0 #ccc0ae, 0 40px 0 #ccc0ae;
        }

        .envelope.open .letter-preview-in-envelope {
            transform: translateY(-15px); /* Slides up more */
        }

        .open-prompt {
            margin-top: 2rem;
            color: var(--text-dim);
            font-style: italic;
            opacity: 1;
            transition: opacity 0.7s ease;
            font-size: 1rem;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        .open-prompt.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .hidden {
            display: none !important;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) { 
            .letter-header h1 { font-size: 2.5rem; }
            .letter-container { padding: 2.5rem 2rem; max-height: 75vh; }
            .poem-section::before { font-size: 1.5rem; left: -15px; top: -10px;}
        }
        @media (max-width: 640px) {
            .letter-container { padding: 2rem 1.5rem; margin-top: 2rem; max-height: 70vh;}
            .letter-header h1 { font-size: 2rem; }
            .letter-content p { font-size: 1rem; }
            .poem-section { padding-left: 1.5rem; }
            .envelope { width: 280px; height: 190px; }
            .envelope-flap { height: 95px; }
            .envelope-seal { top: 75px; width: 35px; height: 35px; font-size: 1.3rem;}
            .letter-closing p:first-child { font-size: 2.2rem; }
        }