/* 由 build_birthday.py 从 Birthday/index.html 生成，请勿手改。
   所有规则已作用域到 #bday，避免与站点 style.css 冲突。 */


/* =========================================================
   可自定义区域（颜色 / 名字）
   ========================================================= */
#bday{
  --name: "小可爱";              /* 朋友的名字：改这里 */
  --c-bg1:#160e2c;
  --c-bg2:#2a1550;
  --c-bg3:#4a1e5c;
  --c-pink:#ff8fc7;
  --c-gold:#ffd98a;
  --c-cream:#fff6e9;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --vh: 100vh;                   /* 由 JS 写入真实视口高度，修复手机地址栏 */
}

#bday *,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

#bday body{ position:fixed; inset:0; }

#bday canvas#fx{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:60;
}

/* ============ 舞台 ============ */
#bday #stage{
  position:fixed; inset:0;
  z-index:10;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding: calc(var(--safe-t) + 16px) 18px calc(var(--safe-b) + 16px);
  background:
    radial-gradient(120% 80% at 50% 0%,   rgba(255,143,199,.28), transparent 60%),
    radial-gradient(100% 70% at 50% 100%, rgba(255,217,138,.18), transparent 62%),
    linear-gradient(160deg, var(--c-bg1) 0%, var(--c-bg2) 48%, var(--c-bg3) 100%);
  transition:filter .9s ease, opacity .6s ease;
}
/* 顶部隐约的星空被 canvas 绘制，这里只做柔光 */

/* ============ 开场幕布 ============ */
#bday #curtain{
  position:fixed; inset:0; z-index:80;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  background:linear-gradient(160deg,#160e2c,#2a1550 60%,#3d1a52);
  transition:opacity .8s ease, visibility .8s ease;
  padding:0 24px; text-align:center;
}
#bday #curtain.hide{ opacity:0; visibility:hidden; }
#bday #curtain .gift{
  font-size:76px; line-height:1;
  animation:giftBounce 1.8s ease-in-out infinite;
  filter:drop-shadow(0 10px 24px rgba(255,143,199,.5));
}
@keyframes giftBounce{
  #bday 0%,100%{ transform:translateY(0) rotate(-4deg) scale(1); }
  #bday 50%    { transform:translateY(-16px) rotate(4deg) scale(1.06); }
}
#bday #curtain h1{
  font-size:clamp(20px,6vw,30px); font-weight:600; margin:0;
  letter-spacing:.06em;
  background:linear-gradient(100deg,#fff,var(--c-pink),var(--c-gold),#fff);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 4s linear infinite;
}
@keyframes shimmer{ to{ background-position:-220% 0; } }
#bday #curtain p{ margin:0; font-size:14px; color:rgba(255,246,233,.62); line-height:1.7; }

#bday .btn-open{
  position:relative;
  border:0; cursor:pointer;
  padding:15px 44px; border-radius:999px;
  font-size:17px; font-weight:700; letter-spacing:.14em;
  color:#5a1030;
  background:linear-gradient(135deg,#ffe9a8,#ffb3d9 55%,#ffd98a);
  box-shadow:0 10px 30px rgba(255,143,199,.45), inset 0 1px 0 rgba(255,255,255,.8);
  animation:openPulse 2.2s ease-in-out infinite;
  transition:transform .16s ease;
  font-family:inherit;
}
#bday .btn-open:active{ transform:scale(.94); }
@keyframes openPulse{
  #bday 0%,100%{ box-shadow:0 10px 30px rgba(255,143,199,.40), inset 0 1px 0 rgba(255,255,255,.8); }
  #bday 50%    { box-shadow:0 14px 44px rgba(255,143,199,.78), inset 0 1px 0 rgba(255,255,255,.9); }
}
#bday .hint-tap{ font-size:12px; color:rgba(255,246,233,.45); letter-spacing:.2em; }

/* ============ 主内容 ============ */
#bday #content{
  width:100%; max-width:560px;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(8px,2.2vh,20px);
  opacity:0; transform:translateY(18px);
  transition:opacity .9s ease .15s, transform .9s cubic-bezier(.2,.9,.25,1) .15s;
  pointer-events:none;
}
#bday #content.show{ opacity:1; transform:none; pointer-events:auto; }

