*,
*::before,
*::after {
    transition-property: background-color;
    transition-duration: .2s;
    transition-timing-function: ease;
}

.fade {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

.fade.ng-hide {
    opacity: 0;
}



@keyframes header-expand {
    0% { max-width: 64px; }
    33% { max-width: 64px; }
}
.anim-header {
    animation: header-expand 3s ease forwards;
    overflow: hidden;
}

@keyframes ml32-animation {
    0% { margin-left: 0; }
    100% { margin-left: 32px; }
}
.ml32-anim {
    animation: ml32-animation 1s ease forwards;
}

@keyframes animation {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.anim {
    animation: animation 1s ease both;
}
.d05 { animation-delay: 0.5s }
.d1 { animation-delay: 1s }
.d15 { animation-delay: 1.5s }
.d2 { animation-delay: 2s }
.d25 { animation-delay: 2.5s }
.d3 { animation-delay: 3s }

.ripple:active {
    background-color: var(--gray100);
    transform: translateY(1px) scale(0.98);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mob-menu {
    max-height: 0;
    flex-shrink: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

.mob-menu.opened {
    max-height: 500px;
}