/* ============================================================
           CUSTOM PROPERTIES & RESETS
           ============================================================ */


        /* ============================================================
           KEYFRAME ANIMATIONS
           ============================================================ */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.96);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        .animate-fade-in {
            animation: fadeIn 0.5s ease forwards;
        }

        .animate-slide-in-right {
            animation: slideInRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        /* ============================================================
           COMPONENT STYLES
           ============================================================ */

        /* ---------- Event Card ---------- */
        .event-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
            will-change: transform;
            opacity: 0;
            transform: translateY(30px);
        }

        .event-card.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .event-card:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.15),
                0 8px 24px -6px rgba(2, 132, 199, 0.08);
            border-color: rgba(2, 132, 199, 0.15);
        }

        /* ---------- Filter Buttons ---------- */
        .filter-btn {
            transition: all 0.25s ease;
            cursor: pointer;
            user-select: none;
        }

        .filter-btn.active-filter {
            background: var(--biotech-primary);
            color: white;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
            border-color: var(--biotech-primary);
        }

        .filter-btn:not(.active-filter):hover {
            border-color: var(--biotech-accent);
            color: var(--biotech-accent);
            transform: translateY(-2px);
        }

        /* ---------- Modal ---------- */
        .modal-transition {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .modal-transition.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-transition .modal-content {
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
            transform: scale(0.92);
            opacity: 0;
        }

        .modal-transition.active .modal-content {
            transform: scale(1);
            opacity: 1;
        }

        /* ---------- Chat Widget ---------- */
        .chat-bubble.support {
            background: var(--biotech-primary);
            color: white;
            border-radius: 1rem 1rem 1rem 0.25rem;
            padding: 0.75rem 1rem;
            max-width: 85%;
            width: fit-content;
        }

        .chat-bubble.user {
            background: #e2e8f0;
            color: #1e293b;
            border-radius: 1rem 1rem 0.25rem 1rem;
            padding: 0.75rem 1rem;
            max-width: 85%;
            width: fit-content;
            margin-left: auto;
        }

        /* ---------- Scroll Reveal (Observer) ---------- */
        .reveal {
            opacity: 0;
            transform: translateY(30px) scale(0.96);
            transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* ---------- Utilities ---------- */
        .bg-biotech-primary {
            background-color: var(--biotech-primary);
        }
        .bg-biotech-accent {
            background-color: var(--biotech-accent);
        }
        .bg-biotech-glow\/20 {
            background-color: rgba(190, 210, 219, 0.2);
        }
        .bg-biotech-primary\/5 {
            background-color: rgba(15, 23, 42, 0.05);
        }
        .text-biotech-primary {
            color: var(--biotech-primary);
        }
        .text-biotech-accent {
            color: var(--biotech-accent);
        }
        .border-biotech-accent\/20 {
            border-color: rgba(2, 132, 199, 0.2);
        }
        .hover\:bg-biotech-accent\/10:hover {
            background-color: rgba(2, 132, 199, 0.1);
        }
        .hover\:bg-biotech-primary:hover {
            background-color: var(--biotech-primary);
        }
        .shadow-biotech-primary\/20 {
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
        }
        .gradient-bg {
            background: linear-gradient(135deg, var(--biotech-primary), var(--biotech-accent));
        }

        /* ---------- Responsive tweaks ---------- */
        @media (max-width: 640px) {
            .event-card {
                backdrop-filter: none;
            }
        }