@font-face{font-family:"Dancing Script";src:url("assets/DancingScript.ttf") format("truetype");font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("assets/BeVietnamPro-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("assets/BeVietnamPro-SemiBold.ttf") format("truetype");font-style:normal;font-weight:600;font-display:swap}
:root{color-scheme:dark;--night:#100a1f;--plum:#1b102b;--pink:#f58ab8;--gold:#f3c971;--cream:#fff3de;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;overflow:hidden;background:var(--night);color:var(--cream);font-family:"Be Vietnam Pro",system-ui,sans-serif}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
::selection{background:var(--pink);color:var(--night)}
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 75% 22%,#42243f 0,transparent 34%),radial-gradient(ellipse at 22% 85%,#281c45 0,transparent 42%),#100a1f}
.starfield{position:absolute;inset:0}
.starfield--far{opacity:.62;background-image:radial-gradient(circle at 8% 10%,#f8dba4 1px,transparent 2px),radial-gradient(circle at 17% 35%,#fff6e8 1px,transparent 2px),radial-gradient(circle at 33% 16%,#f9b9d1 1px,transparent 2px),radial-gradient(circle at 41% 74%,#fff6e8 1px,transparent 2px),radial-gradient(circle at 53% 25%,#f8dba4 1px,transparent 2px),radial-gradient(circle at 62% 58%,#fff6e8 1px,transparent 2px),radial-gradient(circle at 77% 82%,#f9b9d1 1px,transparent 2px),radial-gradient(circle at 91% 37%,#f8dba4 1px,transparent 2px)}
.starfield--near{opacity:.8;background-image:radial-gradient(circle at 13% 67%,#fff6e8 1.5px,transparent 2.5px),radial-gradient(circle at 30% 51%,#f3c971 1.5px,transparent 2.5px),radial-gradient(circle at 69% 13%,#fff6e8 1.5px,transparent 2.5px),radial-gradient(circle at 86% 69%,#f3c971 1.5px,transparent 2.5px)}
.fireworks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.moon-halo,.moon{position:absolute;transition:transform 1.1s var(--ease),opacity 1.1s var(--ease)}
.moon-halo{width:clamp(330px,52vw,650px);aspect-ratio:1;top:-12%;right:-4%;border-radius:50%;background:radial-gradient(circle,#e6ab7c33 0,#e5ab7c13 35%,transparent 68%)}
.moon{width:clamp(178px,28vw,300px);aspect-ratio:1;top:7%;right:10%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff8dc 0,#f9dda0 45%,#dca96b 90%);box-shadow:0 22px 68px #e6b8723b,inset -20px -24px 32px #bf874d35;opacity:.92}
.moon-crater{position:absolute;border-radius:50%;background:#d49c6650;box-shadow:inset 3px 5px 9px #a86d4538}
.moon-crater--one{width:14%;height:14%;top:24%;left:27%}
.moon-crater--two{width:8%;height:8%;top:55%;left:58%}
.moon-crater--three{width:11%;height:11%;top:68%;left:33%}
body[data-scene="moonrise"] .moon{transform:translate(-16vw,2vh) scale(1.08)}
body[data-scene="wish"] .moon{transform:translate(-26vw,-8vh) scale(.76);opacity:.7}
body[data-scene="together"] .moon{transform:translate(-8vw,-1vh) scale(.9)}
body[data-scene="finale"] .moon{transform:translate(-28vw,10vh) scale(1.25);opacity:.8}
body[data-scene="moonrise"] .moon-halo,body[data-scene="wish"] .moon-halo,body[data-scene="together"] .moon-halo,body[data-scene="finale"] .moon-halo{transform:translate(-12vw,2vh)}
.page-controls{position:fixed;z-index:30;top:max(18px,env(safe-area-inset-top) + 10px);left:clamp(22px,4vw,58px);right:clamp(22px,4vw,58px);display:flex;align-items:center;pointer-events:none}
.page-controls>*{pointer-events:auto}
.little-moon{width:24px;height:24px;border-radius:50%;background:var(--gold);box-shadow:0 5px 20px #f3c97155;position:relative}
.little-moon:after{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:var(--night);top:-6px;left:9px}
.primary-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.steps{position:fixed;z-index:25;right:clamp(17px,3vw,42px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:13px}
.step{width:10px;height:10px;border:0;border-radius:999px;background:#fff3de6b;box-shadow:0 0 0 4px #100a1f55;transition:height .3s,background .3s,transform .3s}
.step:hover{transform:scale(1.25);background:var(--cream)}
.step.is-current{height:30px;background:var(--pink)}
.story{height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}
.story::-webkit-scrollbar{display:none}
.panel{position:relative;isolation:isolate;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:110px clamp(32px,7vw,110px) 100px;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.panel:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.panel--cover:before{background:radial-gradient(ellipse at 20% 65%,#8d2d592a,transparent 56%)}
.panel--moonrise:before{background:radial-gradient(ellipse at 30% 55%,#9f547126,transparent 58%)}
.panel--wish:before{background:radial-gradient(ellipse at 70% 55%,#b3678221,transparent 55%)}
.panel--together:before{background:radial-gradient(ellipse at 50% 65%,#9d3a632a,transparent 60%)}
.panel--finale:before{background:radial-gradient(ellipse at 45% 55%,#c1767624,transparent 60%)}
.scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.panel-content{position:relative;z-index:2;width:min(100%,1040px)}
.cover-content{margin-right:auto;max-width:930px}
.display{margin:0;color:var(--pink);font-family:"Dancing Script","Brush Script MT",cursive;font-weight:700;letter-spacing:-.015em;text-shadow:0 9px 28px #d33f6d4d,0 2px 2px #4d1936;line-height:1.17}
.cover-title{max-width:800px;font-size:clamp(3.6rem,8vw,6rem)}
.ellipsis{color:var(--gold)}
.cover-note{margin:26px 0 33px;color:#fce4e7;font-size:clamp(1rem,1.8vw,1.22rem);line-height:1.7}
.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:54px;padding:12px 24px;border-radius:999px;font-weight:600;transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.primary-button{border:1px solid #ffe2a4;background:var(--gold);color:#261227;box-shadow:0 12px 30px #0007}
.primary-button:hover{transform:translateY(-3px)}
.primary-button:hover{background:#ffe0a4;box-shadow:0 16px 34px #0008}
.primary-button:active{transform:translateY(0)}
.wish-content{text-align:center;max-width:1020px}
.wish-title{max-width:920px;margin-inline:auto;font-size:clamp(3.05rem,6.6vw,5.15rem);text-wrap:balance}
.whisper{max-width:34ch;margin:30px auto 0;color:#f6bbd0;font-family:"Dancing Script","Brush Script MT",cursive;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;letter-spacing:.015em;line-height:1.45;text-shadow:0 3px 20px #d33f6d4d;text-wrap:balance}
.finale-content{text-align:center}
.finale-title{font-size:clamp(3.3rem,7vw,5.8rem);text-wrap:balance}
.scroll-hint{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom) + 14px);transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;color:#f9e1d7b7;font-size:.76rem;letter-spacing:.09em;white-space:nowrap}
.scroll-hint-line{width:1px;height:32px;background:linear-gradient(transparent,var(--gold))}
.lion{position:absolute;z-index:1;width:clamp(200px,26vw,345px);height:auto;filter:drop-shadow(0 24px 20px #0008);opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.panel.is-visible .lion{opacity:1;transform:translateY(0);animation:lion-float 4s ease-in-out infinite}
.lion--cover{right:3%;bottom:2%;width:clamp(230px,31vw,410px)}
.lion--moonrise{left:6%;bottom:3%;width:clamp(230px,32vw,380px)}
.lion--wish-left{left:4%;bottom:2%;width:clamp(170px,23vw,300px)}
.lion--wish-right{right:4%;bottom:2%;width:clamp(170px,23vw,300px);transform:translateY(32px) scaleX(-1)}
.panel.is-visible .lion--wish-right{transform:translateY(0) scaleX(-1)}
.lion--meet-left{left:16%;bottom:1%}
.lion--meet-right{right:16%;bottom:1%;transform:translateY(32px) scaleX(-1)}
.panel.is-visible .lion--meet-right{transform:translateY(0) scaleX(-1)}
.lion--final-left{left:4%;bottom:3%;width:clamp(180px,24vw,315px)}
.lion--final-right{right:4%;bottom:3%;width:clamp(180px,24vw,315px);transform:translateY(32px) scaleX(-1)}
.panel.is-visible .lion--final-right{transform:translateY(0) scaleX(-1)}
@keyframes lion-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
.orbit{position:absolute;border:1px solid #f3c97125;border-radius:50%;top:50%;right:-10%;translate:0 -50%}
.orbit--outer{width:min(80vw,850px);aspect-ratio:1}
.orbit--inner{width:min(57vw,580px);aspect-ratio:1;right:2%}
.spark{position:absolute;width:9px;height:9px;background:var(--gold);rotate:45deg;box-shadow:0 0 18px #f3c97188}
.spark--a{top:29%;left:15%}.spark--b{bottom:19%;right:32%;width:6px;height:6px;background:var(--pink)}
.cloud{position:absolute;width:240px;height:72px;border-bottom:2px solid #f3c97155;border-radius:50%;opacity:.7}
.cloud--one{top:23%;left:8%;rotate:-8deg}.cloud--two{top:34%;right:7%;width:170px;rotate:12deg}
.lantern{position:absolute;top:0;width:72px;height:118px;border:3px solid #e3a66e;border-radius:38% 38% 45% 45%;background:repeating-linear-gradient(90deg,#87324b 0 11px,#ae4e60 11px 15px);box-shadow:0 18px 45px #e8915840}
.lantern:before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:95px;background:#d9ad76}
.lantern:after{content:"";position:absolute;left:50%;top:100%;width:2px;height:36px;background:var(--gold);box-shadow:-6px 12px 0 -1px var(--gold),6px 12px 0 -1px var(--gold)}
.lantern--left{left:12%;rotate:-7deg}.lantern--right{right:14%;top:-19px;scale:.75;rotate:8deg}
.lantern-core{position:absolute;inset:15px 25px;border-left:1px solid #ffd8a466;border-right:1px solid #ffd8a466}
.confetti{position:absolute;top:54%;left:50%;width:9px;height:16px;border-radius:2px;background:var(--gold);opacity:0}
.confetti--two,.confetti--four,.confetti--six{background:var(--pink)}
.panel.is-visible .confetti{animation:confetti-burst 2.3s ease-out .3s both}
.confetti--one{--x:-210px;--y:-100px;--r:220deg}
.confetti--two{--x:-125px;--y:-160px;--r:310deg}
.confetti--three{--x:-55px;--y:-125px;--r:170deg}
.confetti--four{--x:65px;--y:-175px;--r:240deg}
.confetti--five{--x:155px;--y:-105px;--r:390deg}
.confetti--six{--x:225px;--y:-145px;--r:280deg}
@keyframes confetti-burst{0%{opacity:0;transform:translate(0,0) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.finale-ring{position:absolute;left:50%;top:49%;width:min(83vw,700px);aspect-ratio:1;border-radius:50%;border:1px solid #f3c97138;transform:translate(-50%,-50%)}
.finale-ring--two{width:min(65vw,520px);border-color:#f58ab843}
@media(max-width:680px){
  .moon{width:178px;top:9%;right:5%}.moon-halo{width:360px;top:-8%;right:-20%}
  body[data-scene="moonrise"] .moon{transform:translate(-17vw,2vh) scale(1.06)}
  body[data-scene="wish"] .moon{transform:translate(-19vw,-7vh) scale(.7)}
  body[data-scene="finale"] .moon{transform:translate(-26vw,7vh) scale(1.2)}
  .panel{padding:105px 33px 105px;min-height:100dvh}
  .cover-content{text-align:center;margin-inline:auto}
  .cover-title{font-size:clamp(3.05rem,12vw,4.9rem)}
  .cover-note{margin:22px 0 26px;font-size:.98rem}
  .wish-title{font-size:clamp(2.8rem,10.3vw,4.1rem)}
  .whisper{font-size:clamp(1.45rem,7vw,1.8rem);line-height:1.4}
  .finale-title{font-size:clamp(3rem,11vw,4.5rem)}
  .lion--cover{right:-48px;bottom:3%;width:235px;opacity:.9}
  .lion--moonrise{left:-30px;bottom:2%;width:230px}
  .lion--wish-left,.lion--meet-left,.lion--final-left{left:-45px;bottom:2%;width:195px}
  .lion--wish-right,.lion--meet-right,.lion--final-right{right:-45px;bottom:2%;width:195px}
  .lantern--left{left:12%;scale:.7}.lantern--right{right:9%;scale:.56}
  .steps{right:13px}
  .step{width:8px;height:8px}.step.is-current{height:25px}
  .page-controls{left:22px;right:22px}
}
@media(max-width:380px){
  .panel{padding-inline:28px}
  .cover-title{font-size:clamp(2.7rem,12vw,3.1rem)}
  .wish-title{font-size:clamp(2.45rem,10vw,2.8rem)}
  .finale-title{font-size:clamp(2.6rem,11vw,3.1rem)}
  .steps{right:9px}
}
@media(max-height:650px) and (min-width:681px){.panel{padding-block:85px}.lion{max-width:260px}}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .story{scroll-snap-type:none}
  .lion,.panel.is-visible .lion{opacity:1;transform:none}
  .lion--wish-right,.lion--meet-right,.lion--final-right,.panel.is-visible .lion--wish-right,.panel.is-visible .lion--meet-right,.panel.is-visible .lion--final-right{transform:scaleX(-1)}
  .confetti{display:none}
  .fireworks{display:none}
}