#bday .title-line{
  font-size:clamp(13px,3.6vw,16px);
  letter-spacing:.55em; text-indent:.55em;
  color:rgba(255,217,138,.85); margin:0; font-weight:500;
}
#bday .name-big{
  margin:0; text-align:center; line-height:1.15;
  font-size:clamp(38px,12vw,68px); font-weight:800;
  letter-spacing:.02em;
  background:linear-gradient(100deg,#fff 5%,var(--c-pink) 30%,var(--c-gold) 52%,#fff 78%,var(--c-pink));
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 5s linear infinite;
  filter:drop-shadow(0 6px 22px rgba(255,143,199,.35));
}
#bday .name-big .cn{ font-size:1.12em; }
#bday .sub{
  margin:0; text-align:center;
  font-size:clamp(12.5px,3.5vw,15px); line-height:1.85;
  color:rgba(255,246,233,.72);
  max-width:22em;
}

/* ============ 蛋糕 ============ */
#bday #cakeWrap{
  position:relative;
  width:min(78vw,290px);
  aspect-ratio:1/1.02;
  margin-top:clamp(2px,1.4vh,10px);
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .5s cubic-bezier(.2,.9,.25,1);
}
#bday #cakeWrap:active{ transform:scale(.975); }
#bday #cakeWrap svg{ width:100%; height:100%; display:block; overflow:visible; }

/* 火苗：底端钉在烛芯上，只有上半部分摇曳
   注意 —— .flame 里只能放火苗本身。transform-origin 的百分比是相对元素
   包围盒算的，若把光晕圆放进来，包围盒底边会落到火苗底部之下，
   支点就会跑偏、整团火跟着平移。 */
#bday .flame{
  transform-box:fill-box;
  transform-origin:50% 100%;      /* 火苗底部 = 烛芯顶端 */
  animation:flameDance .42s ease-in-out infinite alternate;
}
#bday .flame:nth-of-type(2n){ animation-duration:.56s; animation-delay:-.19s; }
#bday .flame:nth-of-type(3n){ animation-duration:.48s; animation-delay:-.31s; }
/* 只有高度变化 + 轻微左右偏摆，左右缩放在动画中被抵消，宽度保持恒定 */
@keyframes flameDance{
  #bday from{ transform:scaleX(1.06) scaleY(1.03) rotate(-3.2deg); }
  #bday to  { transform:scaleX(0.94) scaleY(0.87) rotate( 3.2deg); }
}
#bday .glow{ animation:glowPulse 2.4s ease-in-out infinite; }
@keyframes glowPulse{ 0%,100%{ opacity:.34 } 50%{ opacity:.6 } }

/* 吹灭后冒烟 */
#bday .smoke{ opacity:0; }
#bday .smoke.on{ animation:smokeUp 2.2s ease-out forwards; }
@keyframes smokeUp{
  #bday 0%  { opacity:.75; transform:translateY(0) scale(.5); }
  #bday 100%{ opacity:0;   transform:translateY(-38px) scale(1.5); }
}

/* 蛋糕整体漂浮 */
#bday #cakeSvg{ animation:floaty 4.2s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

/* 吹气提示 */
#bday .blow-tip{
  position:absolute; left:50%; top:-6%;
  transform:translateX(-50%);
  max-width:96vw;
  font-size:clamp(11px,3vw,12.5px); letter-spacing:.08em;
  color:#fff6e9;
  background:rgba(22,14,44,.86);
  border:1px solid rgba(255,217,138,.4);
  padding:7px 15px; border-radius:999px;
  white-space:nowrap;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:tipFloat 2.6s ease-in-out infinite;
  transition:opacity .4s ease;
}
#bday .blow-tip.gone{ opacity:0; }
@keyframes tipFloat{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,-6px) } }

