/* nav-fx.css — dark premium left-to-right animation + dark tooltips for the main menu.
   Used on index.html, login.html, register.html. */

@keyframes nfxSweep{
  0%  { background-position:100% 0, -150% 100%; }
  100%{ background-position:0% 0,   250% 100%; }
}
/* Dark sheen travelling left → right across the whole bar + a dark light-bar on the bottom edge */
html body nav.navbar::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(100deg, transparent 35%, rgba(11,17,32,.10) 50%, transparent 65%) 0 0 / 250% 100% no-repeat,
    linear-gradient(90deg, transparent, #0b1120 30%, #226db4 62%, #e42527 82%, transparent) 0 100% / 60% 3px no-repeat;
  animation:nfxSweep 7s linear infinite;
}

/* ── Colour tooltip (site gradient, animated) ─────────── */
@keyframes nfxFlow { from{ background-position:0% 50%; } to{ background-position:200% 50%; } }
@keyframes nfxShine{ 0%{ transform:translateX(-130%) skewX(-20deg); } 60%,100%{ transform:translateX(330%) skewX(-20deg); } }
#nfxTip{
  position:fixed; z-index:100000; left:0; top:0; pointer-events:none;
  padding:9px 15px; border-radius:10px;
  /* site colours: red → blue → teal, flowing left to right */
  background:linear-gradient(100deg,#e42527 0%,#226db4 35%,#0d9488 65%,#226db4 85%,#e42527 100%);
  background-size:200% 100%;
  animation:nfxFlow 4s linear infinite;
  border:1px solid rgba(255,255,255,.35);
  color:#fff; font:700 12px/1.2 'Mulish','Segoe UI',Roboto,Arial,sans-serif; letter-spacing:.02em; white-space:nowrap;
  text-shadow:0 1px 2px rgba(11,17,32,.35);
  box-shadow:0 12px 28px rgba(34,109,180,.35), 0 4px 10px rgba(228,37,39,.22);
  opacity:0; visibility:hidden; overflow:hidden;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .32s cubic-bezier(.2,.8,.2,1), opacity .25s ease, visibility 0s linear .32s;
}
#nfxTip::after{            /* shine band sweeping left → right */
  content:''; position:absolute; top:0; left:0; width:35%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:nfxShine 2.4s ease-in-out infinite;
}
#nfxTip.show{ visibility:visible; opacity:1; clip-path:inset(-30px -30px -30px -30px); transition-delay:0s; }

@media (hover:none){ #nfxTip{ display:none; } }
@media (prefers-reduced-motion:reduce){
  html body nav.navbar::after, #nfxTip, #nfxTip::after{ animation:none !important; }
  #nfxTip, #nfxTip.show{ transition:none; }
}

/* Keep the menu bar (and its tooltip) fixed to the top while scrolling.
   overflow-x:hidden on html/body turns body into a scroll container and breaks position:sticky;
   overflow-x:clip hides sideways overflow the same way without that side effect. */
html{ overflow-x:visible !important; } body{ overflow-x:clip !important; }
html body nav.navbar{ position:sticky; top:0; z-index:301; }

/* ── Menu bar stays pinned; richer shadow once the page is scrolled ── */
@supports (overflow:clip){ html{ overflow-x:visible !important; } body{ overflow-x:clip !important; } }   /* keeps position:sticky working */
html body nav.navbar{ position:sticky; top:0; z-index:301; }
html body nav.navbar.nfx-stuck{ box-shadow:0 10px 30px rgba(11,17,32,.14) !important; }

/* Hover tooltips under buttons removed */
#nfxTip{ display:none !important; }