/* ================== CCR · 猪猪名片 ================== */
:root{
  --pink:#ff6f91;          /* 主题色 1：猪猪粉 */
  --ink:#1f1b2e;           /* 主题色 2：夜色墨 */
  --cream:#fff6ec;         /* 背景奶油 */
  --paper:#ffffff;
  --shadow:0 10px 30px rgba(31,27,46,.12);
  --shadow-lg:0 20px 50px rgba(31,27,46,.18);
  --radius:22px;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft Yahei","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ===== Scroll Snap 容器 ===== */
.snap{
  height:100vh;height:100dvh;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.snap::-webkit-scrollbar{display:none}
.sec{
  min-height:100vh;min-height:100dvh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding:clamp(28px,6vw,72px) clamp(20px,5vw,80px);
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}

/* ===== 侧边点导航 ===== */
.dots{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);
  z-index:30;display:flex;flex-direction:column;gap:14px;
}
.dots a{
  width:12px;height:12px;border-radius:50%;
  background:rgba(31,27,46,.22);position:relative;transition:.3s;
}
.dots a::after{
  content:attr(data-label);position:absolute;right:22px;top:50%;
  transform:translateY(-50%);background:var(--ink);color:#fff;
  font-size:12px;padding:4px 10px;border-radius:10px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.3s;
}
.dots a:hover{background:var(--pink);transform:scale(1.3)}
.dots a:hover::after{opacity:1;right:28px}
.dots a.active{background:var(--pink);box-shadow:0 0 0 4px rgba(255,111,145,.2)}
@media(max-width:640px){.dots{right:8px;gap:10px}.dots a{width:9px;height:9px}.dots a::after{display:none}}

/* ===== 顶部戳猪按钮 ===== */
.oink-btn{
  position:fixed;top:18px;right:18px;z-index:40;
  background:var(--pink);color:#fff;font-weight:700;
  padding:10px 16px;border-radius:999px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:6px;font-size:15px;
  transition:.2s;
}
.oink-btn:hover{transform:translateY(-2px) rotate(-3deg)}
.oink-btn:active{transform:scale(.92)}
@media(max-width:640px){.oink-btn span{display:none}.oink-btn{padding:10px 12px;font-size:18px}}

/* ===== 右下角圆形音乐按钮 ===== */
.music-btn{
  position:fixed;right:18px;bottom:18px;z-index:40;
  width:48px;height:48px;border-radius:50%;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);transition:.25s;
  font-size:22px;line-height:1;
}
.music-btn:hover{transform:translateY(-2px);background:var(--pink)}
.music-btn:active{transform:scale(.92)}
.music-btn .music-ico{display:inline-block;transition:transform .3s}
.music-btn.playing{background:var(--pink);box-shadow:0 0 0 6px rgba(255,111,145,.22),var(--shadow)}
.music-btn.playing .music-ico{animation:musicspin 3s linear infinite}
@keyframes musicspin{to{transform:rotate(360deg)}}
@media(max-width:640px){.music-btn{width:42px;height:42px;font-size:19px;right:12px;bottom:12px}}

/* =========================================================
   1. HERO
========================================================= */
.hero{
  background:var(--cream);
  text-align:center;align-items:center;
}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.float{
  position:absolute;font-size:clamp(28px,4vw,46px);opacity:.35;
  animation:floaty 9s ease-in-out infinite;
}
.f1{top:10%;left:8%;animation-delay:0s}
.f2{top:22%;right:12%;animation-delay:-2s}
.f3{top:70%;left:14%;animation-delay:-4s;font-size:clamp(40px,6vw,72px);opacity:.5}
.f4{top:78%;right:18%;animation-delay:-1s}
.f5{top:42%;left:4%;animation-delay:-5s}
.f6{top:55%;right:6%;animation-delay:-3s}
.f7{top:14%;right:30%;animation-delay:-6s}
.f8{top:85%;left:42%;animation-delay:-2.5s}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-22px) rotate(6deg)}
}

.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px}
.avatar-wrap{
  position:relative;width:clamp(180px,28vw,260px);aspect-ratio:1;
  border-radius:50%;
  animation:bounceIn .9s cubic-bezier(.2,1.6,.4,1) both;
}
.avatar-wrap img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:6px solid #fff;box-shadow:var(--shadow-lg);
  cursor:pointer;transition:transform .25s;
  position:relative;z-index:2;
}
.avatar-wrap img:hover{transform:scale(1.05) rotate(-4deg)}
.avatar-wrap img:active{transform:scale(.9)}
.halo{
  position:absolute;inset:-14px;border-radius:50%;
  border:3px dashed var(--pink);animation:spin 16s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounceIn{
  0%{transform:scale(.3);opacity:0}
  70%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1)}
}

