.keepsakes{padding:85px 25px 90px;overflow:hidden;text-align:center}.keepsakes header h2{margin:17px 0 18px}.keepsakes header>p:last-child{font-size:14px;color:#7c7183}.keepsake-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;max-width:850px;margin:55px auto 0;align-items:start}.object-number{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}.object-hint{font-size:11px;letter-spacing:.025em;color:#77697f;line-height:1.7}.locket-scene{perspective:1400px}.locket{position:relative;display:block;margin:0 auto;width:280px;height:350px;background:transparent;perspective:1000px;isolation:isolate}.locket-inside{position:absolute;inset:13% 14%;border-radius:50%;overflow:hidden;background:#cdbb91;border:7px double #bca16a;box-shadow:0 9px 24px #5c4c5125,inset 0 0 10px #86704b50}.locket-inside img{width:100%;height:100%;object-fit:cover;object-position:center 25%}.locket-inside>span{position:absolute;bottom:12%;left:0;right:0;color:white;text-shadow:0 1px 5px #302734;font-family:var(--script);font-size:27px}.locket-lid{position:absolute;inset:0;transform-origin:13% 50%;transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter 1.4s;filter:drop-shadow(0 7px 8px #55424d25);backface-visibility:visible}.locket-lid img{width:100%;height:100%;object-fit:contain}.locket.is-open .locket-lid{transform:rotateY(-135deg);filter:brightness(.85) drop-shadow(0 7px 10px #55424d20)}.locket-glint{position:absolute;top:24%;right:18%;height:7px;width:7px;background:#fffbe8;box-shadow:0 0 15px 6px #fff1cc90;transform:rotate(45deg);pointer-events:none;animation:locket-glow 4s infinite}.locket.is-open .locket-glint{opacity:0;animation:none}.locket-note{min-height:70px;opacity:0;transform:translateY(8px);transition:opacity .7s,transform .7s;margin:8px auto 14px}.locket-note p{font-size:14px;line-height:1.8}.locket-note em{color:var(--plum)}.locket-note.is-visible{opacity:1;transform:none}.dance-scene{padding-top:0}.dance-card{width:245px;height:350px;display:block;position:relative;background:transparent;margin:0 auto 93px;perspective:1200px;padding:0}.dance-card-turn{display:block;position:absolute;inset:0;transform-style:preserve-3d;transform:rotate(-5deg);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}.dance-card.is-flipped .dance-card-turn{transform:rotate(3deg) rotateY(180deg)}.dance-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#f9f5eb;border:1px solid #c6b18b;box-shadow:0 13px 28px #5943581b;overflow:hidden}.dance-face:before{content:'';position:absolute;inset:10px;border:1px solid #c6b18b70;pointer-events:none}.dance-front{background:linear-gradient(140deg,#e8e5ee,#f8f4eb)}.dance-front>img{position:absolute;right:-25px;top:-20px;width:180px;opacity:.55;pointer-events:none}.dance-monogram{font-family:var(--script);font-size:37px;color:var(--gold);position:relative;margin-bottom:20px}.dance-title{position:relative;font-family:var(--script);font-size:59px;line-height:1;color:var(--plum)}.dance-date{font-size:8px;letter-spacing:.25em;margin-top:26px}.dance-ornament{font-size:25px;color:var(--gold);margin-top:15px}.dance-back{transform:rotateY(180deg);padding:24px 17px;background:#ede6f0}.dance-back .eyebrow{font-size:8px}.dance-hour{font-size:54px;color:var(--gold);font-style:italic;margin:22px 0}.dance-message{font-size:13px;line-height:1.9}.dance-message em{display:block;margin-top:8px;color:var(--plum)}.dance-signature{font-family:var(--script);font-size:30px;margin-top:16px;color:var(--plum)}.locket:focus-visible,.dance-card:focus-visible{outline:2px solid var(--gold);outline-offset:9px}.envelope-interactive{isolation:isolate}.envelope-base{position:relative;z-index:1;transition:transform 1s,filter 1s}.envelope-interactive .envelope-monogram{z-index:2;transition:opacity .4s}.wax-seal{position:absolute;z-index:4;width:35%;aspect-ratio:1;left:35%;top:56%;padding:0;background:none;border-radius:50%;transition:opacity .5s}.wax-half{position:absolute;inset:0;transition:transform .9s cubic-bezier(.22,.7,.3,1),opacity .7s}.wax-half img{width:100%;height:100%;object-fit:contain}.wax-left{clip-path:polygon(0 0,54% 0,46% 25%,57% 45%,45% 66%,53% 100%,0 100%)}.wax-right{clip-path:polygon(54% 0,100% 0,100% 100%,53% 100%,45% 66%,57% 45%,46% 25%)}.wax-seal:hover .wax-half{filter:brightness(1.07)}.envelope-interactive.is-unsealed .wax-left{transform:translate(-65%,30%) rotate(-35deg);opacity:0}.envelope-interactive.is-unsealed .wax-right{transform:translate(65%,40%) rotate(35deg);opacity:0}.envelope-interactive.is-unsealed .envelope-monogram{opacity:0}.envelope-interactive.is-unsealed .envelope-base{transform:translateY(40px) rotate(-3deg);filter:brightness(.96)}.letter-note{position:absolute;left:14%;right:14%;top:12%;height:56%;z-index:0;background:#fffbf1;border:1px solid #c8b48d;padding:30px 15px 20px;text-align:center;box-shadow:0 4px 25px #65546c18;transform:translateY(20%);opacity:0;transition:transform 1s .15s,opacity .5s}.letter-note:before{content:'';position:absolute;inset:8px;border:1px solid #c8b48d50;pointer-events:none}.letter-note .eyebrow{font-size:8px}.letter-script{font-family:var(--script);font-size:clamp(28px,3.3vw,48px);line-height:1.2;color:var(--plum);margin:22px 0}.letter-note .text-link{font-size:11px;gap:10px;position:relative}.envelope-interactive.is-unsealed .letter-note{z-index:3;opacity:1;transform:translateY(-17%)}.seal-hint{position:relative;z-index:5;margin-top:4px;text-align:center}.reseal{position:relative;z-index:5;display:flex;width:max-content;margin:25px auto 0;font-size:11px}.seal-sparkles{position:absolute;inset:0;pointer-events:none}.seal-sparkles i{position:absolute;left:50%;top:50%;width:4px;height:4px;background:#c9ab68;opacity:0;--x:60px;--y:-50px}.seal-sparkles i:nth-child(2){--x:-60px;--y:-30px}.seal-sparkles i:nth-child(3){--x:35px;--y:55px}.seal-sparkles i:nth-child(4){--x:-40px;--y:55px}.seal-sparkles i:nth-child(5){--x:8px;--y:-80px}.seal-sparkles i:nth-child(6){--x:80px;--y:10px}.is-unsealed .seal-sparkles i{animation:seal-scatter .8s ease-out both}
@keyframes seal-scatter{0%{opacity:0;transform:translate(0,0) rotate(45deg)}20%{opacity:.9}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(180deg)}}@keyframes locket-glow{0%,75%,100%{opacity:0;transform:scale(.4) rotate(45deg)}85%{opacity:.85;transform:scale(1) rotate(45deg)}}
@media(max-width:760px){.keepsakes{padding:65px 20px 75px}.keepsakes header h2{font-size:58px}.keepsakes header>p:last-child{font-size:12px}.keepsake-layout{display:flex;flex-direction:column;align-items:center;gap:60px;margin-top:40px}.locket{width:240px;height:300px}.locket-note{min-height:58px;margin-top:0;margin-bottom:12px}.locket-note p{font-size:13px}.object-number{font-size:9px;margin-bottom:18px}.object-hint{font-size:10px}.dance-card{width:225px;height:320px;margin-bottom:30px}.dance-title{font-size:55px}.envelope-interactive{margin-top:30px;margin-bottom:18px}.letter-note{padding:20px 10px 15px;height:57%}.letter-script{font-size:32px;margin:19px 0 10px}.letter-note .eyebrow{font-size:7px}.letter-note .text-link{font-size:10px}.seal-hint{max-width:240px;margin:8px auto 0}.envelope-interactive.is-unsealed .letter-note{transform:translateY(-18%)}}
@media(max-width:760px){.locket.is-open .locket-lid{transform:rotateY(-110deg)}}
@media(prefers-reduced-motion:reduce){.locket-lid,.locket-note,.dance-card-turn,.wax-half,.envelope-base,.letter-note{transition:none}.locket-glint,.seal-sparkles i{animation:none!important}}