@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Lora:ital,wght@0,400;0,700;1,400&family=Great+Vibes&display=swap');

* { box-sizing: border-box; } /* Mencegah elemen keluar layar */

body {
    margin: 0; padding: 0; display: flex; justify-content: center; align-items: center;
    min-height: 100vh; background: linear-gradient(-45deg, #1a0b14, #4a1525, #2d0f18, #4a1525);
    background-size: 400% 400%; animation: gradientBG 15s ease infinite;
    font-family: 'Lora', serif; overflow: hidden; 
}

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

.petals-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; overflow: hidden; }
.petal { position: absolute; background-size: contain; background-repeat: no-repeat; opacity: 0.8; animation: petalFall linear infinite; }
@keyframes petalFall { 0% { transform: translateY(-100px) rotateX(0deg) rotateY(0deg); } 100% { transform: translateY(110vh) rotateX(360deg) rotateY(360deg); } }
.firefly { position: absolute; border-radius: 50%; background-color: #ffd700; box-shadow: 0 0 10px #ffd700, 0 0 20px #ffdf00; animation: floatUp ease-in infinite, blinkBg ease-in alternate infinite; pointer-events: none; z-index: 0; }
@keyframes floatUp { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-20vh) scale(1.5); opacity: 0; } }
@keyframes blinkBg { 0% { opacity: 0.3; } 100% { opacity: 1; } }