/* auth-nav.css — premium animated navbar for login.html / register.html
   Logo on the left, all actions grouped on the right (like pro IT sites). */

@keyframes anDrop   { from{ opacity:0; transform:translateY(-100%); } to{ opacity:1; transform:none; } }
@keyframes anFadeUp { from{ opacity:0; transform:translateY(8px); }  to{ opacity:1; transform:none; } }
@keyframes anStrip  { to{ background-position:200% 0; } }
@keyframes anSweep  { 0%{ transform:translateX(-120%) skewX(-20deg); } 55%,100%{ transform:translateX(260%) skewX(-20deg); } }
@keyframes anGlow   { 0%,100%{ box-shadow:0 6px 18px rgba(228,37,39,.28), 0 0 0 0 rgba(228,37,39,.28); }
                      50%    { box-shadow:0 8px 24px rgba(34,109,180,.34), 0 0 0 6px rgba(228,37,39,0); } }
@keyframes anBlink  { 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes anHair   { 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }

html body nav.navbar{
  background:rgba(255,255,255,.78) !important;
  -webkit-backdrop-filter:saturate(170%) blur(16px) !important;
          backdrop-filter:saturate(170%) blur(16px) !important;
  border-bottom:1px solid rgba(34,109,180,.14) !important;
  box-shadow:0 6px 28px rgba(17,27,33,.07) !important;
  position:sticky; top:0; z-index:301;
  overflow:hidden;
  animation:anDrop .6s cubic-bezier(.2,.8,.2,1) both;
}

/* animated multicolour strip across the top */
html body nav.navbar::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#e42527,#f9b21d,#089949,#226db4,#e42527);
  background-size:200% 100%;
  animation:anStrip 8s linear infinite;
}
html body nav.navbar .container{
  display:flex; align-items:center; justify-content:space-between;
  min-height:68px; gap:16px;
}

/* ── Logo ─────────────────────────────────────────────── */
html body nav.navbar .logo{
  position:relative; padding:0; font-size:22px; font-weight:800; letter-spacing:-.02em;
  animation:anFadeUp .6s .15s cubic-bezier(.2,.8,.2,1) both;
}
html body nav.navbar .logo .bracket{
  display:inline-block; font-weight:800;
  background:linear-gradient(135deg,#e42527,#226db4);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent !important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
html body nav.navbar .logo:hover .bracket:first-child{ transform:translateX(-5px); }
html body nav.navbar .logo:hover .bracket:last-child { transform:translateX(5px); }
html body nav.navbar .logo::after{           /* blinking terminal cursor */
  content:''; width:2px; height:20px; margin-left:2px; border-radius:1px;
  background:#e42527; animation:anBlink 1.1s steps(1) infinite;
}

/* ── Right-hand actions ───────────────────────────────── */
html body nav.navbar .auth-buttons{
  margin-left:auto; padding-left:0; gap:10px; align-items:center;
  animation:anFadeUp .6s .3s cubic-bezier(.2,.8,.2,1) both;
}
html body nav.navbar .auth-buttons a{
  position:relative; overflow:hidden;
  padding:10px 20px; border-radius:10px;
  font-size:13.5px; font-weight:700; letter-spacing:.01em;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}

/* Home text link with growing underline */
html body nav.navbar .auth-buttons a.nav-home{
  border:0; background:transparent !important; color:#3c4450 !important;
  padding:10px 12px; margin-right:6px;
}
html body nav.navbar .auth-buttons a.nav-home::after{
  content:''; position:absolute; left:12px; right:12px; bottom:5px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#e42527,#226db4);
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
html body nav.navbar .auth-buttons a.nav-home:hover{ color:#e42527 !important; }
html body nav.navbar .auth-buttons a.nav-home:hover::after{ transform:scaleX(1); }

/* Log in / Register — gradient CTA with shine + soft pulse (one CTA per auth page) */
html body nav.navbar .login-btn,
html body nav.navbar .register-btn{
  color:#fff !important; border:1.5px solid transparent !important;
  background:linear-gradient(135deg,#e42527 0%,#226db4 100%) !important;
  animation:anGlow 3.2s ease-in-out infinite;
}
html body nav.navbar .login-btn::before,
html body nav.navbar .register-btn::before{
  content:''; position:absolute; top:0; left:0; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:anSweep 3.6s ease-in-out infinite;
}
html body nav.navbar .login-btn:hover,
html body nav.navbar .register-btn:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 12px 26px rgba(34,109,180,.35) !important;
}

html body nav.navbar .auth-buttons a:active{ transform:translateY(0) scale(.98); }
html body nav.navbar .auth-buttons a:focus-visible{ outline:2px solid #226db4; outline-offset:3px; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:768px){
  html body nav.navbar{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(255,255,255,.96) !important; }
  html body nav.navbar .container{ min-height:60px; flex-wrap:nowrap; }
  html body nav.navbar .logo{ font-size:19px; }
  html body nav.navbar .auth-buttons{ gap:8px; }
  html body nav.navbar .auth-buttons a{ padding:9px 14px; font-size:13px; }
}
@media (max-width:480px){
  html body nav.navbar .auth-buttons a.nav-home{ display:none; }
  html body nav.navbar .logo::after{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  html body nav.navbar, html body nav.navbar *, html body nav.navbar::before, html body nav.navbar::after{ animation:none !important; }
}