/* Shared header chrome for every tcpcat.io page (index, /internals,
   /release, /notice): the language toggle and the animated nav underline,
   both lifted verbatim from index.html so every page's navbar behaves
   identically. Each page still writes its own <header> markup (its brand
   tag and nav links differ), but the look and the interaction come from
   here. */

.lang-switch{
  border:1px solid var(--rule-strong);
  font-size:10px;
  letter-spacing:.05em;
  border-radius:5px;
  overflow:hidden;
}
.lang-switch button{
  padding:3px 8px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.lang-switch button[aria-pressed="true"]{background:var(--ink); color:var(--paper);}
.lang-switch button[aria-pressed="false"]{color:var(--ink-soft); background:transparent;}
.lang-switch button[aria-pressed="false"]:hover{background:var(--paper-flat); color:var(--ink);}
.lang-switch button:focus-visible{outline:2px solid var(--wire); outline-offset:-2px;}

header nav a{position:relative;}
header nav a:not(.nav-external)::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-3px; height:1.5px;
  background:var(--stamp);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
header nav a:not(.nav-external):hover::after{transform:scaleX(1);}

header{animation:tcpcat-header-in .5s cubic-bezier(.2,.7,.2,1) both;}
@keyframes tcpcat-header-in{
  from{opacity:0; transform:translateY(-6px);}
  to{opacity:1; transform:translateY(0);}
}

@media (prefers-reduced-motion: reduce){
  header{animation:none;}
  header nav a::after{transition:none;}
  .lang-switch button{transition:none;}
}