:root{font-family:Arial,Helvetica,sans-serif;color:#424242;background:#fff}*{box-sizing:border-box}html,body{height:100%;margin:0}body{overflow:hidden}button{font:inherit;cursor:pointer}#app{width:100vw;height:100dvh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:white}.stage{width:1440px;height:1024px;position:relative;flex:none;transform-origin:center center;overflow:hidden;background:#fff}.scene{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease,visibility .65s}.scene.active{opacity:1;visibility:visible;pointer-events:auto}.scene-render{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.intro .car{position:absolute;left:136px;top:293px;width:1168px;height:584px;object-fit:contain;transform:translateX(-1650px);mix-blend-mode:multiply;animation:drive-in 1.45s cubic-bezier(.25,.65,.3,1) .25s forwards,drive-out 1.2s cubic-bezier(.7,0,.4,.95) 2.6s forwards}.tiny-envelope{position:absolute;width:65px;height:auto;left:782px;top:473px;opacity:0;animation:deposit .4s ease 2.45s forwards}.closed>img{position:absolute;width:452px;height:auto;left:494px;top:300px;object-fit:contain;transform:scale(.18);opacity:0}.closed.active>img{animation:grow-envelope 1.1s cubic-bezier(.2,.8,.1,1) forwards}.opened .open-art{position:absolute;width:524.5px;height:566.5px;left:457px;top:230px;object-fit:contain;animation:unfold .7s ease both}.open-trigger{position:absolute;inset:0;border:0;background:transparent}.instruction{position:absolute;top:715px;left:0;width:100%;text-align:center;font-size:14px;pointer-events:none;color:#555}.scatter .hotspot{position:absolute;background:transparent;border:0;border-radius:14px;z-index:3}.hotspot:hover,.hotspot:focus-visible{outline:2px solid #5555;outline-offset:3px}.spot-coupons{left:100px;top:110px;width:310px;height:260px;transform:rotate(-4deg)}.spot-letter{left:490px;top:190px;width:470px;height:460px}.spot-certificate{left:1040px;top:110px;width:330px;height:230px}.spot-music{left:112px;top:670px;width:355px;height:230px}.spot-photos{left:1065px;top:620px;width:305px;height:310px}.flying{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0}.scatter.scattering .flying{opacity:1;animation:fly-hide 1.05s ease forwards}.scatter.scattering>.scene-render{animation:render-in .9s ease forwards}.fly{position:absolute;transform-origin:center;opacity:0}.coupon-fly{width:300px;left:110px;top:150px;--tx:560px;--ty:310px;--rot:0deg}.letter-fly{width:440px;left:500px;top:230px;--tx:0px;--ty:160px;--rot:0deg}.certificate-fly{width:300px;left:1050px;top:110px;--tx:-540px;--ty:420px;--rot:-12deg}.music-fly{width:340px;left:110px;top:670px;--tx:565px;--ty:-155px;--rot:16deg}.photos-fly{width:280px;left:1090px;top:650px;--tx:-570px;--ty:-120px;--rot:-20deg}.scatter.scattering .fly{animation:scatter-piece .95s cubic-bezier(.15,.8,.2,1) both}.scatter.scattering .coupon-fly{animation-delay:.02s}.scatter.scattering .letter-fly{animation-delay:.10s}.scatter.scattering .certificate-fly{animation-delay:.16s}.scatter.scattering .music-fly{animation-delay:.22s}.scatter.scattering .photos-fly{animation-delay:.27s}.audio-toggle{position:absolute;z-index:5;color:#fff;border:0;background:#929292;display:grid;place-items:center;border-radius:8px;font-weight:bold}.small-play{left:265px;top:782px;width:48px;height:42px;font-size:26px}.large-play{left:1054px;top:694px;width:43px;height:43px;color:#5c5c5c;background:#fff;font-size:26px}.audio-toggle span{transform:translateX(2px)}.audio-toggle.playing span{transform:none}.restart-song{position:absolute;left:970px;top:690px;width:50px;height:50px}.photos .photo-stack{position:absolute;left:521px;top:228px;width:423px;height:494px;pointer-events:none}.photo-card{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 4px #0002);transition:transform .45s ease,opacity .35s ease}.photo-card.back-one{transform:translate(-19px,10px) rotate(-2deg)}.photo-card.back-two{transform:translate(17px,8px) rotate(2deg)}.photo-card.front{transform:translate(0,0) rotate(0deg)}.shuffle-note{position:absolute;top:750px;left:0;width:100%;text-align:center;font-size:14px;color:#555}.wide-hit{position:absolute;inset:0;border:0;background:transparent;cursor:pointer}.coupons #coupon-card{position:absolute;left:682px;top:220px;width:377px;height:584px;object-fit:contain;filter:drop-shadow(0 2px 2px #0003);transition:transform .25s ease,opacity .25s ease}.coupons #coupon-card.swapping{transform:translateX(18px) rotate(2deg);opacity:.25}.coupon-dots{position:absolute;top:828px;left:682px;width:377px;text-align:center;font-size:13px;letter-spacing:7px;color:#aaa;pointer-events:none}.certificate>img{position:absolute;left:399px;top:251px;width:642px;height:454px;object-fit:contain}.back{position:absolute;z-index:10;left:24px;top:20px;padding:10px 12px;border:0;background:#fff9;color:#666;font-size:15px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s}.stage[data-scene="letter"] .back,.stage[data-scene="music"] .back,.stage[data-scene="photos"] .back,.stage[data-scene="coupons"] .back,.stage[data-scene="certificate"] .back{opacity:.75;pointer-events:auto}.back:hover{opacity:1!important}.sound{position:absolute;z-index:10;right:20px;bottom:16px;width:34px;height:34px;border:0;background:#fff9;color:#888;font-size:20px;border-radius:50%;opacity:0;pointer-events:none}.stage[data-scene="scatter"] .sound,.stage[data-scene="music"] .sound{opacity:.75;pointer-events:auto}.sound.playing{color:#262626}.scene.detail{animation:none}@keyframes drive-in{to{transform:translateX(0)}}@keyframes drive-out{to{transform:translateX(1650px)}}@keyframes deposit{to{opacity:1}}@keyframes grow-envelope{to{transform:scale(1);opacity:1}}@keyframes unfold{from{transform:scale(.86) rotate(-3deg);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scatter-piece{0%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(.20) rotate(var(--rot))}30%{opacity:1}100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}@keyframes render-in{from{opacity:0}to{opacity:1}}@keyframes fly-hide{90%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.mobile-collage,.mobile-music{display:none}
@media(max-width:700px){
  #app{align-items:stretch;justify-content:center}
  .stage{width:min(100vw,430px);height:100dvh;transform:none!important}
  .intro .car{width:100%;height:auto;top:34%;left:0;object-fit:contain}
  .tiny-envelope{width:42px;left:calc(50% + 31px);top:44%}
  .closed>img{width:87%;height:auto;left:6.5%;top:33%}
  .opened .open-art{width:100%;height:auto;left:0;top:22%}
  .instruction{top:74%;font-size:14px}
  .scatter>.scene-render,.scatter .flying{display:none}
  .mobile-collage{display:block;position:absolute;inset:0}
  .mobile-collage img{position:absolute;object-fit:contain;filter:drop-shadow(0 4px 5px #0001)}
  .mobile-collage img:nth-child(1){width:52%;left:24%;top:23%}
  .mobile-collage img:nth-child(2){width:39%;left:2%;top:8%;transform:rotate(-9deg)}
  .mobile-collage img:nth-child(3){width:40%;right:2%;top:9%;transform:rotate(5deg)}
  .mobile-collage img:nth-child(4){width:46%;left:3%;bottom:13%;transform:rotate(-5deg)}
  .mobile-collage img:nth-child(5){width:43%;right:1%;bottom:11%;transform:rotate(7deg)}
  .spot-coupons{left:0;top:5%;width:45%;height:24%;transform:none}.spot-letter{left:21%;top:24%;width:58%;height:46%}.spot-certificate{left:55%;top:5%;width:45%;height:23%}.spot-music{left:0;top:67%;width:50%;height:30%}.spot-photos{left:53%;top:67%;width:47%;height:31%}
  .small-play{left:23%;top:81%;width:36px;height:34px;font-size:21px;background:#929292}
  .letter>.scene-render{width:315%;height:auto;max-height:none;left:-108%;top:-2%;object-fit:contain}
  .music>.scene-render{display:none}.mobile-music{display:block;position:absolute;inset:65px 16px 10px;overflow-y:auto;padding-bottom:55px;text-align:left;font-size:16px;line-height:1.45;color:#626262}.mobile-music p{margin:0 0 22px}.mobile-music .music-footnote{color:#111;margin-top:20px}.mobile-music img{display:block;width:66%;max-width:260px;margin:5px auto 40px}
  .large-play{left:calc(50% - 19px);top:auto;bottom:12%;width:38px;height:36px;background:#fff;color:#555}.restart-song{display:none}
  .photos .photo-stack{width:min(85vw,360px);height:auto;aspect-ratio:423/494;left:50%;top:27%;transform:translateX(-50%)}.shuffle-note{top:78%}
  .coupons #coupon-card{height:auto;width:min(78vw,330px);left:50%;top:20%;transform:translateX(-50%);filter:drop-shadow(0 2px 2px #0002)}.coupons #coupon-card.swapping{transform:translateX(-45%) rotate(2deg)}.coupon-dots{left:0;top:87%;width:100%}
  .certificate>img{width:94%;height:auto;left:3%;top:37%}
  .back{left:10px;top:10px;background:#fff;color:#666}.sound{right:10px;bottom:10px}
}
@media(min-width:701px){.closed>img{top:390px}.opened{background:url('/assets/Desktop - 3.png') center/100% 100% no-repeat}.opened .open-art,.opened .instruction{display:none}}
/* Keep the same sealed artwork through delivery and opening so no frame jumps. */
.intro,.closed,.opened{transition:none}
.intro .car{z-index:2;transform:translate3d(1650px,0,0);animation:car-route 3.75s linear .25s both;will-change:transform}
.intro .delivery-envelope{position:absolute;z-index:3;width:452px;height:auto;left:494px;top:390px;opacity:0;transform-origin:center;animation:envelope-forward 1.4s cubic-bezier(.14,.78,.2,1) 2.55s forwards;will-change:transform,opacity}
.closed>img,.closed.active>img{top:390px;opacity:1;transform:none;animation:none}
.opened{background:none!important}
.opened .sealed-envelope{position:absolute;z-index:5;left:494px;top:390px;width:452px;height:385px;transform-style:preserve-3d;perspective:850px;opacity:1}
.opened.active .sealed-envelope{animation:seal-away .48s ease-out .65s forwards}
.opened .sealed-envelope img{position:absolute;left:0;top:0;width:100%;height:auto}
.opened .sealed-body{clip-path:polygon(0 0,0 100%,100% 100%,100% 0,50% 44%)}
.opened .sealed-flap{clip-path:polygon(0 0,100% 0,50% 52%);transform-origin:50% 5%;backface-visibility:hidden}
.opened.active .sealed-flap{animation:flap-lift .75s cubic-bezier(.32,0,.18,1) .18s forwards}
.opened .instruction{display:block;opacity:0}
.opened.active .instruction{animation:hint-in .36s ease 2.72s forwards}
.opened .open-trigger{z-index:6;pointer-events:none}
.opened.ready .open-trigger{pointer-events:auto}
@keyframes car-route{0%{transform:translate3d(1650px,0,0);animation-timing-function:cubic-bezier(.2,.65,.25,1)}38.7%,65.3%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.55,0,.85,.4)}100%{transform:translate3d(-1650px,0,0)}}
@keyframes envelope-forward{0%{opacity:0;transform:translate3d(-135px,-24px,0) scale(.13)}10%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes flap-lift{0%{transform:rotateX(0)}100%{transform:rotateX(165deg)}}
@keyframes seal-away{to{opacity:0;visibility:hidden}}
@keyframes hint-in{to{opacity:1}}
@media(max-width:700px){
  .intro .delivery-envelope{width:87%;left:6.5%;top:33%}
  .closed>img,.closed.active>img{top:33%}
  .opened .open-art{width:100%;left:0;top:22%}
  .opened .sealed-envelope{width:87%;height:auto;left:6.5%;top:33%}
}
/* The supplied shell masks a single transform-only rise behind its front fold. */
.opening-layers{position:absolute;z-index:1;left:500px;top:280px;width:440px;height:483px;pointer-events:none}
.opening-layers img{position:absolute;height:auto;object-fit:contain;pointer-events:none;backface-visibility:hidden}
.opening-layers .empty-envelope{z-index:1;left:0;top:0;width:100%;opacity:0}
.opening-layers .rising-stuff{z-index:2;left:7%;top:0;width:85%;transform:translate3d(0,245px,0);will-change:transform}
.opening-layers .envelope-front{z-index:3;left:0;top:0;width:100%;opacity:0;clip-path:polygon(0 25%,50% 45%,100% 25%,100% 100%,0 100%)}
.opening-layers .open-final{z-index:4;left:0;top:0;width:100%;opacity:0}
.opened.active .empty-envelope,.opened.active .envelope-front{animation:empty-reveal .46s ease .55s forwards}
.opened.active .rising-stuff{animation:stuff-rises 1.48s cubic-bezier(.22,.72,.25,1) 1.05s both}
.opened.active .open-final{animation:final-reveal .32s ease 2.50s forwards}
@keyframes empty-reveal{to{opacity:1}}
@keyframes stuff-rises{from{transform:translate3d(0,245px,0)}to{transform:translate3d(0,0,0)}}
@keyframes final-reveal{to{opacity:1}}
@media(max-width:700px){.opening-layers{width:100%;height:auto;left:0;top:22%}}
/* Each scattered keepsake moves on its own, with no rectangular hover highlight. */
@media(min-width:701px){
  .scatter>.scene-render{display:none}
  .scatter .hotspot{border-radius:0;transform-origin:center;transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .32s ease;will-change:transform}
  .scatter .hotspot img{display:block;max-width:none;pointer-events:none}
  .scatter .hotspot:hover,.scatter .hotspot:focus-visible{outline:none;filter:drop-shadow(0 12px 12px #0002)}
  .scatter .spot-coupons{left:116px;top:109px;width:282px;height:234px;transform:rotate(-4deg)}
  .spot-coupons img{position:absolute;left:0;width:100%;height:auto}
  .spot-coupons .coupon-bottom{top:105px;transform:rotate(-5deg)}
  .spot-coupons .coupon-middle{top:55px;transform:rotate(2deg)}
  .spot-coupons .coupon-top{top:0;transform:rotate(5deg)}
  .scatter .spot-coupons:hover,.scatter .spot-coupons:focus-visible{transform:translateY(-7px) rotate(-1deg) scale(1.055)}
  .scatter .spot-letter{left:495px;top:194px;width:450px;height:487px;transform:rotate(0deg)}
  .spot-letter img{width:100%;height:100%;object-fit:contain}
  .scatter .spot-letter:hover,.scatter .spot-letter:focus-visible{transform:translateY(-7px) rotate(2deg) scale(1.045)}
  .scatter .spot-certificate{left:1036px;top:110px;width:294px;height:209px;transform:rotate(1deg)}
  .spot-certificate img{width:100%;height:auto}
  .scatter .spot-certificate:hover,.scatter .spot-certificate:focus-visible{transform:translateY(-7px) rotate(4deg) scale(1.06)}
  .scatter .spot-music{left:110px;top:678px;width:352px;height:237px;transform:rotate(-3deg)}
  .spot-music img{width:100%;height:auto}
  .song-caption{display:block;text-align:center;color:#202020;font-size:13px;line-height:1.25;margin-top:-2px;pointer-events:none}
  .scatter .spot-music:hover,.scatter .spot-music:focus-visible{transform:translateY(-7px) rotate(0deg) scale(1.055)}
  .scatter .spot-photos{left:1069px;top:625px;width:285px;height:305px;transform:rotate(-3deg)}
  .spot-photos img{width:100%;height:auto}
  .scatter .spot-photos:hover,.scatter .spot-photos:focus-visible{transform:translateY(-7px) rotate(1deg) scale(1.06)}
  .small-play{left:263px;top:784px;width:47px;height:43px;border-radius:5px;transform:rotate(-3deg);transition:transform .25s ease}
  .small-play:hover,.small-play:focus-visible{transform:rotate(-3deg) scale(1.08)}
}
@media(max-width:700px){
  .scatter .hotspot>img,.scatter .song-caption{display:none}
  .scatter .hotspot:hover,.scatter .hotspot:focus-visible{outline:none}
  .mobile-collage img{transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .32s ease}
  .scatter:has(.spot-coupons:hover) .mobile-collage img:nth-child(2),.scatter:has(.spot-coupons:focus-visible) .mobile-collage img:nth-child(2){transform:translateY(-5px) rotate(-5deg) scale(1.055)}
  .scatter:has(.spot-letter:hover) .mobile-collage img:nth-child(1),.scatter:has(.spot-letter:focus-visible) .mobile-collage img:nth-child(1){transform:translateY(-5px) rotate(3deg) scale(1.055)}
  .scatter:has(.spot-certificate:hover) .mobile-collage img:nth-child(3),.scatter:has(.spot-certificate:focus-visible) .mobile-collage img:nth-child(3){transform:translateY(-5px) rotate(8deg) scale(1.055)}
  .scatter:has(.spot-music:hover) .mobile-collage img:nth-child(4),.scatter:has(.spot-music:focus-visible) .mobile-collage img:nth-child(4){transform:translateY(-5px) rotate(-1deg) scale(1.055)}
  .scatter:has(.spot-photos:hover) .mobile-collage img:nth-child(5),.scatter:has(.spot-photos:focus-visible) .mobile-collage img:nth-child(5){transform:translateY(-5px) rotate(11deg) scale(1.055)}
  .small-play{transform:rotate(-5deg)}
}
@media(prefers-reduced-motion:reduce){.scatter .hotspot,.mobile-collage img,.small-play{transition:none!important}}
/* Animate the actual keepsakes from the envelope; never reveal a second set at their destinations. */
.scatter{transition:none}
.scatter.scattering .scatter-piece{opacity:0;animation:scatter-arrive 1.22s cubic-bezier(.2,.75,.23,1) var(--scatter-delay) both;will-change:transform,opacity}
@keyframes scatter-arrive{
  0%{opacity:0;transform:translate3d(var(--scatter-from-x),var(--scatter-from-y),0) scale(.16) var(--scatter-rest)}
  17%{opacity:1}
  100%{opacity:1;transform:var(--scatter-rest)}
}
.opened.dispatching{pointer-events:none;animation:envelope-depart .5s ease-in 1.02s forwards}
.opened.dispatching .open-final,.opened.dispatching .rising-stuff{animation:contents-depart .26s ease-out forwards}
.opened.dispatching .rising-stuff{transform:translate3d(0,0,0)}
.opened.dispatching .instruction{opacity:0;animation:none}
@keyframes contents-depart{from{opacity:1}to{opacity:0}}
@keyframes envelope-depart{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.scatter.scattering .scatter-piece,.opened.dispatching{animation:none}}
/* Three real coupons remain visible as a stack while the top one shuffles behind. */
.coupon-stack{position:absolute;left:50%;top:220px;width:377px;aspect-ratio:768/1182;transform:translateX(-50%);pointer-events:none}
.coupon-stack .coupon-sheet{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #0002);transform-origin:50% 55%;transition:transform .5s cubic-bezier(.2,.78,.24,1),opacity .25s ease}
.coupon-stack .coupon-back{z-index:1;transform:translate(-11px,-11px) rotate(-4deg)}
.coupon-stack .coupon-middle{z-index:2;transform:translate(11px,-6px) rotate(3deg)}
.coupon-stack .coupon-front{z-index:3;transform:translate(0,0) rotate(-1deg)}
.coupon-stack.shuffling .coupon-front{animation:coupon-flick .5s cubic-bezier(.45,0,.3,1) both}
.coupon-stack.shuffling .coupon-middle{transform:translate(0,0) rotate(-1deg)}
.coupon-stack.shuffling .coupon-back{transform:translate(11px,-6px) rotate(3deg)}
.coupon-stack.settling .coupon-back{animation:coupon-return .25s ease-out both}
.coupons .coupon-dots{left:50%;top:828px;width:377px;transform:translateX(-50%)}
@keyframes coupon-flick{0%{transform:translate(0,0) rotate(-1deg);opacity:1}65%{transform:translate(150px,-35px) rotate(14deg);opacity:1}100%{transform:translate(180px,-42px) rotate(17deg);opacity:0}}
@keyframes coupon-return{from{opacity:0;transform:translate(42px,-22px) rotate(8deg)}to{opacity:1;transform:translate(-11px,-11px) rotate(-4deg)}}
@media(max-width:700px){
  .coupon-stack{width:min(78vw,330px);top:20%}
  .coupons .coupon-dots{left:0;top:87%;width:100%;transform:none}
  @keyframes coupon-flick{0%{transform:translate(0,0) rotate(-1deg);opacity:1}65%{transform:translate(38%, -25px) rotate(12deg);opacity:1}100%{transform:translate(48%, -30px) rotate(14deg);opacity:0}}
}
@media(prefers-reduced-motion:reduce){.coupon-stack .coupon-sheet{transition:none!important;animation-duration:.01ms!important}}
/* The new QR sits over the one baked into each supplied coupon image. */
.coupon-stack .coupon-image{display:block;width:100%;height:100%;object-fit:contain}
.coupon-stack .claim-qr{position:absolute;left:35%;top:68.5%;width:30%;height:auto;aspect-ratio:1;object-fit:contain;background:white;image-rendering:pixelated}
.qr-zoom-hit{position:absolute;z-index:5;left:50%;top:617px;width:113px;height:113px;transform:translateX(-50%);border:0;background:transparent;cursor:zoom-in}
.qr-zoom-hit:focus-visible{outline:2px solid #555;outline-offset:4px}
.qr-preview[hidden]{display:none!important}
.qr-preview{position:absolute;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fffffff2}
.qr-preview img{display:block;width:min(360px,76%);height:auto;aspect-ratio:1;image-rendering:pixelated}
.qr-preview p{margin:0;font-size:16px;text-align:center}
.qr-preview button{position:absolute;right:32px;top:30px;border:0;background:transparent;font-size:34px;line-height:1;color:#555}
@media(max-width:700px){
  .qr-zoom-hit{top:calc(20% + min(82.2vw,348px));width:min(23.4vw,99px);height:min(23.4vw,99px)}
  .qr-preview img{width:min(300px,76vw)}
  .qr-preview button{right:20px;top:22px}
}
/* The front Polaroid moves behind the pile while the next one slides forward. */
.photo-stack.shuffling .photo-card.front{animation:photo-shuffle-out .54s cubic-bezier(.35,.08,.25,1) both}
.photo-stack.shuffling .photo-card.back-one{transform:translate(0,0) rotate(0deg)}
.photo-stack.shuffling .photo-card.back-two{transform:translate(-19px,10px) rotate(-2deg)}
.photo-stack.settling .photo-card.back-two{animation:photo-shuffle-return .26s ease-out both}
@keyframes photo-shuffle-out{0%{transform:translate(0,0) rotate(0deg);opacity:1}64%{transform:translate(140px,-24px) rotate(13deg);opacity:1}100%{transform:translate(170px,-31px) rotate(16deg);opacity:0}}
@keyframes photo-shuffle-return{from{transform:translate(48px,-15px) rotate(9deg);opacity:0}to{transform:translate(17px,8px) rotate(2deg);opacity:1}}
@media(max-width:700px){
  @keyframes photo-shuffle-out{0%{transform:translate(0,0) rotate(0deg);opacity:1}64%{transform:translate(34%,-18px) rotate(12deg);opacity:1}100%{transform:translate(42%,-23px) rotate(15deg);opacity:0}}
}
@media(prefers-reduced-motion:reduce){.photo-stack .photo-card{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* Celebrate each opening of the certificate without covering its controls. */
.certificate-confetti{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none}
.certificate-confetti i{position:absolute;top:-24px;width:10px;height:15px;border-radius:2px;opacity:0;transform-origin:center;animation:confetti-fall var(--duration) linear var(--delay) both}
.certificate-confetti i.round{width:9px;height:9px;border-radius:50%}
@keyframes confetti-fall{0%{transform:translate3d(0,-15px,0) rotate(0deg);opacity:0}8%{opacity:1}42%{transform:translate3d(var(--sway),450px,0) rotate(160deg);opacity:1}80%{opacity:1}100%{transform:translate3d(var(--dx),1200px,0) rotate(var(--spin));opacity:0}}
@media(prefers-reduced-motion:reduce){.certificate-confetti{display:none}}
/* Keep the small music control flush with the gray player artwork. */
.scatter .small-play{background:#808080;border-radius:0;box-shadow:none;transition:none}
@media(min-width:701px){.scatter .small-play:hover,.scatter .small-play:focus-visible{transform:rotate(-3deg)}}
@media(max-width:700px){.scatter .small-play:hover,.scatter .small-play:focus-visible{transform:rotate(-5deg)}}
/* The player and its play hit target share one transform and one gray surface. */
@media(min-width:701px){
  .scatter .spot-letter{top:255px}
  .music-item{position:absolute;z-index:3;left:110px;top:678px;width:352px;height:237px;transform:rotate(-3deg);transform-origin:center;transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .32s ease}
  .music-item:hover,.music-item:focus-within{transform:translateY(-7px) rotate(0deg) scale(1.055);filter:drop-shadow(0 12px 12px #0002)}
  .scatter .music-item .spot-music{inset:0;width:100%;height:100%;transform:none;filter:none}
  .scatter .music-item .spot-music:hover,.scatter .music-item .spot-music:focus-visible{transform:none;filter:none}
  .music-item .small-play{left:153px;top:106px;width:47px;height:43px;transform:none}
  .music-item .small-play:hover,.music-item .small-play:focus-visible{transform:none}
}
@media(max-width:700px){
  .mobile-collage img:nth-child(1){top:31%}
  .spot-letter{top:32%}
  .music-item{position:absolute;z-index:3;left:0;top:67%;width:50%;height:30%}
  .scatter .music-item .spot-music{inset:0;width:100%;height:100%;transform:none}
  .music-item .small-play{left:46%;top:47%;width:36px;height:34px;transform:rotate(-5deg)}
  .music-item .small-play:hover,.music-item .small-play:focus-visible{transform:rotate(-5deg)}
  .scatter:has(.music-item:hover) .mobile-collage img:nth-child(4),.scatter:has(.music-item:focus-within) .mobile-collage img:nth-child(4){transform:translateY(-5px) rotate(-1deg) scale(1.055)}
.music-item:hover .small-play,.music-item:focus-within .small-play{transform:translateY(-5px) rotate(-1deg)}
}
/* The song card is a real player: elapsed time, seek bar and transport follow the audio. */
.scatter .mobile-collage .music-collage-placeholder{display:none}
.music-item{container-type:inline-size}
.widget-card{position:absolute;inset:13% 6% 14%;display:flex;flex-direction:column;justify-content:space-between;padding:5% 6%;color:#fff;background:linear-gradient(145deg,#68676bfa,#46454aeF);border:1px solid #ffffff30;border-radius:22px;box-shadow:0 14px 32px #0004,inset 0 1px #ffffff36;backdrop-filter:blur(14px);transform:rotate(-2deg)}
.widget-heading{display:flex;align-items:center;gap:4%;min-height:38%}
.widget-cover{width:21%;aspect-ratio:1;flex:none;border-radius:11px;background-image:url('/assets/song widget.png');background-size:700% auto;background-position:13% 30%;background-repeat:no-repeat;box-shadow:0 2px 10px #0005}
.widget-track{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;white-space:nowrap;overflow:hidden}
.widget-track strong{font-size:7cqw;font-weight:650;letter-spacing:-.025em;text-overflow:ellipsis;overflow:hidden}
.widget-track span{font-size:4.1cqw;color:#ffffffa8;text-overflow:ellipsis;overflow:hidden}
.widget-wave{display:flex;align-items:center;justify-content:center;gap:2px;width:10%;height:20px;opacity:.7}
.widget-wave i{width:2px;height:40%;border-radius:2px;background:#fff}.widget-wave i:nth-child(2){height:75%}.widget-wave i:nth-child(3){height:100%}.widget-wave i:nth-child(4){height:55%}
.widget-card.is-playing .widget-wave i{animation:widget-wave 1s ease-in-out infinite alternate}.widget-card.is-playing .widget-wave i:nth-child(2){animation-delay:-.5s}.widget-card.is-playing .widget-wave i:nth-child(3){animation-delay:-.25s}.widget-card.is-playing .widget-wave i:nth-child(4){animation-delay:-.7s}
@keyframes widget-wave{to{height:22%}}
.widget-timeline{display:grid;grid-template-columns:1fr 1fr;align-items:center;font-size:3.9cqw;color:#ffffffa8;font-variant-numeric:tabular-nums;white-space:nowrap}
.widget-timeline span:last-child{justify-self:end}
.widget-timeline input{grid-column:1/-1;grid-row:1;width:100%;height:22px;margin:0;appearance:none;background:transparent;cursor:pointer;touch-action:none}
.widget-timeline input::-webkit-slider-runnable-track{height:4px;border-radius:8px;background:linear-gradient(to right,#fff var(--progress,0%),#ffffff65 var(--progress,0%))}
.widget-timeline input::-moz-range-track{height:4px;border-radius:8px;background:linear-gradient(to right,#fff var(--progress,0%),#ffffff65 var(--progress,0%))}
.widget-timeline input::-webkit-slider-thumb{appearance:none;width:10px;height:10px;margin-top:-3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0004}
.widget-timeline input::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0004}
.widget-controls{display:flex;justify-content:center;align-items:center;gap:12%;height:31%}
.widget-controls button,.music-item .widget-play{position:relative;left:auto;top:auto;display:grid;place-items:center;width:17%;height:100%;min-height:28px;padding:0;border:0;background:transparent;color:white;line-height:1;transform:none!important}
.widget-controls button:hover{opacity:.72}
.widget-controls button:focus-visible,.widget-timeline input:focus-visible{outline:2px solid white;outline-offset:2px;border-radius:4px}
.widget-controls button svg{display:block;width:85%;height:85%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.widget-controls button svg text{fill:currentColor;stroke:none;font:700 10px Arial,sans-serif;text-anchor:middle}
.widget-controls .widget-play,.music-item .widget-controls .widget-play{width:18%;height:92%;border-radius:0;background:transparent;color:#fff;font-size:8cqw;box-shadow:none}
.widget-play span{transform:translateX(1px)}.widget-play.playing span{transform:none}
.widget-caption{position:absolute;top:89%;left:0;width:100%;margin:0;color:#262626;text-align:center;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Arial,sans-serif;font-size:16px;line-height:1.25;font-weight:400}
@media(max-width:700px){.music-item{left:1%;top:68%;width:51%;height:24%;transform:rotate(-5deg)}.widget-card{inset:11% 2% 11%;padding:5% 6%;border-radius:17px}.widget-controls button,.music-item .widget-play{min-height:26px}}
@media(max-width:700px){.widget-caption{top:91%;font-size:13px}}
@media(prefers-reduced-motion:reduce){.widget-card.is-playing .widget-wave i{animation:none}}
/* A tap unlocks browser audio before the car begins its route. */
.intro.waiting .car,.intro.waiting .delivery-envelope{animation:none;opacity:0}
.intro-start{position:absolute;z-index:6;inset:0;background:#fff;text-align:center;transition:opacity .35s ease}
.intro-design{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.intro-title{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.intro-start button{position:absolute;left:39.6%;top:49.8%;width:22.4%;height:9.2%;padding:0;border:0;border-radius:36px;background:transparent;color:transparent;font-size:1px}
.intro-start button:focus-visible{outline:3px solid #6951a3;outline-offset:4px}
.intro-start.leaving{opacity:0;pointer-events:none}
@media(max-width:700px){
  .intro-start{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:24px}
  .intro-design{display:none}
  .intro-title{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font-family:"Comic Sans MS","Bradley Hand",cursive;font-size:clamp(27px,8vw,36px);line-height:1.3;color:#111}
  .intro-start button{position:static;width:min(78vw,330px);height:75px;border-radius:26px;background:#ab8df5;box-shadow:inset 0 6px 9px #6944bd55;color:#fff;font-family:"Comic Sans MS","Bradley Hand",cursive;font-size:29px}
}