body.category-hub--entertainment {
  --hub-accent: #f97316;
  --hub-accent-2: #fb7185;
  --hub-accent-3: #a78bfa;
}

body.category-hub--entertainment .category-hero__bg {
  background: radial-gradient(980px 560px at 12% 16%,
      rgba(249, 115, 22, 0.5),
      transparent 66%),
    radial-gradient(940px 580px at 92% 14%,
      rgba(251, 113, 133, 0.46),
      transparent 64%),
    radial-gradient(740px 520px at 56% 114%,
      rgba(167, 139, 250, 0.38),
      transparent 68%);
}

/* Animated spotlights and stage lights */
body.category-hub--entertainment .category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Spotlight beams from top */
    conic-gradient(from 210deg at 14% -5%,
      rgba(249, 115, 22, 0.25),
      transparent 25%),
    conic-gradient(from 330deg at 86% -5%,
      rgba(251, 113, 133, 0.22),
      transparent 25%),
    conic-gradient(from 270deg at 50% -5%,
      rgba(167, 139, 250, 0.2),
      transparent 20%),
    /* Twinkling stars */
    radial-gradient(3px 3px at 18% 32%, rgba(255, 255, 255, 0.8), transparent 70%),
    radial-gradient(2px 2px at 28% 72%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(4px 4px at 78% 34%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(3px 3px at 88% 68%, rgba(255, 255, 255, 0.65), transparent 70%),
    radial-gradient(2px 2px at 45% 48%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(3px 3px at 62% 22%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(2px 2px at 35% 85%, rgba(255, 255, 255, 0.6), transparent 70%),
    radial-gradient(3px 3px at 72% 78%, rgba(255, 255, 255, 0.65), transparent 70%);
  background-repeat: no-repeat;
  animation: entertainSpotlight 8s ease-in-out infinite;
}

/* Entertainment icons - film, music, gaming */
body.category-hub--entertainment .category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Film reel */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='none' stroke='rgba(249,115,22,0.25)' stroke-width='2'/%3E%3Ccircle cx='24' cy='24' r='8' fill='rgba(249,115,22,0.2)'/%3E%3Ccircle cx='24' cy='8' r='4' fill='rgba(249,115,22,0.15)'/%3E%3Ccircle cx='24' cy='40' r='4' fill='rgba(249,115,22,0.15)'/%3E%3Ccircle cx='8' cy='24' r='4' fill='rgba(249,115,22,0.15)'/%3E%3Ccircle cx='40' cy='24' r='4' fill='rgba(249,115,22,0.15)'/%3E%3C/svg%3E") 8% 30%,
    /* Movie clapperboard */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40' viewBox='0 0 44 40'%3E%3Crect x='2' y='12' width='40' height='26' rx='2' fill='rgba(167,139,250,0.2)'/%3E%3Cpath fill='rgba(167,139,250,0.25)' d='M2 12L42 12L38 2L6 2L2 12z'/%3E%3Cline x1='12' y1='2' x2='16' y2='12' stroke='rgba(255,255,255,0.15)' stroke-width='2'/%3E%3Cline x1='24' y1='2' x2='28' y2='12' stroke='rgba(255,255,255,0.15)' stroke-width='2'/%3E%3Cline x1='36' y1='2' x2='40' y2='12' stroke='rgba(255,255,255,0.15)' stroke-width='2'/%3E%3C/svg%3E") 85% 20%,
    /* Music note */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='44' viewBox='0 0 32 44'%3E%3Cellipse cx='8' cy='38' rx='7' ry='5' fill='rgba(251,113,133,0.25)'/%3E%3Crect x='14' y='6' width='3' height='34' fill='rgba(251,113,133,0.2)'/%3E%3Cpath fill='rgba(251,113,133,0.25)' d='M17 6C17 6 30 10 30 20C30 26 24 24 17 18V6z'/%3E%3C/svg%3E") 18% 65%,
    /* Double music notes */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='48' viewBox='0 0 44 48'%3E%3Cellipse cx='8' cy='42' rx='7' ry='5' fill='rgba(251,113,133,0.2)'/%3E%3Cellipse cx='32' cy='38' rx='7' ry='5' fill='rgba(251,113,133,0.2)'/%3E%3Crect x='14' y='10' width='3' height='34' fill='rgba(251,113,133,0.15)'/%3E%3Crect x='38' y='6' width='3' height='34' fill='rgba(251,113,133,0.15)'/%3E%3Cpath fill='rgba(251,113,133,0.2)' d='M14 10L41 6V14L14 18V10z'/%3E%3C/svg%3E") 75% 70%,
    /* Popcorn */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48' viewBox='0 0 36 48'%3E%3Cpath fill='rgba(249,115,22,0.2)' d='M6 18L10 46H26L30 18H6z'/%3E%3Cpath fill='rgba(239,68,68,0.2)' d='M6 18L8 14H28L30 18H6z'/%3E%3Ccircle cx='10' cy='10' r='6' fill='rgba(255,251,235,0.2)'/%3E%3Ccircle cx='18' cy='8' r='7' fill='rgba(255,251,235,0.22)'/%3E%3Ccircle cx='26' cy='10' r='6' fill='rgba(255,251,235,0.2)'/%3E%3Ccircle cx='14' cy='14' r='5' fill='rgba(255,251,235,0.18)'/%3E%3Ccircle cx='22' cy='14' r='5' fill='rgba(255,251,235,0.18)'/%3E%3C/svg%3E") 92% 55%,
    /* Game controller */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='36' viewBox='0 0 52 36'%3E%3Cpath fill='rgba(167,139,250,0.2)' d='M14 6C6 6 2 14 2 22C2 30 6 34 12 34C16 34 18 30 22 26H30C34 30 36 34 40 34C46 34 50 30 50 22C50 14 46 6 38 6H14z'/%3E%3Crect x='10' y='16' width='12' height='4' rx='1' fill='rgba(255,255,255,0.15)'/%3E%3Crect x='14' y='12' width='4' height='12' rx='1' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='38' cy='14' r='3' fill='rgba(251,113,133,0.3)'/%3E%3Ccircle cx='44' cy='20' r='3' fill='rgba(34,197,94,0.3)'/%3E%3Ccircle cx='38' cy='26' r='3' fill='rgba(59,130,246,0.3)'/%3E%3Ccircle cx='32' cy='20' r='3' fill='rgba(251,191,36,0.3)'/%3E%3C/svg%3E") 30% 80%,
    /* Star */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='rgba(251,191,36,0.25)' d='M20 2L24 14L38 14L27 22L31 36L20 28L9 36L13 22L2 14L16 14L20 2z'/%3E%3C/svg%3E") 55% 15%;
  background-repeat: no-repeat;
  animation: entertainFloat 18s ease-in-out infinite;
}

@keyframes entertainSpotlight {

  0%,
  100% {
    opacity: 0.9;
    transform: scale(1);
  }

  25% {
    opacity: 1;
    transform: scale(1.02);
  }

  50% {
    opacity: 0.85;
    transform: scale(0.98);
  }

  75% {
    opacity: 1;
    transform: scale(1.01);
  }
}

@keyframes entertainFloat {

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

  33% {
    transform: translateY(-6px) rotate(0.5deg);
  }

  66% {
    transform: translateY(-10px) rotate(-0.5deg);
  }
}