@font-face {font-family:BirthdayHand;src:url('ceremony/ZhiMangXing-Regular.ttf') format('truetype');font-display:swap;}
html {overflow-x:clip;}
.cal-week,.cal-days {grid-template-columns:repeat(7,minmax(0,1fr));}
.cal-month,.cal-week span,.cal-days span {min-width:0;}
.cal-label .in-range {display:inline-block;}
#ceremony-stage {position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
/* The golden-age scene stays beneath the calendar for one viewport of scrolling. */
#hero-calendar-journey {position:relative;isolation:isolate;}
body[data-phase="done"] #hero-calendar-journey #hero {position:sticky;top:0;height:100svh;min-height:100svh;}
#hero-calendar-journey #calendar {position:relative;z-index:2;isolation:isolate;
  border-top:1px solid rgba(255,255,255,.9);border-radius:34px 34px 0 0;
  background:linear-gradient(180deg,rgba(221,240,251,.98),rgba(209,234,249,.97) 38%,rgba(217,237,248,.96) 82%,rgba(221,239,249,.94));
  box-shadow:0 -22px 70px rgba(64,116,161,.17),0 -2px 20px rgba(255,255,255,.7);}
#hero-calendar-journey #calendar::before {content:"";position:absolute;inset:0 0 auto;height:130px;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));}
body[data-phase="done"] #hero-title.golden-age {
  opacity:var(--hero-layer-opacity,1);
  transform:translateY(var(--hero-layer-y,0px)) scale(var(--hero-layer-scale,1));
  filter:blur(var(--hero-layer-blur,0px));}
body[data-phase="done"] #hero #scroll-hint:not([hidden]) {
  opacity:var(--hero-hint-opacity,1);
  transform:translate(-50%,var(--hero-hint-y,0px));}
@media(max-width:767px){#hero-calendar-journey #calendar {border-radius:30px 30px 0 0;}}
@media(prefers-reduced-motion:reduce){
  body[data-phase="done"] #hero-calendar-journey #hero {position:relative;}
  body[data-phase="done"] #hero-title.golden-age {opacity:1;transform:none;filter:none;}
  body[data-phase="done"] #hero #scroll-hint:not([hidden]) {opacity:1;transform:translateX(-50%);filter:none;}
}
.candle-music-toggle {position:fixed;z-index:330;
  top:calc(env(safe-area-inset-top) + 20px);right:calc(env(safe-area-inset-right) + 20px);
  display:grid;place-items:center;width:48px;height:48px;padding:0;
  border:1px solid rgba(255,225,185,.56);border-radius:50%;
  color:#ffe4bb;background:linear-gradient(145deg,rgba(255,238,213,.22),rgba(157,103,69,.13));
  box-shadow:0 0 27px rgba(255,161,74,.17),inset 0 1px 0 rgba(255,249,231,.42);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:pointer;
  transition:background .25s,box-shadow .25s,transform .25s,opacity .25s;}
.candle-music-toggle[hidden] {display:none;}
.candle-music-toggle svg {width:25px;height:25px;filter:drop-shadow(0 0 5px rgba(255,190,110,.35));}
.candle-music-toggle:hover {transform:translateY(-2px);box-shadow:0 0 32px rgba(255,174,88,.28),inset 0 1px 0 rgba(255,249,231,.55);}
.candle-music-toggle:focus-visible {outline:2px solid #ffe0a5;outline-offset:4px;}
.candle-music-toggle.is-paused {color:rgba(255,229,195,.66);background:rgba(93,80,78,.22);box-shadow:inset 0 1px 0 rgba(255,249,231,.2);}
.candle-music-toggle.is-paused::after {content:"";position:absolute;width:27px;height:1.5px;
  border-radius:2px;background:currentColor;transform:rotate(-43deg);box-shadow:0 0 2px rgba(24,18,14,.85);}
@media(max-width:767px){.candle-music-toggle {top:calc(env(safe-area-inset-top) + 14px);right:calc(env(safe-area-inset-right) + 14px);}}
/* 点亮后舞台泛起一层极淡暖色，让火光照到「房间」而不是只有蛋糕 */
#ceremony-stage::after {content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(48% 36% at 50% 41%,rgba(255,176,96,.20),rgba(255,150,70,0) 72%);
  mix-blend-mode:screen;transition:opacity .45s ease;}
#ceremony-stage.radiating::after {opacity:.35;}
.sandpaper {position:absolute;inset:0;background:#080706 url('ceremony/sandpaper.jpg') center/cover no-repeat;opacity:.06;transition:opacity .7s;}
.striking .sandpaper {opacity:.8;transition:opacity .12s;}
.lit .sandpaper {opacity:.10;}

/* ---------- 蛋糕舞台：立体感由「接地阴影 + 明暗衰减 + 火光」三层叠出来 ---------- */
.earth-composition {position:absolute;width:min(86vw,430px,53svh);aspect-ratio:1;left:50%;top:43%;transform:translate(-50%,-50%);
  opacity:0;transition:opacity 1.4s,top 1.2s,width 1.2s;perspective:1000px;}
.lit .earth-composition {opacity:1;}

/* 接地阴影：椭圆软影，随倾斜反向位移，做出「落在台面上」的重量感 */
.cake-shadow {position:absolute;left:50%;bottom:1.5%;width:74%;height:8%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 42%,rgba(0,0,0,0) 74%);
  filter:blur(7px);opacity:0;transition:opacity 1.5s ease,transform .5s var(--ease-std);}
.lit .cake-shadow {opacity:1;}

/* 蛋糕本体：承载极轻微的指针视差倾斜 */
.cake-body {position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));will-change:transform;}
#earth-cake {width:100%;height:auto;display:block;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.75)) drop-shadow(0 3px 6px rgba(0,0,0,.5));}

