/* 仅生日主页面：按参考视频的取景构图和时间轴校正；其他场景继续使用原样式。 */
#birthday {
  --day-drop:4.7cqw; /* 收尾时 03 下滑到与「日」底部持平：日字墨底约在数字基线下 4.7cqw（数字 12.5cqw 档） */
  background:linear-gradient(#03070d 0%,#03070d 31%,#12130f 53%,#30271e 82%,#493a2c 100%);
}
/* 与视频一致：照片铺满整屏，不做模糊底、不做上下渐隐。竖屏时只裁左右两侧。 */
#birthday::before {display:none;}
/* 标题升到左上角后，从左上角辐射全屏的烟花射线；Canvas 同步喷发同名粒子。 */
#birthday::after {
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
  transform-origin:0 0;
  background:repeating-conic-gradient(from -14deg at 0% 0%,rgba(255,231,175,.9) 0deg .7deg,rgba(255,231,175,0) .7deg 6.2deg);
  -webkit-mask-image:radial-gradient(circle at 0% 0%,rgba(0,0,0,.95) 0%,rgba(0,0,0,.5) 30%,transparent 68%);
  mask-image:radial-gradient(circle at 0% 0%,rgba(0,0,0,.95) 0%,rgba(0,0,0,.5) 30%,transparent 68%);
}

/* 保留视频原帧，不替换蛋糕。照片按高度 cover，烛芯、焦点框与月亮/日历共用照片坐标。 */
#birthday .reference-photo {
  top:0;bottom:auto;left:50%;width:max(100%,75.5556cqh);height:100%;
  aspect-ratio:544/720;transform:translateX(-50%);
  mask-image:none;
}
#birthday .reference-photo::after {display:none;}
#birthday .reference-focus {
  left:45.1%;top:39.9%;width:11%;height:9%;
}

#birthday .birthday-layout {inset:0;padding:0;}
#birthday .birthday-heading {
  position:absolute;inset:0;display:block;margin:0;padding:0;opacity:1;transform:none;
}
#birthday.is-playing .birthday-heading,
#birthday.is-complete .birthday-heading {animation:none;opacity:1;transform:none;}
/* 视频中标题画布顶点 (20,30)/544×720：x≈3.7%w、y≈4.2%h，贴近左上角。 */
#birthday .birthday-title-block {position:absolute;top:4.5%;left:3.7%;z-index:4;padding:0;}
#birthday .birthday-title-block h1 {
  font-family:"Birthday Wish CN","KaiTi",serif;font-size:10.3cqw;font-weight:300;line-height:1.12;
  letter-spacing:-.2cqw;color:#fffdf7;text-shadow:0 1px 2px #0008;transform:rotate(-5deg);
}
#birthday .birthday-title-block h1::before,
#birthday .birthday-title-block h1::after {
  position:absolute;font-family:Georgia,serif;font-size:.75em;line-height:1;color:#fffdf7;
}
#birthday .birthday-title-block h1::before {content:"“";left:-.24em;top:-.15em;}
#birthday .birthday-title-block h1::after {content:"”";right:-.22em;top:-.12em;}
#birthday .birthday-english {
  position:relative;margin-top:7px;font-family:var(--hand);font-size:1.65cqw;
  font-style:italic;letter-spacing:1px;color:#e8dfa0;
}
#birthday .birthday-english::after {
  content:"﹏﹏﹏";position:absolute;left:55%;top:-9px;font-family:Georgia,serif;
  font-size:17px;letter-spacing:-4px;white-space:nowrap;color:#e9d994;
}
/* 标题直接保留视频中的真实手写笔形；h1 的文字仍供读屏识别。 */
#birthday .birthday-title-block h1 {
  width:45cqw;height:16.125cqw;font-size:0;color:transparent;text-shadow:none;
  background:url("assets/video-title.png") center / contain no-repeat;transform:none;
}
#birthday .birthday-title-block h1::before,
#birthday .birthday-title-block h1::after {display:none;}
#birthday .birthday-english {visibility:hidden;height:0;margin:0;}
#birthday .birthday-date {
  position:absolute;right:4.8%;top:8.8%;width:46%;min-width:0;
  padding-right:6.2cqw;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-end;
}
/* 开场即为一条基线：11月 与 03 同一水平线；收尾时 03 单独下滑与「日」底部持平。 */
#birthday .date-month {
  position:static;margin:0 1cqw 0 0;font-family:var(--sans);font-weight:800;
  font-size:6.6cqw;line-height:1.2;color:#fff321;letter-spacing:.12cqw;
  text-shadow:1px 2px #000;
}
#birthday .date-number {position:relative;flex:none;display:block;margin:0;padding:0;text-align:left;}
#birthday .date-number strong {
  display:inline-block;vertical-align:baseline;font-family:var(--sans),"Arial Black",sans-serif;
  font-size:12.5cqw;line-height:1;letter-spacing:0;font-weight:900;
  color:#f3fbff;text-shadow:2px 3px #75acd4,-1px -1px #fff;
}
#birthday .date-number>span {
  position:absolute;left:104%;right:auto;top:10.3cqw;display:block;font-size:5.5cqw;
  font-weight:800;line-height:1;color:#fff321;margin:0;
}
#birthday .lunar-date {
  position:absolute;right:6.2cqw;top:16.4cqw;display:block;margin:0;
  font-size:4.4cqw;line-height:1.2;font-weight:700;letter-spacing:.05cqw;color:#fff321;
  text-shadow:1px 1px 2px #000;text-align:right;
}

