/* ============================================================
   Wintermelon in the House — 糖果波普风
   ============================================================ */

:root {
  --cream:   #FFF9F0;
  --lime:    #7ED957;
  --lime-dk: #57B33F;
  --orange:  #FF9F1C;
  --pink:    #FF5D8F;
  --sky:     #4CC9F0;
  --yellow:  #FFD23F;
  --ink:     #1B4332;
  --ink-soft:#2D5A45;
  --stroke:  4px;

  --font-display: "ZCOOL KuaiLe", "Baloo 2", "Fredoka", system-ui, sans-serif;
  --font-body:    "Noto Sans SC", "Fredoka", system-ui, sans-serif;

  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-soft: 0 10px 30px rgba(27, 67, 50, .12);

  /* 滚动位置（由 JS 写入） */
  --sy: 0px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(126,217,87,.20), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(76,201,240,.20), transparent 42%),
    radial-gradient(circle at 78% 82%, rgba(255,93,143,.16), transparent 45%),
    radial-gradient(circle at 20% 88%, rgba(255,210,63,.20), transparent 45%),
    var(--cream);
  overflow-x: hidden;
  line-height: 1.6;
}

/* 细网点纹理叠加，增加质感 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(27,67,50,.06) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

/* ---------- 视差背景层 ---------- */
.parallax-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .35;
  will-change: transform;
  transform: translateY(calc(var(--sy, 0) * -0.08));
}
.blob--lime   { width: 360px; height: 360px; background: var(--lime);   top: 10%; left: -8%; }
.blob--pink   { width: 300px; height: 300px; background: var(--pink);   top: 32%; right: -10%; }
.blob--sky    { width: 420px; height: 420px; background: var(--sky);    top: 58%; left: 15%; }
.blob--yellow { width: 280px; height: 280px; background: var(--yellow); top: 78%; right: 8%; }
.blob--orange { width: 320px; height: 320px; background: var(--orange); top: 90%; left: 40%; }

.hero, .stats, .catnav, .content, .footer { position: relative; z-index: 1; }

