/* ===========================================================
   提醒弹窗 & 两套动画的样式
   =========================================================== */

/* ---------------- 提示卡片 ---------------- */
.reminder-root{position:fixed;inset:0;z-index:100;pointer-events:none;}
.reminder-overlay{
  position:absolute;inset:0;pointer-events:auto;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%, rgba(12,16,28,.55), rgba(8,10,18,.82));
  backdrop-filter:blur(2px);animation:ovIn .35s ease;overflow:hidden;
}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.reminder-overlay.is-closing{animation:ovOut .3s ease forwards;}
@keyframes ovOut{to{opacity:0}}

.reminder-card{
  position:relative;z-index:2;width:min(420px,84vw);padding:30px 26px 24px;text-align:center;
  background:rgba(255,255,255,.98);border-radius:26px;color:#141a26;
  box-shadow:0 40px 90px rgba(0,0,0,.45);animation:cardIn .5s cubic-bezier(.2,.9,.3,1.05);
  transition:opacity .45s, transform .45s;
}
.reminder-card.hide{animation:cardOut .4s ease forwards;pointer-events:none;}
@keyframes cardOut{to{opacity:0;transform:scale(.85) translateY(-14px);}}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.94);}to{opacity:1;transform:none;}}
.rc-icon{font-size:52px;line-height:1;margin-bottom:12px;display:block;animation:iconFloat 3s ease-in-out infinite;}
@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.rc-title{font-size:22px;font-weight:700;letter-spacing:.01em;}
.rc-en{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8d97a8;margin-top:6px;}
.rc-msg{font-size:14px;line-height:1.85;color:#4c5668;margin:16px 4px 0;}
.rc-actions{display:flex;gap:10px;margin-top:22px;}
.rc-actions button{
  flex:1;padding:11px;border-radius:12px;font-size:13px;font-weight:600;border:1px solid #e5eaf2;
  background:#f8fafc;color:#4c5668;
}
.rc-actions button.primary{border:0;background:linear-gradient(145deg,#4b6bfb,#3550d8);color:#fff;}
.rc-hint{font-size:10.5px;color:#a4adbd;margin-top:14px;letter-spacing:.02em;}

/* ---------------- 动画舞台 ---------------- */
.anim-stage{
  position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
  transition:opacity .3s;
}
.anim-stage.is-leaving{opacity:0;}

/* ---- 黑洞 ---- */
.puppy-stage .crack-lines{
  position:absolute;left:50%;top:52%;width:88vmin;height:88vmin;
  transform:translate(-50%,-50%) scale(.45);opacity:0;
  filter:drop-shadow(0 0 6px rgba(186,200,255,.55));
}
.puppy-stage.crack .crack-lines{animation:crackIn .8s cubic-bezier(.2,.8,.3,1) forwards;}
.puppy-stage.settle .crack-lines{animation:crackOut .8s ease forwards;}
@keyframes crackOut{
  from{opacity:.75;transform:translate(-50%,-50%) scale(1);}
  to{opacity:0;transform:translate(-50%,-50%) scale(1.07);}
}
@keyframes crackIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4);}
  30%{opacity:1;}
  100%{opacity:.75;transform:translate(-50%,-50%) scale(1);}
}

.hole-glow{
  position:absolute;left:50%;top:52%;width:62vmin;height:60vmin;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);opacity:0;
  background:radial-gradient(circle, rgba(108,74,220,.30) 0%, rgba(58,32,120,.14) 42%, transparent 68%);
  filter:blur(14px);
}
.hole-glow.open{animation:glowIn 1s ease-out forwards;}
.hole-glow.close{animation:glowOut .5s ease-in forwards;}
@keyframes glowIn{0%{transform:translate(-50%,-50%) scale(.1);opacity:0;}100%{transform:translate(-50%,-50%) scale(1);opacity:1;}}
@keyframes glowOut{to{transform:translate(-50%,-50%) scale(.2);opacity:0;}}

.hole{
  position:absolute;left:50%;top:52%;width:44vmin;height:44vmin;
  transform:translate(-50%,-50%) scale(0) rotate(-18deg);opacity:0;
  will-change:transform,opacity;
}
.hole-svg{display:block;width:100%;height:100%;overflow:visible;}
.hole.open{
  animation:holeOpen .9s cubic-bezier(.2,.9,.25,1) forwards,
            holeMorph 4.2s ease-in-out .9s infinite;
}
@keyframes holeOpen{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.03) rotate(-18deg);}
  55%{opacity:1;transform:translate(-50%,-50%) scale(1.06) rotate(5deg);}
  78%{transform:translate(-50%,-50%) scale(.97) rotate(-2deg);}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);}
}
@keyframes holeMorph{
  0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  50%{transform:translate(-50%,-50%) scale(1.035) rotate(2.5deg);}
}
.hole.close{animation:holeClose .55s ease-in forwards;}
@keyframes holeClose{
  from{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0);}
  to{opacity:0;transform:translate(-50%,-50%) scale(.04) rotate(26deg);}
}