/* 视频中的日历没有卡片边框，五行日期跨越夜景与蛋糕前景；实测跨度 x54-540/544、y158-626/720。 */
#birthday .calendar-wrap {
  position:absolute;left:9.9%;top:21%;width:89%;height:63%;max-width:none;
}
#birthday .calendar-card {
  display:flex;flex-direction:column;height:100%;padding:0;
  background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;
}
#birthday .calendar-header {
  flex:none;height:24px;line-height:24px;margin:0 0 33px;padding-left:5.7%;
}
#birthday .calendar-header>span {font-size:4.05cqw!important;color:#fff;letter-spacing:0;}
#birthday .calendar-weekdays {
  flex:none;height:15px;line-height:15px;margin:0 0 9px;font-size:3.05cqw;color:#fff;
}
#birthday .calendar-grid {
  flex:1;height:auto;min-height:0;row-gap:0;
  grid-template-rows:repeat(var(--calendar-rows,5),minmax(0,1fr));
}
#birthday .calendar-grid>.calendar-day {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;height:auto;text-shadow:0 1px 3px #000b;
}
#birthday .calendar-day>.day-number {
  font-family:var(--sans);font-size:4.8cqw;line-height:1.1;font-weight:500;color:white;
}
#birthday .calendar-day>.lunar-day {
  font-family:var(--sans);font-size:2cqw;line-height:1.15;font-weight:400;
  white-space:nowrap;letter-spacing:0;color:#fffbef;
}
#birthday .calendar-day.birthday-day>.day-number {
  font-family:Georgia,serif;font-size:7.2cqw;font-weight:600;line-height:1;color:#ffc9e6;
  text-shadow:0 0 7px #f5a0d6,0 1px 2px #a72b75;
}
#birthday .birthday-heart {width:20cqw;max-width:120px;}
#birthday .birthday-heart .heart-outline {stroke-width:2.8;}
#birthday .birthday-heart .outer {opacity:.85;stroke-width:3.2;}
#birthday .birthday-heart .inner {opacity:1;stroke-width:2.4;}

/* 相机参数仅在对焦阶段出现；曲线音符停在日历左侧，沿用循环。 */
#birthday .viewfinder {top:29%;left:7.5%;width:45px;height:58px;}
#birthday .camera-info {font-size:2.5cqw;line-height:1.08;}
#birthday .floating-notes {left:9.5%;top:29.4%;width:23cqw;height:20px;}
#birthday .floating-notes>span {font-size:3.8cqw;}
#birthday .floating-notes>span:nth-child(2) {left:32%;top:5px;font-size:3cqw;}
#birthday .floating-notes>span:nth-child(3) {left:63%;top:0;font-size:2.6cqw;}

