* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body, html {
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
            font-family: 'Juliette Pluto', 'Arial Black', 'Helvetica Neue', sans-serif;
        }

        /* Font Face: Juliette Pluto (simulated with high impact cursive + fallback) */
        @font-face {
            font-family: 'Juliette Pluto';
            src: local('Juliette Pluto'), local('Pluto'), local('Brush Script MT');
            font-weight: bold;
            font-style: normal;
        }

        /* Canvas background (particles & floating texts) */
        #canvas-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 1;
            filter: blur(0.6px);
        }

        /* overlay for dynamic elements: glowing text, hearts, photo frames */
        .dynamic-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
            overflow: hidden;
        }

        /* --- RED GLOWING TEXT ANIMATION (first wave, before photos) --- */
        .glowing-text-red {
            position: absolute;
            font-family: 'Juliette Pluto', 'Arial Black', cursive;
            font-weight: 900;
            text-transform: lowercase;
            color: #ff1a4f;
            text-shadow: 0 0 8px #ff3b6f, 0 0 18px #ff0a3c, 0 0 28px #ff0a3c;
            white-space: nowrap;
            opacity: 0;
            z-index: 5;
            animation: floatRedText 5.2s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
            pointer-events: none;
            letter-spacing: 2px;
        }

        @keyframes floatRedText {
            0% {
                opacity: 0;
                transform: scale(0.4) rotate(-12deg) translateY(30px);
                filter: blur(2px);
            }
            15% {
                opacity: 1;
                transform: scale(1.05) rotate(2deg) translateY(0);
                filter: blur(0);
            }
            75% {
                opacity: 1;
                transform: scale(1.02) rotate(-1deg) translateY(-8px);
                filter: blur(0);
            }
            100% {
                opacity: 0;
                transform: scale(1.3) rotate(6deg) translateY(-40px);
                filter: blur(3px);
            }
        }

        /* --- BLUE GLOWING TEXT (after photos start, alternating or final style) --- */
        .glowing-text-blue {
            position: absolute;
            font-family: 'Juliette Pluto', 'Arial Black', cursive;
            font-weight: 900;
            text-transform: lowercase;
            color: #3a86ff;
            text-shadow: 0 0 8px #5e9bff, 0 0 20px #1e5eff, 0 0 30px #0055ff;
            white-space: nowrap;
            opacity: 0;
            z-index: 5;
            animation: floatBlueText 5.5s ease-out forwards;
            pointer-events: none;
            letter-spacing: 2px;
        }

        @keyframes floatBlueText {
            0% {
                opacity: 0;
                transform: scale(0.5) rotate(8deg) translateY(20px);
            }
            20% {
                opacity: 1;
                transform: scale(1.08) rotate(-3deg);
            }
        80% {
                opacity: 1;
                transform: scale(1.0) rotate(2deg) translateY(-10px);
            }
            100% {
                opacity: 0;
                transform: scale(1.25) rotate(-5deg) translateY(-45px);
            }
        }

        /* Hearts (red & white outline) */
        .heart-svg {
            position: absolute;
            pointer-events: none;
            z-index: 3;
            filter: drop-shadow(0 0 5px rgba(255,45,85,0.6));
        }

        .heart-white path {
            fill: none;
            stroke: #ffffff;
            stroke-width: 2.2;
            filter: drop-shadow(0 0 6px #fff);
        }

        .heart-red path {
            fill: #ff2d55;
            stroke: none;
            filter: drop-shadow(0 0 12px #ff2d55);
        }

        /* PHOTO FRAMES - muncul setelah jeda 2.5 detik global */
        .photo-frame {
            position: absolute;
            width: 150px;
            height: 200px;
            background: rgba(20, 20, 30, 0.8);
            border: 3px solid rgba(255,255,240,0.95);
            border-radius: 12px;
            box-shadow: 0 0 25px rgba(255,255,200,0.4), 0 8px 20px rgba(0,0,0,0.5);
            z-index: 6;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            opacity: 0;
            transform: scale(0.85) translateY(30px) rotate(-3deg);
            transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.2);
            backdrop-filter: blur(2px);
            pointer-events: none;
        }

        .photo-frame.show {
            opacity: 1;
            transform: scale(1) translateY(0) rotate(0deg);
        }

        .photo-frame.hide {
            opacity: 0;
            transform: scale(0.9) translateY(-20px) rotate(2deg);
        }

        .photo-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        /* vignette + film grain effect */
        .vignette-grain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, transparent 35%, rgba(0,0,0,0.75) 100%);
            z-index: 12;
            pointer-events: none;
        }

        /* additional tiny scanline */
        .scanlines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px);
            pointer-events: none;
            z-index: 13;
        }

        /* responsive font size for text spawn */
        @media (max-width: 600px) {
            .glowing-text-red, .glowing-text-blue { font-size: 32px !important; white-space: nowrap; }
            .photo-frame { width: 120px; height: 160px; }
        }