/* 火光层：烛火是画面主光源，从顶部两支蜡烛向下衰减地打在蛋糕上 */
.cake-light {position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  transition:opacity .55s ease;
  -webkit-mask:url('ceremony/earth-cake.png') center/contain no-repeat;
  mask:url('ceremony/earth-cake.png') center/contain no-repeat;
  background:
    radial-gradient(24% 19% at 40.8% 3.9%,rgba(255,214,150,.48) 0%,rgba(255,170,90,.16) 45%,rgba(255,150,70,0) 78%),
    radial-gradient(24% 19% at 57.9% 4.1%,rgba(255,214,150,.48) 0%,rgba(255,170,90,.16) 45%,rgba(255,150,70,0) 78%),
    radial-gradient(54% 40% at 49.5% 10%,rgba(255,186,112,.16) 0%,rgba(255,150,80,.06) 48%,rgba(255,140,60,0) 80%);
  transform:translateZ(28px);}
/* 暗部层：① 球体边缘收暗（让平面圆形读成球面）② 底部衰减（光自上方来）③ 环境遮蔽压住蛋糕与盘子的接缝 */
.cake-shade {position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:multiply;
  transition:opacity 1.4s ease .2s;
  -webkit-mask:url('ceremony/earth-cake.png') center/contain no-repeat;
  mask:url('ceremony/earth-cake.png') center/contain no-repeat;
  background:
    radial-gradient(ellipse 39% 33% at 50% 61%,rgba(255,255,255,0) 52%,rgba(96,124,168,.30) 82%,rgba(46,72,116,.55) 100%),
    radial-gradient(ellipse 40% 12% at 50% 91%,rgba(10,20,42,.72) 0%,rgba(10,20,42,0) 72%),
    linear-gradient(to top,rgba(6,16,38,.78) 0%,rgba(8,20,44,.46) 18%,rgba(12,26,52,.18) 40%,rgba(16,32,58,0) 64%);
  transform:translateZ(2px);}
.lit .cake-shade {opacity:1;}

/* 烛芯辉光：火焰在空气里的那圈光晕 */
.wick-glow {position:absolute;left:40.8%;top:3.9%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.64);
  pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity .5s ease,transform .85s cubic-bezier(.2,.65,.25,1);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,229,182,.5) 0%,rgba(255,190,111,.24) 8%,rgba(242,132,64,.14) 22%,rgba(208,78,36,.075) 42%,rgba(145,45,22,.025) 64%,rgba(145,45,22,0) 74%);}
