:root{--night: #0a1230;--night-deep: #060b1f;--cobalt: #1f3f9a;--turq: #2a8f8c;--sun: #f2b61f;--ochre: #c98a1b;--cream: #f3e6c0;--ink: #2f2011;--display: "Yeseva One", Georgia, serif;--read: "Gochi Hand", "Comic Sans MS", cursive;--type: "Special Elite", "Courier New", monospace;--hand: "Caveat", "Bradley Hand", cursive;--heavy: "Anton", Impact, sans-serif;--split: 57%;--visual-h: 65%;--split-x: 56%;--visual-w: 66%;--fade-stops: #000 0%, #000 58%, rgba(0, 0, 0, .92) 66%, rgba(0, 0, 0, .74) 74%, rgba(0, 0, 0, .46) 83%, rgba(0, 0, 0, .2) 91%, rgba(0, 0, 0, .06) 96%, transparent 100%;--gutter: clamp(20px, 6vw, 56px);--img-sky: none;--img-paper: none}*,*:before,*:after{box-sizing:border-box}html{background:var(--night-deep);-webkit-text-size-adjust:100%;scrollbar-width:none}html::-webkit-scrollbar{display:none}html.is-loading,html.is-loading body{overflow:hidden;height:100%}body{margin:0;font-synthesis:none;font-family:var(--read);color:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}p,h1,blockquote{margin:0}img,canvas{display:block}em{font-style:italic}#story{position:relative;height:2200vh}#stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;background-color:var(--night);background-image:linear-gradient(#060b1fc7,#060b1fe6),var(--img-sky);background-size:cover;background-position:center}#loader{position:absolute;inset:0;z-index:5;background:var(--night-deep);pointer-events:none;transition:opacity 1.4s ease}html:not(.is-loading) #loader{opacity:0}.scene{position:absolute;inset:0;pointer-events:none}.visual,.bleed,.dark,.part,.reel,.typed,.thanks,.wish,.hb,.word-xl,.moonlight{visibility:hidden;opacity:0}.visual{position:absolute;left:0;top:0;width:100%;height:var(--visual-h);overflow:hidden;container-type:size;-webkit-mask:linear-gradient(to bottom,var(--fade-stops));mask:linear-gradient(to bottom,var(--fade-stops))}.visual--wide{-webkit-mask:none;mask:none}.visual--wide>.fill{-webkit-mask:linear-gradient(to bottom,var(--fade-stops));mask:linear-gradient(to bottom,var(--fade-stops))}.bleed{position:absolute;inset:0;overflow:hidden;container-type:size}.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.square{--s: max(100cqw, 100cqh);position:absolute;left:calc((100cqw - var(--s)) * var(--px, .5));top:calc((100cqh - var(--s)) * var(--py, .5));width:var(--s);aspect-ratio:1}.square--sunrise{top:calc(var(--s) * -.2);-webkit-mask:linear-gradient(to bottom,#000 78%,transparent 100%);mask:linear-gradient(to bottom,#000 78%,transparent 100%)}.square--shadow{--px: .3}.spin{position:absolute;left:calc((var(--cx) - var(--r)) * 100%);top:calc((var(--cy) - var(--r)) * 100%);width:calc(var(--r) * 200%);aspect-ratio:1;pointer-events:none}.spin>img{width:100%;height:100%;animation:whorl-turn var(--turn, 38s) linear infinite;will-change:transform}.spin--rev>img{animation-direction:reverse}.spin--slow{--turn: 70s}.spin--horizon{--turn: 48s;-webkit-mask:linear-gradient(to bottom,#000 55%,transparent 62.5%);mask:linear-gradient(to bottom,#000 55%,transparent 62.5%)}.whorls{position:absolute;inset:0;overflow:hidden;pointer-events:none}.whorl{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:auto;aspect-ratio:1;translate:-50% -50%;opacity:var(--o, .3);pointer-events:none;will-change:transform;animation:whorl-turn var(--turn, 44s) linear infinite,whorl-breathe calc(var(--turn, 44s) / 3.7) ease-in-out infinite}.whorl--rev{animation-direction:reverse,normal}@keyframes whorl-turn{to{rotate:360deg}}@keyframes whorl-breathe{50%{scale:1.08}}.whorl--l1{--x: 88%;--y: 1.5%;--size: min(90vmin, 760px);--turn: 58s;--o: .22}.whorl--l2{--x: 2%;--y: 52%;--size: min(60vmin, 480px);--turn: 40s;--o: .26}.whorl--l3{--x: 24%;--y: 99%;--size: min(64vmin, 520px);--turn: 46s;--o: .26}.square>img.layer,.square>.portrait{position:absolute;inset:0;width:100%;height:100%}.portrait{transform-origin:48.6% 42.6%;will-change:transform}.portrait>img{width:100%;height:100%}.spark{position:absolute;left:var(--x);top:var(--y);width:3%;aspect-ratio:1;margin:-1.5% 0 0 -1.5%;opacity:0;visibility:hidden;mix-blend-mode:screen;pointer-events:none}.spark:before,.spark:after{content:"";position:absolute;inset:0}.spark:before{background:radial-gradient(circle,#fff,#fffaf0,#fff4d6b3 7%,#ffecb838 15%,#ffe8aa0f 26%,#ffe8aa00 40%);animation:glint-core 1.25s ease-in-out infinite}.spark:after{background:linear-gradient(90deg,#fffaec00,#fffaecf2,#fffaec00) center / 100% 2.6% no-repeat,linear-gradient(0deg,#fffaec00,#fffaecf2,#fffaec00) center / 2.6% 100% no-repeat;animation:glint-rays 1.25s ease-in-out infinite}.spark--late:before,.spark--late:after{animation-delay:-.45s;animation-duration:1.45s}@keyframes glint-core{0%,to{transform:scale(.6);opacity:.75}22%{transform:scale(1);opacity:1}44%{transform:scale(.64);opacity:.78}64%{transform:scale(.86);opacity:.95}84%{transform:scale(.6);opacity:.75}}@keyframes glint-rays{0%,6%,40%,50%,80%,to{transform:rotate(14deg) scale(0);opacity:0}22%{transform:rotate(14deg) scale(1);opacity:.9}64%{transform:rotate(14deg) scale(.62);opacity:.7}}.copy{position:absolute;left:0;right:0;top:var(--split);bottom:0;padding:clamp(14px,3.4vh,40px) var(--gutter) calc(clamp(18px,4vh,44px) + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;gap:1.1em}.copy--center{align-items:center;text-align:center}.copy .line,.copy .reel{text-shadow:0 1px 10px rgba(6,11,31,.85)}.over{position:absolute;inset:0;padding:calc(clamp(28px,7vh,72px) + env(safe-area-inset-top)) var(--gutter) calc(clamp(28px,6vh,64px) + env(safe-area-inset-bottom));display:flex;flex-direction:column}.over--low{justify-content:flex-end}.over--spread{justify-content:space-between}.scrim{position:absolute;inset:0}.scrim--up{background:linear-gradient(to top,#060b1ff5,#060b1fed 30%,#060b1f9e,#060b1f2e 46%,#060b1f00 53%)}.over--low .line{text-shadow:0 1px 12px rgba(6,11,31,.9)}.scrim--both{background:linear-gradient(to bottom,#060b1fd1,#060b1f8c 34%,#060b1f00 52% 66%,#060b1fe0 84%)}.line{font-size:clamp(1.2rem,1.85vh + 2vw,1.95rem);line-height:1.36;font-weight:400;letter-spacing:.012em;max-width:34em;text-wrap:pretty}.line--lg{font-size:clamp(1.35rem,2.2vh + 2.2vw,2.4rem);line-height:1.28}.line--words{font-size:clamp(1.22rem,1.8vh + 2vw,2.05rem);line-height:1.36}.part{display:inline}.part--strong{color:var(--sun)}.part em{color:var(--sun);font-style:normal}.w,.ch{display:inline-block;will-change:opacity,transform}.lettering{display:block;width:100%;height:auto;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.flick-text{grid-area:1 / 1;transition:opacity .5s ease}.lettering--settled{grid-area:1 / 1;opacity:0;transform:scale(.94);transition:opacity .9s ease .1s,transform 1.2s cubic-bezier(.2,.7,.2,1) .1s}.is-settled>.flick-text{opacity:0}.is-settled>.lettering--settled{opacity:1;transform:none}.word-xl{width:min(100%,560px);filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}.reel{font-family:var(--read);font-size:clamp(1.5rem,2.3vh + 2.6vw,2.6rem);line-height:1.16;color:var(--sun);max-width:22em;text-wrap:balance}.typed{position:relative;font-family:var(--type);font-size:clamp(1.12rem,1.6vh + 1.7vw,1.9rem);line-height:1.45;color:#fff4d0;padding-left:1.5em;max-width:26em}.typed__mark{position:absolute;left:0;top:-.12em;font-family:var(--display);font-size:2.6em;line-height:1;color:var(--sun)}.typed__rest{visibility:hidden}.typed__caret{display:inline-block;width:.08em;height:1.05em;margin:0 .04em -.18em;background:var(--sun);animation:caret .9s steps(1) infinite}@keyframes caret{50%{opacity:0}}.over--thanks{justify-content:flex-end;align-items:center;text-align:center}.tap-hint{position:absolute;top:calc(clamp(14px,3vh,28px) + env(safe-area-inset-top));left:50%;transform:translate(-50%);padding:.3em 1em .38em;border-radius:99px;background:#060b1f80;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff6d6;font-size:clamp(.95rem,1.1vh + 1vw,1.2rem);letter-spacing:.05em;white-space:nowrap;opacity:0;transition:opacity .5s ease}.tap-hint.is-on{opacity:.9}.scrim--thanks{background:linear-gradient(to top,#040818f2,#040818db 16%,#04081880 30%,#04081800 46%)}.thanks{font-family:var(--display);font-size:clamp(1.9rem,10.5vw,5rem);line-height:1.12;color:#fff6d6;width:min(100%,640px);min-height:2.75em;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;text-shadow:0 2px 3px rgba(0,0,0,.9),0 0 22px rgba(0,0,0,.75)}.thanks .flick-text{display:flex;flex-direction:column;align-items:center;white-space:nowrap;transform-origin:50% 100%}.thanks__name{font-size:.78em;margin-top:.1em}.thanks .lettering--settled{width:100%;max-width:100%;filter:drop-shadow(0 4px 16px rgba(0,0,0,.7))}.title{position:absolute;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;gap:2.2vh;text-align:center;pointer-events:none}.title__dear{width:min(78vw,680px);margin-bottom:calc(min(78vw,680px)*-.035)}.title__dear .lettering{width:40%;margin-left:-1%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));clip-path:inset(-10% 100% -10% 0%);transition:clip-path 1.3s cubic-bezier(.3,.6,.2,1) .5s}html:not(.is-loading) .title__dear .lettering{clip-path:inset(-10% 0% -10% 0%)}.title__name{font-family:var(--display);font-size:clamp(3.6rem,20vw,11rem);line-height:1;height:1.25em;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;white-space:nowrap;color:var(--cream);width:min(84vw,760px)}.title__name .lettering--settled{width:min(78vw,680px);justify-self:center;filter:drop-shadow(0 8px 26px rgba(0,0,0,.5))}.title__status{display:grid;justify-items:center;font-family:var(--read),Georgia,serif;font-size:clamp(1.05rem,1.3vh + 1.1vw,1.35rem);letter-spacing:.06em;color:#f3e6c0c7}.title__status>*{grid-area:1 / 1;transition:opacity .9s ease}.title__loading{font-variant-numeric:tabular-nums}.title__percent{display:inline-block;min-width:2.6em;text-align:left;color:var(--sun)}.title__hint{opacity:0;transition-delay:.9s}html:not(.is-loading) .title__loading{opacity:0}.title__hint:after{content:"";display:block;width:1px;height:42px;margin:14px auto 0;background:linear-gradient(var(--sun),transparent);animation:drip 2.2s ease-in-out infinite;transform-origin:top}html:not(.is-loading) .title__hint{opacity:1}@keyframes drip{0%{transform:scaleY(0)}55%{transform:scaleY(1);opacity:1}to{transform:scaleY(1);opacity:0}}.globe{position:absolute;left:50%;top:50%;width:min(86cqw,84cqh);height:auto;aspect-ratio:1;margin:calc(min(86cqw,84cqh)/-2) 0 0 calc(min(86cqw,84cqh)/-2);border-radius:50%;-webkit-mask:radial-gradient(circle closest-side,#000 var(--globe-cut, 96%),transparent calc(var(--globe-cut, 96%) + 3.5%));mask:radial-gradient(circle closest-side,#000 var(--globe-cut, 96%),transparent calc(var(--globe-cut, 96%) + 3.5%));filter:drop-shadow(0 0 28px rgba(242,182,31,.22))}.flick{position:absolute;inset:0}.flick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos, 50% 28%);visibility:hidden}.flick img.is-on{visibility:visible}.moon-dark{position:absolute;inset:0;--hole: 0%;background:radial-gradient(circle at calc(var(--moon-x) * 100%) calc(var(--moon-y) * 100%),rgba(2,4,13,0) calc(var(--hole) * .35),rgba(2,4,13,.5) calc(var(--hole) * .68),rgba(2,4,13,.9) var(--hole))}.moon-glow{position:absolute;left:calc(var(--moon-x) * 100%);top:calc(var(--moon-y) * 100%);width:calc(var(--moon-r) * 200%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffe6a0f2,#ffe0929e 30%,#ffd67838 52%,#ffd26e00 70%);mix-blend-mode:screen;opacity:0}.moon-cut{position:absolute;left:calc((var(--moon-x) - var(--moon-box)) * 100%);top:calc((var(--moon-y) - var(--moon-box)) * 100%);width:calc(var(--moon-box) * 200%);height:auto;opacity:.1}.moonlight{position:absolute;inset:0;-webkit-mask:radial-gradient(circle at var(--light-x, 50%) var(--light-y, 17%),#000 calc(var(--light-r, 0px) - 70px),transparent var(--light-r, 0px));mask:radial-gradient(circle at var(--light-x, 50%) var(--light-y, 17%),#000 calc(var(--light-r, 0px) - 70px),transparent var(--light-r, 0px));background:radial-gradient(circle at var(--light-x, 50%) var(--light-y, 17%),#f3e4ae 0%,#ead391 45%,#dfc17a 100%)}.moonlight__panel{position:absolute;left:0;right:0;top:var(--split);bottom:0;padding:clamp(14px,3.4vh,40px) var(--gutter) calc(clamp(18px,4vh,44px) + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;color:#14204f}.moonlight__panel .part{visibility:visible;opacity:1}[data-c=moon]{-webkit-mask:radial-gradient(circle at var(--copy-x, 50%) var(--copy-y, -40%),transparent calc(var(--light-r, 0px) - 70px),#000 var(--light-r, 0px));mask:radial-gradient(circle at var(--copy-x, 50%) var(--copy-y, -40%),transparent calc(var(--light-r, 0px) - 70px),#000 var(--light-r, 0px))}.dark{position:absolute;inset:0;background:#000;mix-blend-mode:multiply;display:grid;place-items:center;padding:var(--gutter);will-change:transform}.dark__text{font-family:var(--heavy);text-transform:uppercase;color:#fff;font-size:min(13.4vw,10.6vh);line-height:1.04;letter-spacing:.005em;max-width:12.5em}.scrim--birthday{background:radial-gradient(120% 46% at 50% 8%,#fff8dee6,#fff8de9e 46%,#fff8de00),linear-gradient(to top,#060b1ff0,#060b1fcc 22%,#060b1f00 46%)}.over--birthday{justify-content:space-between;align-items:center;text-align:center}.hb{width:min(88%,60vh,640px);filter:drop-shadow(0 4px 14px rgba(255,250,230,.55))}.wishes{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.1vh,14px);width:100%}.wish{display:block;width:min(68%,40vh,430px);filter:drop-shadow(0 3px 10px rgba(0,0,0,.55))}.wish--happy{width:min(94%,58vh,620px);margin-top:clamp(6px,1.6vh,20px)}#letter{position:relative;z-index:2;padding:clamp(40px,9vh,120px) clamp(12px,4vw,40px) calc(clamp(60px,12vh,160px) + env(safe-area-inset-bottom));background-color:var(--night);background-image:linear-gradient(#060b1fd1,#060b1ff0),var(--img-sky);background-size:cover;background-position:center}#letter{overflow:clip}.paper{position:relative;width:min(100%,720px);margin:0 auto;padding:clamp(44px,9vw,96px) clamp(30px,8.5vw,92px) clamp(52px,10vw,104px);background:var(--img-paper) center / 100% 100% no-repeat,#ead9b0;color:var(--ink);font-family:var(--hand);font-size:clamp(1.32rem,1.1rem + 1.5vw,1.85rem);line-height:1.36;box-shadow:0 30px 80px #0000008c;transform:rotate(-.3deg);opacity:0;translate:0 60px;transition:opacity 1.4s ease,translate 1.4s cubic-bezier(.2,.7,.2,1)}.paper.is-in{opacity:1;translate:0 0}.paper p+p{margin-top:.95em}.paper__sign{margin-top:2.2em;text-align:right}.paper__sign p:first-child{font-style:italic}.paper__name{font-family:"Homemade Apple",var(--hand);font-size:.92em;margin-top:.7em!important}@media(min-aspect-ratio:1/1){.visual{width:var(--visual-w);height:100%;-webkit-mask:linear-gradient(to right,var(--fade-stops));mask:linear-gradient(to right,var(--fade-stops))}.visual--wide>.fill{-webkit-mask:none;mask:none}.visual--wide{width:100%;-webkit-mask:linear-gradient(90deg,#000 0%,#000 44%,rgba(0,0,0,.34) 66%,rgba(0,0,0,.1) 100%);mask:linear-gradient(90deg,#000 0%,#000 44%,rgba(0,0,0,.34) 66%,rgba(0,0,0,.1) 100%)}.visual--wide .globe{left:30%}.copy,.moonlight__panel{left:var(--split-x);top:0;padding:var(--gutter) clamp(28px,5vw,96px) var(--gutter) clamp(28px,4vw,72px)}.line{font-size:clamp(1.05rem,1vh + 1.05vw,1.75rem)}.line--lg{font-size:clamp(1.4rem,1.6vh + 1.7vw,2.8rem)}.line--words{font-size:clamp(1.1rem,1.2vh + 1.2vw,2rem);max-width:30em}.word-xl{width:min(100%,640px)}.thanks{font-size:clamp(1.8rem,min(4.4vw,8vh),5rem);width:min(48vw,76vh,720px)}.flick img{object-position:var(--pos-wide, 50% 22%)}.reel{font-size:clamp(1.2rem,1.2vh + 1.4vw,2.4rem)}.over--spread .line{font-size:clamp(1.2rem,1.3vh + 1.3vw,2.1rem);max-width:27em}.typed{font-size:clamp(1.3rem,1.4vh + 1.5vw,2.4rem);max-width:24em}.over--low{justify-content:center;align-items:flex-end}.over--low .line{width:46%}.square--sunrise{--s: max(86cqw, 100cqh);left:0;top:min(0px,calc(100cqh - var(--s) * .83));-webkit-mask:linear-gradient(to right,#000 60%,rgba(0,0,0,.55) 80%,transparent 100%);mask:linear-gradient(to right,#000 60%,rgba(0,0,0,.55) 80%,transparent 100%)}.scrim--up{background:linear-gradient(to left,#060b1fe0,#060b1fb8 30%,#060b1f4d 44%,#060b1f00 54%)}.whorl--l1{--x: 90%;--y: 14%}.whorl--l3{--x: 88%;--y: 90%}.dark__text{font-size:min(7.4vw,13.5vh);max-width:16em;text-align:center}.hb{width:min(46vw,62vh,760px)}.wish{width:min(24vw,34vh,400px)}.wish--happy{width:min(40vw,52vh,640px)}}@media(prefers-reduced-motion:reduce){.title__hint:after,.typed__caret{animation:none}.spark:before{animation:none;transform:scale(.7)}.spark:after{animation:none;opacity:0}.whorl,.spin>img{animation:none}}