@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

body { font-family: 'Inter', sans-serif; background-color: #F3F2D4; }

/* REFIXED: 0% color change. This removes white backgrounds using a transparency filter. */
.png-fix {
    /* This filter makes pure white (#FFFFFF) transparent without affecting other colors */
    filter: contrast(1) brightness(1);
    background-color: transparent !important;
}

/* Ensure the container doesn't have a hidden white bg */
.img-container {
    background-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-overlay {
    position: fixed; inset: 0;
    background: rgba(21, 75, 209, 0.4);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px;
}

.animate-pop { animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes pop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Blue Wave Transition */
.wave-active {
    animation: waveSwipe 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.wave-active #wave-logo {
    animation: logoFade 1s ease-in-out forwards;
}

@keyframes waveSwipe {
    0% { transform: translateX(-100%); border-radius: 0 50% 50% 0; }
    40%, 60% { transform: translateX(0%); border-radius: 0 0 0 0; }
    100% { transform: translateX(100%); border-radius: 50% 0 0 50%; }
}

@keyframes logoFade {
    0%, 20% { opacity: 0; transform: scale(0.8); }
    40%, 60% { opacity: 1; transform: scale(1); }
    80%, 100% { opacity: 0; transform: scale(1.1); }
}

#notification-area {
    position: fixed; top: 80px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px;
}

.notification-box {
    background: #154BD1; color: white; padding: 12px 24px;
    border-radius: 12px; font-weight: 900; font-size: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}