:root {
            --primary-pink: #f472b6;
            --secondary-pink: #fbcfe8;
            --soft-bg: #fff1f2;
        }

        body {
            font-family: 'Times New Roman', Times, serif, 'Padauk', sans-serif;
            background-color: #ffe4e6;
            /* Pink Plaid Pattern Background */
            background-image: 
                linear-gradient(90deg, rgba(244, 114, 182, 0.15) 1px, transparent 1px),
                linear-gradient(rgba(244, 114, 182, 0.15) 1px, transparent 1px),
                linear-gradient(90deg, rgba(251, 207, 232, 0.4) 10px, transparent 10px),
                linear-gradient(rgba(251, 207, 232, 0.4) 10px, transparent 10px),
                linear-gradient(90deg, rgba(244, 114, 182, 0.25) 20px, transparent 20px),
                linear-gradient(rgba(244, 114, 182, 0.25) 20px, transparent 20px);
            background-size: 80px 80px, 80px 80px, 40px 40px, 40px 40px, 80px 80px, 80px 80px;
            background-position: -1px -1px;
            overflow-x: hidden;
            color: #831843;
        }

        
        .myanmar-text, p, span, h3, h2, h1, button, input {
            font-family: 'Padauk', 'Times New Roman', Times, serif !important;
        }

        .font-handwriting {
            font-family: 'Dancing Script', cursive, 'Padauk' !important;
        }

        .font-cursive {
            font-family: 'Great Vibes', cursive !important;
        }

        /* .font-playfair {
            font-family: "Playfair Display", serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
        } */

        /* Glassmorphism Styles - Pink Theme */
        .glass-card {
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(251, 207, 232, 0.9);
            box-shadow: 0 8px 32px 0 rgba(244, 114, 182, 0.2);
        }

        .glass-card-dark {
            background: rgba(255, 241, 242, 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(244, 114, 182, 0.4);
            box-shadow: 0 10px 40px 0 rgba(219, 39, 119, 0.2);
        }

        /* Heartbeat Animation */
        @keyframes heartbeat {
            0% { transform: scale(1); }
            14% { transform: scale(1.1); }
            28% { transform: scale(1); }
            42% { transform: scale(1.1); }
            70% { transform: scale(1); }
        }

        .animate-heartbeat {
            animation: heartbeat 2.5s infinite;
        }

        /* Floating Background Canvas */
        #heart-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        /* Falling Floating GIF Animation */
        @keyframes floatDown {
            0% {
                top: -120px;
                opacity: 0;
                transform: translateX(-50%) rotate(-10deg) scale(0.8);
            }
            20% { opacity: 1; }
            50% { transform: translateX(calc(-50% + 20px)) rotate(10deg) scale(1.05); }
            100% {
                top: 45vh;
                opacity: 1;
                transform: translateX(-50%) rotate(-5deg) scale(1);
            }
        }

        .falling-gif-anim {
            position: fixed;
            left: 50%;
            z-index: 1000;
            animation: floatDown 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
            cursor: pointer;
        }

        /* Click Heart Particle Effect */
        .click-heart {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            animation: popAndFade 1.2s ease-out forwards;
        }

        @keyframes popAndFade {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
            }
            50% {
                opacity: 0.9;
                transform: translate(-50%, -100px) scale(1.3) rotate(15deg);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -160px) scale(0.8) rotate(-15deg);
            }
        }

        /* STACKED POLAROID ALBUM STYLES */
        .polaroid-stack-container {
            position: relative;
            width: 100%;
            max-width: 380px;
            height: 480px;
            margin: 0 auto;
        }

        .polaroid-item {
            position: absolute;
            background: #ffffff;
            padding: 12px 12px 36px 12px;
            box-shadow: 0 10px 25px rgba(219, 39, 119, 0.2);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 210px;
            border: 1px solid #fbcfe8;
        }

        .polaroid-item:hover {
            transform: scale(1.05) rotate(0deg) !important;
            z-index: 50;
            box-shadow: 0 15px 35px rgba(244, 114, 182, 0.45);
        }

        .polaroid-item img {
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
            display: block;
            border: 1px solid #f472b6;
        }

        .polaroid-heart {
            position: absolute;
            bottom: 10px;
            right: 14px;
            font-size: 1.2rem;
            color: #db2777;
        }

        /* Positioning the 4 polaroids */
        .polaroid-1 {
            top: 40px;
            left: 10px;
            transform: rotate(-6deg);
            z-index: 1;
        }

        .polaroid-2 {
            top: 10px;
            right: 15px;
            transform: rotate(5deg);
            z-index: 2;
        }

        .polaroid-3 {
            top: 210px;
            left: 20px;
            transform: rotate(-4deg);
            z-index: 3;
        }

        .polaroid-4 {
            top: 200px;
            right: 15px;
            transform: rotate(4deg);
            z-index: 4;
        }

        /* Typing Effect Caret Cursor */
        .typing-cursor::after {
            content: '|';
            animation: blink 0.8s infinite;
            color: #ec4899;
            font-weight: bold;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* EMOJI HEART MATRIX STYLES */
        .heart-matrix-container {
            position: relative;
            width: 100%;
            max-width: 320px;
            margin: 0 auto 16px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 260px;
        }

        .heart-grid {
            display: grid;
            gap: 2px;
            justify-content: center;
            align-items: center;
        }

        .heart-emoji {
            font-size: 14px;
            line-height: 1;
            text-align: center;
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: inline-block;
            user-select: none;
        }

        .heart-emoji.visible {
            opacity: 1;
            transform: scale(1);
        }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #ffe4e6; }
        ::-webkit-scrollbar-thumb { background: #f472b6; border-radius: 8px; }