/* AniViews header branding */
.av-site-header {
  overflow: visible;
  background:
    radial-gradient(circle at 16% -90%, rgba(98, 85, 246, .24), transparent 36%),
    radial-gradient(circle at 86% 190%, rgba(255, 92, 138, .18), transparent 34%),
    rgba(255, 255, 255, .91);
  box-shadow: 0 12px 38px rgba(48, 37, 91, .10);
}

.av-site-header::after {
  content: "";
  position: absolute;
  left: calc(50% - 210px);
  top: 18px;
  width: 98px;
  height: 42px;
  pointer-events: none;
  opacity: .24;
  background: radial-gradient(circle, var(--av-primary) 2px, transparent 2.5px) 0 0 / 14px 14px;
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

.av-header-inner {
  position: relative;
}

.av-header-inner::after {
  content: "✦";
  position: absolute;
  left: 238px;
  top: 11px;
  color: var(--av-pink);
  font-size: 13px;
  filter: drop-shadow(0 3px 7px rgba(255, 92, 138, .35));
  animation: av-header-sparkle 3.2s ease-in-out infinite;
}

.av-logo {
  position: relative;
  gap: 12px;
  padding: 6px 14px 6px 7px;
  border: 1px solid rgba(98, 85, 246, .13);
  border-radius: 21px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(246,243,255,.92));
  box-shadow: 0 8px 24px rgba(62, 47, 105, .09), inset 0 1px 0 #fff;
  transition: transform .22s ease, box-shadow .22s ease;
}

.av-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 30px rgba(62, 47, 105, .14), inset 0 1px 0 #fff;
}

.av-logo-mark {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 18px;
  color: transparent;
  background: #241b58 url("assets/aniviews-icon-128.png") center / cover no-repeat;
  box-shadow: 0 10px 25px rgba(78, 55, 213, .30), 0 0 0 1px rgba(98,85,246,.12);
  transform: rotate(-3deg);
  transition: transform .25s ease, box-shadow .25s ease;
}

.av-logo:hover .av-logo-mark {
  transform: rotate(2deg) scale(1.06);
  box-shadow: 0 13px 28px rgba(78, 55, 213, .38), 0 0 0 1px rgba(98,85,246,.15);
}

.av-logo > span:last-child {
  line-height: 1;
  text-shadow: 0 2px 12px rgba(98, 85, 246, .08);
}

.av-nav {
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(98, 85, 246, .11);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(248,246,255,.94), rgba(255,248,251,.90));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 7px 20px rgba(62,47,105,.06);
}

.av-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-inline: 16px;
}

.av-nav a::before {
  color: var(--av-primary);
  font-size: 14px;
  line-height: 1;
}

.av-nav a:nth-child(1)::before { content: "▦"; }
.av-nav a:nth-child(2)::before { content: "◷"; color: var(--av-cyan); }
.av-nav a:nth-child(3)::before { content: "✦"; color: var(--av-pink); }

@keyframes av-header-sparkle {
  0%, 100% { opacity: .45; transform: translateY(0) rotate(0); }
  50% { opacity: 1; transform: translateY(-3px) rotate(18deg); }
}

@media (max-width: 860px) {
  .av-site-header::after,
  .av-header-inner::after { display: none; }

  .av-nav {
    display: grid;
    padding: 7px;
    border-radius: 17px;
  }
}

@media (max-width: 640px) {
  .av-logo {
    gap: 9px;
    padding: 5px 11px 5px 6px;
    border-radius: 18px;
  }

  .av-logo-mark {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-header-inner::after { animation: none; }
}