/* ============================================
   Apple 品质 · 生日卡片
   ============================================ */
:root{
  --bg1:#05050c;
  --bg2:#0c0a18;
  --text:#f5f5f7;
  --text2:rgba(235,235,245,.6);
  --text3:rgba(235,235,245,.35);
  --pink:#ff8ab5;
  --violet:#b18cff;
  --blue:#7cc7ff;
  --gold:#ffd60a;
  --glass:rgba(255,255,255,.06);
  --glass-hi:rgba(255,255,255,.12);
  --stroke:rgba(255,255,255,.1);
  --spring:cubic-bezier(.22,1,.36,1);
  --spring-bounce:cubic-bezier(.34,1.56,.64,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  min-height:100vh;
  color:var(--text);
  overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","PingFang SC","Segoe UI","Microsoft YaHei",sans-serif;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ============ 氛围光斑 ============ */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{
  position:absolute;border-radius:50%;
  filter:blur(90px);
  opacity:.32;
  animation:drift 22s ease-in-out infinite alternate;
  will-change:transform;
}
.b1{width:55vmax;height:55vmax;top:-18vmax;left:-15vmax;
    background:radial-gradient(circle,rgba(177,140,255,.6),transparent 65%)}
.b2{width:48vmax;height:48vmax;top:-12vmax;right:-16vmax;
    background:radial-gradient(circle,rgba(255,138,181,.5),transparent 65%);animation-delay:-6s}
.b3{width:50vmax;height:50vmax;bottom:-18vmax;left:-10vmax;
    background:radial-gradient(circle,rgba(124,199,255,.4),transparent 65%);animation-delay:-12s}
.b4{width:44vmax;height:44vmax;bottom:-15vmax;right:-12vmax;
    background:radial-gradient(circle,rgba(255,214,10,.28),transparent 65%);animation-delay:-18s}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(4vmax,3vmax) scale(1.12)}
}

/* ============ Canvas 层 ============ */
canvas{position:fixed;pointer-events:none;display:block}
#bg{inset:0;z-index:1}
#spark{inset:0;z-index:2}
#fx{inset:0;z-index:9}

/* ============ 卡片外壳 ============ */
.shell{
  position:relative;z-index:3;
  width:92%;max-width:560px;
  border-radius:32px;padding:1px;
  overflow:hidden;
  animation:cardIn 1.1s var(--spring) both;
  will-change:transform;
}
.shell::before{
  content:'';position:absolute;top:-120%;left:-120%;
  width:340%;height:340%;
  background:conic-gradient(var(--pink),var(--violet),var(--blue),var(--gold),var(--pink));
  animation:spin 8s linear infinite;
  opacity:.5;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes cardIn{
  0%{opacity:0;transform:translateY(44px) scale(.95);filter:blur(14px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}

/* ============ 卡片主体（毛玻璃） ============ */
.card{
  position:relative;overflow:hidden;
  border-radius:31px;
  padding:44px 30px 34px;
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  backdrop-filter:blur(36px) saturate(170%);
  -webkit-backdrop-filter:blur(36px) saturate(170%);
  border:1px solid var(--stroke);
  box-shadow:
    0 34px 90px -24px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.25);
}

/* 点击涟漪 */
.card .ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.45);
  transform:scale(0);opacity:1;
  animation:ripple .9s ease-out forwards;
}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* ============ 顶部徽标 ============ */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  font-size:13px;font-weight:600;letter-spacing:.18em;
  color:var(--text2);
  opacity:0;animation:fadeUp .7s var(--spring) .55s both;
}

/* ============ Emoji ============ */
.emoji{
  margin-top:22px;font-size:clamp(44px,11vw,60px);line-height:1;
  display:inline-block;
  animation:breathe 4.5s ease-in-out infinite;
  filter:drop-shadow(0 6px 24px rgba(255,180,90,.35));
  opacity:0;animation:fadeUp .8s var(--spring) .6s both,breathe 4.5s ease-in-out 1.4s infinite;
}
@keyframes breathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-7px) scale(1.04)}
}

/* ============ 标题 ============ */
.title{
  margin:20px 0 6px;
  font-size:clamp(40px,10vw,58px);
  font-weight:800;letter-spacing:.1em;
  display:flex;justify-content:center;gap:.06em;
}
.title span{
  display:inline-block;
  background:linear-gradient(180deg,#fff 20%,rgba(255,255,255,.55));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0;transform:translateY(26px) scale(.7);
  animation:letterIn .9s var(--spring-bounce) forwards;
}
.title span:nth-child(1){animation-delay:.28s}
.title span:nth-child(2){animation-delay:.36s}
.title span:nth-child(3){animation-delay:.44s}
.title span:nth-child(4){animation-delay:.52s}
@keyframes letterIn{
  0%{opacity:0;transform:translateY(26px) scale(.7)}
  100%{opacity:1;transform:none}
}

/* ============ 名字（柔和渐变 + 流光） ============ */
.name{
  position:relative;display:inline-block;
  margin:6px 0 26px;
  font-size:clamp(15px,4vw,19px);font-weight:600;letter-spacing:.4em;text-indent:.4em;
  background:linear-gradient(90deg,var(--gold),var(--pink),var(--violet),var(--blue),var(--gold));
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:flow 6s linear infinite;
}
.name::after{
  content:'';position:absolute;top:0;left:-80%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);
  animation:shine 3.2s ease-in-out infinite;
}
@keyframes flow{to{background-position:300% 0}}
@keyframes shine{0%{left:-80%}55%,100%{left:130%}}