.title{font-size:clamp(46px,9vw,96px);font-weight:900;letter-spacing:2px;line-height:1}
.title .en{color:var(--pink);text-shadow:4px 4px 0 var(--ink)}
.title .cn{display:block;font-size:.42em;color:var(--ink);margin-top:8px;letter-spacing:6px}
.subtitle{font-size:clamp(14px,2vw,18px);color:var(--ink);opacity:.75}
.tag{
  display:inline-block;background:var(--ink);color:#fff;
  padding:8px 18px;border-radius:999px;font-size:clamp(13px,1.8vw,16px);
  transform:rotate(-2deg);box-shadow:var(--shadow);
  animation:wobble 2.6s ease-in-out infinite;
}
@keyframes wobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.scrolldown{
  margin-top:26px;font-size:14px;opacity:.6;
  display:flex;align-items:center;gap:6px;
}
.scrolldown span{animation:down 1.4s ease-in-out infinite}
@keyframes down{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* =========================================================
   共用 h2
========================================================= */
.h2{
  font-size:clamp(28px,5vw,44px);font-weight:900;
  margin-bottom:clamp(24px,4vw,42px);
  position:relative;display:inline-block;letter-spacing:1px;
}
.h2::after{
  content:"";position:absolute;left:0;bottom:-6px;
  width:55%;height:10px;background:var(--pink);z-index:-1;border-radius:10px;
  opacity:.55;
}
.h2 small{font-size:.42em;color:var(--ink);opacity:.45;font-weight:500;margin-left:8px}

/* =========================================================
   2. 档案
========================================================= */
.profile{background:var(--paper)}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
}
.card{
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:22px 20px;
  position:relative;transition:.3s;
  box-shadow:6px 6px 0 var(--ink);
}
.card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--pink)}
.card b{color:var(--pink);font-size:13px;letter-spacing:2px;font-weight:800}
.card p{font-size:clamp(16px,2.2vw,20px);font-weight:700;margin-top:6px;line-height:1.4}
.card small{display:block;margin-top:8px;opacity:.55;font-size:12px}
.mbti-tag{
  display:inline-block;background:var(--ink);color:var(--cream);
  width:36px;height:36px;border-radius:10px;text-align:center;line-height:36px;
  font-weight:900;margin-right:6px;font-size:18px;
}
.mbti-tag:nth-child(3){background:var(--pink)}
.card.heart{background:var(--pink);color:#fff;border-color:var(--pink);box-shadow:6px 6px 0 var(--ink)}
.card.heart b{color:#fff;opacity:.9}

/* =========================================================
   3. 语录
========================================================= */
.quotes{background:var(--cream);align-items:flex-start}
.quote-stage{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  width:100%;margin:auto 0;
}
.bubble{
  position:relative;background:#fff;padding:36px 44px;border-radius:28px;
  border:3px solid var(--ink);box-shadow:var(--shadow);
  font-size:clamp(24px,5vw,44px);font-weight:900;
  max-width:min(720px,92%);text-align:center;
  transition:transform .3s;
}
.bubble::after{
  content:"";position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
  border:12px solid transparent;border-top-color:var(--ink);
}
.bubble.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.pill-btn{
  background:var(--pink);color:#fff;font-weight:800;padding:12px 28px;
  border-radius:999px;box-shadow:var(--shadow);transition:.2s;font-size:15px;
}
.pill-btn:hover{transform:translateY(-3px)}
.pill-btn:active{transform:scale(.94)}
.mini-quotes{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:24px;
}
.mini-quotes li{
  background:#fff;border:2px solid var(--ink);border-radius:999px;
  padding:6px 16px;font-size:14px;font-weight:700;
  transition:.2s;cursor:default;
}
.mini-quotes li:hover{background:var(--pink);color:#fff;transform:rotate(-3deg)}

/* =========================================================
   4. 爱好
========================================================= */
.hobby{background:var(--paper)}
.hobby-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.hobby .hobby{
  all:unset;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:6px;padding:26px 18px;text-align:center;
  background:var(--cream);border-radius:var(--radius);border:2px solid var(--ink);
  font-size:56px;transition:.3s;
  box-shadow:4px 4px 0 var(--ink);
  animation:rise .6s both;animation-delay:calc(var(--d) * 1s);
}
.hobby-grid > .hobby{
  all:unset;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:8px;padding:28px 16px;text-align:center;cursor:default;
  background:var(--cream);border-radius:var(--radius);border:2px solid var(--ink);
  font-size:56px;transition:.3s;
  box-shadow:5px 5px 0 var(--ink);
  animation:rise .7s both;animation-delay:calc(var(--d) * 1s);
}
.hobby-grid > .hobby span{font-size:17px;font-weight:800;margin-top:6px}
.hobby-grid > .hobby i{font-style:normal;font-size:13px;opacity:.6}
.hobby-grid > .hobby:hover{
  transform:translate(-4px,-4px) rotate(-1deg);
  box-shadow:9px 9px 0 var(--pink);
  background:#fff;
}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* =========================================================
   5. 表情包墙
========================================================= */
.emotes{background:var(--cream)}
.emote-wall{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.emote-wall figure{
  background:#fff;border:2px solid var(--ink);border-radius:16px;
  overflow:hidden;position:relative;aspect-ratio:1;
  box-shadow:3px 3px 0 var(--ink);transition:.25s;
  cursor:pointer;
}
.emote-wall figure:hover{
  transform:translate(-3px,-3px) rotate(-2deg);
  box-shadow:7px 7px 0 var(--pink);z-index:2;
}
.emote-wall img{width:100%;height:100%;object-fit:cover}
.emote-wall figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--ink);color:#fff;font-size:12px;font-weight:700;
  padding:4px 8px;text-align:center;
  transform:translateY(100%);transition:.25s;
}
.emote-wall figure:hover figcaption{transform:none}

/* =========================================================
   6. 反内卷宣言
========================================================= */
.manifest{background:var(--ink);color:var(--cream)}
.manifest .h2{color:#fff}
.manifest .h2::after{background:var(--pink)}
.manifest-box{
  max-width:760px;background:var(--cream);color:var(--ink);
  padding:clamp(24px,4vw,40px);border-radius:var(--radius);
  box-shadow:10px 10px 0 var(--pink);
  position:relative;
}
.manifest-box::before{
  content:"🐷";position:absolute;top:-24px;left:-24px;
  font-size:60px;background:var(--pink);width:80px;height:80px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
}
.manifest-box .big{font-size:clamp(18px,2.4vw,22px);font-weight:800;margin-bottom:16px}
.rules{list-style:none;display:flex;flex-direction:column;gap:10px}
.rules li{
  padding:10px 14px 10px 38px;background:#fff;border-radius:12px;
  position:relative;font-weight:600;font-size:clamp(14px,1.8vw,16px);
  border-left:5px solid var(--pink);
}
.rules li::before{
  content:"✓";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--pink);font-weight:900;
}
.sign{margin-top:18px;text-align:right;font-weight:800;color:var(--pink)}

/* =========================================================
   7. 彩蛋
========================================================= */
.outro{background:var(--pink);color:#fff;text-align:center;align-items:center}
.outro-inner{max-width:520px;display:flex;flex-direction:column;gap:18px;align-items:center;margin:auto}
.outro-av{
  width:140px;height:140px;border-radius:50%;border:6px solid #fff;
  box-shadow:var(--shadow-lg);animation:spin2 6s ease-in-out infinite;
}
@keyframes spin2{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.outro h2{font-size:clamp(32px,6vw,52px);line-height:1.2;font-weight:900;letter-spacing:2px}
.achv{
  background:var(--ink);padding:10px 22px;border-radius:999px;
  font-weight:800;font-size:clamp(14px,2vw,16px);
}
.big-btn{
  background:#fff;color:var(--pink);font-weight:900;
  padding:16px 32px;border-radius:999px;font-size:18px;
  box-shadow:0 8px 0 var(--ink);transition:.15s;
}
.big-btn:hover{transform:translateY(-3px);box-shadow:0 11px 0 var(--ink)}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.foot{font-size:13px;opacity:.85;margin-top:6px}
.back{
  margin-top:6px;font-size:13px;background:rgba(0,0,0,.15);
  padding:6px 14px;border-radius:999px;
}

/* =========================================================
   burst 飞出层
========================================================= */
#burstLayer{
  position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden;
}
.burst-emoji{
  position:absolute;font-size:28px;
  animation:burst 1s ease-out forwards;
  will-change:transform,opacity;
}
@keyframes burst{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:1}
  100%{transform:translate(var(--tx),var(--ty)) scale(1.2) rotate(var(--r));opacity:0}
}

/* ===== 进入动画通用 ===== */
.sec .h2, .sec .card, .sec .bubble, .sec .mini-quotes li,
.sec .emote-wall figure, .sec .manifest-box, .sec .outro-inner > *{
  opacity:0;transform:translateY(24px);transition:.6s cubic-bezier(.2,.8,.3,1);
}
.sec.in-view .h2,
.sec.in-view .card,
.sec.in-view .bubble,
.sec.in-view .mini-quotes li,
.sec.in-view .emote-wall figure,
.sec.in-view .manifest-box,
.sec.in-view .outro-inner > *{opacity:1;transform:none}
.sec.in-view .card:nth-child(2){transition-delay:.05s}
.sec.in-view .card:nth-child(3){transition-delay:.1s}
.sec.in-view .card:nth-child(4){transition-delay:.15s}
.sec.in-view .card:nth-child(5){transition-delay:.2s}
.sec.in-view .card:nth-child(6){transition-delay:.25s}
.sec.in-view .emote-wall figure:nth-child(n){transition-delay:calc(var(--i,0)*40ms)}

@media(max-width:640px){
  .sec{padding:clamp(20px,6vw,36px) 18px}
  .h2::after{height:8px}
  .manifest-box::before{top:-18px;left:50%;transform:translateX(-50%);width:60px;height:60px;font-size:40px}
}