/* __KIKI_CAT_HERO_SKY__ 青绿天空 + 前后层棉絮云，字嵌在云里 */
.hero.hero--category {
  --kiki-sky: #8fb8c6;
  --kiki-sky-deep: #7aa8b8;
  --kiki-sky-warm: #a8b8b0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow-x: clip;
  contain: paint;
  background:
    radial-gradient(120% 80% at 78% 8%, #c5dce4 0%, transparent 42%),
    linear-gradient(180deg, var(--kiki-sky) 0%, var(--kiki-sky-deep) 100%) !important;
  transition: background 500ms ease;
}

.hero.hero--category:hover,
.hero.hero--category:focus-within {
  background:
    radial-gradient(120% 80% at 78% 8%, #f0e0c4 0%, transparent 46%),
    linear-gradient(180deg, var(--kiki-sky-warm) 0%, #8eaaa8 100%) !important;
}

.hero.hero--category .kiki-cat-sky,
.hero.hero--category .kiki-cat-sky-front {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  overflow-x: clip;
  contain: paint;
  clip-path: inset(0);
}

.hero.hero--category .kiki-cat-sky {
  z-index: 0;
}

.hero.hero--category .kiki-cat-sky-front {
  z-index: 4;
}

.hero.hero--category h1 {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

.hero.hero--category p {
  position: relative;
  z-index: 2;
  color: #3f5360 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hero.hero--category .kiki-cat-sun {
  position: absolute;
  z-index: 0;
  top: 6%;
  right: 8%;
  width: 176px;
  height: 176px;
  pointer-events: none;
}

.hero.hero--category .kiki-cat-sun__rays,
.hero.hero--category .kiki-cat-sun__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.hero.hero--category .kiki-cat-sun__rays {
  inset: -52%;
  opacity: 0;
  scale: 0.86;
  filter: blur(9px);
  transition: opacity 500ms ease, scale 500ms ease;
}

.hero.hero--category .kiki-cat-sun__rays::before,
.hero.hero--category .kiki-cat-sun__rays::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 28%, #000 48%, transparent 76%);
  mask: radial-gradient(circle, transparent 18%, #000 28%, #000 48%, transparent 76%);
  animation: kiki-cat-sun-spin 48s linear infinite;
}

.hero.hero--category .kiki-cat-sun__rays::before {
  background:
    conic-gradient(
      from 18deg,
      transparent 0deg 14deg,
      rgba(255, 226, 170, 0.18) 22deg,
      rgba(255, 236, 196, 0.4) 28deg,
      rgba(255, 226, 170, 0.12) 36deg,
      transparent 48deg 71deg,
      rgba(255, 220, 150, 0.22) 82deg,
      rgba(255, 232, 180, 0.08) 94deg,
      transparent 108deg 138deg,
      rgba(255, 228, 176, 0.32) 150deg,
      rgba(255, 236, 196, 0.1) 162deg,
      transparent 176deg 214deg,
      rgba(255, 222, 160, 0.2) 226deg,
      transparent 240deg 278deg,
      rgba(255, 230, 184, 0.28) 292deg,
      rgba(255, 236, 196, 0.08) 304deg,
      transparent 318deg 360deg
    );
}

.hero.hero--category .kiki-cat-sun__rays::after {
  background:
    linear-gradient(28deg, transparent 32%, rgba(255, 232, 186, 0.28) 50%, transparent 68%),
    linear-gradient(97deg, transparent 38%, rgba(255, 220, 160, 0.18) 50%, transparent 62%),
    linear-gradient(163deg, transparent 30%, rgba(255, 236, 200, 0.24) 50%, transparent 70%),
    linear-gradient(231deg, transparent 40%, rgba(255, 214, 150, 0.14) 50%, transparent 60%),
    linear-gradient(304deg, transparent 34%, rgba(255, 228, 176, 0.2) 50%, transparent 66%);
  animation-duration: 72s;
  animation-direction: reverse;
}

.hero.hero--category .kiki-cat-sun__core {
  inset: 24%;
  background:
    radial-gradient(circle at 40% 38%, #fff4d2 0%, #ffd978 38%, #f0b24a 72%, #e39a36 100%);
  box-shadow: 0 0 22px 8px rgba(255, 196, 100, 0.22);
  opacity: 0.2;
  scale: 0.9;
  transition: opacity 500ms ease, scale 500ms ease, box-shadow 500ms ease;
}

.hero.hero--category .kiki-cat-sun__core::before {
  content: "";
  position: absolute;
  inset: -46%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 120, 0.45) 0%, rgba(255, 190, 90, 0.12) 42%, transparent 70%);
  opacity: 0.35;
  transition: opacity 500ms ease;
}

.hero.hero--category:hover .kiki-cat-sun__core,
.hero.hero--category:focus-within .kiki-cat-sun__core {
  opacity: 1;
  scale: 1;
  box-shadow: 0 0 36px 14px rgba(255, 196, 90, 0.4);
}

.hero.hero--category:hover .kiki-cat-sun__core::before,
.hero.hero--category:focus-within .kiki-cat-sun__core::before {
  opacity: 1;
}

.hero.hero--category:hover .kiki-cat-sun__rays,
.hero.hero--category:focus-within .kiki-cat-sun__rays {
  opacity: 0.8;
  scale: 1;
}

@keyframes kiki-cat-sun-spin {
  to {
    rotate: 1turn;
  }
}

.hero.hero--category .kiki-cat-cloud {
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
  transition: opacity 500ms ease, transform 500ms ease, filter 500ms ease;
}

.hero.hero--category .kiki-cat-cloud::before,
.hero.hero--category .kiki-cat-cloud::after {
  content: none;
}

/* a：右上后层，挡住太阳 */
.hero.hero--category .kiki-cat-cloud--a {
  width: 360px;
  height: 170px;
  top: 0;
  right: 0;
  opacity: 0.96;
  filter: blur(5px);
  background:
    radial-gradient(ellipse 120px 80px at 24% 48%, #fff 0%, rgba(255, 255, 255, 0.88) 46%, transparent 72%),
    radial-gradient(ellipse 150px 92px at 50% 38%, #fff 0%, rgba(255, 255, 255, 0.92) 48%, transparent 74%),
    radial-gradient(ellipse 110px 76px at 76% 52%, #f3f7f9 0%, transparent 70%),
    radial-gradient(ellipse 90px 58px at 38% 64%, #d7e4ea 0%, transparent 68%),
    radial-gradient(ellipse 160px 50px at 58% 80%, rgba(150, 180, 194, 0.5) 0%, transparent 72%);
  animation: kiki-cat-flow-left 36s ease-in-out infinite alternate;
}

/* f：标题正后方大团，字坐在云上 */
.hero.hero--category .kiki-cat-cloud--f {
  width: 560px;
  height: 200px;
  top: 14%;
  left: 50%;
  margin-left: -280px;
  opacity: 0.97;
  filter: blur(4px);
  background:
    radial-gradient(ellipse 150px 100px at 22% 50%, #fff 0%, rgba(255, 255, 255, 0.9) 44%, transparent 72%),
    radial-gradient(ellipse 180px 118px at 48% 36%, #fff 0%, rgba(255, 255, 255, 0.95) 46%, transparent 74%),
    radial-gradient(ellipse 140px 96px at 74% 48%, #f6fafc 0%, transparent 70%),
    radial-gradient(ellipse 100px 70px at 36% 60%, #e6eef2 0%, transparent 66%),
    radial-gradient(ellipse 90px 64px at 62% 58%, #dde7ec 0%, transparent 64%),
    radial-gradient(ellipse 210px 70px at 50% 82%, rgba(142, 174, 188, 0.55) 0%, transparent 74%);
  animation: kiki-cat-flow-right 44s ease-in-out infinite alternate;
  animation-delay: -12s;
}

/* d：标题右后，补体积 */
.hero.hero--category .kiki-cat-cloud--d {
  width: 280px;
  height: 130px;
  top: 26%;
  right: 8%;
  opacity: 0.9;
  filter: blur(6px);
  background:
    radial-gradient(ellipse 110px 70px at 36% 46%, #fff 0%, transparent 70%),
    radial-gradient(ellipse 90px 60px at 68% 52%, #eef4f7 0%, transparent 68%),
    radial-gradient(ellipse 140px 46px at 50% 78%, rgba(150, 178, 192, 0.42) 0%, transparent 70%);
  animation: kiki-cat-flow-left 40s ease-in-out infinite alternate;
}

/* c：左上远景小团 */
.hero.hero--category .kiki-cat-cloud--c {
  width: 200px;
  height: 100px;
  top: 4%;
  left: 4%;
  opacity: 0.78;
  filter: blur(8px);
  background:
    radial-gradient(ellipse 80px 56px at 40% 48%, #fff 0%, transparent 70%),
    radial-gradient(ellipse 70px 44px at 68% 58%, #e8f0f4 0%, transparent 68%),
    radial-gradient(ellipse 100px 34px at 50% 80%, rgba(150, 178, 190, 0.4) 0%, transparent 70%);
  animation: kiki-cat-flow-right 32s ease-in-out infinite alternate;
}

/* e：右下远景 */
.hero.hero--category .kiki-cat-cloud--e {
  width: 170px;
  height: 80px;
  bottom: 4%;
  right: 8%;
  opacity: 0.7;
  filter: blur(9px);
  background:
    radial-gradient(ellipse 70px 44px at 46% 48%, #fff 0%, transparent 70%),
    radial-gradient(ellipse 90px 30px at 54% 78%, rgba(150, 176, 188, 0.38) 0%, transparent 70%);
  animation: kiki-cat-flow-left 38s ease-in-out infinite alternate;
}

/* b：字前，虚焦大团穿过副标题和标题下沿 */
.hero.hero--category .kiki-cat-cloud--b {
  width: 620px;
  height: 170px;
  top: 42%;
  left: 50%;
  margin-left: -310px;
  opacity: 0.72;
  filter: blur(14px);
  background:
    radial-gradient(ellipse 180px 90px at 28% 52%, #fff 0%, rgba(255, 255, 255, 0.75) 48%, transparent 74%),
    radial-gradient(ellipse 200px 100px at 56% 40%, #fff 0%, rgba(255, 255, 255, 0.8) 46%, transparent 74%),
    radial-gradient(ellipse 150px 80px at 80% 58%, #f2f7f9 0%, transparent 70%),
    radial-gradient(ellipse 240px 60px at 50% 82%, rgba(160, 188, 200, 0.4) 0%, transparent 72%);
  animation: kiki-cat-flow-right 48s ease-in-out infinite alternate;
  animation-delay: -18s;
}

/* g：字前左，虚焦小团蹭副标题 */
.hero.hero--category .kiki-cat-cloud--g {
  width: 280px;
  height: 110px;
  top: 54%;
  left: 2%;
  opacity: 0.64;
  filter: blur(12px);
  background:
    radial-gradient(ellipse 110px 70px at 42% 48%, #fff 0%, transparent 72%),
    radial-gradient(ellipse 90px 50px at 70% 60%, #eaf1f4 0%, transparent 70%),
    radial-gradient(ellipse 130px 40px at 50% 82%, rgba(150, 176, 188, 0.35) 0%, transparent 70%);
  animation: kiki-cat-flow-left 42s ease-in-out infinite alternate;
  animation-delay: -8s;
}

/* h：字前右，虚焦蹭标题右侧 */
.hero.hero--category .kiki-cat-cloud--h {
  width: 240px;
  height: 120px;
  top: 22%;
  right: 16%;
  opacity: 0.58;
  filter: blur(13px);
  background:
    radial-gradient(ellipse 100px 72px at 48% 44%, #fff 0%, rgba(255, 255, 255, 0.7) 50%, transparent 74%),
    radial-gradient(ellipse 80px 48px at 72% 60%, #e8f0f4 0%, transparent 70%),
    radial-gradient(ellipse 120px 38px at 50% 80%, rgba(150, 176, 188, 0.32) 0%, transparent 70%);
  animation: kiki-cat-flow-right 34s ease-in-out infinite alternate;
}

.hero.hero--category:hover .kiki-cat-cloud--a,
.hero.hero--category:focus-within .kiki-cat-cloud--a {
  opacity: 0.42;
  transform: translate(-28px, -16px);
  filter: blur(10px);
}

.hero.hero--category:hover .kiki-cat-cloud--b,
.hero.hero--category:focus-within .kiki-cat-cloud--b {
  opacity: 0.28;
  transform: translate(-40px, 18px);
  filter: blur(18px);
}

.hero.hero--category:hover .kiki-cat-cloud--c,
.hero.hero--category:focus-within .kiki-cat-cloud--c {
  opacity: 0.34;
  transform: translate(-22px, -18px);
  filter: blur(12px);
}

.hero.hero--category:hover .kiki-cat-cloud--d,
.hero.hero--category:focus-within .kiki-cat-cloud--d {
  opacity: 0.32;
  transform: translate(24px, 16px);
  filter: blur(12px);
}

.hero.hero--category:hover .kiki-cat-cloud--e,
.hero.hero--category:focus-within .kiki-cat-cloud--e {
  opacity: 0.26;
  transform: translate(16px, 12px);
  filter: blur(12px);
}

.hero.hero--category:hover .kiki-cat-cloud--f,
.hero.hero--category:focus-within .kiki-cat-cloud--f {
  opacity: 0.36;
  transform: translate(-12px, -10px);
  filter: blur(10px);
}

.hero.hero--category:hover .kiki-cat-cloud--g,
.hero.hero--category:focus-within .kiki-cat-cloud--g {
  opacity: 0.22;
  transform: translate(-28px, 10px);
  filter: blur(16px);
}

.hero.hero--category:hover .kiki-cat-cloud--h,
.hero.hero--category:focus-within .kiki-cat-cloud--h {
  opacity: 0.2;
  transform: translate(22px, -12px);
  filter: blur(16px);
}

/* i：后层，左中补一团 */
.hero.hero--category .kiki-cat-cloud--i {
  width: 300px;
  height: 140px;
  top: 36%;
  left: 0;
  opacity: 0.88;
  filter: blur(6px);
  background:
    radial-gradient(ellipse 120px 80px at 40% 46%, #fff 0%, rgba(255, 255, 255, 0.88) 46%, transparent 72%),
    radial-gradient(ellipse 90px 60px at 72% 54%, #eef4f7 0%, transparent 68%),
    radial-gradient(ellipse 150px 46px at 50% 80%, rgba(142, 174, 188, 0.48) 0%, transparent 72%);
  animation: kiki-cat-flow-right 39s ease-in-out infinite alternate;
}

/* j：后层，底部一条 */
.hero.hero--category .kiki-cat-cloud--j {
  width: 420px;
  height: 120px;
  bottom: 0;
  left: 18%;
  opacity: 0.8;
  filter: blur(8px);
  background:
    radial-gradient(ellipse 140px 70px at 30% 48%, #fff 0%, transparent 72%),
    radial-gradient(ellipse 160px 80px at 62% 40%, #f4f8fa 0%, transparent 72%),
    radial-gradient(ellipse 180px 44px at 50% 82%, rgba(150, 178, 192, 0.42) 0%, transparent 72%);
  animation: kiki-cat-flow-left 46s ease-in-out infinite alternate;
}

/* k：字前，从左穿标题 */
.hero.hero--category .kiki-cat-cloud--k {
  width: 300px;
  height: 130px;
  top: 24%;
  left: 10%;
  opacity: 0.56;
  filter: blur(13px);
  background:
    radial-gradient(ellipse 120px 80px at 44% 48%, #fff 0%, rgba(255, 255, 255, 0.7) 50%, transparent 74%),
    radial-gradient(ellipse 90px 50px at 74% 60%, #eaf1f4 0%, transparent 70%),
    radial-gradient(ellipse 140px 40px at 50% 82%, rgba(150, 176, 188, 0.32) 0%, transparent 70%);
  animation: kiki-cat-flow-right 37s ease-in-out infinite alternate;
}

/* l：字前右下，虚焦碎云 */
.hero.hero--category .kiki-cat-cloud--l {
  width: 220px;
  height: 100px;
  top: 60%;
  right: 4%;
  opacity: 0.52;
  filter: blur(15px);
  background:
    radial-gradient(ellipse 90px 60px at 48% 46%, #fff 0%, transparent 72%),
    radial-gradient(ellipse 110px 36px at 54% 80%, rgba(150, 176, 188, 0.3) 0%, transparent 70%);
  animation: kiki-cat-flow-left 33s ease-in-out infinite alternate;
}

.hero.hero--category:hover .kiki-cat-cloud--i,
.hero.hero--category:focus-within .kiki-cat-cloud--i {
  opacity: 0.3;
  transform: translate(20px, 12px);
  filter: blur(12px);
}

.hero.hero--category:hover .kiki-cat-cloud--j,
.hero.hero--category:focus-within .kiki-cat-cloud--j {
  opacity: 0.28;
  transform: translate(18px, 14px);
  filter: blur(12px);
}

.hero.hero--category:hover .kiki-cat-cloud--k,
.hero.hero--category:focus-within .kiki-cat-cloud--k {
  opacity: 0.2;
  transform: translate(-30px, -8px);
  filter: blur(16px);
}

.hero.hero--category:hover .kiki-cat-cloud--l,
.hero.hero--category:focus-within .kiki-cat-cloud--l {
  opacity: 0.18;
  transform: translate(20px, 10px);
  filter: blur(18px);
}

@keyframes kiki-cat-flow-left {
  from {
    translate: 70px 6px;
  }
  to {
    translate: -86px 10px;
  }
}

@keyframes kiki-cat-flow-right {
  from {
    translate: -76px 8px;
  }
  to {
    translate: 90px 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero--category .kiki-cat-cloud {
    animation: none !important;
  }

  .hero.hero--category .kiki-cat-sun__rays::before,
  .hero.hero--category .kiki-cat-sun__rays::after {
    animation: none !important;
  }
}