html {
    --transition-duration: 300ms;
    --transition-timing-function: cubic-bezier( 0.68, -0.55, 0.27, 1.55 );
    transition-behavior: allow-discrete;
}

/* Navigation animations */
.menu-item__chevron svg {
	transition-property: rotate;
	transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
}

/* Submenu animations */
.sub-menu[open] {
    opacity: 1;
    block-size: auto;
    transform: scale(1);
}
.sub-menu {
    opacity: 0;
    block-size: 0;
    transform: scale(0.9);

    transition-property: all;
    transition-duration: var(--transition-duration);
    transition-behavior: allow-discrete;
    transition-timing-function: var(--transition-timing-function);
}
@starting-style {
    .sub-menu[open] {
        opacity: 0;
        block-size: 0;
        transform: scale(0.9);
    }
}

/* Dialog animations */
dialog:open {
    opacity: 1;
    transform: scale(1);
}
dialog {
    opacity: 0;
    transform: scale(0.9);

    transition-property: all;
    transition-duration: var(--transition-duration);
    transition-behavior: allow-discrete;
    transition-timing-function: var(--transition-timing-function);
}
@starting-style {
    dialog:open {
        opacity: 0;
        transform: scale(0.9);
    }
}