.puppy-wrap{
  position:absolute;left:50%;top:52%;width:clamp(112px,17vmin,212px);
  transform:translate(-50%,-10%) scale(.05);opacity:0;
  filter:drop-shadow(0 0 16px rgba(255,214,150,.35)) drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
.puppy-wrap.pop{animation:puppyPop 1s cubic-bezier(.18,1.35,.42,1) forwards;}
@keyframes puppyPop{
  0%{opacity:0;transform:translate(-50%,-8%) scale(.05) rotate(-10deg);}
  40%{opacity:1;transform:translate(-50%,-70%) scale(1.12) rotate(4deg);}
  68%{transform:translate(-50%,-63%) scale(.96) rotate(-2deg);}
  100%{opacity:1;transform:translate(-50%,-66%) scale(1) rotate(0);}
}
.puppy-wrap::after{
  content:"";position:absolute;left:50%;bottom:2%;width:52%;height:12px;
  transform:translateX(-50%);border-radius:50%;opacity:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 72%);
  filter:blur(4px);
}
.puppy-stage.settle .puppy-wrap::after{animation:groundIn .5s ease .1s forwards;}
@keyframes groundIn{to{opacity:1;}}
.puppy-svg{display:block;width:100%;height:auto;animation:puppyBob 2.8s ease-in-out .9s infinite;}
@keyframes puppyBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.puppy-tail{transform-box:fill-box;transform-origin:88% 12%;animation:wag .85s ease-in-out infinite alternate;}
@keyframes wag{from{transform:rotate(-9deg);}to{transform:rotate(11deg);}}
.puppy-eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.4s infinite;}
@keyframes blink{0%,92%,100%{transform:scaleY(1);}95%{transform:scaleY(.12);}}

/* 气泡 */
.anim-bubble{
  position:absolute;left:50%;top:calc(52% + 19vmin);z-index:5;
  width:min(430px,86vw);padding:20px 22px 18px;text-align:center;
  background:#fff;border-radius:22px;color:#141a26;
  box-shadow:0 26px 60px rgba(0,0,0,.42);
  transform:translate(-50%,12px);opacity:0;
  pointer-events:auto;will-change:opacity,transform;
}
.anim-bubble.show{animation:bubbleIn .45s cubic-bezier(.2,.9,.3,1) forwards;}
@keyframes bubbleIn{
  from{opacity:0;transform:translate(-50%,14px) scale(.97);}
  to{opacity:1;transform:translate(-50%,0) scale(1);}
}
.anim-bubble::before{
  content:"";position:absolute;left:50%;top:-8px;width:18px;height:18px;
  background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:3px;
}
.ab-title{
  font-style:normal;display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#8d97a8;margin-bottom:8px;
}
.ab-text{font-size:14.5px;line-height:1.9;color:#1e2532;min-height:54px;font-weight:500;}
.ab-close{
  margin-top:14px;border:0;border-radius:22px;padding:9px 24px;font-size:12.5px;font-weight:600;
  color:#fff;background:linear-gradient(145deg,#4b6bfb,#3550d8);
  opacity:0;transform:translateY(6px);pointer-events:none;
  box-shadow:0 8px 20px rgba(75,107,251,.35);
}
.ab-close.show{animation:btnIn .35s ease forwards;pointer-events:auto;}
@keyframes btnIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---- 巫师扫帚 ---- */
.wiz-track{position:absolute;inset:0;transition:opacity .3s;}
.wiz-track.gone{opacity:0;}
.wiz-sprite{
  position:absolute;left:0;top:0;will-change:transform;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.42));
  transform-origin:50% 50%;
}
.wiz-svg{display:block;width:100%;height:100%;}
.wspark{
  position:absolute;border-radius:50%;pointer-events:none;z-index:4;
  animation-name:sparkFly;animation-timing-function:cubic-bezier(.1,.55,.35,1);
  animation-fill-mode:forwards;
}
@keyframes sparkFly{
  from{transform:translate3d(0,0,0) scale(1);opacity:1;}
  60%{opacity:.9;}
  to{transform:translate3d(var(--dx),var(--dy),0) scale(.12);opacity:0;}
}
.wiz-banner{
  position:absolute;left:50%;bottom:11vh;z-index:6;width:min(430px,86vw);
  padding:20px 22px 18px;text-align:center;
  background:#fff;border-radius:22px;color:#141a26;
  box-shadow:0 26px 60px rgba(0,0,0,.42);
  transform:translate(-50%,18px);opacity:0;
  pointer-events:auto;
}
.wiz-banner.show{animation:bubbleIn .45s cubic-bezier(.2,.9,.3,1) forwards;}

@media (max-width:600px){
  .anim-bubble{top:calc(52% + 17vmin);padding:16px 16px 14px;}
  .ab-text{font-size:13.5px;min-height:48px;}
  .rc-icon{font-size:44px;}
  .rc-title{font-size:19px;}
  .hole{width:40vmin;height:39vmin;}
}