/* Asterium visual demo — additions for burger menu / header / reveal animations. */

/* header auto-hide */
.header-nav.hdr-hidden { transform: translateY(-130%); }
.header-nav { transition: transform .5s cubic-bezier(.4,0,.2,1), background-color .3s; }

/* burger visible below lg only */
@media (min-width: 1024px) { .menu-button { display: none; } }

/* mobile menu panel (menu-slide of the original) */
#mobileMenu {
  position: fixed; inset: 0; z-index: 49;
  padding: 96px 24px 32px;
  opacity: 0; transform: translateY(-100%);
  transition: opacity .2s, transform .4s ease;
  border-radius: 0;
}
#mobileMenu.mm-in { opacity: 1; transform: translateY(0); }
body.mm-open { overflow: hidden; }

.mm-group { border-bottom: 1px solid rgba(255,255,255,.08); }
.mm-group-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; cursor: pointer; color: #fff;
  font-family: "ABC Favorit", sans-serif; font-size: 18px; letter-spacing: -.02em;
}
.mm-group-title svg { transition: transform .3s; width: 12px; height: 12px; color: rgba(255,255,255,.5); }
.mm-group-open .mm-group-title svg { transform: rotate(180deg); }
.mm-group-body { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1); }
.mm-group-body ul { padding: 0 0 14px; }
.mm-group-body li { padding: 7px 0; }
.mm-group-body a {
  color: rgba(255,255,255,.5); font-family: "Inter Display", sans-serif;
  font-size: 15px; line-height: 1.6; letter-spacing: .02em;
}
.mm-group-body a:active, .mm-group-body a:hover { color: #fff; }

.mm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.mm-actions a { display: block; text-align: center; border-radius: 9999px; padding: 14px 24px;
  font-family: "ABC Favorit", sans-serif; font-size: 15px; }
.mm-login { color: #fff; border: 1px solid rgba(255,255,255,.25); }
.mm-signup { color: #070708; background: #d9fe43; }

/* FAQ open state */
#faq .faq-open .faq-content-text { opacity: 1; }

/* reveal-on-scroll */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.4,0,.2,1); }
.rv.rv-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}