/* ---------- 漂浮 emoji 装饰 ---------- */
.floaties {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.floaty {
  position: absolute;
  top: 100%;
  left: var(--x);
  font-size: calc(2.6rem * var(--s, 1));
  opacity: .55;
  animation: rise 14s linear infinite;
  animation-delay: var(--d, 0s);
  filter: drop-shadow(2px 3px 0 rgba(27,67,50,.15));
  transform: translateY(calc(var(--sy, 0) * -0.18));
  will-change: transform, opacity;
}
@keyframes rise {
  0%   { transform: translateY(calc(var(--sy, 0) * -0.18)) rotate(0deg);                       opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .6; }
  100% { transform: translateY(calc(var(--sy, 0) * -0.18 - 116vh)) rotate(220deg);            opacity: 0; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2rem, 6vw, 5rem) 1.25rem;
}
.hero__inner { max-width: 900px; }

.hero__badge {
  display: inline-block;
  background: var(--yellow);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  padding: .45rem 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(.9rem, 2.4vw, 1.1rem);
  box-shadow: var(--shadow-hard);
  transform: rotate(-2deg);
  animation: pop-in .6s .1s both cubic-bezier(.34,1.56,.64,1);
}

.hero__title {
  font-family: var(--font-display);
  line-height: .95;
  margin: clamp(1rem, 3vw, 1.8rem) 0 1rem;
  letter-spacing: 1px;
}
.hero__title .line {
  display: block;
  font-size: clamp(2.8rem, 11vw, 6.5rem);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: var(--shadow-hard);
}
.line--1 { color: var(--lime);  animation: drop-in .7s .15s both cubic-bezier(.34,1.56,.64,1); }
.line--2 { color: var(--pink);  animation: drop-in .7s .32s both cubic-bezier(.34,1.56,.64,1); }

.hero__slogan {
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  color: var(--ink-soft);
  font-weight: 500;
  max-width: 640px;
  margin: 0 auto;
  animation: fade-up .7s .5s both;
}

/* ---------- 冬瓜吉祥物（纯 CSS） ---------- */
.mascot {
  margin: clamp(1.6rem, 4vw, 2.6rem) auto 0;
  width: clamp(130px, 30vw, 190px);
  animation: fade-up .7s .6s both;
}
.mascot__body {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  background: linear-gradient(160deg, #9be86e, #5fbf3f);
  border: var(--stroke) solid var(--ink);
  border-radius: 48% 48% 46% 46% / 42% 42% 58% 58%;
  box-shadow: var(--shadow-hard), inset -10px -14px 0 rgba(27,67,50,.10);
  animation: breathe 3.4s ease-in-out infinite;
}
/* 冬瓜表皮白霜条纹 */
.mascot__body::before {
  content: "";
  position: absolute;
  inset: 12% 18%;
  background:
    repeating-linear-gradient(115deg, transparent 0 14px, rgba(255,255,255,.35) 14px 17px);
  border-radius: inherit;
  opacity: .7;
}
.mascot__eye {
  position: absolute;
  top: 40%;
  width: 15%;
  aspect-ratio: 1;
  background: var(--ink);
  border-radius: 50%;
  animation: blink 4.2s infinite;
}
.mascot__eye.left  { left: 27%; }
.mascot__eye.right { right: 27%; }
.mascot__eye::after {
  content: "";
  position: absolute;
  top: 15%; left: 20%;
  width: 35%; height: 35%;
  background: #fff;
  border-radius: 50%;
}
.mascot__cheek {
  position: absolute;
  top: 52%;
  width: 13%;
  aspect-ratio: 1;
  background: var(--pink);
  border-radius: 50%;
  opacity: .75;
}
.mascot__cheek.left  { left: 18%; }
.mascot__cheek.right { right: 18%; }
.mascot__mouth {
  position: absolute;
  top: 55%; left: 50%;
  width: 22%; height: 12%;
  transform: translateX(-50%);
  border: var(--stroke) solid var(--ink);
  border-top: none;
  border-radius: 0 0 60px 60px;
}
.mascot__leaf {
  position: absolute;
  top: -14%; left: 50%;
  width: 26%; height: 26%;
  transform: translateX(-30%) rotate(28deg);
  background: var(--lime-dk);
  border: var(--stroke) solid var(--ink);
  border-radius: 0 100% 0 100%;
  transform-origin: bottom left;
  animation: sway 3s ease-in-out infinite;
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  padding: .55rem 1.4rem;
  box-shadow: var(--shadow-hard);
  animation: fade-up .7s .75s both;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hero__scroll span { animation: bob 1.4s ease-in-out infinite; }
.hero__scroll:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }

/* ============================================================
   数据条
   ============================================================ */
.stats {
  padding: clamp(2rem, 6vw, 4rem) 1.25rem;
  max-width: 1080px;
  margin: 0 auto;
}
.stats__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
}
.stat {
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 24px;
  padding: 1.5rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-hard);

  opacity: 0;
  transform: translateY(24px) scale(.94);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.stat.in { opacity: 1; transform: translateY(0) scale(1); }
.stat:hover { transform: translateY(-4px) rotate(-1.5deg); }
.stat:nth-child(4n+1) { background: #EAFBE0; }
.stat:nth-child(4n+2) { background: #FFF0DA; }
.stat:nth-child(4n+3) { background: #FFE3EC; }
.stat:nth-child(4n)   { background: #DFF6FE; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  line-height: 1;
  color: var(--ink);
}
.stat__label { font-weight: 500; margin-top: .4rem; color: var(--ink-soft); }

/* ============================================================
   分类导航
   ============================================================ */
.catnav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: .75rem 1rem;
  background: rgba(255,249,240,.82);
  backdrop-filter: blur(8px);
  border-bottom: var(--stroke) solid var(--ink);
}
.catnav__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  justify-content: center;
}
.chip {
  font-family: var(--font-display);
  font-size: clamp(.9rem, 2.4vw, 1.05rem);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  padding: .45rem 1.1rem;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.chip:hover { transform: translateY(-3px) scale(1.05); box-shadow: 5px 6px 0 var(--ink); }
.chip[data-accent="lime"]:hover   { background: var(--lime); }
.chip[data-accent="orange"]:hover { background: var(--orange); }
.chip[data-accent="pink"]:hover   { background: var(--pink); color:#fff; }
.chip[data-accent="sky"]:hover    { background: var(--sky); }

/* 滚动高亮当前分类 */
.chip.active { transform: translateY(-2px) scale(1.06); box-shadow: 5px 6px 0 var(--ink); }
.chip.active[data-accent="lime"]   { background: var(--lime); }
.chip.active[data-accent="orange"] { background: var(--orange); }
.chip.active[data-accent="pink"]   { background: var(--pink); color:#fff; }
.chip.active[data-accent="sky"]    { background: var(--sky); }
.chip.pulse { animation: chip-pulse .6s ease-out; }

/* ============================================================
   内容 / 卡片
   ============================================================ */
.content {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) 1.25rem 1rem;
}
.cat {
  scroll-margin-top: 90px;
  margin-bottom: clamp(2.5rem, 7vw, 4rem);
}
.cat__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.4rem;

  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.cat__head.in { opacity: 1; transform: translateX(0); }
.cat__emoji {
  font-size: clamp(2rem, 6vw, 2.8rem);
  filter: drop-shadow(2px 3px 0 rgba(27,67,50,.2));
  display: inline-block;
}
.cat__head.in .cat__emoji { animation: pop-bounce .6s .1s both cubic-bezier(.34,1.56,.64,1); }
.cat__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  color: var(--ink);
}

/* ---------- 彩屑容器 ---------- */
.confetti {
  position: relative;
  height: 0;
  pointer-events: none;
  overflow: visible;
}
.confetti span {
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 1.4rem;
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}
.cat__title u {
  text-decoration: none;
  box-shadow: inset 0 -.5em 0 var(--pill, var(--yellow));
  /* 下划线随入场从左到右展开 */
  background: linear-gradient(var(--pill, var(--yellow)), var(--pill, var(--yellow))) left bottom / 0% .5em no-repeat;
  box-shadow: none;
  transition: background-size .7s .2s ease;
  padding-bottom: 2px;
}
.cat__head.in .cat__title u { background-size: 100% .5em; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.3rem;
}

.card {
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 22px;
  padding: 1.4rem 1.3rem 1.5rem;
  box-shadow: var(--shadow-hard);
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;

  opacity: 0;
  transform: translateX(-50px) rotate(-6deg);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.card.in {
  /* 不再设置静态 transform/opacity，由 wave-in keyframe 接管（fill: both 保持终态） */
  animation: wave-in .55s both cubic-bezier(.34, 1.56, .64, 1);
}
.card:hover {
  transform: translateY(-8px) rotate(1deg) scale(1.02);
  box-shadow: 10px 12px 0 var(--ink);
}
.card::after {
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: var(--card-accent, var(--yellow));
  opacity: .35;
  transition: transform .4s ease, opacity .3s ease;
}
.card:hover::after { transform: scale(1.6); opacity: .5; }
.card__icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: .6rem;
  position: relative;
  z-index: 1;
  transition: transform .3s ease;
}
.card:hover .card__icon { animation: wiggle .6s ease; }
.card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: .5rem;
  position: relative;
  z-index: 1;
}
.card__text {
  color: var(--ink-soft);
  font-size: .98rem;
  position: relative;
  z-index: 1;
}
.card__tag {
  display: inline-block;
  margin-top: .9rem;
  font-family: var(--font-display);
  font-size: .78rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--card-accent, var(--yellow));
  position: relative;
  z-index: 1;
}

/* ============================================================
   页脚
   ============================================================ */
.footer {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 1.25rem clamp(2rem, 5vw, 3rem);
  margin-top: 2rem;
  border-top: var(--stroke) dashed var(--ink);
}
.footer__melon { font-size: 3rem; animation: bob 2.6s ease-in-out infinite; }
.footer__quip {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4vw, 1.7rem);
  color: var(--ink);
  margin: .6rem 0;
}
.footer__copy { color: var(--ink-soft); font-size: .9rem; }
.footer__beian { margin-top: .4rem; font-size: .85rem; }
.footer__beian a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px dotted var(--ink-soft);
  padding-bottom: 1px;
  transition: color .16s ease, border-color .16s ease;
}
.footer__beian a:hover { color: var(--lime-dk); border-color: var(--lime-dk); }
.footer__beian--gongan {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .25rem;
}
.footer__beian-icon {
  height: 1em;
  width: auto;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}

