50%      { box-shadow: 0 0 0 6px rgba(0,200,255,0.12); }
        }


        /* ════════════════════════════════════════════════════════════
           MODAL ANIMATIONS
           ════════════════════════════════════════════════════════════ */
        .modal-overlay {
            animation: overlayFadeIn .20s ease;
            will-change: opacity;
        }
        .modal {
            animation: modalSlideUp .42s cubic-bezier(0.32,0.72,0,1);
            will-change: transform, opacity;
        }
        /* Close */
        .modal-overlay.anim-closing        { animation: overlayFadeOut .28s cubic-bezier(.4,0,1,1) forwards !important; }
        .modal-overlay.anim-closing .modal { animation: modalSlideDown .28s cubic-bezier(.4,0,1,1) forwards !important; }


        /* ════════════════════════════════════════════════════════════
           LIGHTBOX ANIMATIONS
           ════════════════════════════════════════════════════════════ */
        .lightbox-overlay {
            animation: lightboxBgIn .24s ease;
            will-change: opacity;
        }
        .lightbox-img {
            animation: lightboxImgIn .38s cubic-bezier(0.32,0.72,0,1);
            will-change: transform, opacity;
        }
        /* Close */
        .lightbox-overlay.anim-closing              { animation: lightboxBgOut .20s ease forwards !important; }
        .lightbox-overlay.anim-closing .lightbox-img { animation: lightboxImgOut .18s cubic-bezier(.4,0,1,1) forwards !important; }


        /* ════════════════════════════════════════════════════════════
           PAGE TRANSITION
           ════════════════════════════════════════════════════════════ */
        .page-enter {
            animation: pageEnter .32s cubic-bezier(0.2,0,0,1);
            will-change: transform, opacity;
        }


        /* ════════════════════════════════════════════════════════════
           TOAST
           ════════════════════════════════════════════════════════════ */
        .toast      { animation: toastBounce .44s cubic-bezier(0.32,0.72,0,1) !important; will-change: transform, opacity; }
        .toast-exit { animation: toastOut    .24s cubic-bezier(.4,0,1,1) forwards !important; }


        /* ════════════════════════════════════════════════════════════
           PHOTO THUMBNAILS — stagger by nth-child
           ════════════════════════════════════════════════════════════ */
        .photo-thumbnail {
            animation: photoSlideIn .30s ease both;
        }
        .photo-thumbnail img { display: block; }
        .photo-thumbnail:nth-child(2) { animation-delay: .04s; }
        .photo-thumbnail:nth-child(3) { animation-delay: .08s; }
        .photo-thumbnail:nth-child(4) { animation-delay: .12s; }
        .photo-thumbnail:nth-child(5) { animation-delay: .16s; }
        .photo-thumbnail:nth-child(n+6) { animation-delay: .20s; }


        /* ════════════════════════════════════════════════════════════
           KANBAN CARDS — stagger appear
           ════════════════════════════════════════════════════════════ */
        .page-enter .card {
            animation: cardStagger .34s cubic-bezier(0.2,0,0,1) both;
        }
        .page-enter .kanban-cards .card:nth-child(1) { animation-delay: .03s; }
        .page-enter .kanban-cards .card:nth-child(2) { animation-delay: .07s; }
        .page-enter .kanban-cards .card:nth-child(3) { animation-delay: .11s; }
        .page-enter .kanban-cards .card:nth-child(4) { animation-delay: .15s; }
        .page-enter .kanban-cards .card:nth-child(5) { animation-delay: .19s; }
        .page-enter .kanban-cards .card:nth-child(n+6) { animation-delay: .23s; }


        /* ════════════════════════════════════════════════════════════
           CHAT BUBBLES — new messages slide up
           ════════════════════════════════════════════════════════════ */
        .chat-bubble {
            animation: chatBubbleIn .30s cubic-bezier(0.2,0,0,1) both;
        }


        /* ════════════════════════════════════════════════════════════
           NOTIFICATION PANEL + ITEMS
           ════════════════════════════════════════════════════════════ */
        .notification-panel {
            animation: notifPanelIn .22s cubic-bezier(0.2,0,0,1) both;
            transform-origin: top right;
        }
        .notification-item {
            animation: notifSlideIn .26s cubic-bezier(0.2,0,0,1) both;
        }
        .notification-item:nth-child(2) { animation-delay: .04s; }
        .notification-item:nth-child(3) { animation-delay: .08s; }
        .notification-item:nth-child(4) { animation-delay: .12s; }


        /* ════════════════════════════════════════════════════════════
           LOGIN CARD
           ════════════════════════════════════════════════════════════ */
        .login-card { animation: loginCardIn .48s cubic-bezier(0.32,0.72,0,1); will-change: transform, opacity; }


        /* ════════════════════════════════════════════════════════════
           TAP / ACTIVE STATES — GPU-only (transform + opacity)
           ════════════════════════════════════════════════════════════ */
        .btn-primary:active    { transform:scale(0.93) !important; transition:transform .09s ease !important; }
        .btn-secondary:active  { transform:scale(0.93) !important; transition:transform .09s ease !important; }
        .btn-danger:active     { transform:scale(0.93) !important; transition:transform .09s ease !important; }
        .btn-yandex:active     { transform:scale(0.93) !important; transition:transform .09s ease !important; }
        .status-action-btn:active { transform:scale(0.91) !important; transition:transform .09s ease !important; }
        .card:active           { transform:scale(0.968) !important; transition:transform .11s ease !important; }
        .sidebar-item:active   { transform:scale(0.95)  !important; transition:transform .09s ease !important; }
        .filter-chip:active    { transform:scale(0.88)  !important; transition:transform .09s ease !important; }
        .quick-link-btn:active { transform:scale(0.84)  !important; transition:transform .09s ease !important; }
        .pay-method-card:active { transform:scale(0.95) !important; transition:transform .10s ease !important; }
        .chat-tab:active       { transform:scale(0.96)  !important; transition:transform .09s ease !important; }
        .notification-bell:active { transform:scale(0.88) rotate(-12deg) !important; transition:transform .12s ease !important; }
        .photo-thumbnail:active { transform:scale(0.94) !important; transition:transform .09s ease !important; }
        .kanban-card:active    { transform:scale(0.97)  !important; transition:transform .10s ease !important; }
        /* Accent pulse for notification bell on ring */
        .notification-bell.has-notif { animation: accentPulse 2.2s ease infinite; }


        /* ════════════════════════════════════════════════════════════
           SMOOTH TRANSITIONS (hover → active)
           ════════════════════════════════════════════════════════════ */
        .btn-primary, .btn-secondary, .btn-danger, .btn-yandex,
        .status-action-btn, .filter-chip, .quick-link-btn,
        .pay-method-card, .photo-thumbnail, .kanban-card {
            transition: transform .18s cubic-bezier(0.2,0,0,1),
                        box-shadow .18s ease,
                        border-color .18s ease;
        }
        /* Don't fight with hover animations on desktop */
        @media (hover: none) {
            .card:hover { transform:none !important; }
            .btn-primary:hover { transform:none !important; }
        }


        /* ════════════════════════════════════════════════════════════
           WILL-CHANGE HINTS
           ════════════════════════════════════════════════════════════ */
        .chat-sidebar, .sidebar { will-change: transform; }
        .modal-overlay, .modal, .lightbox-overlay, .lightbox-img { will-change: transform, opacity; }