.wick-glow.second {left:57.9%;top:4.1%;}

/* ---------- 烛火：蛋糕先亮，火苗后起 ---------- */
.candle-fire {position:absolute;left:40.8%;top:3.9%;width:9%;aspect-ratio:2/3;transform:translate(-50%,-95.2%);
  opacity:0;transition:opacity .3s;transform-origin:50% 95.2%;filter:drop-shadow(0 0 8px rgba(255,180,97,.75));}
.candle-fire.second {left:57.9%;top:4.1%;}
/* 火苗升起：先失焦过亮，再收束成形（ignite 只动 opacity/filter，breathe 动 transform，互不打架） */
.flames .candle-fire {opacity:1;animation:flame-ignite .5s ease-out both,flame-breathe 1.6s ease-in-out .5s infinite alternate;}
.candle-fire.second {animation-delay:.06s,.62s;}
.radiating .cake-light,.radiating .wick-glow {opacity:1;}
.radiating .wick-glow {transform:translate(-50%,-50%) scale(1);}
.radiating .wick-glow::after {content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(255,198,133,.085),transparent 70%);animation:fire-flicker 2.3s ease-in-out infinite;}
.radiating .wick-glow.second::after {animation-delay:-.73s;}
/* 吹灭：火苗先被吹歪，再迅速缩没 */
.flames.blown .candle-fire {animation:flame-die .5s cubic-bezier(.3,.7,.4,1) forwards;}
.departed .earth-composition {opacity:0;transition:opacity 1.1s;}