/* ============================================================
   动画关键帧
   ============================================================ */
@keyframes pop-in   { from { opacity:0; transform: rotate(-2deg) scale(.6); } to { opacity:1; transform: rotate(-2deg) scale(1);} }
@keyframes drop-in  { from { opacity:0; transform: translateY(-40px) scale(.8);} to { opacity:1; transform: translateY(0) scale(1);} }
@keyframes fade-up  { from { opacity:0; transform: translateY(22px);} to { opacity:1; transform: translateY(0);} }
@keyframes breathe  { 0%,100%{ transform: translateY(0) scale(1);} 50%{ transform: translateY(-6px) scale(1.02);} }
@keyframes sway     { 0%,100%{ transform: translateX(-30%) rotate(22deg);} 50%{ transform: translateX(-30%) rotate(38deg);} }
@keyframes blink    { 0%,92%,100%{ transform: scaleY(1);} 96%{ transform: scaleY(.1);} }
@keyframes bob      { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }
@keyframes pop-bounce { 0%{ transform: scale(0) rotate(-20deg);} 60%{ transform: scale(1.25) rotate(8deg);} 100%{ transform: scale(1) rotate(0);} }
@keyframes wiggle   { 0%,100%{ transform: rotate(0) scale(1.15);} 25%{ transform: rotate(-12deg) scale(1.2);} 75%{ transform: rotate(12deg) scale(1.2);} }

@keyframes wave-in {
  0%   { opacity: 0; transform: translateX(-50px) rotate(-6deg); }
  60%  { opacity: 1; transform: translateX(8px)   rotate(2deg); }
  100% { opacity: 1; transform: translateX(0)     rotate(0); }
}

@keyframes confetti-pop {
  0%   { opacity: 0; transform: translate(var(--cx, 0), 0) scale(.3); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--cx, 0) * 1.5), -120px) scale(1.1) rotate(180deg); }
}

@keyframes chip-pulse {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.08); }
  70%      { transform: scale(.97); }
}

/* ============================================================
   响应式微调 & 无障碍
   ============================================================ */
@media (max-width: 520px) {
  .card::after { width: 70px; height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card { opacity: 1; transform: none; }
  .stat, .cat__head { opacity: 1; transform: none; }
  .cat__title u { background-size: 100% .5em; }
  .blob        { transform: none !important; }
  .floaty      { animation: none !important; transform: none !important; opacity: 0; }
  .confetti span { display: none !important; }
  .chip.pulse  { animation: none !important; }
}