html {
    color-scheme: light only;
    background-color: #f8fbff;
    filter: none !important;
    -webkit-filter: none !important;
}

body {
    /* background-color: #f8fbff; */
    /* Soft polka dot background */
    /* background-image: radial-gradient(#c6e2ff 15%, transparent 10%), radial-gradient(#c6e2ff 15%, transparent 10%);
    background-position: 0 0, 20px 20px;
    background-size: 40px 40px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    filter: none !important;
    -webkit-filter: none !important; */
        background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(253,240,213,0.8) 100%);
    backdrop-filter: blur(10px);
}

/* Floating Animations */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float-reverse {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(-3deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes drift {
    0% { transform: translateX(0px); }
    50% { transform: translateX(15px); }
    100% { transform: translateX(0px); }
}

@keyframes pulse-soft {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-reverse 5s ease-in-out infinite;
    animation-delay: 1s;
}

.animate-drift {
    animation: drift 6s ease-in-out infinite;
}

.animate-drift-slow {
    animation: drift 8s ease-in-out infinite;
    animation-delay: 2s;
}

.animate-bounce-soft {
    animation: pulse-soft 2s ease-in-out infinite;
}

/* Cute Photo Frame */
.photo-frame {
    border: 6px solid #ffffff;
    box-shadow: 0 10px 25px rgba(162, 210, 255, 0.4);
    position: relative;
}

.photo-frame::after {
    content: '👑';
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 2rem;
    transform: rotate(15deg);
    animation: float 3s ease-in-out infinite;
}

/* Card Container Polish */
.card-container {
    /* background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(253,240,213,0.8) 100%);
    backdrop-filter: blur(10px); */
      background-color: #f8fbff;
    /* Soft polka dot background */
    background-image: radial-gradient(#c6e2ff 15%, transparent 10%), radial-gradient(#c6e2ff 15%, transparent 10%);
    background-position: 0 0, 20px 20px;
    background-size: 40px 40px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    filter: none !important;
    -webkit-filter: none !important;
}

.rsvp-modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.rsvp-modal .modal-card {
    transform: translateY(10px) scale(0.96);
    transition: transform 220ms ease;
}

.rsvp-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.rsvp-modal.open .modal-card {
    transform: translateY(0) scale(1);
}

@keyframes particle-pop {
    0% {
        transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg) scale(1);
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        transform: translate(-50%, -50%) translate3d(var(--dx), var(--dy), 0) rotate(var(--r)) scale(var(--s));
        opacity: 0;
        filter: blur(0.6px);
    }
}

.particle {
    position: absolute;
    animation: particle-pop 2000ms cubic-bezier(0.15, 0.8, 0.2, 1) forwards;
    will-change: transform, opacity;
}

@keyframes confetti-fall {
    0% {
        transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) translate3d(var(--dx), var(--dy), 0) rotate(var(--r)) scale(var(--s));
        opacity: 0;
    }
}

.confetti {
    position: absolute;
    animation: confetti-fall 4200ms linear forwards;
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .animate-float,
    .animate-float-delayed,
    .animate-drift,
    .animate-drift-slow,
    .animate-bounce-soft,
    .particle,
    .confetti {
        animation: none !important;
    }

    .rsvp-modal,
    .rsvp-modal .modal-card {
        transition: none !important;
    }
}

@media (prefers-color-scheme: dark) {
    html {
        color-scheme: light only;
        background-color: #f8fbff !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    body {
        background-color: #f8fbff !important;
        color: #4a4e69 !important;
        filter: none !important;
        -webkit-filter: none !important;
    }
}