/* Floating Hearts and Emojis for Cinematic Modal */
.cinematic-floating-hearts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.floating-emoji {
    position: absolute;
    font-size: 2rem;
    opacity: 0.7;
    pointer-events: none;
}

/* Heart Animations */
.floating-emoji.heart-1 { 
    top: 10%; left: 15%; 
    animation: floatHeart1 8s ease-in-out infinite;
}

.floating-emoji.heart-2 { 
    top: 25%; right: 10%; 
    animation: floatHeart2 10s ease-in-out infinite;
}

.floating-emoji.heart-3 { 
    bottom: 30%; left: 8%; 
    animation: floatHeart3 12s ease-in-out infinite;
}

.floating-emoji.heart-4 { 
    top: 40%; left: 50%; 
    animation: floatHeart4 9s ease-in-out infinite;
}

.floating-emoji.heart-5 { 
    bottom: 15%; right: 20%; 
    animation: floatHeart5 11s ease-in-out infinite;
}

.floating-emoji.heart-6 { 
    top: 60%; left: 25%; 
    animation: floatHeart6 14s ease-in-out infinite;
}

.floating-emoji.heart-7 { 
    top: 80%; right: 35%; 
    animation: floatHeart7 7s ease-in-out infinite;
}

.floating-emoji.heart-8 { 
    top: 15%; left: 70%; 
    animation: floatHeart8 13s ease-in-out infinite;
}

.floating-emoji.heart-9 { 
    bottom: 50%; right: 5%; 
    animation: floatHeart9 10s ease-in-out infinite;
}

.floating-emoji.heart-10 { 
    top: 70%; left: 80%; 
    animation: floatHeart10 9s ease-in-out infinite;
}

/* Sparkle Animations */
.floating-emoji.sparkle-1 { 
    top: 20%; right: 25%; 
    animation: sparkleRotate1 6s linear infinite;
}

.floating-emoji.sparkle-2 { 
    bottom: 40%; left: 30%; 
    animation: sparkleRotate2 8s linear infinite;
}

.floating-emoji.sparkle-3 { 
    top: 50%; right: 15%; 
    animation: sparkleRotate3 5s linear infinite;
}

.floating-emoji.sparkle-4 { 
    bottom: 20%; left: 60%; 
    animation: sparkleRotate4 7s linear infinite;
}

/* Rose Animations */
.floating-emoji.rose-1 { 
    top: 35%; left: 10%; 
    animation: gentleSway1 15s ease-in-out infinite;
}

.floating-emoji.rose-2 { 
    bottom: 25%; right: 30%; 
    animation: gentleSway2 12s ease-in-out infinite;
}

/* Butterfly Animations */
.floating-emoji.butterfly-1 { 
    top: 30%; left: 40%; 
    animation: butterflyFly1 18s ease-in-out infinite;
}

.floating-emoji.butterfly-2 { 
    bottom: 45%; right: 40%; 
    animation: butterflyFly2 16s ease-in-out infinite;
}

/* Heart Animation Keyframes */
@keyframes floatHeart1 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    25% { transform: translateY(-20px) rotate(5deg) scale(1.1); }
    50% { transform: translateY(-10px) rotate(-3deg) scale(0.9); }
    75% { transform: translateY(-25px) rotate(8deg) scale(1.2); }
}

@keyframes floatHeart2 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    33% { transform: translateY(-15px) rotate(-5deg) scale(1.1); }
    66% { transform: translateY(-30px) rotate(7deg) scale(0.8); }
}

@keyframes floatHeart3 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(-35px) rotate(-10deg) scale(1.3); }
}

@keyframes floatHeart4 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    25% { transform: translateY(-10px) rotate(3deg) scale(0.9); }
    50% { transform: translateY(-20px) rotate(-6deg) scale(1.1); }
    75% { transform: translateY(-5px) rotate(4deg) scale(1.2); }
}

@keyframes floatHeart5 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    40% { transform: translateY(-25px) rotate(8deg) scale(1.1); }
    80% { transform: translateY(-15px) rotate(-4deg) scale(0.9); }
}

@keyframes floatHeart6 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.7; }
    30% { transform: translateY(-20px) rotate(-7deg) scale(1.2); opacity: 0.9; }
    70% { transform: translateY(-40px) rotate(5deg) scale(0.8); opacity: 0.5; }
}

