/* Header animations and mobile menu transitions */
.js-page-header{transition:background-color .25s ease, box-shadow .25s ease, transform .25s ease, border-color .25s ease}
/* Surface (1400px container) transitions */
.js-page-header .container-1400{transition:background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease}
/* iOS-like frosted header on scroll (limited to 1400px container) */
.js-page-header.is-scrolled{background-color:transparent;box-shadow:none;border-bottom-color:transparent}
.js-page-header.is-scrolled .container-1400{
  background-color:rgba(255,255,255,.6);
  -webkit-backdrop-filter:saturate(180%) blur(15px);
  backdrop-filter:saturate(180%) blur(15px);
  box-shadow:0 0 0 rgba(0,0,0,0);
  border-bottom:1px solid rgba(0,0,0,.06);
  border-radius:20px
}
.dark .js-page-header.is-scrolled .container-1400{
  /* Use brand dark (jacarta-900) tone instead of generic gray */
  background-color:rgba(13,16,45,.55);
  -webkit-backdrop-filter:saturate(180%) blur(15px);
  backdrop-filter:saturate(180%) blur(15px);
  box-shadow:0 0 0 rgba(0,0,0,0);
  border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:20px
}
.js-page-header.is-shrunk>div{padding-top:.35rem!important;padding-bottom:.35rem!important}

/* Mobile menu transitions only on < lg (<=1023px) */
@media (max-width: 1023.98px){
  /* When menu is open, remove frosted effect on header container to avoid creating a containing block for fixed children (iOS Safari bug) */
  .js-page-header.menu-open .container-1400{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }
  /* Safety: fully hide mobile menu when flagged to avoid ghost states */
  .js-mobile-menu[data-force-hidden="1"]{ display:none !important; }
  .js-mobile-menu{
    transition:opacity .35s ease, transform .35s ease, visibility .35s ease, background-color .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
    transform:translateY(-8px);
    pointer-events:none;
    background-color:transparent !important; /* no solid overlay by default */
    will-change: backdrop-filter, background-color, opacity, transform;
    /* Ensure menu renders above header bar */
    z-index: 50;
  }
  .js-mobile-menu.no-anim{ transition:none !important; }
  /* Important: remove transform when open so fixed children (mobile-topbar) anchor to viewport on iOS */
  .js-mobile-menu.is-open{ transform:none !important; opacity:1!important; visibility:visible!important; pointer-events:auto; display:flex; flex-direction:column; align-items:stretch; padding-top:calc(env(safe-area-inset-top, 0px) + 3.5rem); }
  /* Top bar must be transparent to keep single-style fill */
  .js-mobile-menu .mobile-topbar{ background-color:transparent !important; top:0 !important; padding-top:calc(env(safe-area-inset-top, 0px) + .5rem) !important; }
  /* Add horizontal breathing room for mobile menu content */
  .js-mobile-menu .navbar{ padding-left: .75rem; padding-right: .75rem; }
  /* Paint overlay that fills from the toggle button position */
  .menu-paint-overlay{ position:absolute;  z-index:0; pointer-events:auto; background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px); clip-path:circle(var(--paint-radius, 0px) at var(--paint-x, 90%) var(--paint-y, 2rem)); transition: clip-path .6s cubic-bezier(.22,.61,.36,1), background-color .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease; will-change: clip-path, -webkit-backdrop-filter, backdrop-filter; }
  /* Prevent any accidental overlay “fill” when menu is closed */
  .js-mobile-menu:not(.is-open) .menu-paint-overlay{ display:none !important; pointer-events:none !important; }
  /* Liquid glass border (ring) following the fill edge */
  .menu-paint-overlay::before{ content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.85;
    background:
      radial-gradient(
        circle at var(--paint-x, 90%) var(--paint-y, 2rem),
        rgba(255,255,255,.55) calc(var(--paint-radius, 0px) - 1.25px),
        rgba(255,255,255,.20) var(--paint-radius, 0px),
        rgba(255,255,255,0) calc(var(--paint-radius, 0px) + 2.5px)
      );
    transition: opacity .3s ease;
  }
  .menu-paint-overlay::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%); opacity:.55; }
  /* Brand dark tone for overlay (jacarta-900), denser to avoid grayness */
  .dark .menu-paint-overlay{ background:rgba(13,16,45,.94); }
  .dark .menu-paint-overlay::before{
    background:
      radial-gradient(
        circle at var(--paint-x, 90%) var(--paint-y, 2rem),
        rgba(255,255,255,.32) calc(var(--paint-radius, 0px) - 1.25px),
        rgba(255,255,255,.14) var(--paint-radius, 0px),
        rgba(255,255,255,0) calc(var(--paint-radius, 0px) + 2.5px)
      );
  }
  .dark .menu-paint-overlay::after{ background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), rgba(255,255,255,0) 55%); }
  .js-mobile-menu.is-open .menu-paint-overlay{ --paint-radius: 200vmax; }
  .js-mobile-menu > *:not(.menu-paint-overlay):not(.mobile-topbar){ position:relative; z-index:1; }
  /* Fade content when closing, while paint overlay contracts */
  .js-mobile-menu.is-closing > *:not(.menu-paint-overlay){ opacity:0; transform:translateY(-8px); transition:opacity .25s ease, transform .25s ease; }

  /* Fallback background fill for browsers where clip-path/backdrop-filter may fail */
  .js-mobile-menu.is-open{ background-color: rgba(255,255,255,.90) !important; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
  .dark .js-mobile-menu.is-open{ background-color: rgba(13,16,45,.94) !important; }

/* Back-to-top arrow visibility enhancement */
.ufive_uptop svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
}
/* Ensure desktop nav is fully interactive */
@media (min-width: 1024px){
  .js-mobile-menu{transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  .menu-paint-overlay{display:none!important}
}
