/* ==========================================================================
           [SEC:CSS:MOTION]
           Motion Design Utilities — Spring-like entrances, stagger animations,
           and micro-interaction feedback patterns.
           Philosophy: Performant (only transform/opacity), purposeful, consistent.
           ========================================================================== */

        /* --- Keyframes --- */

        /* Modal container: pops in from slightly below with a gentle scale punch */
        @keyframes modalEnter {
            0% {
                opacity: 0;
                transform: translateY(16px) scale(0.97);
            }

            60% {
                opacity: 1;
                transform: translateY(-3px) scale(1.005);
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Staggered children: fade + rise from 16px below */
        @keyframes fadeRise {
            0% {
                opacity: 0;
                transform: translateY(16px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Overlay backdrop fade-in */
        @keyframes overlayFadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* --- Animation Classes --- */

        /* Applied to the modal content box itself */
        .animate-modal-enter {
            animation: modalEnter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        /* Applied to staggered children within the modal */
        .animate-fade-rise {
            animation: fadeRise 0.4s cubic-bezier(0.25, 1, 0.5, 1) both;
            animation-fill-mode: both;
        }

        /* Animated modal overlay backdrop */
        .animate-overlay {
            animation: overlayFadeIn 0.25s ease both;
        }

        /* --- Micro-interaction: Snappy button press feedback --- */
        /* Scale up on hover, scale down on active (mimics whileHover + whileTap) */
        .micro-hover {
            transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.15s ease,
                background-color 0.15s ease;
            will-change: transform;
        }

        .micro-hover:hover {
            transform: scale(1.06);
        }

        .micro-hover:active {
            transform: scale(0.93);
        }

        /* --- Card hover: Lift effect for portrait and roster cards --- */
        /* Subtle upward float + shadow (mimics whileHover y:-4) */
        .card-hover {
            transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.22s ease;
            will-change: transform;
        }

        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(99, 102, 241, 0.25);
        }

        /* --- Details section: smooth height expand on open --- */
        details.motion-details>div {
            overflow: hidden;
            animation: fadeRise 0.3s cubic-bezier(0.25, 1, 0.5, 1) both;
        }