/* ============ 操作按钮区 ============ */
#bday .actions{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  width:100%; margin-top:clamp(4px,1.5vh,14px);
}
#bday .btn{
  border:1px solid rgba(255,217,138,.42);
  background:rgba(255,255,255,.07);
  color:var(--c-cream);
  padding:clamp(9px,2.4vw,12px) clamp(10px,3vw,22px);
  border-radius:999px;
  font-size:clamp(12.5px,3.4vw,14.5px);
  font-family:inherit; cursor:pointer;
  white-space:nowrap;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .16s ease, background .25s ease, border-color .25s ease;
  display:inline-flex; align-items:center; gap:6px;
  -webkit-user-select:none; user-select:none;
}
#bday .btn:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,217,138,.8); }
#bday .btn:active{ transform:scale(.93); }
#bday .btn.primary{
  background:linear-gradient(135deg,#ffe9a8,#ffb3d9);
  color:#5a1030; font-weight:700; border-color:transparent;
  box-shadow:0 8px 24px rgba(255,143,199,.4);
}
#bday .btn[disabled]{ opacity:.4; pointer-events:none; }

/* ============ 弹出层：信 / 照片 ============ */
#bday .modal{
  position:fixed; inset:0; z-index:70;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--safe-t) + 20px) 18px calc(var(--safe-b) + 20px);
  background:rgba(10,6,22,.74);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
#bday .modal.open{ opacity:1; visibility:visible; }

#bday .card{
  width:100%; max-width:440px;
  max-height:calc(var(--vh) - var(--safe-t) - var(--safe-b) - 56px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(165deg,#fffaf2,#ffeef6 60%,#fff6e9);
  color:#4a2340;
  border-radius:22px;
  padding:clamp(20px,5.5vw,32px);
  box-shadow:0 26px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.6) inset;
  transform:translateY(26px) scale(.96);
  transition:transform .45s cubic-bezier(.2,.9,.25,1);
}
#bday .modal.open .card{ transform:none; }
#bday .card h2{
  margin:0 0 14px; font-size:clamp(18px,5vw,22px);
  color:#c2255c; letter-spacing:.05em;
  display:flex; align-items:center; gap:8px;
}
#bday .card p{
  margin:0 0 13px; font-size:clamp(14px,4vw,15.5px);
  line-height:2; color:#5c3350;
}
#bday .card .sign{
  text-align:right; margin-top:18px; margin-bottom:0;
  color:#a8508a; font-size:14px; line-height:1.9;
}
#bday .card .divider{
  height:1px; margin:18px 0;
  background:linear-gradient(90deg,transparent,rgba(194,37,92,.28),transparent);
}
#bday .card-close{
  display:block; width:100%; margin-top:20px;
  border:0; border-radius:999px; padding:13px;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.1em;
  color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#ff7ab8,#c2255c);
  box-shadow:0 8px 22px rgba(194,37,92,.32);
  transition:transform .16s ease;
}
#bday .card-close:active{ transform:scale(.96); }

/* 打字机光标 */
#bday .caret{
  display:inline-block; width:2px; height:1em;
  background:#c2255c; vertical-align:-2px; margin-left:2px;
  animation:blink .9s steps(1) infinite;
}
@keyframes blink{ 0%,50%{ opacity:1 } 51%,100%{ opacity:0 } }

/* 照片墙 */
#bday .gallery{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:12px; margin-bottom:6px;
}
#bday .ph{
  position:relative; aspect-ratio:1/1; border-radius:16px; overflow:hidden;
  background:linear-gradient(140deg,#ffd98a,#ff8fc7 55%,#b07ce0);
  display:flex; align-items:center; justify-content:center;
  font-size:34px; color:rgba(255,255,255,.96);
  box-shadow:0 8px 20px rgba(194,37,92,.18);
  transition:transform .3s ease;
}
#bday .ph:nth-child(2n){ background:linear-gradient(140deg,#8fd8ff,#ff8fc7 60%,#ffd98a); }
#bday .ph:nth-child(3n){ background:linear-gradient(140deg,#ffb3d9,#b07ce0 60%,#8fd8ff); }
#bday .ph:active{ transform:scale(.96); }
#bday .ph span.cap{
  position:absolute; left:0; right:0; bottom:0;
  font-size:11.5px; padding:14px 8px 7px;
  background:linear-gradient(transparent,rgba(0,0,0,.5));
  color:#fff; text-align:center; letter-spacing:.06em;
}
#bday .ph img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============ 顶栏小按钮 ============ */
#bday #topbar{
  position:fixed; z-index:75;
  top:calc(var(--safe-t) + 12px); right:14px;
  display:flex; gap:9px;
  opacity:0; transition:opacity .6s ease .6s;
}
#bday #topbar.show{ opacity:1; }
#bday .icon-btn{
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,217,138,.34);
  background:rgba(22,14,44,.55);
  color:var(--c-cream); font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .16s ease, background .25s ease;
  padding:0; line-height:1;
}
#bday .icon-btn:active{ transform:scale(.88); }
#bday .icon-btn.playing{ animation:spinDisc 3.4s linear infinite; }
@keyframes spinDisc{ to{ transform:rotate(360deg) } }

