.js-motion [data-motion] {
opacity: 0;
transform: translate3d(0, 14px, 0);
transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
.js-motion [data-motion].is-revealed {
opacity: 1;
transform: none;
will-change: auto;
} .js-motion [data-motion][style*="--motion-delay"] {
transition-delay: var(--motion-delay, 0ms);
} .btn {
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease,
border-color 0.18s ease, color 0.18s ease;
}
.btn:not(.btn-disabled):hover {
transform: translateY(-1px);
}
.btn:not(.btn-disabled):active {
transform: translateY(0);
} .navbar-menu-link {
position: relative;
}
@media (min-width: 769px) {
.navbar-menu-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.navbar-menu-item:hover > .navbar-menu-link::after,
.navbar-menu-link:focus-visible::after {
transform: scaleX(1);
}
}
@media (prefers-reduced-motion: reduce) {
.js-motion [data-motion],
.js-motion [data-motion].is-revealed {
opacity: 1;
transform: none;
transition: none;
}
.btn,
.navbar-menu-link::after {
transition: none;
}
.btn:not(.btn-disabled):hover {
transform: none;
}
}