*{box-sizing:border-box;margin:0;padding:0}
:root{--pink:#ff7eb6;--lav:#b388ff;--sky:#7cc4ff;--ink:#6b4f7a}
html{scroll-behavior:smooth}
body{min-height:100vh;font-family:'Quicksand','ZCOOL KuaiLe',sans-serif;color:var(--ink);overflow-x:hidden;background:#f3e4ff}
h1,h2,h3,.sub,.badge,figcaption,.foot,.like{font-family:'ZCOOL KuaiLe','Quicksand',sans-serif;font-weight:400}

/* ===== 背景：极光渐变 ===== */
.aurora{position:fixed;inset:0;z-index:-3;background:linear-gradient(160deg,#ffd6ec 0%,#ead8ff 40%,#cfe6ff 75%,#ffe9f5 100%);overflow:hidden}
.aurora i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(70px);opacity:.55;animation:aur 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:#ffb3d9;top:-20vmax;left:-15vmax}
.aurora i:nth-child(2){background:#c7b0ff;top:20vh;right:-25vmax;animation-duration:28s;animation-delay:-6s}
.aurora i:nth-child(3){background:#a6dcff;bottom:-30vmax;left:15vw;animation-duration:32s;animation-delay:-12s}
@keyframes aur{to{transform:translate(12vw,8vh) scale(1.2) rotate(25deg)}}
#fx{position:fixed;inset:0;z-index:-2;pointer-events:none}
#clouds{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cloud{position:absolute;left:0;width:200px;height:60px;background:#fff;border-radius:60px;filter:drop-shadow(0 8px 14px rgba(190,160,230,.3));animation:drift var(--d) linear infinite;animation-delay:var(--dl)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:90px;height:90px;top:-45px;left:30px}.cloud::after{width:70px;height:70px;top:-32px;left:100px}
@keyframes drift{from{transform:translateX(-260px) scale(var(--s))}to{transform:translateX(calc(100vw + 260px)) scale(var(--s))}}

/* ===== Hero ===== */
.hero{position:relative;text-align:center;padding:90px 20px 50px;overflow:hidden}
.rainbow{position:absolute;left:50%;top:40px;width:min(900px,120vw);aspect-ratio:2/1;transform:translateX(-50%);border-radius:50% 50% 0 0/100% 100% 0 0;
background:radial-gradient(circle at 50% 100%,transparent 54%,rgba(255,170,200,.45) 55%,rgba(255,215,160,.45) 60%,rgba(255,250,170,.4) 65%,rgba(180,240,200,.4) 70%,rgba(160,210,255,.45) 75%,rgba(200,170,255,.45) 80%,transparent 81%);
-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent);pointer-events:none}
.moon{position:absolute;top:30px;right:8%;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffbe6,#ffe8a8);box-shadow:0 0 40px 14px rgba(255,240,180,.7);animation:bob 6s ease-in-out infinite}
.moon span{display:none}
.moon::after{content:"";position:absolute;top:30px;left:24px;width:14px;height:14px;border-radius:50%;background:rgba(240,200,120,.35);box-shadow:30px 18px 0 -3px rgba(240,200,120,.3),10px 34px 0 -4px rgba(240,200,120,.3)}
.mascots{position:absolute;inset:0;pointer-events:none}
.mascot{position:absolute;width:110px;filter:drop-shadow(0 8px 12px rgba(255,140,190,.35));animation:hop 2.4s ease-in-out infinite}
.m1{left:7%;top:150px;transform:rotate(-12deg)}.m2{right:9%;top:170px;animation-delay:-1.2s;width:90px}
@keyframes hop{0%,100%{translate:0 0}40%{translate:0 -22px}60%{translate:0 -18px}}
.title-wrap{position:relative;display:inline-block;margin-top:40px}
.ears{position:absolute;top:-46px;left:50%;width:min(300px,60vw);transform:translateX(-50%);animation:wig 3s ease-in-out infinite;transform-origin:50% 100%}
@keyframes wig{0%,100%{rotate:0deg}50%{rotate:2deg}}
.title{position:relative;font-size:clamp(2.3rem,7.5vw,5rem);line-height:1.2;padding:0 .3em;
background:linear-gradient(100deg,#ff6fb0 0%,#ffa8d6 20%,#fff 30%,#b388ff 45%,#7cc4ff 65%,#fff 75%,#ff8fc8 90%);background-size:250% auto;
-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite;
filter:drop-shadow(0 3px 0 #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 8px 18px rgba(179,136,255,.45))}
@keyframes shimmer{to{background-position:-250% center}}
.bow{position:absolute;top:-.2em;left:-.45em;font-size:.55em;-webkit-text-fill-color:initial;color:initial;animation:bob 3s ease-in-out infinite}
.bow.r{left:auto;right:-.45em;transform:scaleX(-1);animation-delay:-1.5s}
.sub{margin-top:18px;font-size:clamp(1rem,2.8vw,1.35rem);color:#8a62b0;min-height:1.6em;
display:inline-block;background:rgba(255,255,255,.55);padding:8px 22px;border-radius:30px;border:2px dashed #fff;box-shadow:0 6px 18px rgba(200,160,240,.25)}
.caret{color:var(--pink);animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.hero-paws{margin-top:22px;font-size:1.3rem;letter-spacing:.4em;color:#fff;text-shadow:0 0 8px #ffb3d9;animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* ===== 分隔波浪 ===== */
.wave{display:block;width:100%;height:60px;fill:rgba(255,255,255,.45);margin-bottom:-1px}
.wave.flip{transform:scaleY(-1);margin-top:-1px}
.band{background:rgba(255,255,255,.45);padding:20px 0 50px}
.sec-title{text-align:center;font-size:clamp(1.7rem,4.5vw,2.4rem);color:var(--lav);text-shadow:0 2px 0 #fff,0 0 14px #fff;margin:10px 0 34px}
.sec-title span{display:inline-block;animation:bob 2.5s ease-in-out infinite}.sec-title span:last-child{animation-delay:-1.2s}

/* ===== 猫咪卡片 ===== */
.gallery{max-width:1280px;margin:0 auto;padding:30px 20px 10px;display:flex;flex-wrap:wrap;justify-content:center;gap:40px 28px}
.card{--c:#ffb3d1;position:relative;width:210px;padding:14px 14px 16px;text-align:center;border-radius:32px;
background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--c) 22%,#fff) 100%);border:4px solid #fff;
box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 55%,#fff),0 14px 30px color-mix(in srgb,var(--c) 45%,transparent);
rotate:var(--rot);animation:floaty 5s ease-in-out infinite;animation-delay:var(--dl);transition:transform .45s cubic-bezier(.3,1.6,.5,1),box-shadow .4s}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}
.card:hover{transform:scale(1.06) rotate(calc(var(--rot) * -1.5));box-shadow:0 0 0 3px var(--c),0 0 30px 6px color-mix(in srgb,var(--c) 70%,transparent),0 20px 40px color-mix(in srgb,var(--c) 50%,transparent);z-index:2}
.card-ears{position:absolute;top:-24px;left:0;right:0;height:34px;pointer-events:none}
.card-ears i{position:absolute;top:0;width:44px;height:40px;background:#fff;clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:6px}
.card-ears i::after{content:"";position:absolute;inset:12px 11px 0;background:var(--c);clip-path:polygon(50% 0,100% 100%,0 100%)}
.card-ears i:first-child{left:26px;rotate:-14deg}.card-ears i:last-child{right:26px;rotate:14deg}
.tape{position:absolute;top:6px;right:-14px;width:64px;height:20px;rotate:38deg;z-index:3;border-radius:3px;opacity:.9;
background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--c) 75%,#fff) 0 6px,#fff 6px 12px);box-shadow:0 2px 4px rgba(0,0,0,.08)}
.badge{position:absolute;top:22px;left:-12px;z-index:3;background:var(--c);color:#fff;font-size:.85rem;padding:4px 12px;border-radius:14px;
border:2px solid #fff;box-shadow:0 4px 10px color-mix(in srgb,var(--c) 60%,transparent);rotate:-10deg;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.polaroid{background:#fff;padding:8px 8px 10px;border-radius:22px;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 30%,#fff)}
.photo{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;cursor:zoom-in}
.name{font-size:1.75rem;margin:12px 0 4px;color:color-mix(in srgb,var(--c) 45%,#d14f8f);text-shadow:0 2px 0 #fff}
.name::before,.name::after{content:"✦";font-size:.6em;color:var(--c);margin:0 .3em;vertical-align:middle}
.desc{font-size:.95rem;line-height:1.5;color:#7d6a92;min-height:3em}
.like{margin-top:10px;border:none;cursor:pointer;background:#fff;color:#ff5c9a;font-size:1rem;padding:6px 16px;border-radius:20px;
box-shadow:0 0 0 2px #ffd1e6,0 4px 10px rgba(255,120,170,.25);display:inline-flex;gap:6px;align-items:center;transition:transform .2s}
.like:hover{transform:scale(1.08)}.like b{font-weight:700;font-family:'Quicksand',sans-serif}
.like.pop .heart{animation:beat .5s}@keyframes beat{30%{transform:scale(1.7)}60%{transform:scale(.9)}}

/* ===== 照片墙（拼贴手帐风） ===== */
.wall-sec{position:relative;padding:40px 20px 30px}
.wall{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:40px 34px}
.snap{position:relative;width:calc((100% - 68px)/3);background:#fff;padding:12px 12px 14px;border-radius:10px;cursor:zoom-in;
rotate:var(--rot);box-shadow:0 14px 30px rgba(170,130,210,.3),0 2px 4px rgba(0,0,0,.06);transition:transform .4s cubic-bezier(.3,1.6,.5,1),rotate .4s,box-shadow .4s}
.snap:hover{rotate:0deg;transform:scale(1.04) translateY(-6px);box-shadow:0 20px 40px rgba(255,130,190,.4);z-index:2}
.snap img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
.snap figcaption{text-align:center;font-size:1.15rem;color:#e0609e;padding-top:12px}
.snap .tape{top:-12px;right:auto;width:90px;height:24px;--c:#ffb3d1}
.snap .t1{left:-18px;rotate:-35deg}.snap .t2{right:-18px;left:auto;rotate:35deg;--c:#b9d9ff}
.snap:nth-child(3n+2) .t1{--c:#d4c2ff}.snap:nth-child(3n) .t2{--c:#ffe0a3}
.sticker{position:absolute;font-size:1.9rem;filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 3px 6px rgba(0,0,0,.15));animation:bob 3s ease-in-out infinite}
.s1{bottom:44px;left:-16px}.s2{top:42%;right:-16px;animation-delay:-1.5s;font-size:1.5rem}
.float-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fd{position:absolute;font-size:2.2rem;opacity:.8;animation:swim 9s ease-in-out infinite}
.f1{top:4%;left:6%}.f2{top:10%;right:7%;animation-delay:-3s}.f3{bottom:12%;left:3%;animation-delay:-5s}.f4{bottom:6%;right:4%;animation-delay:-2s}
@keyframes swim{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(18px,-20px) rotate(10deg)}}

/* ===== 页脚 ===== */
.foot{text-align:center;padding:30px 20px 50px;color:#9b7fb8;font-size:1.15rem}
.sleep{width:min(380px,85vw);display:block;margin:0 auto 6px;filter:drop-shadow(0 10px 20px rgba(180,140,230,.35));animation:bob 5s ease-in-out infinite}
.zz text{animation:zz 3s ease-in-out infinite}.zz text:nth-child(2){animation-delay:-1s}.zz text:nth-child(3){animation-delay:-2s}
@keyframes zz{0%,100%{opacity:.2;transform:translateY(4px)}50%{opacity:1;transform:translateY(-4px)}}

/* ===== 特效 ===== */
.pop-fx{position:fixed;z-index:50;pointer-events:none;translate:-50% -50%;animation:popfx 1s ease-out forwards}
@keyframes popfx{0%{opacity:1;transform:translate(0,0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1)}}
.trail{position:fixed;z-index:49;pointer-events:none;color:#ff9fd0;font-size:14px;translate:-50% -50%;text-shadow:0 0 6px #fff;animation:trail .9s ease-out forwards}
@keyframes trail{to{opacity:0;transform:translateY(16px) scale(.3) rotate(90deg)}}

/* ===== 灯箱 ===== */
.lightbox{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;
background:radial-gradient(circle,rgba(200,160,255,.55),rgba(110,80,160,.75));backdrop-filter:blur(8px);animation:fade .3s}
.lightbox[hidden]{display:none}
.lightbox figure{background:#fff;padding:14px;border-radius:28px;max-width:min(92vw,620px);box-shadow:0 0 0 6px #ffd6ec,0 0 60px #ffc8f0}
#lb-img{display:block;max-width:100%;max-height:74vh;margin:0 auto;border-radius:18px;object-fit:contain}
#lb-img.in{animation:zoom .4s cubic-bezier(.3,1.5,.6,1)}
#lb-cap{text-align:center;font-size:1.35rem;color:#ff5c9a;padding-top:10px}
.lb-btn{position:absolute;border:none;cursor:pointer;background:#fff;color:#ff6fa8;border-radius:50%;width:52px;height:52px;font-size:2rem;line-height:1;box-shadow:0 4px 16px rgba(255,120,180,.4);transition:transform .2s}
.lb-btn:hover{transform:scale(1.12)}
.close{top:18px;right:20px}.prev{left:18px;top:50%;margin-top:-26px}.next{right:18px;top:50%;margin-top:-26px}
@keyframes fade{from{opacity:0}}@keyframes zoom{from{transform:scale(.8);opacity:0}}

/* ===== 响应式 ===== */
@media (max-width:900px){.snap{width:calc((100% - 34px)/2)}.mascot{width:80px}.m2{width:66px}.moon{width:64px;height:64px;right:5%}}
@media (max-width:600px){
  .hero{padding:70px 14px 30px}.m1{left:2%;top:96px;width:58px}.m2{right:3%;top:auto;bottom:14px;width:52px}
  .moon{top:16px;width:52px;height:52px}.moon::after{top:16px;left:12px;width:10px;height:10px}
  .ears{top:-30px}.title-wrap{margin-top:34px}.sub{padding:6px 14px}
  .gallery{gap:36px 14px;padding:24px 12px 6px}.card{width:calc(50% - 7px);padding:10px 10px 12px;border-radius:24px}
  .card-ears i{width:32px;height:30px}.card-ears{top:-18px}.card-ears i:first-child{left:16px}.card-ears i:last-child{right:16px}
  .badge{font-size:.72rem;padding:3px 8px;top:16px;left:-8px}.tape{width:46px;height:15px;right:-10px}
  .name{font-size:1.3rem}.desc{font-size:.82rem}.like{padding:4px 12px;font-size:.9rem}
  .card:last-child{width:62%}
  .wall{gap:34px}.snap{width:92%}.fd{font-size:1.6rem}
  .prev{left:6px}.next{right:6px}.lb-btn{width:44px;height:44px;margin-top:-22px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* hero 布局修正 */
.hero{display:flex;flex-direction:column;align-items:center;min-height:420px;justify-content:center}
.title{background-image:linear-gradient(100deg,#ff6fb0 0%,#ff9fd0 20%,#ffd0ec 30%,#b388ff 45%,#7cb8ff 65%,#c9b0ff 75%,#ff7fc0 90%)}
.m1{top:auto;bottom:40px;left:8%}.m2{top:auto;bottom:60px;right:8%}
@media (max-width:600px){.hero{min-height:340px}.m1{bottom:10px;left:3%}.m2{bottom:14px;right:3%}}
/* 横图占两格，高度与竖图一致 */
.snap.wide{width:calc((100% - 68px)/3*2 + 34px)}
.snap.wide img{aspect-ratio:8/5}
@media (max-width:900px){.snap.wide{width:100%}.snap.wide img{height:auto;aspect-ratio:3/2}}
@media (max-width:600px){.snap.wide{width:92%}}