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

body.category-hub--lifestyle .category-hero__bg {
  background: radial-gradient(980px 560px at 10% 16%,
      rgba(251, 113, 133, 0.5),
      transparent 66%),
    radial-gradient(920px 600px at 92% 14%,
      rgba(167, 139, 250, 0.48),
      transparent 64%),
    radial-gradient(740px 520px at 56% 114%,
      rgba(34, 211, 238, 0.36),
      transparent 68%);
}

/* Animated lifestyle elements */
body.category-hub--lifestyle .category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Confetti dots */
    radial-gradient(3px 3px at 10% 20%, rgba(251, 113, 133, 0.5), transparent),
    radial-gradient(4px 4px at 25% 45%, rgba(167, 139, 250, 0.45), transparent),
    radial-gradient(3px 3px at 40% 15%, rgba(34, 211, 238, 0.4), transparent),
    radial-gradient(4px 4px at 55% 70%, rgba(251, 191, 36, 0.4), transparent),
    radial-gradient(3px 3px at 70% 30%, rgba(34, 197, 94, 0.35), transparent),
    radial-gradient(4px 4px at 85% 55%, rgba(251, 113, 133, 0.4), transparent),
    radial-gradient(3px 3px at 15% 75%, rgba(167, 139, 250, 0.35), transparent),
    radial-gradient(4px 4px at 90% 80%, rgba(34, 211, 238, 0.35), transparent),
    /* Sparkle pattern */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='rgba(255,255,255,0.2)' d='M10 0L12 8L20 10L12 12L10 20L8 12L0 10L8 8L10 0z'/%3E%3C/svg%3E") 18% 35%,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(255,255,255,0.15)' d='M8 0L9.5 6.5L16 8L9.5 9.5L8 16L6.5 9.5L0 8L6.5 6.5L8 0z'/%3E%3C/svg%3E") 78% 25%,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='rgba(255,255,255,0.12)' d='M7 0L8 5L14 7L8 8L7 14L6 8L0 7L6 5L7 0z'/%3E%3C/svg%3E") 45% 82%;
  background-repeat: no-repeat;
  animation: lifestyleSparkle 8s ease-in-out infinite;
}

/* Floating lifestyle icons */
body.category-hub--lifestyle .category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Coffee cup */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='44' viewBox='0 0 36 44'%3E%3Cpath fill='rgba(139,90,43,0.2)' d='M4 12h24v24c0 4-4 8-12 8s-12-4-12-8V12z'/%3E%3Cpath fill='none' stroke='rgba(139,90,43,0.25)' stroke-width='2' d='M28 16h4c2 0 4 2 4 6s-2 6-4 6h-4'/%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='2' d='M10 4 Q12 8 10 12M16 4 Q18 8 16 12M22 4 Q24 8 22 12'/%3E%3C/svg%3E") 12% 25%,
    /* Yoga pose */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='52' viewBox='0 0 48 52'%3E%3Ccircle cx='24' cy='8' r='6' fill='rgba(251,113,133,0.2)'/%3E%3Cpath fill='none' stroke='rgba(251,113,133,0.25)' stroke-width='3' d='M24 14v16M24 30L8 44M24 30L40 44M8 22H40'/%3E%3C/svg%3E") 85% 70%,
    /* Heart */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='28' viewBox='0 0 32 28'%3E%3Cpath fill='rgba(251,113,133,0.25)' d='M16 28C10 22 0 16 0 10 0 4 4 0 10 0c3 0 6 2 6 2s3-2 6-2c6 0 10 4 10 10 0 6-10 12-16 18z'/%3E%3C/svg%3E") 88% 20%,
    /* Home */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40' viewBox='0 0 44 40'%3E%3Cpath fill='rgba(167,139,250,0.2)' d='M22 0L0 20h8v20h12v-14h4v14h12V20h8L22 0z'/%3E%3C/svg%3E") 15% 78%,
    /* Sun */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='10' fill='rgba(251,191,36,0.2)'/%3E%3Cpath fill='none' stroke='rgba(251,191,36,0.2)' stroke-width='2' d='M20 2V8M20 32V38M2 20H8M32 20H38M7 7L11 11M29 29L33 33M33 7L29 11M11 29L7 33'/%3E%3C/svg%3E") 70% 15%,
    /* Shopping bag */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='40' viewBox='0 0 32 40'%3E%3Crect x='2' y='12' width='28' height='26' rx='2' fill='rgba(34,211,238,0.15)'/%3E%3Cpath fill='none' stroke='rgba(34,211,238,0.25)' stroke-width='2' d='M10 12V8c0-4 3-6 6-6s6 2 6 6v4'/%3E%3C/svg%3E") 35% 82%;
  background-repeat: no-repeat;
  animation: lifestyleFloat 20s ease-in-out infinite;
}

@keyframes lifestyleSparkle {

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

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

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

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

@keyframes lifestyleFloat {

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

  25% {
    transform: translateY(-10px) rotate(1deg);
  }

  50% {
    transform: translateY(-5px) rotate(-0.5deg);
  }

  75% {
    transform: translateY(-12px) rotate(0.5deg);
  }
}