/* InfinityMoney360 - smooth navigation and tab motion (loaded last) */

/* ---------- Page-to-page: cross-document View Transitions (Chrome / Edge 126+, Safari 18.2+) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .32s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
/* The menu and top bar stay put; only the page body changes. */
.sidebar { view-transition-name: fk-sidebar; }
.appbar { view-transition-name: fk-appbar; }
.topbar { view-transition-name: fk-topbar; }
::view-transition-old(fk-sidebar), ::view-transition-new(fk-sidebar),
::view-transition-old(fk-appbar), ::view-transition-new(fk-appbar),
::view-transition-old(fk-topbar), ::view-transition-new(fk-topbar) { animation: none; mix-blend-mode: normal; }
/* The active menu pill slides from the old item to the new one. */
.nav-link.active { view-transition-name: fk-nav-active; }
::view-transition-group(fk-nav-active) { animation-duration: .38s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); z-index: 2; }

/* No white flash: the page background is always set. */
html { background: #F6F7F9; }

/* Fallback for browsers without page transitions: fade out before leaving. */
.content, .container, .login { transition: opacity .17s ease, transform .17s ease; }
.is-leaving .content, .is-leaving .container, .is-leaving .login { opacity: 0; transform: translateY(6px); }

/* The side menu is persistent: don't replay its pop-in effects on every page. */
.nav-badge, .nav-link.active::before { animation: none; }

/* ---------- In-page menus: smooth scroll + scroll-spy ---------- */
html { scroll-behavior: smooth; }
section[id], [id$="-sec"], #mf, #networth { scroll-margin-top: 150px; }
@media (max-width: 640px) { section[id], [id$="-sec"], #mf, #networth { scroll-margin-top: 80px; } }

/* ---------- Sliding ink ---------- */
.has-ink { position: relative; }
.ink { position: absolute; left: 0; pointer-events: none; z-index: 0;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1), width .38s cubic-bezier(.22, .61, .36, 1), opacity .2s; }
.ink-pill { top: 0; border-radius: 8px; background: var(--navy, #0F2D5C); box-shadow: 0 6px 14px rgba(15, 45, 92, .22); }
.ink-line { bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--blue, #123C82); }
.has-ink > a, .has-ink > button { position: relative; z-index: 1; }
.topnav.has-ink a.active { background: transparent !important; color: #fff; }
.topnav a { transition: color .3s ease, background .2s; }
.tabs.has-ink button[aria-selected="true"] { border-bottom-color: transparent; }
.tabs button { transition: color .25s ease; }

/* ---------- Content swap ---------- */
@keyframes swapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.swap-in { animation: swapIn .32s cubic-bezier(.22, .61, .36, 1) both; }
.swap-in > * { animation: swapIn .36s cubic-bezier(.22, .61, .36, 1) both; }
.swap-in > *:nth-child(2) { animation-delay: .04s; }
.swap-in > *:nth-child(3) { animation-delay: .08s; }
.swap-in > *:nth-child(n+4) { animation-delay: .12s; }

/* ---------- Login: sliding Investor / Distributor switch ---------- */
.segmented { position: relative; }
.segmented::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 8px; background: #fff;
  box-shadow: 0 1px 3px rgba(15, 27, 45, .14); transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.segmented[data-active="admin"]::before { transform: translateX(calc(100% + 4px)); }
.segmented button { position: relative; z-index: 1; }
.segmented button[aria-selected="true"] { background: transparent !important; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  .ink, .segmented::before, .content, .container, .login { transition: none !important; }
  .swap-in, .swap-in > * { animation: none !important; }
}