body.category-hub--legal {
  --hub-accent: #fbbf24;
  --hub-accent-2: #60a5fa;
  --hub-accent-3: #a78bfa;
}

body.category-hub--legal .category-hero__bg {
  background: radial-gradient(980px 560px at 12% 16%,
      rgba(251, 191, 36, 0.46),
      transparent 66%),
    radial-gradient(940px 580px at 92% 14%,
      rgba(96, 165, 250, 0.4),
      transparent 64%),
    radial-gradient(760px 520px at 56% 118%,
      rgba(167, 139, 250, 0.34),
      transparent 68%);
}

/* Animated legal documents and scales */
body.category-hub--legal .category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Legal document lines */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='80' viewBox='0 0 60 80'%3E%3Crect x='5' y='5' width='50' height='70' rx='3' fill='rgba(255,255,255,0.08)' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cline x1='12' y1='20' x2='48' y2='20' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3Cline x1='12' y1='30' x2='48' y2='30' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cline x1='12' y1='40' x2='48' y2='40' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cline x1='12' y1='50' x2='35' y2='50' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Ccircle cx='42' cy='62' r='8' fill='rgba(251,191,36,0.15)'/%3E%3C/svg%3E") 85% 70%,
    /* Column pattern (courthouse) */
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.1) 0,
      rgba(255, 255, 255, 0.1) 4px,
      transparent 4px,
      transparent 32px),
    /* Base lines */
    linear-gradient(0deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.08) 4px,
      transparent 4px);
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: 85% 70%, 0 0, 0 100%;
  animation: legalShimmer 15s ease-in-out infinite;
}

/* Floating scales of justice and gavel */
body.category-hub--legal .category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Scales of justice */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='56' viewBox='0 0 60 56'%3E%3Crect x='28' y='8' width='4' height='40' fill='rgba(251,191,36,0.2)'/%3E%3Crect x='10' y='48' width='40' height='4' rx='2' fill='rgba(251,191,36,0.15)'/%3E%3Cpath fill='none' stroke='rgba(251,191,36,0.25)' stroke-width='2' d='M8 8H52'/%3E%3Cpath fill='rgba(96,165,250,0.15)' d='M8 12L0 30H16L8 12z'/%3E%3Cpath fill='rgba(167,139,250,0.15)' d='M52 12L44 30H60L52 12z'/%3E%3Ccircle cx='30' cy='6' r='4' fill='rgba(251,191,36,0.2)'/%3E%3C/svg%3E") 10% 25%,
    /* Gavel */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='45' viewBox='0 0 50 45'%3E%3Crect x='15' y='15' width='30' height='12' rx='3' fill='rgba(139,90,43,0.2)' transform='rotate(-30 30 21)'/%3E%3Crect x='5' y='25' width='8' height='20' rx='2' fill='rgba(139,90,43,0.15)' transform='rotate(-30 9 35)'/%3E%3Cellipse cx='40' cy='40' rx='8' ry='3' fill='rgba(139,90,43,0.12)'/%3E%3C/svg%3E") 88% 20%,
    /* Paragraph symbol */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='36' viewBox='0 0 28 36'%3E%3Ctext x='2' y='30' fill='rgba(96,165,250,0.2)' font-size='32' font-family='serif'%3E§%3C/text%3E%3C/svg%3E") 20% 80%,
    /* Law book */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='54' viewBox='0 0 44 54'%3E%3Crect x='4' y='4' width='36' height='46' rx='2' fill='rgba(167,139,250,0.15)' stroke='rgba(167,139,250,0.2)' stroke-width='2'/%3E%3Crect x='8' y='8' width='28' height='4' fill='rgba(251,191,36,0.15)'/%3E%3Cline x1='10' y1='20' x2='34' y2='20' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cline x1='10' y1='28' x2='34' y2='28' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3Cline x1='10' y1='36' x2='28' y2='36' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") 75% 75%;
  background-repeat: no-repeat;
  animation: legalBalance 12s ease-in-out infinite alternate;
}

@keyframes legalShimmer {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

@keyframes legalBalance {
  0% {
    transform: rotate(-1deg) translateY(0);
  }

  50% {
    transform: rotate(0deg) translateY(-4px);
  }

  100% {
    transform: rotate(1deg) translateY(0);
  }
}