/* ============================================================
   Makader Group — Site-wide motion layer
   Scroll reveals, hero entrance, smooth sticky header.
   Loaded after makader-home.css so it can override positioning.
   ============================================================ */

/* ---------- Reveal-on-scroll / reveal-on-load base ---------- */
.mk-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.mk-reveal.mk-reveal-zoom { transform: translateY(14px) scale(.94); }
.mk-reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mk-reveal,
  .mk-reveal.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Smooth sticky header ---------- */
.mk-header {
  position: sticky;
  top: 0;
  z-index: 999;
  transition: box-shadow .3s ease;
}
.mk-header .mk-topbar {
  max-height: 60px;
  overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease, padding .35s ease;
}
.mk-header .mk-nav { transition: min-height .3s ease; }
.mk-header .mk-nav-logo img { transition: max-height .3s ease; }

.mk-header.sticky {
  box-shadow: 0 10px 30px rgba(2,10,25,.35);
  animation: mkHeaderDrop .4s ease;
}
.mk-header.sticky .mk-topbar {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.mk-header.sticky .mk-nav { min-height: 66px; }
.mk-header.sticky .mk-nav-logo img { max-height: 48px; }

@keyframes mkHeaderDrop {
  from { transform: translateY(-14px); }
  to { transform: translateY(0); }
}

@media (max-width: 991px) {
  /* keep mobile slide-down menu working under a sticky header */
  .mk-header .mk-menu-wrap { z-index: 60; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-header.sticky { animation: none; }
}