/* Header, logo, and header button styles (extracted) */

.site-header{
  position:fixed;
  top:10px;
  left:12px;
  right:12px;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  pointer-events:auto;
  background: transparent;
  padding:6px 10px; /* slightly smaller header height */
  border-radius:12px;
  border: none;
  backdrop-filter: blur(6px);
  max-width:calc(100% - 24px);
}

/* top-left brand image (uses provided transparent asset) */
.top-left-logo{
  width:48px;
  height:48px;
  object-fit:contain;
  border-radius:8px;
  display:block;
  flex:0 0 48px;
  -webkit-font-smoothing:antialiased;
}

/* match the main card button's Old-English display style and size */
.site-header .header-title{
  margin:0;
  margin-left:8px;
  font-family: 'UnifrakturCook', 'Cormorant Garamond', serif;
  font-size:26px; /* larger to match main page button */
  font-weight:700;
  padding:6px 12px;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  color:var(--green-2);
  transition: transform .18s ease, text-shadow .18s ease, color .12s ease;
  box-shadow: none;
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.45);
}
.site-header .header-title:hover{ transform: translateY(-2px); text-shadow: 0 18px 44px rgba(57,255,20,0.12); }

/* ensure header is unobtrusive on small screens */
@media (max-width:640px){
  .site-header{ top:8px; left:8px; right:8px; padding:6px 10px; gap:10px; }
  .top-left-logo{ width:44px; height:44px; flex:0 0 44px; }
  .site-header .header-title{ font-size:16px; padding:6px 10px; }
}

/* Old English header title in the header (fraktur display) */
.header-title{
  font-family: 'UnifrakturCook', 'Cormorant Garamond', serif;
  font-size:20px;
  color:var(--green-2);
  margin:0;
  cursor:pointer;
  transition: transform .28s ease, text-shadow .28s ease, color .18s ease;
  user-select: none;
  will-change: transform, text-shadow;
  text-shadow: 0 6px 20px rgba(57,255,20,0.06);
}
.header-title:active { transform: translateY(2px) scale(0.995); }

/* Saint Monti header button variant: box is solid black with subtle border for contrast */
.header-title.nav-btn {
  --hpurple: #9b59ff; /* hover purple */
  background: #000; /* solid black box */
  color: var(--green-2);
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.04);
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.45);
  box-shadow: 0 10px 36px rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease, color 160ms ease, border-color 160ms ease;
  will-change: transform, box-shadow, color;
  /* gentle idle bounce for emphasis */
  animation: header-bounce 2200ms cubic-bezier(.2,.9,.2,1) infinite;
}

/* hover retains stronger lift/glow */
.header-title.nav-btn:hover {
  transform: translateY(-6px) scale(1.06);
  color: var(--hpurple);
  border-color: rgba(155,89,255,0.18);
  box-shadow: 0 28px 96px rgba(155,89,255,0.18), 0 6px 28px rgba(0,0,0,0.6);
  text-shadow: 0 20px 64px rgba(155,89,255,0.12);
  animation: header-purple-glow 1200ms ease-in-out;
}

/* bounce keyframes: subtle vertical movement and slight scale to avoid jarring motion */
@keyframes header-bounce {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-4px) scale(1.01); }
  50%  { transform: translateY(0) scale(1); }
  75%  { transform: translateY(-2px) scale(1.005); }
  100% { transform: translateY(0) scale(1); }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce){
  .header-title.nav-btn { animation: none !important; transition: none !important; }
}

/* subtle purple glow pulse on hover */
@keyframes header-purple-glow {
  0% { box-shadow: 0 8px 30px rgba(155,89,255,0.06); transform: translateY(-4px) scale(1.03); }
  40% { box-shadow: 0 40px 110px rgba(155,89,255,0.22); transform: translateY(-8px) scale(1.07); }
  100% { box-shadow: 0 18px 56px rgba(155,89,255,0.12); transform: translateY(-6px) scale(1.06); }
}

/* subtle interactive wobble for the header when toggled */
.header-animate {
  animation: header-wobble 900ms cubic-bezier(.17,.67,.35,1.02);
}
@keyframes header-wobble{
  0% { transform: translateY(0) rotate(-1deg) scale(1); text-shadow: 0 6px 20px rgba(57,255,20,0.06); }
  40% { transform: translateY(-6px) rotate(2deg) scale(1.02); text-shadow: 0 18px 48px rgba(57,255,20,0.18); }
  100% { transform: translateY(0) rotate(0deg) scale(1); text-shadow: 0 6px 20px rgba(57,255,20,0.06); }
}

/* small responsive header tweaks */
@media (max-width:640px){
  .site-header{ top:8px; left:8px; right:8px; padding:6px 10px; gap:10px; }
}