/* 底部祝福按视频的视口 82%/86%/92% 三行落位；英文恢复彩色手写字体。 */
#birthday .video-wish-copy {position:absolute;inset:0;z-index:5;transform:none;}
#birthday .video-wish-inner {
  position:absolute;inset:auto 0 calc(5.2% + env(safe-area-inset-bottom));height:13%;
}
#birthday .video-wish-mini {
  top:0;left:53.4%;font-family:"Birthday Wish CN","KaiTi","STKaiti",serif;font-size:2.2cqw;font-weight:400;
  line-height:1.2;transform:translateX(-50%) rotate(-20deg);color:#fffaf0;
}
/* 英文行按 C-H5 的 Georgia 意大利体；保留视频校准的右倾与彩虹渐变。 */
#birthday .video-wish-copy .birthday-script {
  top:30%;left:0;width:100%;font-family:Georgia,cursive;
  font-size:5.7cqw;font-weight:400;font-style:italic;line-height:1.15;letter-spacing:.08cqw;white-space:nowrap;
  transform:rotate(-8deg);
  color:#f1bada;background:linear-gradient(100deg,#f3afd6 12%,#d6a8e8 26%,#a9c9ee 40%,#a8dcb4 55%,#f2df9e 72%,#f5c78e 86%,#f4bedb 100%);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:.1cqw #fff3dc;text-shadow:none;filter:drop-shadow(0 .15cqw .13cqw #e6c89880);
}
/* 中文祝福按用户要求回到手写字体链：随包 LXGW 子集优先，缺失时回退系统行楷/楷体。 */
#birthday #birthday-wish {
  top:78%;left:0;width:100%;margin:0;padding:0 3%;
  font-family:"Birthday Wish CN","STXingkai","Xingkai SC","KaiTi","STKaiti",cursive;
  font-weight:300;font-size:4.7794cqw;line-height:1.25;letter-spacing:.2757cqw;
  color:#fffdf6;text-align:center;white-space:nowrap;
  text-shadow:0 .1cqw .25cqw #805c4566,0 0 .18cqw #fff8e440;
}
#birthday .birthday-bottom {
  position:absolute;inset:auto 9px calc(7px + env(safe-area-inset-bottom)) auto;
  width:32px;height:32px;margin:0;
}
#birthday .replay-button {
  width:32px;min-height:32px;padding:8px;margin:0;gap:0;font-size:0;line-height:1;
  border:1px solid #fff2;border-radius:50%;background:#0003;color:#f4e9d6;
}
#birthday .replay-button .icon {width:14px;height:14px;}
#birthday .swipe-cue {bottom:calc(7px + env(safe-area-inset-bottom));font-size:8px;}
#birthday .scene-masthead {top:8px;right:9px;}
#birthday .music-button {width:28px;height:28px;background:#0002;opacity:.65;}

/* 0–1 对焦，0.9–1.2 日期（11月与03同基线），1.95–2.6 烛光放射+标题炸现，2.6–3.35 标题放大，
   3.5–5.1 日历底层缓现（标题同时缩小飘向左上，4.0–5.0 日历03凸显描画），
   4.9 标题落位→左上角全屏烟花，5.15 农历出现，5.35–6.4 03下滑与「日」持平，5.5 起爱心呼吸。 */
