/* MwRollPanel — anchored toolbar popover shell with a roll-down/roll-up (window-blind) animation.
   Prefix: mw-roll-*
   Geometry (position, size, chrome) stays in the HOST's own pop class; these rules only add the
   reveal/collapse motion. The clip-path inset rolls the panel open from its top edge without
   distorting content (no scaleY squish); a slight translate + fade rounds it off. */

.mw-roll {
    transform-origin: top center;
}

.mw-roll--down {
    animation: mw-roll-down 0.24s cubic-bezier(0.3, 0.7, 0.2, 1);
}

/* NOTE: `forwards` holds the rolled-up end state while the host's delayed unmount runs;
   pointer-events off so the collapsing panel can't swallow clicks. */
.mw-roll--up {
    animation: mw-roll-up 0.2s ease-in forwards;
    pointer-events: none;
}

/* NOTE: Eager mode parks the closed panel here — hidden but still laid out (visibility, not
   display:none, so embedded components that measure themselves via JS keep real geometry).
   `animation: none` resets the element so reopening restarts mw-roll-down from frame one. */
.mw-roll--closed {
    visibility: hidden;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    animation: none;
}

@keyframes mw-roll-down {
    from {
        clip-path: inset(0 0 100% 0);
        transform: translateY(-10px);
        opacity: 0.35;
    }
    to {
        clip-path: inset(0 0 -40px 0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes mw-roll-up {
    from {
        clip-path: inset(0 0 -40px 0);
        transform: translateY(0);
        opacity: 1;
    }
    to {
        clip-path: inset(0 0 100% 0);
        transform: translateY(-10px);
        opacity: 0.3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mw-roll--down,
    .mw-roll--up { animation-duration: 0.01ms !important; }
}