/* CC-02b Wave 2 - extracted from FRONTEND/05_communication/push-notifications.html */
@keyframes bellRing {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(15deg); }
            75% { transform: rotate(-15deg); }
        }

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

        @keyframes notificationSlide {
            0% { transform: translateX(100%); opacity: 0; }
            10%, 90% { transform: translateX(0); opacity: 1; }
            100% { transform: translateX(100%); opacity: 0; }
        }

        .animate-slide-in {
            animation: slideIn 0.5s ease-out forwards;
        }

        .animate-bell-ring {
            animation: bellRing 1s ease-in-out;
        }

        .animate-notification-pulse {
            animation: notificationPulse 2s ease-in-out infinite;
        }

        .animate-notification-slide {
            animation: notificationSlide 4s ease-in-out infinite;
        }

        .notification-demo {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 0.75rem;
            padding: 1rem;
            color: white;
            margin-bottom: 0.5rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        .match-notification {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
        }

        .message-notification {
            background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
        }

        .profile-notification {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            color: #333;
        }

        .notification-preview {
            position: fixed;
            top: 1rem;
            right: 1rem;
            z-index: 1000;
            max-width: 20rem;
        }