@font-face{font-family:Anton;src:url('assets/anton.ttf') format('truetype');font-display:swap;font-weight:400}
:root{color-scheme:dark;--ink:#101915;--yellow:#ffec8c;--coral:#f26b58;--green:#60c393;--blue:#66bfe1;--pull:0;--px:0px;--py:0px}
*{box-sizing:border-box}html,body{margin:0;background:var(--ink);width:100%;min-height:100%;overscroll-behavior:none}body{font-family:Arial,sans-serif;color:var(--yellow)}button{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--yellow);outline-offset:8px}button:disabled{cursor:default}button[hidden]{display:none}.party{position:relative;height:100svh;min-height:500px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 43%,#1e2b20 0%,#101915 65%)}.ambient{position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.17' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");z-index:12;mix-blend-mode:soft-light}.utilities{position:absolute;top:max(22px,env(safe-area-inset-top));right:30px;display:flex;gap:12px;z-index:30}.icon-button{display:grid;place-items:center;border:0;width:46px;height:46px;background:transparent;border-radius:50%;font-size:30px;transition:background .2s,transform .2s}.icon-button:hover{background:#ffec8c15;transform:rotate(-8deg)}.speaker{font-size:27px;letter-spacing:-4px;display:block;transform:translateX(-3px)}.waves{font-size:21px;letter-spacing:-3px;vertical-align:3px}.muted .waves{opacity:.25}.intro{position:absolute;inset:0;display:grid;place-items:center;z-index:20;transition:opacity .55s}.gift-halo{position:absolute;top:50%;left:50%;width:min(75vw,800px);height:min(75vw,800px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#eee18b12,transparent 65%);transition:opacity .3s}.gift{position:relative;display:block;width:min(64vh,580px,85vw);aspect-ratio:1;border:0;padding:0;background:none;touch-action:none;user-select:none;transform:translateY(-35px);outline-offset:0!important}.gift-art{position:absolute;inset:0;display:block;filter:drop-shadow(0 38px 20px #0007);animation:gift-float 5s ease-in-out infinite;transform-origin:50% 65%}.gift:hover .gift-art{filter:drop-shadow(0 38px 24px #0009) brightness(1.06)}.gift-piece{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.gift-top{clip-path:polygon(0 0,100% 0,100% 42%,64% 59%,0 48%);transform:translateY(calc(var(--pull)*-14px)) rotate(calc(var(--pull)*-3deg));transform-origin:70% 50%}.gift-bottom{clip-path:polygon(0 48%,64% 59%,100% 42%,100% 100%,0 100%);transform:translateY(calc(var(--pull)*8px))}.pull-hint{position:absolute;top:101%;left:0;width:100%;font-size:15px;letter-spacing:.06em;color:#eadf9b;transform:translateY(calc(var(--pull)*28px));transition:opacity .2s}.pull-arrow{display:block;font-size:38px;font-weight:200;margin-top:10px;animation:arrow-down 1.8s ease-in-out infinite}.dragging .gift-art{animation-play-state:paused}.dragging .pull-arrow{animation:none}.opening .gift-top{animation:unwrap-top .85s cubic-bezier(.25,.65,.4,1) forwards}.opening .gift-bottom{animation:unwrap-bottom .8s cubic-bezier(.2,.65,.4,1) forwards}.opening .pull-hint{opacity:0}.opening .gift-halo{opacity:0}.intro.gone{opacity:0;pointer-events:none}.celebration{position:absolute;inset:0;visibility:hidden}.opened .celebration{visibility:visible}.greeting{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:65px;pointer-events:none;z-index:5;transform:translate(calc(var(--px)*.4),calc(var(--py)*.4))}h1{margin:0;text-align:center;font-family:Anton,'Arial Narrow',Impact,sans-serif;font-weight:400;line-height:1.04;letter-spacing:-.035em;font-size:min(13.1vw,21vh,205px);filter:drop-shadow(0 8px 0 #050e1138)}.word{display:block;opacity:0;transform:scale(.1);transform-origin:50% 70%;will-change:transform}.word-happy{--tilt:-5deg}.word-birthday{--tilt:2deg}.word-dad{--tilt:-5deg}.opened .word{animation:word-pop 1.1s cubic-bezier(.2,.8,.22,1.1) forwards,word-drift 7s ease-in-out 1.1s infinite}.opened .word-birthday{animation-delay:.1s,1.2s}.opened .word-dad{animation-delay:.2s,1.3s}.photos{position:absolute;inset:0;z-index:6;pointer-events:none;transform:translate(var(--px),var(--py))}.photo{position:absolute;width:clamp(155px,19vw,280px);height:clamp(190px,31vh,330px);padding:9px 9px 27px;border:0;background:#f7f4e8;box-shadow:0 18px 35px #0005;pointer-events:auto;opacity:0;transform-origin:center;--rot:-10deg;--float:0px;transition:filter .2s;touch-action:pan-y;will-change:transform}.photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 27%;pointer-events:none}.photo:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px #00000010;pointer-events:none}.photo:nth-child(1){left:6%;top:10%;--rot:-13deg;--from-x:34vw;--from-y:28vh}.photo:nth-child(2){right:5%;top:9%;--rot:12deg;--from-x:-34vw;--from-y:28vh}.photo:nth-child(3){left:8%;bottom:12%;--rot:9deg;--from-x:34vw;--from-y:-28vh}.photo:nth-child(4){right:7%;bottom:11%;--rot:-11deg;--from-x:-34vw;--from-y:-28vh}.opened .photo{animation:photo-enter 1.15s cubic-bezier(.15,.8,.25,1) both,photo-float 6s ease-in-out 1.2s infinite;animation-delay:var(--delay),calc(1.15s + var(--delay))}.photo:hover{z-index:10;filter:brightness(1.08);animation-play-state:paused}.photo:focus-visible{z-index:10}.photo.changing{animation:photo-out .25s ease-in both}.decorations{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity 1s .3s}.opened .decorations{opacity:1}.paper{position:absolute;width:12px;height:24px;background:var(--color);transform:rotate(var(--angle));animation:paper-drift var(--duration) ease-in-out infinite;animation-delay:var(--delay);box-shadow:2px 3px 4px #0002}.paper:nth-child(3n){width:16px;height:16px;border-radius:50%}.paper:nth-child(5n){width:10px;height:35px;clip-path:polygon(0 0,100% 7%,80% 100%,0 90%)}.streamer{position:absolute;width:50px;height:135px;transform:rotate(var(--angle));animation:paper-drift 8s ease-in-out infinite}.streamer i{position:absolute;left:0;top:calc(var(--i)*27px);width:46px;height:34px;border:8px solid var(--color);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(28deg);filter:drop-shadow(2px 3px 2px #0003)}.party-controls{position:absolute;left:50%;bottom:max(23px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:15;display:flex;gap:20px;align-items:center;opacity:0;transition:opacity .6s .7s}.opened .party-controls{opacity:1}.round-button{width:48px;height:48px;display:grid;place-items:center;border:1.5px solid #ffec8c9c;border-radius:50%;font-size:27px;background:#101915d9;line-height:1;transition:transform .2s,background .2s,color .2s}.round-button:hover{background:var(--yellow);color:var(--ink);transform:rotate(-8deg) scale(1.08)}.round-button:active{transform:scale(.9)}.pop-button{width:65px;height:65px;font-size:41px;background:var(--yellow);color:var(--ink);border-color:var(--yellow)}.pop-button span{display:block;transition:transform .35s}.pop-button:hover span{transform:rotate(90deg)}#confetti{position:absolute;inset:0;width:100%;height:100%;z-index:25;pointer-events:none}dialog{padding:0;border:0;background:transparent;color:var(--yellow);max-width:100vw;max-height:100svh;width:100vw;height:100svh;overflow:hidden}dialog::backdrop{background:#050c09ed;backdrop-filter:blur(12px)}dialog figure{position:absolute;inset:55px 95px 65px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}dialog figure img{max-width:100%;max-height:calc(100% - 35px);width:auto;height:auto;object-fit:contain;border:8px solid #f7f4e8;box-shadow:0 25px 80px #0007}dialog figcaption{font-size:13px;letter-spacing:.16em;color:#d6d9cc}.close-viewer{position:absolute;right:24px;top:18px;font-size:40px;z-index:2}.viewer-prev,.viewer-next{position:absolute;top:50%;transform:translateY(-50%)}.viewer-prev{left:25px}.viewer-next{right:25px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.no-script{position:fixed;bottom:10px;left:10%;right:10%;text-align:center;z-index:50}.celebration.nudge .greeting{animation:celebrate-bump .55s ease-out}
@keyframes gift-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(-1deg)}}
@keyframes arrow-down{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(10px);opacity:1}}
@keyframes unwrap-top{to{transform:translate(-15vw,-85vh) rotate(-45deg);opacity:0}}
@keyframes unwrap-bottom{to{transform:translate(10vw,90vh) rotate(35deg);opacity:0}}
@keyframes word-pop{0%{opacity:0;transform:translateY(90px) rotate(0) scale(.05)}60%{opacity:1;transform:translateY(-10px) rotate(var(--tilt)) scale(1.1)}100%{opacity:1;transform:translateY(0) rotate(var(--tilt)) scale(1)}}
@keyframes word-drift{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-7px) rotate(calc(var(--tilt) + 1deg))}}
@keyframes photo-enter{0%{opacity:0;transform:translate(var(--from-x),var(--from-y)) scale(.05) rotate(0)}100%{opacity:1;transform:translateY(0) scale(1) rotate(var(--rot))}}
@keyframes photo-float{0%,100%{transform:translateY(0) rotate(var(--rot))}50%{transform:translateY(-10px) rotate(calc(var(--rot) + 2deg))}}
@keyframes photo-out{from{opacity:1;transform:rotate(var(--rot))}to{opacity:0;transform:translateY(45px) rotate(calc(var(--rot) + 12deg)) scale(.85)}}
@keyframes paper-drift{0%,100%{translate:0 0;rotate:0deg}50%{translate:5px -18px;rotate:20deg}}
@keyframes celebrate-bump{40%{scale:1.035;rotate:-1deg}}
@media(min-width:1500px){.photo:nth-child(1){left:10%}.photo:nth-child(2){right:10%}.photo:nth-child(3){left:14%}.photo:nth-child(4){right:14%}}
@media(max-width:850px){h1{font-size:min(17vw,19vh)}.photo{width:21vw;height:26vh;max-height:245px;min-height:140px;padding:7px 7px 20px}.photo:nth-child(1){left:2%;top:9%}.photo:nth-child(2){right:2%;top:8%}.photo:nth-child(3){left:4%;bottom:13%}.photo:nth-child(4){right:4%;bottom:12%}.utilities{right:15px;top:12px}}
@media(max-width:600px){.party{min-height:600px}.gift{width:min(88vw,53vh);transform:translateY(-35px)}.greeting{align-items:start;padding-top:11vh;padding-bottom:0}h1{font-size:min(23.5vw,13.4vh);line-height:1.02}.word-happy{--tilt:-5deg}.word-birthday{--tilt:2deg}.word-dad{--tilt:-5deg}.photo{width:35vw;height:24vh;max-height:215px;min-height:155px;padding:6px 6px 18px}.photo:nth-child(1){left:-4%;top:59%;--rot:-17deg;--from-x:40vw;--from-y:-15vh;z-index:1}.photo:nth-child(2){right:-3%;top:57%;--rot:15deg;--from-x:-40vw;--from-y:-15vh;z-index:2}.photo:nth-child(3){left:16%;bottom:15%;--rot:-8deg;--from-x:15vw;--from-y:-20vh;z-index:3}.photo:nth-child(4){right:14%;bottom:15%;--rot:8deg;--from-x:-15vw;--from-y:-20vh;z-index:4}.party-controls{bottom:max(23px,env(safe-area-inset-bottom));gap:24px}.pop-button{width:58px;height:58px}.paper{scale:.7}.streamer{scale:.75}.utilities{top:10px;right:12px}.icon-button{width:42px;height:42px}dialog figure{inset:70px 12px 95px}dialog figure img{border-width:5px}.viewer-prev,.viewer-next{top:auto;bottom:20px;transform:none}.viewer-prev{left:calc(50% - 70px)}.viewer-next{right:calc(50% - 70px)}}
@media(max-height:550px) and (min-width:601px){.party{min-height:360px}.gift{width:65vh}.pull-hint{top:97%}.pull-arrow{font-size:28px;margin-top:0}.greeting{padding-bottom:30px}h1{font-size:22vh}.photo{height:31vh;min-height:110px;width:18vw;max-width:200px}.party-controls{bottom:12px}.round-button{width:40px;height:40px}.pop-button{width:48px;height:48px}.photo:nth-child(3),.photo:nth-child(4){bottom:10%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.gift-art,.photos,.greeting{transform:none!important}.opened .word{opacity:1;transform:rotate(var(--tilt))}.opened .photo{opacity:1;transform:rotate(var(--rot))}.gift{transform:translateY(-35px)}}

/* Scattered prints keep their natural proportions and their own room to move. */
.gallery[hidden]{display:none}
.gallery{max-width:1440px;margin:0 auto;padding:110px 72px 150px;scroll-margin-top:20px;overflow:clip}
.gallery-grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:110px 24px;align-items:start}
.gallery-print{position:relative;grid-column:1 / span 5;--angle:-6deg;--drift:0px;--arrival:0px;transform:translate3d(0,calc(var(--drift) + var(--arrival)),0) rotate(var(--angle));transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1);animation:album-float var(--float-duration,7s) ease-in-out infinite;animation-delay:var(--float-delay,0s);animation-play-state:paused}
.gallery-print:nth-child(6n+2){grid-column:8 / span 5;margin-top:180px;--angle:7deg}
.gallery-print:nth-child(6n+3){grid-column:2 / span 6;--angle:4deg}
.gallery-print:nth-child(6n+4){grid-column:9 / span 4;margin-top:220px;--angle:-8deg}
.gallery-print:nth-child(6n+5){grid-column:1 / span 5;--angle:-5deg}
.gallery-print:nth-child(6n+6){grid-column:7 / span 6;margin-top:160px;--angle:6deg}
.gallery-print.is-in-view{animation-play-state:running}
.gallery-motion .gallery-print:not(.is-visible){opacity:0;--arrival:65px}
.gallery-print:focus-within,.gallery-print:hover{z-index:2;animation-play-state:paused}
.gallery-photo{--tilt-x:0deg;--tilt-y:0deg;display:block;width:100%;margin:0;padding:9px 9px 27px;border:0;background:#f7f4e8;box-shadow:0 22px 38px #0005;transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .3s ease-out,box-shadow .3s,scale .3s,rotate .3s;cursor:zoom-in;touch-action:pan-y}
.gallery-photo img{display:block;width:100%;height:auto;pointer-events:none}
.gallery-photo:focus-visible{scale:1.035;rotate:calc(var(--angle) * -.3);box-shadow:0 32px 55px #0008}
.gallery-print:nth-child(3n+1):before,.gallery-print:nth-child(3n+1):after{content:'';position:absolute;pointer-events:none;background:var(--paper-color);width:13px;height:27px;left:-42px;top:32%;rotate:32deg;box-shadow:2px 4px 5px #0002}
.gallery-print:nth-child(3n+1):after{left:auto;right:-34px;top:75%;width:14px;height:14px;border-radius:50%}
.gallery-jump{position:absolute;right:30px;bottom:30px;z-index:15;width:44px;height:44px;display:grid;place-items:center;color:var(--yellow);font-size:32px;text-decoration:none;border-radius:50%;opacity:0;transition:opacity .6s .7s,background .2s}
.opened .gallery-jump{opacity:1}.gallery-jump:hover{background:#ffec8c15}.gallery-jump:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
body:has(dialog[open]){overflow:hidden}
@keyframes album-float{0%,100%{translate:0 0}50%{translate:0 -13px}}
@media(hover:hover) and (pointer:fine){.gallery-photo:hover{scale:1.035;rotate:calc(var(--angle) * -.3);box-shadow:0 32px 55px #0008}}
@media(max-width:900px){.gallery{padding:85px 44px 100px}.gallery-grid{gap:90px 16px}.gallery-print:nth-child(6n+3){grid-column:1 / span 6}.gallery-print:nth-child(6n+4){grid-column:8 / span 5}}
@media(max-width:700px){.gallery{padding:70px 34px 90px}.gallery-grid{display:flex;flex-direction:column;gap:80px}.gallery-print:nth-child(n){width:88%;margin:0;align-self:flex-start;--angle:-5deg}.gallery-print:nth-child(2n){width:86%;align-self:flex-end;--angle:5deg}.gallery-print:nth-child(3n){width:96%;align-self:center;--angle:-3deg}.gallery-photo{padding:6px 6px 21px}.gallery-jump{right:14px;bottom:30px}.gallery-print:nth-child(3n+1):before{left:-22px;width:9px;height:19px}.gallery-print:nth-child(3n+1):after{right:-22px;width:10px;height:10px}}
@media(prefers-reduced-motion:reduce){.gallery-print{animation:none!important;opacity:1!important;transform:rotate(var(--angle));translate:none}.gallery-photo{transform:none!important;scale:1!important;rotate:0deg!important}}