/* ============ 撒花提示 & 微信引导 ============ */
#bday #wxMask{
  position:fixed; inset:0; z-index:95;
  background:rgba(8,4,18,.88);
  display:none; flex-direction:column;
  padding:calc(var(--safe-t) + 20px) 26px;
  color:#fff6e9;
}
#bday #wxMask.show{ display:flex; }
#bday #wxMask .arrow{
  align-self:flex-end; margin-right:6px;
  font-size:44px; animation:pointDown 1.3s ease-in-out infinite;
}
@keyframes pointDown{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
#bday #wxMask p{
  margin:12px 0 0; text-align:right; font-size:15px; line-height:2;
  color:rgba(255,246,233,.9);
}
#bday #wxMask .tip{
  margin-top:auto; text-align:center; font-size:12.5px;
  color:rgba(255,246,233,.45); padding-bottom:20px;
}

/* 底部彩蛋文字 */
#bday .footnote{
  font-size:11.5px; letter-spacing:.16em;
  color:rgba(255,246,233,.34); text-align:center;
  transition:opacity .5s ease;
}

/* ============ 桌面端微调 ============ */
@media (min-width:768px) and (min-height:620px){
  #bday #content{ max-width:620px; }
  #bday #cakeWrap{ width:320px; }
  #bday .btn{ padding:12px 24px; font-size:14.5px; }
}
@media (hover:hover){
  #bday .btn:hover{ transform:translateY(-2px); }
}
/* 横屏手机：缩小蛋糕 */
@media (orientation:landscape) and (max-height:520px){
  #bday #content{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:12px 22px; }
  #bday #cakeWrap{ width:150px; }
  #bday .name-big{ font-size:clamp(26px,7vh,40px); }
  #bday .title-line{ letter-spacing:.3em; }
}
/* 尊重系统「减弱动态效果」 */
@media (prefers-reduced-motion:reduce){
  #bday *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ===== 站点级：仅在生日页面生效（模板给 body 加 .bday-page 类） ===== */
html.bday-page,body.bday-page{ overflow:hidden; height:100%; overscroll-behavior:none; }
body.bday-page{ background:#0f0820; }

/* 作用域容器：接管原来 body 的角色（全屏、深色底、米色字） */
#bday{
  position:fixed; inset:0;
  background:#0f0820;
  color:var(--c-cream);
  overflow:hidden;
}

/* 返回简历站首页的小按钮（原应用没有，接入站点后必须留出口） */
#bdayHome{
  position:fixed; z-index:96;
  top:calc(var(--safe-t) + 12px); left:14px;
  display:inline-flex; align-items:center; gap:6px;
  height:40px; padding:0 14px 0 11px;
  border-radius:999px;
  border:1px solid rgba(255,217,138,.34);
  background:rgba(22,14,44,.6);
  color:var(--c-cream);
  font-size:13.5px; letter-spacing:.06em;
  text-decoration:none; white-space:nowrap;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .25s ease, transform .16s ease;
}
#bdayHome:active{ transform:scale(.94); }
#bdayHome:hover{ background:rgba(22,14,44,.85); }

/* 页脚版权（与站点其它页保持一致） */
#bdayFoot{
  position:fixed; z-index:20; left:0; right:0;
  bottom:calc(var(--safe-b) + 6px);
  text-align:center; line-height:1.5;
  font-size:11px; letter-spacing:.04em;
  color:rgba(255,246,233,.3);
  pointer-events:none;
}