.hero-stage{height:22rem;position:relative}@media (min-width:40rem){.hero-stage{height:30rem}}@media (min-width:64rem){.hero-stage{height:34rem}}.hero-grain{pointer-events:none;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:-4% -8%;-webkit-mask-image:radial-gradient(at 45% 45%,#000 30%,#0000 72%);mask-image:radial-gradient(at 45% 45%,#000 30%,#0000 72%)}.hero-glow{pointer-events:none;opacity:0;background:radial-gradient(circle,#fffffff2,#0000 62%);width:70%;height:90%;position:absolute;top:-6%;left:-6%}.hero-phone{aspect-ratio:1/2;background:var(--color-camera-ground);z-index:1;border-radius:1.75rem;width:40%;max-width:13.5rem;padding:.5rem;position:absolute;top:3%;left:6%;rotate:-4deg;box-shadow:0 30px 80px #00000047}.hero-screen{background:var(--color-soft-white);border-radius:1.3rem;height:100%;position:relative;overflow:hidden}.hero-view{text-align:center;opacity:0;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:1rem .75rem;display:flex;position:absolute;inset:0}.hero-dim{filter:saturate(.2);color:#242320b3}.hero-camera{background:var(--color-camera-ground);color:var(--color-soft-white);opacity:1;justify-content:space-between;padding:.75rem .6rem}.hero-viewfinder{border-radius:1rem;flex:1;width:100%;position:relative;overflow:hidden}.hero-counter{display:grid}.hero-counter>span{grid-area:1/1}.hero-before{opacity:0}.hero-shutter{background:var(--color-shutter);border-radius:9999px;flex:none;width:2.25rem;height:2.25rem;box-shadow:0 0 0 5px #b7432f4d}.hero-flash{opacity:0;pointer-events:none;background:#fff;position:absolute;inset:0}.hero-qr{background:repeating-conic-gradient(var(--color-charcoal) 0 25%, #fff 0 50%) 0 0 / .6rem .6rem;border:4px solid #fff;outline:1px solid #24232026;width:3.5rem;height:3.5rem}.hero-print{aspect-ratio:5/6;width:30%;max-width:11rem;rotate:var(--r);z-index:2;animation:hero-float var(--float) ease-in-out infinite;background:#fff;padding:.4rem .4rem 1.4rem;position:absolute;box-shadow:0 16px 36px #2423202e}.hero-print>div{height:100%}.hero-p1{--r:7deg;--fx:-115%;--fy:110%;--float:7s;top:1%;left:48%}.hero-p2{--r:-6deg;--fx:-170%;--fy:15%;--float:8s;top:33%;left:64%}.hero-p3{--r:11deg;--fx:-75%;--fy:-60%;--float:9s;top:52%;left:36%}@media (min-width:64rem){.hero-p2{left:72%}}.hero-step{opacity:.55}.hero-stepOn{background:var(--color-charcoal);border-color:var(--color-charcoal);color:var(--color-soft-white)}.hero-word{vertical-align:top;margin-bottom:-.14em;padding-bottom:.14em;display:inline-block;overflow:hidden}.hero-word>span{display:inline-block}:root[data-hero=play] .hero-word>span{animation:hero-rise 1s var(--ease-expo) calc(var(--i) * 60ms) both}:root[data-hero=play] .hero-fade{animation:hero-fadeUp .8s var(--ease-expo) var(--d,0s) both}:root[data-hero=play] .hero-phone{animation:hero-phoneIn 1.2s var(--ease-expo) .3s both}:root[data-hero=play] .hero-invite{animation:1.2s 1.2s both hero-screen}:root[data-hero=play] .hero-rsvp{animation:1.2s 2.4s both hero-screen}:root[data-hero=play] .hero-checkin{animation:1.2s 3.6s both hero-screen}:root[data-hero=play] .hero-camera{animation:hero-appear .8s var(--ease-expo) 4.8s both}:root[data-hero=play] .hero-viewfinder{animation:hero-focus 1s var(--ease-expo) 4.9s both}:root[data-hero=play] .hero-step:first-child{animation:1.2s 1.2s both hero-stepSoon}:root[data-hero=play] .hero-step:nth-child(2){animation:1.2s 2.4s both hero-stepSoon}:root[data-hero=play] .hero-step:nth-child(3){animation:1.2s 3.6s both hero-stepSoon}:root[data-hero=play] .hero-stepOn{animation:hero-stepOn .6s var(--ease-expo) 4.8s both}:root[data-hero=play] .hero-shutter{animation:.3s 5.9s both hero-press}:root[data-hero=play] .hero-flash{animation:.5s ease-out 6.05s both hero-flash}:root[data-hero=play] .hero-glow{animation:.9s ease-out 6.05s both hero-flash}:root[data-hero=play] .hero-before{animation:6.3s step-end both hero-hideAt}:root[data-hero=play] .hero-after{animation:6.3s step-end both hero-showAt}:root[data-hero=play] .hero-p1{animation:hero-eject 1.1s var(--ease-expo) 6.3s both, hero-float var(--float) ease-in-out 9.5s infinite}:root[data-hero=play] .hero-p2{animation:hero-eject 1.1s var(--ease-expo) 6.7s both, hero-float var(--float) ease-in-out 9.9s infinite}:root[data-hero=play] .hero-p3{animation:hero-eject 1.1s var(--ease-expo) 7.1s both, hero-float var(--float) ease-in-out 10.3s infinite}:root[data-hero=play] .hero-p1>div{animation:2.6s ease-out 6.3s both hero-develop}:root[data-hero=play] .hero-p2>div{animation:2.6s ease-out 6.7s both hero-develop}:root[data-hero=play] .hero-p3>div{animation:2.6s ease-out 7.1s both hero-develop}:root[data-hero=play] .hero-replay{animation:.6s 9.5s both hero-fadeUp}@keyframes hero-rise{0%{transform:translateY(110%)}to{transform:none}}@keyframes hero-fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes hero-phoneIn{0%{opacity:0;translate:0 40px;rotate:-10deg}to{opacity:1;translate:0;rotate:-4deg}}@keyframes hero-screen{0%{opacity:0;transform:translateY(10px)}22%,78%{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}@keyframes hero-appear{0%{opacity:0}to{opacity:1}}@keyframes hero-focus{0%{filter:blur(6px);transform:scale(1.06)}to{filter:none;transform:none}}@keyframes hero-stepSoon{0%{opacity:.3}25%,75%{opacity:.9}to{opacity:.55}}@keyframes hero-stepOn{0%{opacity:.3;color:inherit;background:0 0;border-color:#b8ada099}to{opacity:1}}@keyframes hero-press{50%{transform:scale(.82)}}@keyframes hero-flash{0%{opacity:0}12%{opacity:.95}to{opacity:0}}@keyframes hero-hideAt{0%{opacity:1}to{opacity:0}}@keyframes hero-showAt{0%{opacity:0}to{opacity:1}}@keyframes hero-eject{0%{opacity:0;transform:translate(var(--fx), var(--fy)) scale(.4);rotate:0deg}to{opacity:1;transform:none;rotate:var(--r)}}@keyframes hero-develop{0%{filter:brightness(2.6)contrast(.35)sepia(.7)}to{filter:none}}@keyframes hero-float{0%,to{translate:0}50%{translate:0 -3px}}@media (prefers-reduced-motion:reduce){.hero-print{animation:none}.hero-replay{display:none}}