#birthday:not(.is-playing):not(.is-complete) .birthday-date,
#birthday:not(.is-playing):not(.is-complete) .birthday-title-block {opacity:0;}
#birthday.is-playing .birthday-date {animation:video-date-in .3s ease-out .9s both;}
#birthday.is-playing .lunar-date {animation:video-lunar-in .5s ease-out 5.15s both;}
#birthday.is-playing #date-day {animation:video-day-in .4s ease-out 1.15s both,video-day-drop 1.05s cubic-bezier(.3,.6,.25,1) 5.35s forwards;}
#birthday.is-playing .birthday-title-block {animation:video-title-flight 2.9s cubic-bezier(.3,.6,.25,1) 2s both;}
#birthday.is-playing .calendar-wrap {animation:video-calendar-surface 1.6s ease 3.5s both;will-change:transform,opacity;}
#birthday.is-complete .calendar-wrap {will-change:auto;}
/* 日历浮现的同时凸显生日：数字放大变粉，外/内圈爱心先后描画，光晕收尾。 */
#birthday.is-playing .calendar-day.birthday-day>.day-number {animation:video-day-emphasis .75s cubic-bezier(.3,1.2,.4,1) 4s both;}
#birthday.is-playing .birthday-heart .heart-outline.outer {animation:heart-ring-draw .7s ease-out 4.3s both;}
#birthday.is-playing .birthday-heart .heart-outline.inner {animation:heart-ring-draw .6s ease-out 4.75s both;}
#birthday.is-playing .birthday-heart .heart-glow {animation:heart-glow-in .5s ease-out 4.95s both;}
#birthday.is-playing .birthday-heart {animation:video-heart-pulse 2.6s ease-in-out 5.5s infinite;will-change:transform;}
#birthday.is-complete .birthday-heart {animation:video-heart-pulse 2.6s ease-in-out infinite;will-change:auto;}
#birthday.is-playing .floating-notes {animation:soft-reveal .5s ease 1s both;}
#birthday.is-playing .viewfinder {animation:video-camera-out 1.4s linear both;}
#birthday.is-playing .video-wish-inner {animation:video-footer-in .3s ease .8s both;}
#birthday.is-playing .reference-burst {animation:reference-gold-burst .65s ease-out 1.95s both;}
#birthday.is-playing::after {animation:corner-firework 1.15s cubic-bezier(.16,.6,.3,1) 4.9s both;}
#birthday.is-complete::after {animation:none;opacity:0;}
#birthday.is-complete .birthday-date,
#birthday.is-complete .birthday-title-block,
#birthday.is-complete .calendar-wrap,
#birthday.is-complete .video-wish-inner,
#birthday.is-complete .lunar-date {animation:none;opacity:1;transform:none;}
#birthday.is-complete #date-day {animation:none;opacity:1;transform:translateY(var(--day-drop));}
#birthday.is-complete .viewfinder {animation:none;opacity:0;}
#birthday .reference-burst {inset:-5% -15% auto;height:100%;}
@keyframes video-date-in {from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes video-day-in {0%{opacity:0;transform:translate(12px,6px) scale(.72)}65%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
/* 标题在画面中部（中心约 46%w/41%h）炸现（小尺度弹入带回弹），随后放大几号，
   再一边缩小一边飘向左上；4.9s 落位。 */
@keyframes video-title-flight {
  0%  {opacity:0;transform:translate(20cqw,33cqh) scale(.5)}
  14% {opacity:1;transform:translate(20cqw,33cqh) scale(1.18)}
  22% {transform:translate(20cqw,33cqh) scale(1.02)}
  46% {transform:translate(20cqw,33cqh) scale(1.42)}
  60% {transform:translate(20cqw,33cqh) scale(1.42)}
  100%{opacity:1;transform:none}
}
/* 日历在底层缓缓浮现：只做淡入与轻微上浮，不与标题抢层级。 */
@keyframes video-calendar-surface {
  from{opacity:0;transform:translate3d(0,3%,0) scale(.985)}
  to  {opacity:1;transform:translate3d(0,0,0) scale(1)}
}
/* 收尾：农历淡入落位。 */
@keyframes video-lunar-in {from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* 收尾：03 缓缓下滑，底部与「日」持平。 */
@keyframes video-day-drop {from{transform:none}to{transform:translateY(var(--day-drop))}}
/* 左上角烟花：射线从角落辐射全屏后散去。 */
@keyframes corner-firework {
  0%  {opacity:0;transform:scale(.22)}
  18% {opacity:.95}
  100%{opacity:0;transform:scale(1.8)}
}
@keyframes video-camera-out {0%,70%{opacity:1}100%{opacity:0}}
@keyframes video-footer-in {from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* 生日数字凸显：入场期以白字常规大小混在日期里（7.2cqw×.67≈4.8cqw），落位后放大变粉带光晕。 */
@keyframes video-day-emphasis {
  0% {color:#fff;text-shadow:0 1px 3px #000b;transform:scale(.67)}
  62%{color:#ffc9e6;text-shadow:0 0 10px #f5a0d6,0 1px 2px #a72b75;transform:scale(1.12)}
  100%{color:#ffc9e6;text-shadow:0 0 7px #f5a0d6,0 1px 2px #a72b75;transform:scale(1)}
}
/* 爱心描画：pathLength=100 归一化后按 dashoffset 从 0 画到整圈；动画结束后回到无虚线的基础描边。 */
@keyframes heart-ring-draw {
  from{stroke-dasharray:100 100;stroke-dashoffset:100}
  to{stroke-dasharray:100 100;stroke-dashoffset:0}
}
@keyframes heart-glow-in {from{opacity:0}to{opacity:1}}
@media(max-height:650px) {
  #birthday .calendar-wrap {top:21.5%;height:61%;}
  #birthday .calendar-header {height:20px;line-height:20px;margin-bottom:24px;}
  #birthday .calendar-weekdays {height:12px;line-height:12px;margin-bottom:5px;}
  #birthday .calendar-day>.day-number {font-size:4.6cqw;}
}
@media(prefers-reduced-motion:reduce) {
  #birthday.is-playing .birthday-date,#birthday.is-playing #date-day,
  #birthday.is-playing .birthday-title-block,#birthday.is-playing .calendar-wrap,
  #birthday.is-playing .video-wish-inner,#birthday.is-playing .floating-notes,
  #birthday.is-playing .lunar-date {
    animation:none;opacity:1;transform:none;
  }
  #birthday.is-playing #date-day {transform:translateY(var(--day-drop));}
  #birthday.is-playing::after {animation:none;opacity:0;}
  #birthday .viewfinder {display:none;}
}