@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--gold:#d5bb80;--gold-dim:#8e784e;--ink:#090909;--white:#eee9df;--ease:cubic-bezier(.18,.8,.22,1)}*{box-sizing:border-box}html,body{margin:0;background:var(--ink);color:var(--white);font-family:Manrope,Arial,sans-serif}body{min-width:280px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:7px}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#experience{min-height:100svh;min-height:100dvh;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(ellipse at 70% 44%,#30271925,transparent 50%),#090909}.topbar{width:min(1100px,100%);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:34px 42px;z-index:5}.brand{font-size:13px;font-weight:800;letter-spacing:1.5px}.brand span{color:var(--gold)}.stage{flex:1;position:relative;display:grid;place-items:center;width:100%;padding:28px 34px 35px;min-height:520px}.intro{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:75px;width:min(900px,100%);animation:arrive .9s var(--ease) both}.eyebrow{font-size:9px;letter-spacing:3px;color:var(--gold);display:flex;align-items:center;gap:11px;margin:0 0 26px;font-weight:600}.eyebrow span{width:23px;height:1px;background:var(--gold-dim)}h1{font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-size:clamp(65px,6.5vw,92px);letter-spacing:-1px;line-height:.98;margin:0;font-weight:600}h1 em{color:var(--gold);font-style:normal}.intro-note{font-size:12px;color:#857e70;margin:28px 0 0}.hold-area{text-align:center}.hold-button{position:relative;background:radial-gradient(circle,#a7874420,transparent 66%);width:230px;height:230px;padding:0;display:grid;place-items:center;margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border-radius:50%;transition:filter .3s}.progress-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:.7;transform:rotate(-90deg)}.ring-track{stroke:#c6a7692d}.ring-fill{stroke:var(--gold);stroke-width:1.7;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round;filter:drop-shadow(0 0 4px #cfa85db0)}.fingerprint{width:91px;height:114px;color:#c8a862;filter:drop-shadow(0 0 12px #caa05f28);opacity:.8;transition:opacity .3s,transform .3s}.fingerprint svg{width:100%;height:100%}.hold-button:before,.hold-button:after{content:'';position:absolute;border-radius:50%;inset:18px;border:1px solid #c6a7690a}.hold-button:after{inset:-13px;border:1px dashed #c6a76912}.hold-glint{position:absolute;top:27px;width:4px;height:4px;left:calc(50% - 2px);background:var(--gold);border-radius:50%;box-shadow:0 0 10px #e0bc7a}.gesture-hint{font-size:14px;margin:29px 0 7px;font-weight:500}.gesture-detail{font-size:10px;color:#7f786c;letter-spacing:.6px;margin:0}[data-state=holding] .fingerprint{opacity:1;transform:scale(1.035)}[data-state=holding] .hold-button{filter:drop-shadow(0 0 26px #ab7c2925)}.footer{width:min(1100px,100%);margin:auto auto 0;padding:26px 42px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#605b52;font-size:8px;letter-spacing:1.8px;z-index:3}.steps{display:flex;gap:7px}.steps i{width:22px;height:1px;background:#363129;transition:background .5s}.steps .active{background:var(--gold)}.joke{text-align:center;animation:arrive .6s var(--ease) both}.joke h2{font:600 clamp(58px,7vw,82px)/1 'Oswald',Impact,sans-serif;margin:30px 0 20px;letter-spacing:-.5px}.joke h2 span{color:var(--gold)}.joke p{font-size:14px;color:#b7ab94;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .6s var(--ease)}.joke.revealed p{opacity:1;transform:none}.little-ring{display:block;border:1px solid var(--gold-dim);width:32px;height:32px;border-radius:50%;margin:auto;position:relative}.little-ring:after{content:'';position:absolute;inset:7px;border:1px solid #d5bb8040;border-radius:50%}.joke.depart{animation:depart .35s ease both}.wave{position:absolute;z-index:2;pointer-events:none;inset:0;background:radial-gradient(circle at 50% 50%,transparent 20%,#d1b37420 35%,transparent 60%);opacity:0}.wave.active{animation:wave .8s ease-out both}.mail-stage{width:100%;display:flex;flex-direction:column;align-items:center;perspective:1200px;animation:mail-arrive .75s var(--ease) both}.invitation{width:min(374px,100%);height:474px;position:relative;isolation:isolate;transform:rotate(-2deg) scale(.97);transition:transform .95s var(--ease);--pull:0;--cover-x:0px;--cover-tilt:0deg;--seal-x:0px}.card{position:absolute;inset:0;padding:30px 29px 28px;background:radial-gradient(ellipse at 100% 0%,#4b3e252e,transparent 65%),linear-gradient(135deg,#1b1915,#10100e 65%);border:1px solid #bfa16d85;box-shadow:0 28px 60px #0009,0 0 1px #cbb47b;overflow:hidden;display:flex;flex-direction:column}.card-border{position:absolute;inset:7px;border:1px solid #bfa16d1f;pointer-events:none}.card-top{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.6px;color:#c3ae81;font-weight:700}.round-number{font-family:Georgia,serif;font-size:28px;font-weight:400;line-height:1}.card-kicker{font-size:8px;letter-spacing:2.2px;color:#837967;margin:38px 0 13px}.card h2{font:600 44px/1.05 'Oswald',Impact,sans-serif;letter-spacing:.5px;margin:0}.card h2 em{font-style:normal;color:var(--gold);font-size:66px;letter-spacing:1px}.fine-divider{display:flex;align-items:center;gap:12px;margin:24px 0 21px}.fine-divider span{height:1px;background:#a88d553a;flex:1}.fine-divider i{width:4px;height:4px;border:1px solid var(--gold-dim);transform:rotate(45deg)}.card-copy{font-size:13px;line-height:1.9;margin:0;color:#e7dfce}.card-copy span{color:#958b79}.card-cta{margin-top:auto}.card-cta p{font-size:11px;text-align:center;color:#c8bba2;margin:18px 0 12px}.direct-button{background:linear-gradient(110deg,#b69a5c,#e1c790 45%,#c4a86c);box-shadow:inset 0 1px 0 #f5e9c799;display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 19px;color:#201c13;font-size:10px;font-weight:800;letter-spacing:1px;transition:filter .2s,transform .2s}.direct-button:hover{filter:brightness(1.08)}.direct-button:active{transform:scale(.985)}.direct-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}.card-shimmer{position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#f5dfad0d 48%,#f5dfad1b 50%,transparent 58%);transform:translateX(-110%);opacity:0}.cover{position:absolute;inset:0;z-index:2;padding:32px 28px;background:linear-gradient(140deg,#25231f,#171613 48%,#10100e);box-shadow:5px 0 8px #0008,0 0 0 1px #a88d552b;transform:translateX(var(--cover-x)) rotate(var(--cover-tilt));transform-origin:50% 90%;will-change:transform;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden}.cover:before{content:'';position:absolute;inset:8px;border:1px solid #bca77c1c;pointer-events:none}.cover-edge{position:absolute;right:0;top:0;bottom:0;width:3px;background:linear-gradient(#d7b97666,#e3c589,#7e6332);box-shadow:-2px 0 9px #d1b26d12}.cover-top{display:flex;justify-content:space-between;gap:9px;color:#9f8a60;font-size:7px;letter-spacing:1.1px}.cover-top span:first-child{font-weight:800}.cover-round{position:relative;z-index:1;font:600 66px/.99 'Oswald',Impact,sans-serif;letter-spacing:1.2px;color:#cfb880;margin:72px 0 0;text-shadow:0 1px 0 #fff3,0 -1px 0 #000}.cover-script{display:block;position:relative;z-index:1;font:italic 22px Georgia,serif;color:#80735b;margin-top:16px}.envelope-fold{position:absolute;inset:0;pointer-events:none;background:linear-gradient(152deg,transparent 57.8%,#8c7a4f20 58%,#0005 58.2%,transparent 58.8%)}.drag-track{position:absolute;left:27px;right:27px;bottom:38px;height:64px;display:flex;align-items:center}.track-line{position:absolute;left:28px;right:12px;height:1px;background:linear-gradient(to right,#b89d6860,#b89d681a)}.drag-label{position:relative;font-size:8px;letter-spacing:1.6px;margin-left:78px;color:#ae9b72}.track-end{position:absolute;right:0;color:#8c7750;font-size:17px}.seal{position:absolute;left:0;top:0;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 32% 22%,#e2ca98,#b59858 60%,#93703e);color:#332713;box-shadow:0 6px 12px #0005,inset 0 0 0 1px #f1dca37d,inset 0 -3px 7px #704e3b40;display:grid;place-items:center;touch-action:none;transform:translateX(var(--seal-x));will-change:transform}.seal span{font:italic 25px Georgia,serif;letter-spacing:-3px;padding-right:3px;text-shadow:0 1px 0 #f6dca875}.seal svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#71552f;stroke-width:.65}.text-button{margin:25px 0 0;padding:10px 14px;color:#887b64;background:none;font-size:8px;letter-spacing:1.8px;min-height:40px}.text-button:hover{color:var(--gold)}.invitation.settling .cover,.invitation.settling .seal{transition:transform .5s var(--ease)}.invitation.opening,.invitation.opened{transform:rotate(0) scale(1)}.invitation.opening .cover,.invitation.opened .cover{transform:translateX(135%) rotate(5deg);transition:transform .9s cubic-bezier(.2,.75,.16,1),opacity .9s;opacity:0;pointer-events:none}.invitation.opened .card-shimmer{animation:shimmer 1.2s .1s ease-out both}.surface-grain{position:absolute;z-index:10;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.55' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}.noscript{padding:30px;text-align:center}.noscript a{color:var(--gold)}@keyframes arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes depart{to{opacity:0;transform:translateY(-10px)}}@keyframes mail-arrive{from{opacity:0;transform:translateY(28px) rotateX(5deg)}to{opacity:1;transform:none}}@keyframes wave{0%{opacity:0;transform:scale(.35)}30%{opacity:1}100%{opacity:0;transform:scale(1.7)}}@keyframes shimmer{0%{opacity:0;transform:translateX(-70%)}20%{opacity:1}100%{opacity:0;transform:translateX(70%)}}
@media(max-width:650px){.topbar{padding:calc(20px + env(safe-area-inset-top)) 26px 10px}.brand{font-size:11px;letter-spacing:1.1px}.stage{min-height:0;padding:20px 28px 10px}.intro{display:flex;flex-direction:column;gap:30px;text-align:center;width:100%;padding:20px 0}.eyebrow{justify-content:center;font-size:7px;letter-spacing:2.2px;margin-bottom:20px}.eyebrow span{width:14px}h1{font-size:clamp(50px,14.5vw,68px);line-height:.99}.intro-note{display:none}.hold-button{width:190px;height:190px}.fingerprint{width:74px;height:94px}.gesture-hint{margin-top:22px;font-size:13px}.gesture-detail{font-size:9px}.footer{padding:20px 27px calc(23px + env(safe-area-inset-bottom));font-size:6px;letter-spacing:1.5px}.invitation{width:100%;max-width:360px;height:460px}.card{padding:28px 25px}.card h2{font-size:42px}.card h2 em{font-size:62px}.cover-round{font-size:61px;margin-top:73px}.cover{padding:30px 25px}.cover-top{font-size:6.5px}.text-button{margin-top:18px}.joke h2{font-size:67px}.joke p{font-size:12px}.mail-stage{padding-top:10px}}
@media(max-height:710px) and (max-width:650px){.topbar{padding-top:calc(12px + env(safe-area-inset-top))}.intro{gap:17px;padding:8px 0}.eyebrow{margin-bottom:15px}h1{font-size:51px}.hold-button{width:158px;height:158px}.fingerprint{width:64px;height:82px}.gesture-hint{margin-top:15px}.footer{padding-top:12px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}.stage{padding-top:10px;padding-bottom:0}.invitation{height:396px;max-width:330px}.card{padding:23px}.card-kicker{margin:22px 0 10px}.card h2{font-size:36px}.card h2 em{font-size:53px}.fine-divider{margin:15px 0 13px}.card-copy{font-size:12px}.card-cta p{margin:10px 0}.direct-button{min-height:47px;font-size:9px}.cover-round{margin-top:57px;font-size:54px}.drag-track{bottom:28px}.text-button{margin-top:9px;font-size:7px}.cover-script{font-size:20px}.joke h2{font-size:59px}}
@media(max-height:570px){.stage{padding-left:22px;padding-right:22px}.topbar{padding-top:10px;padding-bottom:4px}.intro{gap:10px}.eyebrow{margin-bottom:10px}h1{font-size:43px}.hold-button{width:140px;height:140px}.gesture-hint{margin-top:12px}.invitation{height:359px}.card{padding:20px}.card-kicker{margin-top:17px}.card h2{font-size:32px}.card h2 em{font-size:45px}.fine-divider{margin:13px 0 10px}.card-copy{font-size:11px}.card-top{font-size:7px}.round-number{font-size:23px}.card-cta p{font-size:10px;margin:9px 0}.direct-button{min-height:44px;padding:0 13px}.cover-round{margin-top:41px;font-size:51px}.drag-track{bottom:25px;left:23px;right:23px}.drag-label{font-size:7px;letter-spacing:1px}.footer{padding-bottom:12px}.mail-stage{padding-top:3px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.wave,.card-shimmer{display:none}.invitation{transform:none}.hold-button:after{border-style:solid}}

/* Keep text inside the mobile grid, including during font loading. */
.intro,.intro-copy{min-width:0}.intro{max-width:100%}@media(max-width:650px){h1{font-size:clamp(40px,12vw,60px)}}

/* Gift invitation: enlarged typography and a ribbon-controlled wrapping surface. */
.brand{font-size:17px;letter-spacing:1.2px}
.eyebrow{font-size:14px;letter-spacing:2.2px}
h1{font-size:clamp(86px,7.5vw,106px)}
.intro{gap:48px;width:min(1040px,100%);grid-template-columns:1.35fr 1fr}
.intro-note{font-size:18px}
.hold-button{width:260px;height:260px}
.fingerprint{width:104px;height:132px}
.gesture-hint{font-size:23px;margin-top:26px}
.gesture-detail{font-size:16px;letter-spacing:.3px}
.footer{font-size:12px;letter-spacing:1px}
.joke h2{font:600 clamp(48px,6vw,76px)/1.17 'Oswald',Impact,sans-serif;letter-spacing:-.7px;margin:28px 0}
.joke h2 em{font-style:normal;color:var(--gold)}
.card h2{font-size:40px;line-height:1.18;margin-top:44px}
.card h2 em{font-size:43px;letter-spacing:-.6px}
.card-copy{font-size:16px;line-height:1.8}
.card-cta p{font-size:14px}
.direct-button{font-size:12px;letter-spacing:.6px}
.card-top{font-size:10px;letter-spacing:1px}
.invitation{--ribbon-pull:0;--ribbon-x:0px;transform:rotate(-2deg) scale(.97)}
.gift-cover{padding:0;background:none;box-shadow:none;transform:none;overflow:visible;transform-style:preserve-3d;perspective:1100px;will-change:auto}
.gift-cover:before{display:none}
.wrap-panel{position:absolute;top:-1px;bottom:-1px;width:50.3%;background:linear-gradient(115deg,#27251f,#12120f 75%);border:1px solid #71644948;box-shadow:inset 0 0 40px #0003;backface-visibility:hidden;will-change:transform,opacity}
.wrap-left{left:-1px;transform-origin:left center;z-index:1;border-right:1px solid #b8a27136}
.wrap-right{right:-1px;transform-origin:right center;background:linear-gradient(100deg,#1b1a16,#302c2466),#171613}
.wrap-panel span{position:absolute;inset:0;background:linear-gradient(34deg,transparent 33%,#86724d18 33.2%,#0003 33.6%,transparent 34%),linear-gradient(146deg,transparent 74%,#9a876621 74.2%,#0004 74.5%,transparent 75%)}
.ribbon-band{position:absolute;z-index:2;pointer-events:none;box-shadow:0 4px 14px #0005,inset 0 0 0 1px #ebd6a53d}
.ribbon-v{top:0;bottom:0;left:calc(50% - 15px);width:30px;background:linear-gradient(90deg,#80622f,#d6b975 24%,#dfc58b 45%,#aa894d 88%,#dfc38b)}
.ribbon-h{left:0;right:0;top:calc(47% - 14px);height:28px;background:linear-gradient(#826632,#dfc58b 29%,#b99a5e 72%,#dfc58b)}
.bow-track{position:absolute;z-index:3;left:5%;top:30%;width:90%;aspect-ratio:3/2}
.gift-bow{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 9px 8px #0008);transform:translateX(calc(var(--ribbon-x)*.15)) scaleX(calc(1 + var(--ribbon-pull)*.13));transform-origin:48% 42%;will-change:transform}
.ribbon-end{position:absolute;right:4%;bottom:4%;width:30%;height:38%;padding:0;background:none;border-radius:12px;touch-action:none;transform:translateX(calc(var(--ribbon-x)*.55));cursor:grab;user-select:none}
.ribbon-end:active{cursor:grabbing}
.pull-mark{position:absolute;right:15%;bottom:18%;height:13px;width:13px;border:1px solid #ffefd0;border-radius:50%;box-shadow:0 0 0 6px #f3d99c20,0 0 22px #e9c47e65;animation:pull-cue 2.5s ease-in-out infinite}
.gift-hint{font-size:17px;color:var(--gold);margin:30px 0 0;text-align:center}
.text-button{font-size:11px;letter-spacing:1.1px;margin-top:7px;min-height:44px}
.invitation.settling .gift-bow,.invitation.settling .ribbon-end{transition:transform .45s var(--ease)}
.invitation.opening .gift-cover,.invitation.opened .gift-cover{transform:none;opacity:1;transition:none}
.invitation.opening .gift-bow{transform:translateX(70%) rotate(14deg) scaleX(1.2) scaleY(.55);opacity:0;transition:transform .55s var(--ease),opacity .38s .14s}
.invitation.opening .ribbon-end{opacity:0;transition:opacity .15s}
.invitation.opening .ribbon-h{transform:translateX(115%) scaleY(.65);opacity:0;transition:transform .6s .1s var(--ease),opacity .4s .2s}
.invitation.opening .ribbon-v{transform:translateY(90%) rotate(10deg);opacity:0;transition:transform .65s .1s var(--ease),opacity .4s .25s}
.invitation.opening .wrap-left{transform:translateX(-70%) rotateY(-95deg) rotate(-5deg);opacity:0;transition:transform .85s .28s var(--ease),opacity .6s .4s}
.invitation.opening .wrap-right{transform:translateX(70%) rotateY(95deg) rotate(5deg);opacity:0;transition:transform .85s .32s var(--ease),opacity .6s .45s}
@keyframes pull-cue{0%,100%{opacity:.55;transform:translateX(0)}50%{opacity:1;transform:translateX(5px)}}
@media(max-width:650px){
 .topbar{padding:calc(18px + env(safe-area-inset-top)) 22px 10px}.brand{font-size:16px;letter-spacing:.6px}
 .stage{padding-left:22px;padding-right:22px}
 .intro{gap:24px;padding:12px 0}.eyebrow{font-size:12px;letter-spacing:1.6px;margin-bottom:22px}.eyebrow span{width:18px}
 h1{font-size:clamp(47px,15.5vw,73px);line-height:1.03}
 .hold-button{width:215px;height:215px}.fingerprint{width:89px;height:113px}
 .gesture-hint{font-size:22px;margin-top:20px}.gesture-detail{font-size:15px}
 .footer{font-size:10px;letter-spacing:.5px;padding-left:22px;padding-right:22px}.steps i{width:15px}
 .joke h2{font-size:clamp(43px,12vw,65px);line-height:1.22}
 .invitation{height:470px}
 .card{padding:27px 24px}.card h2{font-size:39px;margin-top:48px}.card h2 em{font-size:42px}
 .gift-hint{font-size:17px;margin-top:26px}.text-button{font-size:10px;margin-top:5px}
}
@media(max-height:710px) and (max-width:650px){
 .intro{gap:14px;padding:5px 0}.eyebrow{margin-bottom:14px}
 .hold-button{width:178px;height:178px}.fingerprint{width:75px;height:94px}
 .gesture-hint{margin-top:12px;font-size:21px}.gesture-detail{font-size:14px}
 .invitation{height:386px}.card{padding:22px}.card h2{font-size:34px;margin-top:28px}.card h2 em{font-size:37px}
 .card-copy{font-size:14px}.card-cta p{font-size:13px}.direct-button{font-size:11px}
 .gift-hint{margin-top:19px;font-size:16px}.text-button{font-size:10px}
}
@media(max-width:360px){
 .brand{font-size:14px}.eyebrow{font-size:11px;letter-spacing:1.3px}
 h1{font-size:47px}.footer{font-size:9px;letter-spacing:.3px;gap:8px}
 .card h2{font-size:32px}.card h2 em{font-size:34px;letter-spacing:-.6px}.card-top{font-size:8px}
}
@media(max-height:580px) and (max-width:650px){
 .topbar{padding-top:10px;padding-bottom:2px}.intro{gap:10px}.eyebrow{margin-bottom:10px}
 .hold-button{width:142px;height:142px}.fingerprint{width:62px;height:80px}
 .gesture-hint{font-size:19px;margin-top:9px}.gesture-detail{font-size:13px}
 .invitation{height:348px}.card{padding:20px}.card h2{margin-top:23px}.card h2 em{font-size:34px}
 .card-copy{font-size:13px}.fine-divider{margin:17px 0 13px}
 .gift-hint{margin-top:16px;font-size:15px}.text-button{margin-top:0;font-size:9px}
 .footer{padding-top:8px;padding-bottom:10px}
}
@media(prefers-reduced-motion:reduce){.pull-mark{animation:none}.gift-bow,.wrap-panel{will-change:auto}}

/* A quiet first screen: a top label and one central interaction. */
#intro.intro{position:absolute;inset:0;display:block;width:100%;max-width:none;padding:0;animation:arrive .75s var(--ease) both}
#intro .invitation-label{position:absolute;top:clamp(30px,7vh,68px);left:20px;right:20px;justify-content:center;font:600 16px/1.5 Manrope,Arial,sans-serif;letter-spacing:2px;margin:0;text-align:center}
#intro .hold-area{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);width:100%}
#intro .hold-button{width:260px;height:260px}
#intro .fingerprint{width:110px;height:138px}
#intro .gesture-hint{font-size:24px;margin-top:28px}
#intro .gesture-detail{font-size:16px}
#experience:has(#intro:not([hidden])) .footer{visibility:hidden}
.ribbon-canvas{display:none;position:absolute;left:-50%;top:-30%;width:200%;height:230%;pointer-events:none;filter:drop-shadow(0 8px 7px #0006)}
.mesh-ready .ribbon-canvas{display:block}
.mesh-ready .gift-bow{visibility:hidden}
.ribbon-end{transform:translate(calc(var(--ribbon-x)*.9),calc(var(--ribbon-x)*-.17))}
.invitation.opening .mesh-ready .ribbon-canvas{opacity:1}
.invitation.opening .ribbon-h{transform:none;opacity:1;transition:none;animation:unthread-horizontal 1.1s .48s cubic-bezier(.32,0,.3,1) both}
.invitation.opening .ribbon-v{transform:none;opacity:1;transition:none;animation:unthread-vertical 1.2s .5s cubic-bezier(.32,0,.3,1) both}
.invitation.opening .wrap-left{transform:translateX(-35%) rotateY(-105deg) rotate(-3deg);opacity:0;transition:transform 1s .72s cubic-bezier(.2,.55,.22,1),opacity .6s 1s}
.invitation.opening .wrap-right{transform:translateX(35%) rotateY(105deg) rotate(3deg);opacity:0;transition:transform 1s .8s cubic-bezier(.2,.55,.22,1),opacity .6s 1.05s}
.invitation.opening .ribbon-end{opacity:0;transition:opacity .2s}
.invitation.opening .gift-bow{animation:bow-fallback 1.05s ease-in-out both;transition:none}
@keyframes unthread-horizontal{0%{transform:translateX(0) rotate(0);opacity:1}35%{transform:translateX(16%) rotate(-3deg) scaleY(.85);opacity:1}75%{transform:translateX(80%) rotate(14deg) scaleY(.6);opacity:.8}100%{transform:translateX(130%) translateY(65px) rotate(28deg) scaleY(.4);opacity:0}}
@keyframes unthread-vertical{0%{transform:translateY(0);opacity:1}30%{transform:translateY(7%) rotate(-3deg);opacity:1}70%{transform:translateY(42%) rotate(7deg) scaleX(.65);opacity:.8}100%{transform:translateY(110%) rotate(18deg) scaleX(.4);opacity:0}}
@keyframes bow-fallback{0%{transform:scale(1);opacity:1}40%{transform:translateX(8%) scale(.7,.8) rotate(-4deg);opacity:1}65%{transform:translateX(23%) scale(.4,.55) rotate(8deg);opacity:.8}100%{transform:translate(50%,80%) scale(.2,.5) rotate(22deg);opacity:0}}
@media(max-width:650px){#intro .invitation-label{font-size:14px;letter-spacing:1.7px;top:40px}#intro .hold-button{width:240px;height:240px}#intro .fingerprint{width:102px;height:129px}#intro .hold-area{transform:translate(-50%,-45%)}}
@media(max-height:650px){#intro .invitation-label{top:20px;font-size:12px}#intro .hold-button{width:195px;height:195px}#intro .fingerprint{width:82px;height:104px}#intro .gesture-hint{font-size:21px;margin-top:20px}#intro .gesture-detail{font-size:14px}}
@media(prefers-reduced-motion:reduce){.invitation.opening .ribbon-h,.invitation.opening .ribbon-v,.invitation.opening .gift-bow{animation-duration:.01ms!important;animation-delay:0s!important}}

/* Three punches reveal the invitation beneath an opaque breakable cover. */
.invitation{transform:none}
.smash-cover{position:absolute;inset:0;z-index:2;isolation:isolate;overflow:visible}
.shell-solid{position:absolute;inset:0;background:linear-gradient(140deg,#333332,#141617 68%,#292925);border:1px solid #b69f6d6b;box-shadow:0 24px 65px #0008}
.canvas-ready .shell-solid{visibility:hidden}
.shell-canvas{position:absolute;left:-50%;top:-10%;width:200%;height:240%;pointer-events:none;filter:drop-shadow(0 5px 5px #0006)}
.shell-hit{position:absolute;inset:0;width:100%;height:100%;background:none;touch-action:manipulation;z-index:2;cursor:pointer}
.impact-target{position:absolute;left:47%;top:47%;width:62px;height:62px;transform:translate(-50%,-50%);border:1px solid #ddc48e59;border-radius:50%;box-shadow:0 0 35px #d2b16810;transition:opacity .18s}
.impact-target:after{content:'';position:absolute;inset:8px;border:1px solid #ddc48e2e;border-radius:50%}
.impact-target i{position:absolute;left:calc(50% - 7px);top:calc(50% - .5px);height:1px;width:14px;background:#cdb47b9c}
.impact-target i+i{transform:rotate(90deg)}
.punch-glove{position:absolute;width:66%;height:auto;left:36%;top:48%;z-index:3;pointer-events:none;opacity:0;transform:translate(34%,44%) scale(.76) rotate(20deg);transform-origin:46% 32%;filter:drop-shadow(0 14px 12px #0008);will-change:transform,opacity}
.hit-flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:4;background:radial-gradient(circle at 47% 47%,#e5ce9c26,transparent 55%)}
.smash-instructions{margin-top:25px;text-align:center}
.smash-instructions p{font-size:17px;color:var(--gold);margin:0}
.hit-count{display:flex;gap:9px;justify-content:center;margin-top:17px;height:8px}
.hit-count i{width:25px;height:3px;background:#433c2d;transition:background .15s,box-shadow .15s}
.hit-count i.done{background:#d5bb80;box-shadow:0 0 7px #d5bb8030}
[data-state=punching] .impact-target,[data-state=opening] .impact-target{opacity:0}
.invitation.shattered .shell-solid{opacity:0;transform:translateY(40px);transition:opacity .4s,transform .6s}
#card{visibility:hidden}
[data-state=opening] #card,[data-state=complete] #card{visibility:visible}
[data-state=opening] .smash-instructions{opacity:0;transition:opacity .3s;pointer-events:none}
#smash-hint{min-height:1.8em}
@media(max-width:360px){.smash-instructions p{font-size:15px}}
@media(max-height:650px){.smash-instructions{margin-top:17px}.smash-instructions p{font-size:15px}.hit-count{margin-top:11px}}
@media(prefers-reduced-motion:reduce){.punch-glove{will-change:auto}.shell-canvas{filter:none}}

/* The card stays in place; soft surface reflections follow the break. */
.card-shimmer{background:linear-gradient(110deg,transparent 33%,#f5dfad08 42%,#fff0c330 49%,#fff8e142 50%,#f5dfad14 54%,transparent 65%)}
.invitation.opened .card-shimmer{animation:card-satin-sweep 1.8s .05s ease-in-out 2 both}
@keyframes card-satin-sweep{0%{opacity:0;transform:translateX(-75%)}15%{opacity:.85}70%{opacity:.65}88%,100%{opacity:0;transform:translateX(75%)}}
@media(prefers-reduced-motion:reduce){#card{transform:none;transition:none}.card-shimmer{display:none}}

/* Ceramic edges, local reflected light, and a foil-stamped invitation. */
.punch-glove img{display:block;width:100%;height:auto}
#glove-reflection{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 43% 77%,#ffe8a0e0, #dfaa424a 30%,transparent 62%);-webkit-mask:url('assets/smash-glove.webp') center/contain no-repeat;mask:url('assets/smash-glove.webp') center/contain no-repeat;mix-blend-mode:screen}
.invitation:before{content:'';position:absolute;inset:-32px;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(ellipse,#ce9c3319 15%,#ce9c330c 55%,transparent 72%);filter:blur(15px);transition:opacity 1.4s ease}
.invitation.shattered:before{opacity:1}
#card{container-type:inline-size}
#card h2{font-size:54px;font-size:clamp(40px,17cqi,55px);line-height:1.14;margin-top:52px;letter-spacing:-.8px}
#card h2 em{font-size:1.03em;letter-spacing:-.9px}
.direct-button{position:relative;overflow:hidden;isolation:isolate}
.direct-button:after{content:'';position:absolute;inset:-50%;pointer-events:none;opacity:0;transform:translateX(-100%);background:linear-gradient(110deg,transparent 36%,#fff9e140 48%,#fffbee90 50%,#fff9e130 53%,transparent 65%)}
.invitation.opened .direct-button:after{animation:cta-reflection 1.15s 3.75s ease-in-out both}
@keyframes cta-reflection{0%{opacity:0;transform:translateX(-75%)}20%,65%{opacity:1}100%{opacity:0;transform:translateX(75%)}}
@media(max-width:360px){#card h2{margin-top:40px}}
@media(max-height:650px){#card h2{margin-top:27px}}
@media(prefers-reduced-motion:reduce){.invitation.opened .direct-button:after{animation:none}.invitation:before{transition:none}#glove-reflection{display:none}}

/* Flat, centered heading; two surface sweeps followed by one CTA sweep. */
#card h2{position:absolute;top:50%;left:24px;right:24px;margin:0;transform:translateY(-50%);text-align:center;color:var(--white);text-shadow:none;background:none;-webkit-text-fill-color:currentColor;animation:none;z-index:2}
#card h2 em{color:var(--gold);text-shadow:none;background:none;-webkit-text-fill-color:currentColor;animation:none}
#card .fine-divider{position:absolute;left:24px;right:24px;top:calc(50% + clamp(64px,23cqi,78px));margin:0}
#card .card-cta p{transform:translateY(-8px)}

/* The shell opens onto the actual invitation, with an optional reverse side. */
#experience{background:radial-gradient(ellipse at 70% 44%,#26313b30,transparent 60%),#090a0c}
#experience:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 47%,#9b64252c,transparent 72%),#21160833;opacity:0;transition:opacity 1.8s ease}
#experience.warm:before{opacity:1}
.card-turn{position:absolute;inset:0;transform-style:preserve-3d;transform:perspective(1100px) rotateY(0);transition:transform .72s cubic-bezier(.22,.7,.22,1)}
.card-turn.flipped{transform:perspective(1100px) rotateY(180deg)}
#card,.card-back{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.invitation.peek #card{visibility:visible}
#card h2{top:43%}
#card .fine-divider{top:calc(43% + clamp(64px,23cqi,78px))}
.card-back{position:absolute;inset:0;display:grid;place-items:center;padding:28px;text-align:center;transform:rotateY(180deg);background:radial-gradient(ellipse at 100% 0%,#4b3e252e,transparent 65%),linear-gradient(135deg,#1b1915,#10100e 65%);border:1px solid #bfa16d85;box-shadow:0 28px 60px #0009,0 0 1px #cbb47b}
.card-back p{font:600 clamp(30px,8.5vw,39px)/1.3 'Oswald',Impact,sans-serif;letter-spacing:-.5px;margin:0;color:var(--white)}
.card-back em{font-style:normal;color:var(--gold)}
.card-actions{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:5px}
.card-actions .text-button{margin-top:0;font-size:10px;letter-spacing:.6px;padding:10px 4px}
.flip-button{color:#c4ad7d}
@media(max-width:360px){.card-actions{gap:14px}.card-actions .text-button{font-size:9px}.card-back{padding:22px}}
@media(prefers-reduced-motion:reduce){.card-turn,#experience:before{transition:none}}

/* Full-size shell: a short touch depression, then a held off-balance angle. */
#card h2{top:39%}
#card .fine-divider{top:calc(39% + clamp(64px,23cqi,78px))}
.shell-surface{position:absolute;inset:0;transform-origin:50% 50%;transform:rotate(0deg) scale(1);transition:transform .4s cubic-bezier(.18,.8,.25,1);pointer-events:none}
.shell-surface.off-balance{transform:rotate(-1.15deg) scale(1.035)}
.shell-dent{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse 95px 75px at var(--press-x,47%) var(--press-y,47%),#0008 0%,#0003 45%,#d4d8d310 65%,transparent 78%)}
@media(prefers-reduced-motion:reduce){.shell-surface,.shell-surface.off-balance{transform:none;transition:none}.shell-dent{display:none}}

/* Stable hit targets: only button contents depress, never the card or link bounds. */
#card{transform:none;transition:none}
.direct-button:active{transform:none;box-shadow:inset 0 2px 7px #4b371866;filter:brightness(.97)}
.button-content{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;pointer-events:none;transition:transform .13s ease}
.direct-button:active .button-content,.flip-button:active .button-content{transform:translateY(1px) scale(.985)}
.flip-button{min-width:84px;border-radius:4px;transition:background .13s,box-shadow .13s}
.flip-button .button-content{justify-content:center}
.flip-button:active{background:#d5bb800a;box-shadow:inset 0 2px 5px #0005}
.card-back{grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:24px;overflow:hidden}
.back-portrait{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.back-portrait img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.card-back blockquote{font:600 clamp(26px,7.6vw,32px)/1.18 'Oswald',Impact,sans-serif;letter-spacing:-.3px;margin:0;color:var(--white);text-align:center}
.card-back blockquote em{color:var(--gold);font-style:normal}
@media(max-height:650px){.card-back{padding:18px 22px;gap:9px}.card-back blockquote{font-size:27px}}
@media(prefers-reduced-motion:reduce){.button-content{transition:none}}

/* Single visible face avoids mirrored front text bleeding through on mobile Safari. */
.card-turn,.card-turn.flipped{transform:none;transform-style:flat;transition:none}
.card-back{transform:none}
.invitation{z-index:2}
.card-actions{position:relative;z-index:1;flex-direction:column;gap:9px;width:min(148px,54%);margin-top:16px}
.card-actions .flip-button{position:relative;isolation:isolate;width:100%;min-height:44px;padding:9px 18px;border:1px solid #d5bb80a0;border-radius:4px;background:linear-gradient(125deg,#3a3020,#211d15 60%,#382d1c);color:#f3deae;font-size:11px;font-weight:800;letter-spacing:1.2px;box-shadow:inset 0 1px 0 #f5dfad20;animation:flip-emerge .7s var(--ease) both}
.flip-button:before{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 23px #d5bb803b,inset 0 0 16px #d5bb8012;opacity:0;animation:flip-beacon 2.8s .8s ease-in-out infinite}
.card-actions.discovered .flip-button:before{animation:none;opacity:0}
.card-actions .flip-button:active{background:#302719;box-shadow:inset 0 2px 8px #0008}
.card-actions #replay{min-height:44px;font-size:10px;letter-spacing:1px;color:#a99b80;padding:12px 20px;animation:replay-emerge .5s .35s ease both}
@keyframes flip-emerge{from{transform:translateY(-62px);opacity:0}to{transform:none;opacity:1}}
@keyframes flip-beacon{0%,100%{opacity:.12}50%{opacity:1}}
@keyframes replay-emerge{from{opacity:0}to{opacity:1}}
@media(max-height:650px){.invitation{height:min(386px,calc(100svh - 230px))}.card-actions{margin-top:12px;gap:3px}.card-actions .flip-button{min-height:44px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.card-actions .flip-button,.flip-button:before,.card-actions #replay{animation:none;transform:none}.flip-button:before{opacity:.25}}

/* Quiet secondary control: an understated line, without a filled surface. */
.flip-button:before{display:none;animation:none;box-shadow:none}
.card-actions{width:116px;gap:0}
.card-actions .flip-button{border:0;background:none;border-radius:0;box-shadow:none;color:#b2a184;font-size:10px;font-weight:600;letter-spacing:1.6px;padding:10px 16px}
.card-actions .flip-button .button-content{position:relative;padding:5px 0}
.card-actions .flip-button .button-content:after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:1px;background:#b2a18450}
.card-actions .flip-button:hover{color:var(--gold)}
.card-actions .flip-button:active{background:none;box-shadow:none}
.card-actions #replay{font-size:9px;color:#897e6b;letter-spacing:1.1px}
@keyframes flip-emerge{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}

/* The ring follows one uninterrupted hold. */
.hold-button{touch-action:none}

/* Smooth silent hold: stable hit target, continuous finger motion and fading waves. */
.topbar{min-height:108px}
.hold-ripples{position:absolute;inset:10px;pointer-events:none;opacity:0;transition:opacity .5s ease}
.hold-ripples i{position:absolute;inset:0;border:1px solid #d5bb80;border-radius:50%;opacity:0;animation:hold-ripple 1.9s cubic-bezier(.25,.5,.35,1) infinite paused}
.hold-ripples i+i{animation-delay:.85s}
.progress-ring{transition:transform .7s cubic-bezier(.22,.7,.3,1)}
[data-state=holding] .progress-ring{transform:rotate(-90deg) scale(1.065)}
[data-state=holding] .fingerprint{transform:none;opacity:1;will-change:transform,opacity}
[data-state=holding] .hold-ripples{opacity:1}
[data-state=holding] .hold-ripples i{animation-play-state:running}
.hold-glint{transform:rotate(0deg);transition:transform .55s cubic-bezier(.22,.7,.3,1);transform-origin:2px 103px}
[data-state=holding] .hold-glint{transform:rotate(360deg);transition-duration:1.7s;transition-timing-function:cubic-bezier(.4,0,.4,1)}
[data-state=holding] .hold-button.ready .progress-ring{transform:rotate(-90deg) scale(1.085)}
@keyframes hold-ripple{0%{transform:scale(.9);opacity:0}30%{opacity:.28}100%{transform:scale(1.4);opacity:0}}
@media(max-width:650px){.topbar{min-height:calc(70px + env(safe-area-inset-top))}.hold-glint{transform-origin:2px 93px}}
@media(max-height:650px){.hold-glint{transform-origin:2px 70.5px}}
@media(prefers-reduced-motion:reduce){.hold-ripples{display:none}[data-state=holding] .fingerprint,.hold-glint,[data-state=holding] .hold-glint{animation:none;transform:none;transition:none;will-change:auto}[data-state=holding] .progress-ring,[data-state=holding] .hold-button.ready .progress-ring{transform:rotate(-90deg);transition:none}}

/* Three scenes: fingerprint, the quote, then the fixed invitation. */
.quote-scene{width:min(374px,100%);display:flex;justify-content:center;animation:quote-arrive .65s cubic-bezier(.22,.7,.3,1) both}
.quote-scene .invitation{width:100%}
.quote-scene.depart{animation:quote-depart .4s ease both}
.mail-stage{animation:quote-arrive .65s cubic-bezier(.22,.7,.3,1) both}
.invitation.revealed:before{opacity:1}
@keyframes quote-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes quote-depart{to{opacity:0;transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.quote-scene,.quote-scene.depart,.mail-stage{animation:none;transform:none}}

/* Both a finger swipe and the timed advance use the same leftward departure. */
.quote-scene{position:relative;flex-direction:column;align-items:center;gap:10px}
.swipe-hint{background:none;color:#b8a580;font-size:12px;font-weight:500;letter-spacing:1.5px;min-height:44px;padding:12px 20px;transition:opacity .25s ease}
.quote-scene.swiping-out .swipe-hint{opacity:0;pointer-events:none}
#quote-card{transition:none;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;will-change:transform,opacity}
#quote-card:active{cursor:grabbing}
#quote-card img{-webkit-user-drag:none}
.card-actions{width:132px;margin-top:18px}
.card-actions #replay{width:100%;min-height:44px;font-size:11px;font-weight:600;letter-spacing:1.25px;color:#c7b58f;border:1px solid #bca47545;border-radius:3px;background:#c7ad7810;transition:background .2s,border-color .2s}
.card-actions #replay:hover{background:#c7ad781a;border-color:#bca47580}
.card-actions #replay:active{background:#c7ad7824}
@media(max-height:650px){.quote-scene{gap:4px}.swipe-hint{font-size:11px}.card-actions{margin-top:14px}}
@media(prefers-reduced-motion:reduce){#quote-card{will-change:auto}.swipe-hint{transition:none}}