/* Motion only, 2026-10-30. No colour, background, font or texture rules belong in this file. */
:root { --ml-ease: cubic-bezier(.22, .8, .2, 1); }

/* The black cover hid the page on every section change; the old page now stays until the new one is ready. */
html#html body.of-body .minely-navigation-cover, .pace, .pace-activity, .pace-progress { display: none !important; }
html#html body.of-body .minely-page-loading { opacity: 1 !important; }
/* The thin loading line appears only if a page is really slow. */
html.minely-navigating::before { transition-delay: .18s, .18s; }

/* These entrances started at parse time and were cut a frame later, which read as a flash. */
html body .of-shell, html body .of-shell > *, html body .of-main > div.flex-1 { animation: none !important; }

/* Full page loads cross-fade. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ml-fade-out .3s ease both; }
::view-transition-new(root) { animation: ml-fade-in .42s var(--ml-ease) both; }
@keyframes ml-fade-out { to { opacity: 0; } }
@keyframes ml-fade-in { from { opacity: 0; } }
@keyframes ml-section-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ml-dialog { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* Section changes: only the content area cross-fades, the sidebar and header stay still. Nothing goes blank. */
html.ml-section-change .of-main { view-transition-name: ml-section; }
html.ml-section-change #ml-companion { view-transition-name: ml-companion; }
html.ml-section-change::view-transition { pointer-events: none; }
html.ml-section-change::view-transition-group(ml-companion),
html.ml-section-change::view-transition-old(ml-companion),
html.ml-section-change::view-transition-new(ml-companion) { animation: none; }
html.ml-section-change::view-transition-old(ml-companion) { display: none; }
html.ml-section-change:not(.ml-shell-change)::view-transition-group(root),
html.ml-section-change:not(.ml-shell-change)::view-transition-new(root) { animation: none; }
html.ml-section-change:not(.ml-shell-change)::view-transition-old(root) { display: none; }
html.ml-shell-change::view-transition-old(root),
html.ml-shell-change::view-transition-new(root) { animation-duration: .28s; }
html.ml-section-change::view-transition-group(ml-section) { animation: none; }
html.ml-section-change::view-transition-old(ml-section) { animation-duration: .2s; }
html.ml-section-change::view-transition-new(ml-section) { animation: ml-section-in .28s var(--ml-ease) both; mix-blend-mode: normal; }

/* Hover and press: slow, on the compositor. */
html body .of-sidebar a, html body .of-button, html body .km-button, html body a.of-card {
  transition-property: transform, opacity, color, border-color;
  transition-duration: .42s;
  transition-timing-function: var(--ml-ease);
}
html body .of-sidebar a:hover { transform: translateX(2px); }
html body a.of-card:hover { transform: translateY(-3px); }
html body .of-button:hover, html body .km-button:hover { transform: translateY(-1px); }
html body .of-button:active, html body .km-button:active { transform: scale(.98); transition-duration: .14s; }
html body dialog[open] { animation: ml-dialog .4s var(--ml-ease) backwards; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* The texture on controls moves through one rule in minely-navigation.js instead of a per-element animation. */
html#html body.of-body :is(.of-button,.of-auth-link-button,.server-management-button,.km-button,.rsl-button,.rsl-tabs a,.ml-outline-button,.server-filter,.service-view-switch button,.km-interface-switch button,.km-range-tabs button,.profile-language-choice,.pc-btn,.pc-topup,.btn-p,.btn-g,.snowflake-button,.ml-companion-action,.ml-icon-button,.ml-ui-button),
html#html body.of-body :is(.service-card-tools button,.service-favorite) {
  animation: none !important;
  background-position: 0 0 !important;
}