body.category-hub--travel {
  --hub-accent: #38bdf8;
  --hub-accent-2: #fbbf24;
  --hub-accent-3: #60a5fa;
}

body.category-hub--travel .category-hero__bg {
  background: radial-gradient(520px 280px at 16% 18%,
      rgba(255, 214, 102, 0.5),
      transparent 70%),
    radial-gradient(980px 540px at 86% 8%,
      rgba(56, 189, 248, 0.52),
      transparent 62%),
    radial-gradient(620px 420px at 62% 120%,
      rgba(14, 116, 144, 0.45),
      transparent 70%);
}

/* Animated travel elements - clouds and landscape */
body.category-hub--travel .category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Clouds */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath fill='rgba(255,255,255,0.15)' d='M60 40H15C7 40 0 33 0 25s5-14 12-15c1-6 7-10 14-10 5 0 10 3 12 7 3-2 7-3 11-3 10 0 18 7 19 16 7 1 12 7 12 14 0 3-1 6-3 8-3-2-6-2-9-2h-8z'/%3E%3C/svg%3E") 10% 15%,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='32' viewBox='0 0 60 32'%3E%3Cpath fill='rgba(255,255,255,0.12)' d='M48 32H12C5 32 0 27 0 20s4-11 10-12c0-5 5-8 11-8 4 0 8 2 10 6 2-1 5-2 8-2 8 0 14 5 15 12 4 1 6 5 6 10 0 3-1 5-2 6h-10z'/%3E%3C/svg%3E") 75% 10%,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='26' viewBox='0 0 50 26'%3E%3Cpath fill='rgba(255,255,255,0.1)' d='M40 26H10C4 26 0 22 0 16s3-9 8-10c0-4 4-6 9-6 3 0 6 2 8 4 2-1 4-2 6-2 6 0 11 4 12 10 4 0 7 4 7 8s-2 6-5 6h-5z'/%3E%3C/svg%3E") 40% 20%,
    /* Mountains silhouette */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60' viewBox='0 0 200 60'%3E%3Cpath fill='rgba(14,116,144,0.15)' d='M0 60L30 25L50 40L80 15L100 35L130 10L160 30L180 20L200 40V60H0z'/%3E%3Cpath fill='rgba(56,189,248,0.1)' d='M0 60L20 35L45 50L70 25L95 45L120 20L150 40L175 30L200 50V60H0z'/%3E%3C/svg%3E") center 100%;
  background-repeat: no-repeat;
  animation: travelClouds 30s linear infinite;
}

/* Floating travel icons */
body.category-hub--travel .category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Airplane */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='rgba(56,189,248,0.25)' d='M24 4L20 16L4 20v4l16 4 4 16h4l4-16 16-4v-4L32 16l-4-12h-4z'/%3E%3C/svg%3E") 85% 25%,
    /* Compass */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='20' fill='none' stroke='rgba(251,191,36,0.25)' stroke-width='2'/%3E%3Cpath fill='rgba(239,68,68,0.2)' d='M22 6L26 22L22 38L18 22L22 6z'/%3E%3Ccircle cx='22' cy='22' r='4' fill='rgba(251,191,36,0.3)'/%3E%3C/svg%3E") 10% 70%,
    /* Suitcase */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='44' viewBox='0 0 40 44'%3E%3Crect x='4' y='12' width='32' height='28' rx='4' fill='rgba(251,191,36,0.2)'/%3E%3Crect x='14' y='4' width='12' height='10' rx='2' fill='none' stroke='rgba(251,191,36,0.25)' stroke-width='2'/%3E%3Cline x1='20' y1='20' x2='20' y2='32' stroke='rgba(255,255,255,0.15)' stroke-width='2'/%3E%3Cline x1='14' y1='26' x2='26' y2='26' stroke='rgba(255,255,255,0.15)' stroke-width='2'/%3E%3C/svg%3E") 78% 75%,
    /* Globe */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='20' fill='rgba(56,189,248,0.15)' stroke='rgba(56,189,248,0.2)' stroke-width='2'/%3E%3Cellipse cx='22' cy='22' rx='10' ry='20' fill='none' stroke='rgba(56,189,248,0.15)' stroke-width='1'/%3E%3Cpath fill='none' stroke='rgba(56,189,248,0.15)' stroke-width='1' d='M2 22h40M6 10h32M6 34h32'/%3E%3C/svg%3E") 15% 25%,
    /* Sun with rays */
    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='10' fill='rgba(251,191,36,0.25)'/%3E%3Cpath fill='none' stroke='rgba(251,191,36,0.2)' stroke-width='2' d='M24 4V10M24 38V44M4 24H10M38 24H44M10 10L14 14M34 34L38 38M38 10L34 14M14 34L10 38'/%3E%3C/svg%3E") 92% 10%,
    /* Palm tree */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='52' viewBox='0 0 36 52'%3E%3Crect x='15' y='24' width='6' height='28' fill='rgba(139,90,43,0.2)'/%3E%3Cpath fill='rgba(34,197,94,0.2)' d='M18 0C18 0 8 8 6 16C4 24 18 24 18 24C18 24 32 24 30 16C28 8 18 0 18 0z'/%3E%3Cpath fill='rgba(34,197,94,0.15)' d='M18 4C18 4 0 12 2 20C4 28 18 24 18 24z'/%3E%3Cpath fill='rgba(34,197,94,0.15)' d='M18 4C18 4 36 12 34 20C32 28 18 24 18 24z'/%3E%3C/svg%3E") 25% 80%;
  background-repeat: no-repeat;
  animation: travelFloat 22s ease-in-out infinite;
}

@keyframes travelClouds {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(15px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes travelFloat {

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

  25% {
    transform: translateY(-8px) rotate(0.5deg);
  }

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

  75% {
    transform: translateY(-10px) rotate(0.3deg);
  }
}