@keyframes floatHeart7 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    20% { transform: translateY(-15px) rotate(6deg) scale(1.1); }
    60% { transform: translateY(-30px) rotate(-8deg) scale(0.9); }
}

@keyframes floatHeart8 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    35% { transform: translateY(-18px) rotate(-5deg) scale(1.2); }
    70% { transform: translateY(-8px) rotate(9deg) scale(0.8); }
}

@keyframes floatHeart9 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    45% { transform: translateY(-22px) rotate(7deg) scale(1.1); }
    90% { transform: translateY(-12px) rotate(-3deg) scale(1.3); }
}

@keyframes floatHeart10 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(-28px) rotate(-9deg) scale(1.1); }
}

/* Sparkle Animation Keyframes */
@keyframes sparkleRotate1 {
    0% { transform: rotate(0deg) scale(1); opacity: 0.6; }
    25% { transform: rotate(90deg) scale(1.3); opacity: 1; }
    50% { transform: rotate(180deg) scale(0.8); opacity: 0.7; }
    75% { transform: rotate(270deg) scale(1.1); opacity: 0.9; }
    100% { transform: rotate(360deg) scale(1); opacity: 0.6; }
}

@keyframes sparkleRotate2 {
    0% { transform: rotate(0deg) scale(1); opacity: 0.5; }
    33% { transform: rotate(120deg) scale(1.4); opacity: 1; }
    66% { transform: rotate(240deg) scale(0.7); opacity: 0.8; }
    100% { transform: rotate(360deg) scale(1); opacity: 0.5; }
}

@keyframes sparkleRotate3 {
    0% { transform: rotate(0deg) scale(1); opacity: 0.7; }
    50% { transform: rotate(180deg) scale(1.5); opacity: 0.3; }
    100% { transform: rotate(360deg) scale(1); opacity: 0.7; }
}

@keyframes sparkleRotate4 {
    0% { transform: rotate(0deg) scale(1); opacity: 0.6; }
    40% { transform: rotate(144deg) scale(1.2); opacity: 1; }
    80% { transform: rotate(288deg) scale(0.9); opacity: 0.4; }
    100% { transform: rotate(360deg) scale(1); opacity: 0.6; }
}

/* Rose Sway Animations */
@keyframes gentleSway1 {
    0%, 100% { transform: rotate(-2deg) scale(1); }
    25% { transform: rotate(3deg) scale(1.05); }
    50% { transform: rotate(-1deg) scale(1.1); }
    75% { transform: rotate(4deg) scale(0.95); }
}

@keyframes gentleSway2 {
    0%, 100% { transform: rotate(1deg) scale(1); }
    33% { transform: rotate(-4deg) scale(1.1); }
    66% { transform: rotate(2deg) scale(0.9); }
}

/* Butterfly Flight Animations */
@keyframes butterflyFly1 {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    10% { transform: translate(20px, -10px) rotate(15deg) scale(1.1); }
    25% { transform: translate(-15px, -25px) rotate(-10deg) scale(0.9); }
    40% { transform: translate(30px, -5px) rotate(20deg) scale(1.2); }
    55% { transform: translate(-10px, -30px) rotate(-15deg) scale(0.8); }
    70% { transform: translate(25px, -15px) rotate(10deg) scale(1.1); }
    85% { transform: translate(-5px, -20px) rotate(-5deg) scale(1); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes butterflyFly2 {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    15% { transform: translate(-25px, -15px) rotate(-20deg) scale(1.1); }
    30% { transform: translate(20px, -30px) rotate(10deg) scale(0.9); }
    45% { transform: translate(-10px, -10px) rotate(-25deg) scale(1.3); }
    60% { transform: translate(35px, -20px) rotate(15deg) scale(0.7); }
    75% { transform: translate(-20px, -35px) rotate(-10deg) scale(1.1); }
    90% { transform: translate(10px, -5px) rotate(5deg) scale(1); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .floating-emoji {
        font-size: 1.5rem;
    }
    
    /* Adjust positions for mobile */
    .floating-emoji.heart-1 { top: 15%; left: 10%; }
    .floating-emoji.heart-2 { top: 25%; right: 5%; }
    .floating-emoji.butterfly-1 { top: 35%; left: 30%; }
    .floating-emoji.butterfly-2 { bottom: 40%; right: 30%; }
}

@media (max-width: 480px) {
    .floating-emoji {
        font-size: 1.2rem;
        opacity: 0.5;
    }
}