/* ============ 倒计时 ============ */
.countdown{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:22px;
}
.unit{
  flex:1;max-width:104px;
  padding:14px 6px 12px;border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 32px -14px rgba(0,0,0,.55);
  opacity:0;transform:translateY(18px);
  animation:fadeUp .8s var(--spring) forwards;
}
.unit:nth-child(1){animation-delay:.66s}
.unit:nth-child(3){animation-delay:.74s}
.unit:nth-child(5){animation-delay:.82s}
.unit:nth-child(7){animation-delay:.9s}
.sep{
  font-size:22px;font-weight:300;color:var(--text3);
  opacity:0;animation:fadeUp .8s var(--spring) forwards;
}
.sep:nth-child(2){animation-delay:.7s}
.sep:nth-child(4){animation-delay:.78s}
.sep:nth-child(6){animation-delay:.86s}

.digit{
  position:relative;display:inline-block;
  height:1.12em;line-height:1.12em;overflow:hidden;
  min-width:1.18em;text-align:center;
  font-size:clamp(30px,9vw,40px);font-weight:700;
  font-variant-numeric:tabular-nums;
  color:#fff;
  text-shadow:0 2px 18px rgba(200,170,255,.35);
}
.digit .old{
  position:absolute;top:0;left:0;right:0;
  transition:transform .6s var(--spring),opacity .6s var(--spring);
}
.digit .new{
  position:absolute;top:0;left:0;right:0;
  transform:translateY(115%);opacity:0;
  transition:transform .6s var(--spring),opacity .6s var(--spring);
}
.digit.swap .old{transform:translateY(-115%);opacity:0}
.digit.swap .new{transform:none;opacity:1}
.label{
  display:block;margin-top:2px;
  font-size:11px;font-weight:500;letter-spacing:.2em;
  color:var(--text3);
}

/* ============ 进度条 ============ */
.progress{margin-bottom:26px;opacity:0;animation:fadeUp .8s var(--spring) .95s both}
.track{
  height:6px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
.fill{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--pink),var(--violet),var(--blue));
  background-size:200% 100%;
  animation:flowBar 5s linear infinite;
  transition:width .8s var(--spring);
}
@keyframes flowBar{to{background-position:200% 0}}
.ptext{
  margin-top:10px;
  font-size:12px;letter-spacing:.06em;color:var(--text3);
  font-variant-numeric:tabular-nums;
}

/* ============ 祝福卡 ============ */
.bless{
  perspective:900px;cursor:pointer;
  outline:none;
  opacity:0;animation:fadeUp .8s var(--spring) 1.05s both;
}
.bless:focus-visible .bcard{box-shadow:0 0 0 2px rgba(177,140,255,.7)}
.bcard{
  position:relative;min-height:78px;width:100%;
  transition:transform .7s var(--spring-bounce);
  transform-style:preserve-3d;
  -webkit-tap-highlight-color:transparent;
}
.bcard.flip{transform:rotateY(180deg)}
.face{
  position:absolute;top:0;left:0;width:100%;min-height:78px;
  display:flex;align-items:center;justify-content:center;
  padding:16px 22px;border-radius:22px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  font-size:clamp(14px,4vw,17px);line-height:1.7;
  color:rgba(255,255,255,.92);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);
}
.face.back{transform:rotateY(180deg)}
.bless:hover .face{background:rgba(255,255,255,.08)}
.hint{
  margin-top:12px;font-size:12px;letter-spacing:.1em;color:var(--text3);
  opacity:0;animation:fadeUp .8s var(--spring) 1.15s both;
}

/* ============ 签名 ============ */
.sign{
  margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:14px;font-weight:500;letter-spacing:.3em;text-indent:.3em;
  color:var(--text3);
  opacity:0;animation:fadeUp .8s var(--spring) 1.25s both;
}

/* ============ 通用入场 ============ */
@keyframes fadeUp{
  0%{opacity:0;transform:translateY(18px)}
  100%{opacity:1;transform:none}
}

/* ============ 生日惊喜 ============ */
.bday-title{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0);
  font-size:clamp(26px,7vw,46px);font-weight:800;letter-spacing:.06em;
  color:var(--gold);
  text-shadow:0 0 40px rgba(255,190,80,.5);
  z-index:10;pointer-events:none;opacity:0;white-space:nowrap;
}
.bday-title.show{animation:titlePop 10s var(--spring) forwards}
@keyframes titlePop{
  0%{transform:translate(-50%,-50%) scale(0) rotateY(0);opacity:0}
  8%{transform:translate(-50%,-50%) scale(1.1) rotateY(180deg);opacity:1}
  14%{transform:translate(-50%,-50%) scale(1) rotateY(360deg);opacity:1}
  88%{transform:translate(-50%,-50%) scale(1) rotateY(900deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.03) rotateY(1080deg);opacity:0}
}
.banner{
  position:fixed;top:24px;left:100%;white-space:nowrap;
  font-size:clamp(16px,4vw,22px);font-weight:600;letter-spacing:.12em;
  color:var(--gold);
  text-shadow:0 0 30px rgba(255,190,80,.4);
  z-index:10;pointer-events:none;opacity:0;
}
.banner.show{animation:bannerMove 5s linear forwards}
@keyframes bannerMove{
  0%{left:100%;opacity:0}
  5%{opacity:1}
  90%{opacity:1}
  100%{left:-120%;opacity:0}
}

/* ============ 响应式 ============ */
@media(max-width:768px){
  .card{padding:36px 18px 28px}
  .unit{border-radius:16px;padding:12px 4px 10px}
  .face{min-height:70px;padding:13px 14px}
}

/* ============ 无障碍：减少动效 ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}