/* Loading — overlay sutil de primeira impressão. */
.mf-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0d0e10;
  display: grid;
  place-content: center;
  gap: 22px;
  text-align: center;
  animation: mf-load-in .35s ease-out both;
}
.mf-loading-mark {
  font: 32px var(--display);
  letter-spacing: -.04em;
  color: #fff7e8;
}
.mf-loading-mark em {
  font-style: italic;
  color: #ffc21c;
  font-weight: 500;
}
.mf-loading-bar {
  width: 180px;
  height: 2px;
  background: #ffffff10;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
}
.mf-loading-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, #ffc21c, transparent);
  animation: mf-bar-slide 1.1s cubic-bezier(.65,.05,.36,1) infinite;
}
.mf-loading.is-out {
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  transform: translate3d(0, -2%, 0);
  pointer-events: none;
}
@keyframes mf-load-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mf-bar-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(280%); }
}
@media (prefers-reduced-motion: reduce) {
  .mf-loading-bar::after { animation-duration: 1.8s; }
}