/* AfiaỌru menu scroll animations (version 1.68.15). Works with assets/afiaoru-menu-scroll.js.
   Without the script, nothing here changes how the menus look or work. */

/* ---- Top bar: slips away on the way down, slides back on the way up ---- */
body.afiaoru-app-shell #masthead {
  transition: transform .38s cubic-bezier(.22, .8, .24, 1), filter .3s ease;
  will-change: transform;
}
body.afiaoru-app-shell.afm-scrolled #masthead { filter: drop-shadow(0 10px 14px rgba(11, 21, 27, .28)); }
body.afiaoru-app-shell.afm-bars-hidden #masthead { transform: translateY(calc(-100% - 12px)); filter: none; }
body.afiaoru-app-shell #masthead:focus-within { transform: none; }

/* Top menu keys rise in one by one when the bar comes back */
@keyframes afm-key-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
body.afiaoru-app-shell.afm-menu-pulse #main-header .menu > li,
body.afiaoru-app-shell.afm-menu-pulse #main-header .menu > .menu-item {
  animation: afm-key-in .5s cubic-bezier(.22, .8, .24, 1) both;
}
body.afiaoru-app-shell.afm-menu-pulse #main-header .menu > li:nth-child(1) { animation-delay: .00s; }
body.afiaoru-app-shell.afm-menu-pulse #main-header .menu > li:nth-child(2) { animation-delay: .05s; }
body.afiaoru-app-shell.afm-menu-pulse #main-header .menu > li:nth-child(3) { animation-delay: .10s; }
body.afiaoru-app-shell.afm-menu-pulse #main-header .menu > li:nth-child(4) { animation-delay: .15s; }
body.afiaoru-app-shell.afm-menu-pulse #main-header .menu > li:nth-child(5) { animation-delay: .20s; }
body.afiaoru-app-shell.afm-menu-pulse #main-header .menu > li:nth-child(6) { animation-delay: .25s; }
body.afiaoru-app-shell.afm-menu-pulse #main-header .menu > li:nth-child(7) { animation-delay: .30s; }
body.afiaoru-app-shell.afm-menu-pulse #main-header .menu > li:nth-child(n+8) { animation-delay: .35s; }

/* ---- Phone bottom bar: same rule ---- */
@media (max-width: 768px) {
  body.afiaoru-app-shell .afiaoru-tabbar {
    transition: transform .38s cubic-bezier(.22, .8, .24, 1), opacity .3s ease;
    will-change: transform;
  }
  body.afiaoru-app-shell.afm-bars-hidden .afiaoru-tabbar {
    transform: translateY(calc(100% + 28px));
    opacity: 0;
    pointer-events: none;
  }
  body.afiaoru-app-shell .afiaoru-tabbar:focus-within { transform: none; opacity: 1; pointer-events: auto; }
}

/* ---- Requests menu (.afo-nav) ---- */
@keyframes afm-pill-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
body.afiaoru-app-shell .afo-nav {
  position: sticky;
  top: calc(var(--afm-stick, 0px) + 8px);
  z-index: 60;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  transition: top .38s cubic-bezier(.22, .8, .24, 1), box-shadow .25s ease, background-color .25s ease, backdrop-filter .25s ease;
}
body.afiaoru-app-shell .afo-nav::-webkit-scrollbar { display: none; }
body.afiaoru-app-shell .afo-nav a { scroll-snap-align: start; animation: afm-pill-in .5s cubic-bezier(.22, .8, .24, 1) both; }
body.afiaoru-app-shell .afo-nav a:nth-child(1) { animation-delay: .05s; }
body.afiaoru-app-shell .afo-nav a:nth-child(2) { animation-delay: .10s; }
body.afiaoru-app-shell .afo-nav a:nth-child(3) { animation-delay: .15s; }
body.afiaoru-app-shell .afo-nav a:nth-child(4) { animation-delay: .20s; }
body.afiaoru-app-shell .afo-nav a:nth-child(5) { animation-delay: .25s; }
body.afiaoru-app-shell .afo-nav a:nth-child(n+6) { animation-delay: .30s; }
/* When it sticks, it becomes a soft glass bar */
body.afiaoru-app-shell .afo-nav.is-stuck {
  background-color: rgba(255, 253, 249, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px -12px rgba(27, 45, 57, .45);
}
/* More items off screen: fade that edge */
body.afiaoru-app-shell .afo-nav.has-right:not(.has-left) {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
}
body.afiaoru-app-shell .afo-nav.has-left:not(.has-right) {
  -webkit-mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 34px), transparent 100%);
}
body.afiaoru-app-shell .afo-nav.has-left.has-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}

/* ---- My Quotations menu: news-ticker slide that can also be moved by hand (1.75.5) ----
   The menu stays a normal sideways scroller; assets/afiaoru-menu-scroll.js moves it along by itself. */
body.afiaoru-app-shell .afo-nav.afm-marquee {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: none;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
body.afiaoru-app-shell .afo-nav.afm-marquee:active { cursor: grabbing; }
body.afiaoru-app-shell .afo-nav.afm-marquee .afm-track { display: flex; width: max-content; }
body.afiaoru-app-shell .afo-nav.afm-marquee .afm-set { display: flex; flex: 0 0 auto; gap: 8px; padding-right: 8px; }
body.afiaoru-app-shell .afo-nav.afm-marquee a { animation: none; scroll-snap-align: none; user-select: none; -webkit-user-drag: none; }

@media (prefers-reduced-motion: reduce) {
  body.afiaoru-app-shell #masthead,
  body.afiaoru-app-shell .afiaoru-tabbar,
  body.afiaoru-app-shell .afo-nav { transition: none !important; }
  body.afiaoru-app-shell .afo-nav a,
  body.afiaoru-app-shell.afm-menu-pulse #main-header .menu > li { animation: none !important; }
  body.afiaoru-app-shell.afm-bars-hidden #masthead { transform: none; }
}