/* ============================================================
   MicroHub — Shared UX layer (new pages only)
   Page transitions, back-to-top, scroll reveal, lazy-image fade.
   ============================================================ */
.mh-page-enter { animation: mhPageEnter .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes mhPageEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

body.mh-leaving { opacity: 0; transition: opacity .28s ease; }

/* route/page loader bar */
.mh-loader {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center;
  background: #fff; transition: opacity .45s ease, visibility .45s ease;
}
.mh-loader.is-done { opacity: 0; visibility: hidden; }
.mh-loader-ring {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(8,119,201,.18); border-top-color: var(--primary, #0877c9);
  animation: mhSpin .8s linear infinite;
}
@keyframes mhSpin { to { transform: rotate(360deg); } }

/* back to top */
.mh-top {
  position: fixed; right: 46px; bottom: 106px; z-index: 1100;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary, #0877c9); color: #fff; border: none;
  box-shadow: 0 14px 30px -10px rgba(8,119,201,.8);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: all .4s cubic-bezier(.22,1,.36,1);
}
.mh-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.mh-top:hover { background: var(--primary-dark, #005b9f); transform: translateY(-3px); }

img[loading="lazy"] { background: #eef4fa; }