@keyframes flame-breathe {0%{transform:translate(-50%,-95.2%) rotate(-1.4deg) scale(.97,1.03);}38%{transform:translate(-50%,-95.2%) rotate(1.1deg) scale(1.03,.96);}100%{transform:translate(-50%,-95.2%) rotate(.5deg) scale(.98,1.02);}}
@keyframes flame-ignite {0%{opacity:0;filter:blur(6px) brightness(2.6) drop-shadow(0 0 20px rgba(255,190,110,.9));}55%{opacity:1;filter:blur(.5px) brightness(1.45) drop-shadow(0 0 11px rgba(255,185,105,.85));}100%{opacity:1;filter:blur(0) brightness(1) drop-shadow(0 0 8px rgba(255,180,97,.75));}}
@keyframes flame-die {0%{opacity:1;transform:translate(-50%,-95.2%) scale(1,1);}30%{opacity:1;transform:translate(-50%,-95.2%) translate(-9px,-8px) rotate(-17deg) scale(1.18,.55);}100%{opacity:0;transform:translate(-50%,-95.2%) scale(.35,.06);}}
/* 不规则双频闪烁：火光不会像正弦那样规律 */
@keyframes fire-flicker {0%,100%{opacity:.86;}14%{opacity:1;}27%{opacity:.8;}41%{opacity:.94;}55%{opacity:.76;}68%{opacity:1;}82%{opacity:.85;}91%{opacity:.96;}}
.match-control {z-index:6;border:0!important;background:transparent!important;width:min(290px,80vw);height:100px;top:73%;}
.match-photo {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transform:translate(var(--match-x,0px),var(--match-y,0px)) rotate(-8deg);filter:drop-shadow(0 4px 8px #000);transition:opacity .4s;}
.match-control.ignited {pointer-events:none;animation:match-to-candle 1.2s ease-in-out both;}
.match-control.ignited .match-photo {transform:rotate(-8deg);transition:transform .35s,opacity .4s;}
.match-fire {position:absolute;width:28px;height:42px;left:90%;top:35%;transform:translate(-50%,-90%);opacity:0;pointer-events:none;filter:drop-shadow(0 0 9px #ef9e55);}
.ignited .match-fire {opacity:1;}
@keyframes match-to-candle {to{transform:translate(-98%,-438%) rotate(-25deg);opacity:0;}}
.match-control .strike-track {display:none;}
body.opening .prompt {bottom:13%;font-size:13px;color:#eadfd2;z-index:6;}
#fireworks-sky {position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:1;transition:opacity 1.8s;}
#fireworks-sky[hidden] {display:none;}
#fireworks-sky.finished {opacity:0;}
#hero-title {z-index:5;position:relative;width:100%;text-align:center;}
/* ===== 图二「21 岁黄金时代」页 =====
   金色年龄与蓝白玻璃书法来自独立透明素材，按三组适配手机屏高。
   同源磨砂天空只在 phase=done 亮起，开场光源在这一阶段退场。 */
/* Source typography is one transparent sculpture; HTML copy remains accessible. */
#hero-title.golden-age {position:absolute;inset:0;width:100%;z-index:5;text-align:center;animation:none;}
.golden-age .age-badge {
  position:absolute;top:13.05%;left:50%;transform:translateX(-50%);
  margin:0;padding:clamp(5px,1.5vw,12px) clamp(10px,2.7vw,26px);
  border-radius:999px;background:rgba(245,251,255,.34);border:1px solid rgba(255,255,255,.9);
  color:#6086a4;font-family:var(--mono);font-weight:400;font-size:clamp(6px,1.7vw,16px);
  letter-spacing:.1em;line-height:1.4;white-space:nowrap;backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.golden-title {position:absolute;inset:0;width:100%;margin:0;line-height:1;}
/* Three source regions keep their own vertical anchors on tall phones.
   All three reuse the same alpha artwork; no glyph is stretched or redrawn. */
.golden-art {position:absolute;left:50%;width:min(94%,54svh,980px);overflow:hidden;
  margin-left:calc(min(94%,54svh,980px) / -2);}
.age-art {top:17.5%;aspect-ratio:1216/310;}
.main-art {top:31.5%;aspect-ratio:1216/660;}
.main-art .golden-lettering {transform:translateY(-23.97525%);}
.wish-art {top:61.3%;aspect-ratio:1216/323;}
.wish-art .golden-lettering {transform:translateY(-75.01934%);}
.golden-lettering {display:block;width:100%;height:auto;filter:saturate(.62) brightness(1.15);}
.main-art .golden-lettering,.wish-art .golden-lettering {filter:saturate(.55) contrast(.7) brightness(1.5);}
.golden-copy {position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.golden-copy-line {display:block;}
.golden-age .hero-sub {position:absolute;left:50%;top:81.8%;transform:translateX(-50%);
  width:92%;max-width:none;margin:0;color:#416784;font-family:'Songti SC','SimSun',serif;
  font-size:clamp(7px,1.95vw,20px);line-height:1.8;letter-spacing:.16em;white-space:nowrap;}
.hero-dream {position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity 2.2s ease .4s;}
.golden-sky {position:absolute;inset:0;width:100%;height:100%;object-fit:fill;}
/* Retain the image fallback until its interactive WebGL texture is ready. */
body.golden-sky-fluid .golden-sky {visibility:hidden;}
body[data-phase="done"] .hero-dream {opacity:1;}
body[data-phase="done"] #ceremony-stage {visibility:hidden;}
body[data-phase="done"] .golden-art {animation:golden-arrive 1.3s cubic-bezier(.2,.65,.2,1) both;}
@keyframes golden-arrive {from{opacity:0;transform:translateY(12px) scale(.97);}to{opacity:1;transform:none;}}
body[data-phase="done"] .topline {top:4.6svh;left:5%;right:5%;width:auto;padding:0;
  font-family:'Songti SC','SimSun',serif;font-size:clamp(8px,2.15vw,22px);letter-spacing:.16em;
  color:#406581;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  mask:none;-webkit-mask:none;}
.tl-date {font-family:var(--display);font-weight:400;letter-spacing:.03em;}
#hero #scroll-hint {bottom:4.45%;z-index:5;display:flex;flex-direction:column;align-items:center;
  gap:1.3svh;color:#497697;font-family:'Songti SC','SimSun',serif;
  font-size:clamp(8px,2.15vw,22px);letter-spacing:.14em;line-height:1.4;white-space:nowrap;animation:none;}
#hero #scroll-hint[hidden] {display:none;}
.scroll-arrow {width:clamp(8px,1.8vw,18px);height:auto;opacity:.65;}
.scroll-arrow:not(.inline) {filter:brightness(0) invert(1);opacity:1;}
.scroll-arrow.inline {display:inline-block;vertical-align:-.08em;}
@media(prefers-reduced-motion:reduce) {
  .hero-dream {transition:none;}
  body[data-phase="done"] .golden-art {animation:none;}
}
@media(max-width:767px){html{scrollbar-width:none;}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;}}
.letter-entry {min-height:80svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:visible;}
.envelope-button {display:block;position:relative;width:min(540px,100%);aspect-ratio:1479/1063;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;perspective:1200px;box-shadow:none;}
.envelope-button {pointer-events:auto;}
.envelope-button:hover {background:transparent;}
.envelope-image {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 12px 18px #688aab30);}
.envelope-back {clip-path:polygon(4.5% 7.5%,96% 7.5%,96% 94.5%,4.5% 94.5%);object-fit:cover;}
.envelope-front {clip-path:polygon(4.5% 7.5%,51% 61.2%,96% 7.5%,96% 94.5%,4.5% 94.5%);z-index:3;}
.envelope-flap {position:absolute;inset:0;z-index:5;clip-path:polygon(5% 7.5%,95.2% 7.5%,51% 61.2%);transform-origin:50% 7.5%;transition:transform 1.1s cubic-bezier(.2,.65,.2,1),filter 1.1s;transform-style:preserve-3d;pointer-events:none;}
.flap-print,.flap-inside {position:absolute;inset:0;width:100%;height:100%;backface-visibility:visible;transition:opacity .15s .4s;}
.flap-inside {object-fit:cover;opacity:0;}
.opening .flap-print {opacity:0;}
.opening .flap-inside {opacity:1;}
.envelope-seal {clip-path:ellipse(13% 17% at 50% 60%);z-index:6;transition:transform .6s,opacity .5s;}
.envelope-paper {position:absolute;z-index:2;left:12%;top:14%;width:76%;height:75%;object-fit:cover;object-position:top;transition:transform 1.2s .65s cubic-bezier(.25,.7,.2,1);border-radius:4px;}
.envelope-button.opening .envelope-seal {transform:translateY(20px);opacity:0;}
.envelope-button.opening .envelope-flap {transform:rotateX(172deg);filter:brightness(.97);z-index:1;}
.envelope-button.opening .envelope-paper {transform:translateY(-45%);}
.letter-modal {background:rgba(191,215,231,.5);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transition:opacity .5s;}
.letter-sheet {background:#fcfcf7 url('ceremony/letter-paper.png') center/cover;box-shadow:0 22px 80px #52738f24;transform-origin:50% 90%;animation:unfold-paper .9s cubic-bezier(.2,.7,.2,1) both;}
.letter-modal.closing {opacity:0;}
.blank-letter {min-height:360px;}
.blank-letter span {display:block;border-bottom:1px solid #8fa9bc25;height:36px;}
.letter-body h3 {font-family:BirthdayHand,'KaiTi',serif;font-size:36px;margin-bottom:20px;}
@keyframes unfold-paper {from{opacity:0;transform:translateY(80px) rotateX(35deg) scale(.8);}to{opacity:1;transform:none;}}
@media(max-width:767px){body:has(#wish-modal.revealed:not([hidden])) .earth-composition {top:28%;width:min(59vw,30svh);}body[data-phase=ready] .earth-composition {top:41%;}.letter-sheet {max-height:85svh;overflow-y:auto;} }
@media(prefers-reduced-motion:reduce){.candle-fire,.match-control.ignited,.cake-light,.wick-glow,#ceremony-stage::after {animation:none!important;}
  .flames:not(.blown) .candle-fire{opacity:1;}
  .blown .candle-fire{opacity:0;}
  .wick-glow,.cake-light,#ceremony-stage::after,.candle-fire{transition:none;}
  .wick-glow::after{animation:none!important;}
  .ignited .match-fire{opacity:1;}
  .envelope-flap,.envelope-paper,.earth-composition {transition-duration:.01s;transition-delay:0s;}.letter-sheet {animation:none;} }

/* Wish in the candlelight, after ignition and before blowing. */
#wish-modal.candle-wish {display:flex;align-items:flex-end;justify-content:center;
  padding:12px 14px calc(14px + env(safe-area-inset-bottom));clip-path:none;transition:opacity .28s ease;
  background:linear-gradient(0deg,#030815b3,transparent 80%);backdrop-filter:none;-webkit-backdrop-filter:none;}
#wish-modal.candle-wish[hidden] {display:none;}
#wish-modal.candle-wish.closing {opacity:0;pointer-events:none;}
#wish-modal.candle-wish .wish-stage {width:min(360px,100%);max-height:65svh;
  overflow-x:hidden;
  padding:20px 23px 18px;border-radius:30px;background:linear-gradient(150deg,#fffffff2,#dfedf5e8 58%,#c7e1eedd);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);touch-action:pan-y;
  box-shadow:0 16px 65px #0006,inset 0 1px 0 #fff;animation:wish-in-candlelight .65s cubic-bezier(.16,1,.3,1) both;}
#wish-modal.candle-wish .wish-stage::before {inset:0 0 auto;height:50%;}
.candle-wish .wish-eyebrow {font-size:9px;margin-bottom:6px;}
.candle-wish .wish-title {font-size:31px;margin-bottom:7px;outline:none;}
.candle-wish .wish-sub {font-size:12px;line-height:1.7;margin-bottom:12px;}
.candle-wish .wish-frame {padding:10px;border-radius:22px;margin-bottom:5px;}
.candle-wish .wish-qr {width:140px;height:140px;border-radius:12px;}
.candle-wish .wish-direct-link {font-size:10px;margin:7px 0 10px;display:inline-block;}
.candle-wish .wish-direct-link[hidden] {display:none;}
.candle-wish .wish-soft-button {min-height:45px;padding:11px 12px;font-size:13px;}
.candle-wish .wish-status {margin-top:10px;font-size:11px;min-height:18px;}
.candle-wish .wish-privacy {font-size:9px;line-height:1.6;margin-top:9px;margin-bottom:0;color:#587687;}
.wish-retry {display:block;margin:8px auto 0;border:0;background:transparent;text-decoration:underline;
  text-underline-offset:4px;color:#527c96;font-size:11px;cursor:pointer;}
.wish-retry[hidden] {display:none;}
body:has(#wish-modal.candle-wish:not([hidden])) .earth-composition {top:23%;width:min(59vw,28svh);}
body:has(#wish-modal.candle-wish:not([hidden])) .cake-body {filter:none;}
.earth-composition {transition:top .75s cubic-bezier(.2,.65,.2,1),left .75s,width .75s,transform .8s;}
#birthday-reveal {position:fixed;inset:0;z-index:5;pointer-events:none;background:#bfdef5;}
#birthday-reveal[hidden] {display:none;}
#birthday-reveal.revealed {animation:birthday-light-open .85s cubic-bezier(.2,.65,.2,1) both;}
#birthday-reveal.revealed .reveal-word {animation:glass-reveal 1.1s cubic-bezier(.2,.65,.2,1) .15s both;}
@keyframes wish-in-candlelight {from{opacity:0;transform:translateY(22px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes birthday-light-open {from{clip-path:circle(0 at 50% 43%);}to{clip-path:circle(150vmax at 50% 43%);}}
@media(min-width:768px){#wish-modal.candle-wish{align-items:center;justify-content:flex-end;padding:30px 8vw;}
  #wish-modal.candle-wish .wish-stage{width:380px;max-height:88svh;padding:27px 30px;}
  .candle-wish .wish-qr{width:164px;height:164px;}
  body:has(#wish-modal.candle-wish:not([hidden])) .earth-composition{left:31%;top:50%;width:min(43vw,65svh);}}
@media(prefers-reduced-motion:reduce){#wish-modal.candle-wish,#wish-modal.candle-wish .wish-stage,
  #birthday-reveal.revealed,#birthday-reveal.revealed .reveal-word{animation:none;transition:none;}
  #birthday-reveal .reveal-word{opacity:1;}.earth-composition{transition:none;}}