<div class="stack">
    <div class="header">
        <h2 class="header-title">Notifications</h2>
        <button class="header-close">Collapse</button>
    </div>
    <div class="notification" style="z-index: 3"></div>
    <div class="notification" style="z-index: 2"></div>
    <div class="notification" style="z-index: 1"></div>
</div>

<script>
    import { animate, press } from "https://cdn.jsdelivr.net/npm/motion@12.7.3/+esm"

    const N_NOTIFICATIONS = 3
    const NOTIFICATION_HEIGHT = 60
    const NOTIFICATION_WIDTH = 280
    const NOTIFICATION_GAP = 8

    // DOM elements
    const stack = document.querySelector(".stack")
    const header = document.querySelector(".header")
    const headerClose = document.querySelector(".header-close")
    const notifications = document.querySelectorAll(".notification")

    // State
    let isOpen = true

    // Stack animations
    const stackVariants = {
        open: {
            y: 20,
            scale: 0.9,
            cursor: "pointer",
        },
        closed: {
            y: 0,
            scale: 1,
            cursor: "default",
        },
    }

    // Header animations
    const headerVariants = {
        open: {
            y: 0,
            scale: 1,
            opacity: 1,
        },
        closed: {
            y: 60,
            scale: 0.8,
            opacity: 0,
        },
    }

    // Animation functions
    function animateStack(state) {
        animate(stack, stackVariants[state], {
            type: "spring",
            mass: 0.7,
        })
    }

    function animateHeader(state) {
        animate(header, headerVariants[state], {
            type: "spring",
            stiffness: 600,
            damping: 50,
            delay: state === "open" ? 0.2 : 0,
        })
    }

    function animateNotification(element, index, state) {
        const variants = {
            open: {
                y: 0,
                scale: 1,
                opacity: 1,
                pointerEvents: "auto",
                cursor: "pointer",
            },
            closed: {
                y:
                    -index * (NOTIFICATION_HEIGHT + NOTIFICATION_GAP) -
                    NOTIFICATION_GAP * index,
                scale: 1 - index * 0.1,
                opacity: 1 - index * 0.4,
                pointerEvents: index === 0 ? "auto" : "none",
                cursor: index === 0 ? "pointer" : "default",
            },
        }

        animate(element, variants[state], {
            type: "spring",
            stiffness: 600,
            damping: 50,
            delay: index * 0.04,
        })
    }

    // Event handlers
    function toggleStack() {
        isOpen = !isOpen
        const state = isOpen ? "open" : "closed"

        animateStack(state)
        animateHeader(state)
        notifications.forEach((notification, index) => {
            animateNotification(notification, index, state)
        })
    }

    press([...notifications, headerClose], () => {
        toggleStack()
    })
</script>

<style>
    .stack {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        will-change: transform;
        transform: translateY(20px) scale(0.9);
    }

    .header {
        position: absolute;
        top: -40px;
        left: 0;
        height: 28px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transform-origin: bottom center;
        pointer-events: none;
        will-change: transform, opacity;
    }

    .header-title {
        font-size: 18px;
        line-height: 1;
        margin-left: 8px;
    }

    .header-close {
        font-size: 14px;
        line-height: 1;
        margin-right: 8px;
        background-color: #1f1f1f;
        padding: 4px 12px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        cursor: pointer;
        pointer-events: auto;
        user-select: none;
    }

    .header-close:hover {
        background-color: #f5f5f5;
        color: #0f1115;
    }

    .header-close:focus-within {
        outline: 2px solid #f5f5f5;
        outline-offset: 2px;
    }

    .notification {
        height: 60px;
        width: 280px;
        background-color: #f5f5f5;
        border-radius: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        will-change: transform, opacity;
    }
</style>