body.category-hub--science {
  --hub-accent: #a855f7;
  --hub-accent-2: #22d3ee;
  --hub-accent-3: #fb7185;
}

body.category-hub--science .category-hero__bg {
  background: radial-gradient(980px 600px at 12% 18%,
      rgba(168, 85, 247, 0.55),
      transparent 65%),
    radial-gradient(820px 520px at 88% 4%,
      rgba(34, 211, 238, 0.5),
      transparent 62%),
    radial-gradient(760px 520px at 62% 120%,
      rgba(251, 113, 133, 0.4),
      transparent 70%);
}

/* Animated molecular and orbital elements */
body.category-hub--science .category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Orbital rings */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cellipse cx='40' cy='40' rx='38' ry='15' fill='none' stroke='rgba(168,85,247,0.2)' stroke-width='1' transform='rotate(-20 40 40)'/%3E%3Cellipse cx='40' cy='40' rx='38' ry='15' fill='none' stroke='rgba(34,211,238,0.2)' stroke-width='1' transform='rotate(40 40 40)'/%3E%3Cellipse cx='40' cy='40' rx='38' ry='15' fill='none' stroke='rgba(251,113,133,0.2)' stroke-width='1' transform='rotate(100 40 40)'/%3E%3Ccircle cx='40' cy='40' r='8' fill='rgba(168,85,247,0.25)'/%3E%3C/svg%3E") 85% 20%,
    /* DNA helix pattern */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='100' viewBox='0 0 40 100'%3E%3Cpath fill='none' stroke='rgba(34,211,238,0.2)' stroke-width='2' d='M5 0 Q20 12 35 25 T5 50 T35 75 T5 100'/%3E%3Cpath fill='none' stroke='rgba(251,113,133,0.2)' stroke-width='2' d='M35 0 Q20 12 5 25 T35 50 T5 75 T35 100'/%3E%3Cline x1='5' y1='12' x2='35' y2='12' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cline x1='5' y1='37' x2='35' y2='37' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cline x1='5' y1='62' x2='35' y2='62' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cline x1='5' y1='87' x2='35' y2='87' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3C/svg%3E") 10% 50%,
    /* Scattered particles */
    radial-gradient(2px 2px at 15% 25%, rgba(168, 85, 247, 0.4), transparent),
    radial-gradient(3px 3px at 82% 68%, rgba(34, 211, 238, 0.35), transparent),
    radial-gradient(2px 2px at 45% 85%, rgba(251, 113, 133, 0.3), transparent),
    radial-gradient(2px 2px at 72% 15%, rgba(168, 85, 247, 0.35), transparent),
    radial-gradient(3px 3px at 28% 72%, rgba(34, 211, 238, 0.3), transparent);
  background-repeat: no-repeat;
  animation: scienceOrbit 25s linear infinite;
}

/* Floating lab equipment */
body.category-hub--science .category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Beaker */
    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(34,211,238,0.12)' stroke='rgba(34,211,238,0.25)' stroke-width='2' d='M8 4H28V12L32 44H4L8 12V4z'/%3E%3Crect x='8' y='0' width='20' height='4' fill='rgba(255,255,255,0.1)'/%3E%3Cellipse cx='18' cy='36' rx='10' ry='4' fill='rgba(168,85,247,0.2)'/%3E%3C/svg%3E") 15% 75%,
    /* Atom */
    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='5' fill='rgba(251,113,133,0.3)'/%3E%3Cellipse cx='24' cy='24' rx='20' ry='8' fill='none' stroke='rgba(168,85,247,0.15)' stroke-width='1'/%3E%3Cellipse cx='24' cy='24' rx='20' ry='8' fill='none' stroke='rgba(34,211,238,0.15)' stroke-width='1' transform='rotate(60 24 24)'/%3E%3Cellipse cx='24' cy='24' rx='20' ry='8' fill='none' stroke='rgba(251,113,133,0.15)' stroke-width='1' transform='rotate(120 24 24)'/%3E%3C/svg%3E") 12% 20%,
    /* Telescope */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath fill='rgba(168,85,247,0.15)' d='M4 24L28 8L52 24L28 20z'/%3E%3Crect x='24' y='20' width='8' height='24' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='4' cy='24' r='4' fill='rgba(34,211,238,0.2)'/%3E%3C/svg%3E") 80% 78%,
    /* Molecule */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='50' viewBox='0 0 60 50'%3E%3Ccircle cx='15' cy='25' r='8' fill='rgba(251,113,133,0.2)'/%3E%3Ccircle cx='45' cy='15' r='6' fill='rgba(34,211,238,0.2)'/%3E%3Ccircle cx='45' cy='35' r='6' fill='rgba(168,85,247,0.2)'/%3E%3Cline x1='22' y1='22' x2='40' y2='16' stroke='rgba(255,255,255,0.15)' stroke-width='2'/%3E%3Cline x1='22' y1='28' x2='40' y2='34' stroke='rgba(255,255,255,0.15)' stroke-width='2'/%3E%3C/svg%3E") 70% 25%;
  background-repeat: no-repeat;
  animation: scienceFloat 18s ease-in-out infinite;
}

@keyframes scienceOrbit {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes scienceFloat {

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

  33% {
    transform: translateY(-8px) scale(1.02);
  }

  66% {
    transform: translateY(-4px) scale(0.99);
  }
}