/* ===== 奶蛙通用动画钩子（naiwa.js 生成的 SVG） ===== */
.naiwa { display: block; width: 100%; height: auto; overflow: visible; }
.naiwa .nw-root { transform-box: view-box; transform-origin: 100px 233px; }
.naiwa .nw-eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
.naiwa .nw-pupils { transition: transform .18s ease-out; transform: translate(var(--ex, 0px), var(--ey, 0px)); }
.naiwa .nw-belly { transform-box: fill-box; transform-origin: 50% 30%; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* 表情切换：元素用 data-on 声明在哪些 mood 下出现 */
.naiwa [data-on] { display: none; }
.naiwa[data-mood="smile"] [data-on~="smile"], .naiwa[data-mood="laugh"] [data-on~="laugh"],
.naiwa[data-mood="hold"] [data-on~="hold"], .naiwa[data-mood="o"] [data-on~="o"],
.naiwa[data-mood="dizzy"] [data-on~="dizzy"], .naiwa[data-mood="sleep"] [data-on~="sleep"] { display: inline; }

/* 捧腹大笑：前仰后合 + 肚皮抖动；憋笑：原地发抖 */
.naiwa[data-mood="laugh"] .nw-root { animation: nw-laugh .15s ease-in-out infinite alternate; }
.naiwa[data-mood="laugh"] .nw-belly { animation: nw-jiggle .15s ease-in-out infinite alternate-reverse; }
.naiwa[data-mood="hold"] .nw-root { animation: nw-tremble .07s linear infinite alternate; }
@keyframes nw-laugh { from { transform: rotate(4deg) translateY(0) scale(1.01, .99); } to { transform: rotate(7deg) translateY(-4px) scale(.99, 1.02); } }
@keyframes nw-jiggle { from { transform: scale(1, 1); } to { transform: scale(1.04, .95); } }
@keyframes nw-tremble { from { transform: translateX(-1.5px) scale(1, .99); } to { transform: translateX(1.5px) scale(1, 1.01); } }

/* ===== 主视觉 ===== */
.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 24px;
  max-width: 1180px; margin: 0 auto; padding: 26px 20px 8px;
}
.greet {
  display: inline-block; margin: 0 0 10px; padding: 4px 12px; font-size: 15px;
  border-radius: 999px; background: var(--panel); border: 2px solid var(--panel-line);
}
.hero-title { margin: 0; font-size: clamp(30px, 5vw, 56px); line-height: 1.15; font-weight: normal; }
.hero-title .hl {
  position: relative; display: inline-block; color: #E8590C;
  background: linear-gradient(transparent 62%, rgba(255, 217, 59, .75) 62%);
  animation: hl-bounce 3s var(--spring) infinite;
}
@keyframes hl-bounce { 0%, 80%, 100% { transform: translateY(0); } 85% { transform: translateY(-8px) rotate(-2deg); } 90% { transform: translateY(0); } }
.hero-sub { margin: 14px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 34em; }
.hero-sub b { color: #E8590C; font-weight: normal; }
.hero-stat { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }
.hero-stat b { font-weight: normal; color: var(--ink); font-size: 18px; }
.timer {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 14px;
  font-size: 15px; border-radius: 12px; background: #3B2A12; color: #FFE9A8;
  box-shadow: 0 4px 0 #1E150A;
}
.timer b { font-family: ui-monospace, monospace; font-weight: normal; font-size: 18px; color: #FFD93B; min-width: 3.2em; text-align: center; }
.timer.ring { animation: ring .12s linear 8 alternate; }
@keyframes ring { from { rotate: -3deg; } to { rotate: 3deg; } }

.hero-stage { position: relative; height: 360px; display: grid; place-items: end center; }
.hero-nw {
  position: relative; z-index: 2; width: 230px; padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 100%;
  animation: hero-drop 1.1s var(--spring) both;
}
.hero-nw:focus-visible { outline: 3px dashed var(--nw-line); outline-offset: 8px; border-radius: 30px; }
.hero-nw .naiwa { transform-origin: 50% 97%; }
.hero-nw .naiwa[data-mood="smile"] .nw-root { animation: breathe 2.8s ease-in-out infinite; }
.hero-nw:hover .naiwa[data-mood="smile"] .nw-arm-r { animation: arm-hi .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 20% 10%; }
@keyframes hero-drop {
  0% { transform: translateY(-440px) scale(.8, 1.2); opacity: 0; }
  55% { transform: translateY(0) scale(1.25, .72); opacity: 1; }
  75% { transform: translateY(-26px) scale(.92, 1.08); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .975); } }
@keyframes arm-hi { from { transform: rotate(0deg); } to { transform: rotate(-28deg); } }

/* 笑到脱力：仰面倒地，两条腿还在抽 */
.hero-nw.knocked { animation: knock-over .7s var(--smooth) forwards; }
.hero-nw.knocked .nw-leg-l { animation: twitch .18s ease-in-out infinite alternate; }
.hero-nw.knocked .nw-leg-r { animation: twitch .18s ease-in-out infinite alternate-reverse; }
.hero-nw .nw-leg { transform-box: fill-box; transform-origin: 50% 0; }
@keyframes knock-over { to { transform: translate(40px, -10px) rotate(-96deg); } }
@keyframes twitch { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }

.hero-shadow {
  position: absolute; bottom: -6px; left: 50%; width: 190px; height: 22px; translate: -50% 0;
  border-radius: 50%; background: rgba(122, 78, 0, .2); filter: blur(3px);
  animation: shadow-breathe 2.8s ease-in-out infinite;
}
@keyframes shadow-breathe { 50% { transform: scaleX(1.05); } }

.bubble {
  position: absolute; z-index: 3; top: 0; left: 50%; max-width: min(320px, 90vw);
  translate: -50% 0; padding: 10px 16px; border-radius: 18px;
  background: #fff; color: #3B2A12; border: 3px solid var(--nw-line);
  font-size: 17px; line-height: 1.45; text-align: center;
  box-shadow: 0 4px 0 var(--nw-line);
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -14px; translate: -50% 0;
  border: 11px solid transparent; border-top-color: var(--nw-line); border-bottom: 0;
}
.bubble.pop { animation: bubble-pop .5s var(--spring); }
@keyframes bubble-pop { 0% { transform: scale(.6) rotate(-6deg); } 100% { transform: scale(1) rotate(0); } }

.zzz { position: absolute; z-index: 3; right: 18%; top: 32%; display: none; font-size: 26px; color: var(--nw-brown); }
.zzz span { display: inline-block; animation: zzz 2.2s ease-in infinite; opacity: 0; }
.zzz span:nth-child(2) { animation-delay: .6s; font-size: .8em; }
.zzz span:nth-child(3) { animation-delay: 1.2s; font-size: .6em; }
.hero-stage.sleeping .zzz { display: block; }
@keyframes zzz { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(26px, -60px) rotate(18deg); opacity: 0; } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 12px; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-stage { height: 320px; order: -1; }
  .hero-nw { width: 190px; }
  .hero-shadow { width: 150px; }
}