.layered-demo:is([data-motion=carousel],[data-motion=shutters],[data-motion=butterfly],[data-motion=vinyl],[data-motion=prism],[data-motion=airmail]) .layered-demo-cover strong{font-size:clamp(29px,3.4vw,44px)}.cover-memory-wheel{position:absolute;width:76%;height:72%;top:8%;left:12%;border:2px solid var(--layer-gold);border-radius:50%;opacity:.42;animation:keepsake-wheel-turn 12s linear infinite}.cover-memory-wheel>span{position:absolute;inset:10%;border:1px solid;color:var(--layer-gold);border-radius:50%}.cover-memory-wheel>span:nth-child(2),.cover-memory-wheel>span:nth-child(3){inset:49% 0;border:0;border-top:1px solid var(--layer-gold);border-radius:0;transform:rotate(60deg)}.cover-memory-wheel>span:nth-child(3){transform:rotate(-60deg)}.cover-memory-wheel i{position:absolute;inset:0;display:grid;place-items:center;font:34px/1 var(--serif);color:var(--layer-gold)}.layered-demo[data-motion=carousel] .cover-memory-card{animation:keepsake-carousel 6s linear infinite;animation-delay:calc(var(--memory-index) * -1.5s);border:2px solid #e3c18a}.layered-demo[data-motion=carousel] .layered-demo-cover{border:4px double #c49d66;border-radius:14px 14px 4px 4px}.layered-demo[data-motion=carousel] .layered-demo-cover-border{border-radius:6px}.layered-demo[data-motion=carousel]:not([data-phase=closed]) .layered-demo-cover{transform:translate(-85%,-55%) rotateY(-95deg) scale(.85)}.layered-demo[data-motion=carousel] .layered-demo-photo-print{border:2px solid #d5b883;border-radius:12px}.layered-demo[data-motion=carousel] .layered-demo-photo-window{border-radius:6px}.cover-shutter-doors{position:absolute;width:clamp(285px,65vw,460px);height:70%;top:58%;left:50%;transform:translate(-50%,-50%);perspective:900px}.cover-shutter-doors>span{position:absolute;inset:0 50% 0 0;border:4px double #b8a27d;border-radius:80% 0 0 4px/26% 0 0 4px;background:repeating-linear-gradient(90deg,transparent 0 17px,#fff1 17px 18px),color-mix(in srgb,var(--w-ink) 85%,#292c28);box-shadow:inset 0 0 0 8px #0001,0 8px 25px #0003;transform-origin:0 50%;animation:keepsake-door-left 2.8s ease-in-out infinite alternate}.cover-shutter-doors>span:nth-child(2){inset:0 0 0 50%;border-radius:0 80% 4px 0/0 26% 4px 0;transform-origin:100% 50%;animation-name:keepsake-door-right}.layered-demo[data-motion=shutters] .cover-memory-card{animation-name:keepsake-door-memory;animation-duration:3.2s;border-radius:45% 45% 2px 2px}.layered-demo[data-motion=shutters] .cover-memory-card>div{border-radius:45% 45% 0 0}.layered-demo[data-motion=shutters] .layered-demo-cover{border-radius:42% 42% 3px 3px;border:3px double #a59b7c;padding-top:42px}.layered-demo[data-motion=shutters] .layered-demo-cover-border{border-radius:inherit}.layered-demo[data-motion=shutters]:not([data-phase=closed]) .cover-shutter-doors>span{animation:none!important;transition:transform .8s ease;transform:rotateY(-110deg)}.layered-demo[data-motion=shutters]:not([data-phase=closed]) .cover-shutter-doors>span:nth-child(2){transform:rotateY(110deg)}.layered-demo[data-motion=shutters]:not([data-phase=closed]) .layered-cover-motion{transition-delay:.35s,.95s}.layered-demo[data-motion=shutters]:not([data-phase=closed]) .layered-demo-cover{transform:translate(-50%,-110%) rotateX(65deg) scale(.8)}.layered-demo[data-motion=shutters] .layered-demo-photo-print{border-radius:42% 42% 2px 2px}.layered-demo[data-motion=shutters] .layered-demo-photo-window{border-radius:42% 42% 0 0}.cover-butterflies{position:absolute;inset:0}.cover-butterflies>i{position:absolute;top:calc(12% + mod(var(--butterfly-index) * 19, 66) * 1%);left:calc(8% + mod(var(--butterfly-index) * 27, 80) * 1%);width:34px;height:28px;filter:drop-shadow(0 3px 3px #0002);animation:keepsake-butterfly-flight 4.2s ease-in-out infinite alternate;animation-delay:calc(var(--butterfly-index) * -.7s)}.cover-butterflies>i>span{position:absolute;inset:0 49% 0 0;border-radius:70% 20% 65% 35%;background:linear-gradient(135deg,var(--layer-paper),var(--layer-gold));border:1px solid color-mix(in srgb,var(--layer-gold) 70%,transparent);transform-origin:100% 50%;animation:keepsake-butterfly-wing .8s ease-in-out infinite alternate}.cover-butterflies>i:before{content:"";position:absolute;z-index:1;left:calc(50% - 1.5px);top:3px;width:3px;height:80%;border-radius:50%;background:#ae9462}.cover-butterflies>i:after{content:"";position:absolute;left:34%;top:-1px;width:32%;height:7px;border:1px solid #ae9462;border-bottom:0;border-radius:50%}.cover-butterflies>i>span:nth-child(2){inset:0 0 0 49%;border-radius:20% 70% 35% 65%;transform-origin:0 50%;animation-direction:alternate-reverse}.layered-demo[data-motion=butterfly] .cover-memory-card{animation-duration:3s;border-radius:42% 42% 4px 4px}.layered-demo[data-motion=butterfly] .cover-memory-card>div{border-radius:42% 42% 0 0}.layered-demo[data-motion=butterfly] .layered-demo-cover{border-radius:22px;border:4px double #a9ad86}.layered-demo[data-motion=butterfly] .layered-demo-cover-border{border-radius:14px;border-style:dashed}.layered-demo[data-motion=butterfly]:not([data-phase=closed]) .layered-demo-cover{transform:translate(-50%,-110%) rotateX(70deg) rotate(12deg) scale(.75)}.layered-demo[data-motion=butterfly] .layered-demo-photo-print{border-radius:18px}.layered-demo[data-motion=butterfly] .layered-demo-photo-window{border-radius:11px}.cover-vinyl-disc{position:absolute;top:37%;left:50%;width:clamp(225px,32vw,350px);aspect-ratio:1;border:4px solid #151512;border-radius:50%;background:repeating-radial-gradient(circle,#171816 0 3px,#39352e 3px 4px,#1e201b 4px 6px);box-shadow:0 14px 35px #0005;transform:translate(-50%,-50%);animation:keepsake-record-spin 7s linear infinite}.cover-vinyl-disc>span{position:absolute;inset:36%;display:grid;place-items:center;border:3px double #b88e50;border-radius:50%;background:#d7b47e;color:#453c2d;font:30px/1 var(--serif)}.cover-vinyl-wave{position:absolute;display:flex;justify-content:space-between;align-items:center;gap:5px;left:5%;right:5%;top:64%;height:100px;opacity:.5}.cover-vinyl-wave>i{width:5px;height:calc(25px + mod(var(--wave-index) * 17, 65) * 1px);border-radius:8px;background:var(--layer-gold);animation:keepsake-equalizer 1.2s ease-in-out infinite alternate;animation-delay:calc(var(--wave-index) * -.17s)}.layered-demo[data-motion=vinyl] .cover-memory-card{padding:12px;border:5px double #a48b62;border-radius:50%;background:repeating-radial-gradient(circle,#171816 0 3px,#36352e 3px 4px,#171816 4px 6px);animation-duration:3.4s}.layered-demo[data-motion=vinyl] .cover-memory-card>div{border-radius:50%;aspect-ratio:1}.layered-demo[data-motion=vinyl] .cover-memory-card>span{display:none}.layered-demo[data-motion=vinyl] .layered-demo-cover{border:7px solid #af946b;border-radius:3px;background:linear-gradient(150deg,#fff8,transparent 65%),var(--layer-paper)}.layered-demo[data-motion=vinyl] .layered-demo-heading h1{font-family:var(--serif)}.layered-demo[data-motion=vinyl]:not([data-phase=closed]) .layered-demo-cover{transform:translate(15%,-65%) rotate(70deg) scale(.65)}.layered-demo[data-motion=vinyl] .layered-demo-photo-print{border:7px solid #373029}.layered-demo[data-motion=vinyl] .layered-demo-photo-window{border-radius:50%;aspect-ratio:1}.cover-prism-facets{position:absolute;inset:0}.cover-prism-facets>span{position:absolute;width:52%;height:65%;top:calc(8% + var(--facet-index) * 7%);left:calc(-12% + var(--facet-index) * 22%);clip-path:polygon(50% 0,100% 30%,76% 100%,5% 72%,0 25%);background:linear-gradient(calc(35deg + var(--facet-index) * 65deg),#d3d8ff22,#d9b9e46b,#addbda44);border:1px solid #fff6;animation:keepsake-prism-drift 3.6s ease-in-out infinite alternate;animation-delay:calc(var(--facet-index) * -.8s)}.layered-demo[data-motion=prism] .cover-memory-card{padding:7px;border:1px solid #e3d6ed;background:linear-gradient(145deg,#ead9ef,#e5f0ee,#eacfdc);clip-path:polygon(11% 0,100% 0,100% 89%,89% 100%,0 100%,0 11%);animation-duration:3.1s}.layered-demo[data-motion=prism] .cover-memory-card>div{clip-path:polygon(10% 0,100% 0,100% 90%,90% 100%,0 100%,0 10%)}.layered-demo[data-motion=prism] .layered-demo-cover{border:3px solid #c8b9d5;border-radius:3px;background:linear-gradient(145deg,#fff9,#efdcf033 48%,#d4eeee33),var(--layer-paper)}.layered-demo[data-motion=prism] .layered-demo-cover-border{border-color:#b9a9c65c}.layered-demo[data-motion=prism]:not([data-phase=closed]) .layered-demo-cover{transform:translate(-50%,-60%) rotateY(95deg) rotate(15deg) scale(1.2)}.layered-demo[data-motion=prism] .layered-demo-photo-print{border:2px solid #dacde3;clip-path:polygon(7% 0,100% 0,100% 93%,93% 100%,0 100%,0 7%)}.cover-airmail-route{position:absolute;inset:3%;color:var(--layer-gold)}.cover-airmail-route>svg:first-child{width:100%;height:100%;overflow:visible}.cover-airmail-route>svg:first-child path{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:3 8;opacity:.55;animation:keepsake-postal-route 7s linear infinite}.cover-paper-plane{position:absolute;width:34px;height:34px;top:30%;left:50%;fill:var(--layer-paper);stroke:var(--layer-gold);animation:keepsake-paper-flight 5.5s ease-in-out infinite}.cover-airmail-postmark{position:absolute;left:8%;top:65%;width:67px;aspect-ratio:1;display:grid;place-content:center;border:3px double;border-radius:50%;color:var(--layer-gold);font:500 9px/1.3 var(--sans);letter-spacing:.1em;text-align:center;transform:rotate(-14deg);opacity:.6}.layered-demo[data-motion=airmail] .cover-memory-card{border:5px solid transparent;background:linear-gradient(var(--layer-paper),var(--layer-paper)) padding-box,repeating-linear-gradient(135deg,#a96961 0 9px,#f7e9d0 9px 17px,#586a77 17px 26px,#f7e9d0 26px 34px) border-box;animation-duration:3.2s}.layered-demo[data-motion=airmail] .layered-demo-cover{border:6px solid transparent;background:linear-gradient(var(--layer-paper),var(--layer-paper)) padding-box,repeating-linear-gradient(135deg,#a96961 0 10px,#f7e9d0 10px 18px,#586a77 18px 28px,#f7e9d0 28px 36px) border-box;border-radius:7px}.layered-demo[data-motion=airmail] .layered-demo-cover-border{border-style:dashed}.layered-demo[data-motion=airmail]:not([data-phase=closed]) .layered-demo-cover{transform:translateY(-135%) rotate(-25deg) scale(.7)}.layered-demo[data-motion=airmail] .layered-demo-photo-print{border:4px solid transparent;background:linear-gradient(var(--layer-paper),var(--layer-paper)) padding-box,repeating-linear-gradient(135deg,#a96961 0 9px,#f7e9d0 9px 17px,#586a77 17px 26px,#f7e9d0 26px 34px) border-box}.layered-demo:is([data-motion=shutters],[data-motion=vinyl],[data-motion=prism],[data-motion=airmail]) .layered-demo-thread{display:none}.layered-cover-art[data-motion=carousel] .layered-cover-art-orbit{inset:-12% 2%;border:4px double #d9b97a;opacity:.6;background:repeating-conic-gradient(from 15deg,transparent 0 59deg,#d9b97a44 59deg 60deg)}.layered-cover-art[data-motion=carousel] .layered-cover-art-photo{border-radius:9px;border:1px solid #d9b97a}.layered-cover-art[data-motion=carousel] .layered-cover-art-photo:first-of-type{transform:translate(-90%,-75%) rotate(-17deg) scale(.74)}.layered-cover-art[data-motion=carousel] .layered-cover-art-photo:nth-of-type(2){transform:translate(-10%,-75%) rotate(17deg) scale(.74)}.layered-cover-art[data-motion=shutters] .layered-cover-art-orbit{inset:-8% 7%;border:4px double #bba37d;border-radius:45% 45% 1px 1px;opacity:.85;background:repeating-linear-gradient(90deg,#283e4a 0 18px,#6b766d 18px 19px);transform:none}.layered-cover-art[data-motion=shutters] .layered-cover-art-photo,.layered-cover-art[data-motion=shutters] .layered-cover-art-photo img{border-radius:45% 45% 1px 1px}.layered-cover-art[data-motion=butterfly] .layered-cover-art-orbit{inset:-15% 5%;border:1px solid #decda5;border-radius:70% 20% 70% 20%;transform:rotate(30deg);opacity:.4;box-shadow:0 0 0 12px #decda512}.layered-cover-art[data-motion=butterfly] .layered-cover-art-photo{border-radius:15px}.layered-cover-art[data-motion=butterfly] .layered-cover-art-photo img{border-radius:9px}.layered-cover-art[data-motion=butterfly] .layered-cover-art-seal{border-radius:70% 20% 70% 20%;transform:rotate(-15deg)}.layered-cover-art[data-motion=vinyl] .layered-cover-art-orbit{inset:-10% 4%;border-radius:50%;border:5px solid #151512;background:repeating-radial-gradient(circle,#151512 0 4px,#413a2d 4px 5px,#151512 5px 8px);opacity:.9}.layered-cover-art[data-motion=vinyl] .layered-cover-art-photo:nth-of-type(-n+2){border-radius:50%;padding:4%;background:#25251f;color:#e8cd9c}.layered-cover-art[data-motion=vinyl] .layered-cover-art-photo:nth-of-type(-n+2) img{border-radius:50%;aspect-ratio:1}.layered-cover-art[data-motion=vinyl] .layered-cover-art-photo:nth-of-type(-n+2)>span{display:none}.layered-cover-art[data-motion=vinyl] .layered-cover-art-heading strong{font-family:var(--serif)}.layered-cover-art[data-motion=prism]{background:linear-gradient(135deg,#e1cdf018,transparent 55%,#afd3e21a),var(--lc-bg)}.layered-cover-art[data-motion=prism] .layered-cover-art-orbit{inset:-16% -1%;border:0;border-radius:0;background:linear-gradient(140deg,#a4d4e844,#eac6e17a,#d0bfe966);clip-path:polygon(50% 0,100% 37%,73% 100%,0 68%,8% 25%);opacity:.8}.layered-cover-art[data-motion=prism] .layered-cover-art-photo{clip-path:polygon(10% 0,100% 0,100% 90%,90% 100%,0 100%,0 10%);background:linear-gradient(135deg,#f9eff9,#d1e7e3)}.layered-cover-art[data-motion=prism] .layered-cover-art-seal{border-radius:15%;background:#eadfee;color:#79678a;border-color:#b5a0c4}.layered-cover-art[data-motion=airmail] .layered-cover-art-orbit{inset:-12% -7%;border-style:dashed;border-radius:25% 65% 30% 65%;transform:rotate(18deg);opacity:.55}.layered-cover-art[data-motion=airmail] .layered-cover-art-photo{border:1.4cqw solid transparent;background:linear-gradient(var(--lc-paper),var(--lc-paper)) padding-box,repeating-linear-gradient(135deg,#a96961 0 5px,#f7e9d0 5px 10px,#586a77 10px 15px,#f7e9d0 15px 20px) border-box}.layered-cover-art[data-motion=airmail] .layered-cover-art-seal{border-radius:4px;border-style:dashed;transform:rotate(-12deg);font-size:5cqw}.layered-cover-motion :after,.layered-cover-motion :before{animation-play-state:var(--cover-motion-state)!important}@keyframes keepsake-wheel-turn{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes keepsake-carousel{0%,to{transform:translate(-50%,-50%) translate(calc(var(--memory-spread) * -1.05),calc(var(--memory-lift) * -1)) rotate(-10deg) scale(.92)}25%{transform:translate(-50%,-50%) translateY(calc(var(--memory-lift) * -1 - 34px)) rotate(0) scale(.76)}50%{transform:translate(-50%,-50%) translate(calc(var(--memory-spread) * 1.05),calc(var(--memory-lift) * -1)) rotate(10deg) scale(.92)}75%{transform:translate(-50%,-50%) translateY(calc(var(--memory-lift) * -1 + 30px)) rotate(0) scale(1.04)}}@keyframes keepsake-door-left{0%{transform:rotateY(-14deg)}to{transform:rotateY(-35deg)}}@keyframes keepsake-door-right{0%{transform:rotateY(14deg)}to{transform:rotateY(35deg)}}@keyframes keepsake-door-memory{0%{transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread)),calc(var(--memory-position-y) * var(--memory-lift) - 12px)) rotate(var(--memory-rotation)) rotateY(-15deg)}to{transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread) * .92),calc(var(--memory-position-y) * var(--memory-lift) + 16px)) rotate(calc(var(--memory-rotation) + 5deg)) rotateY(16deg)}}@keyframes keepsake-butterfly-wing{0%{transform:rotateY(-15deg)}to{transform:rotateY(-65deg)}}@keyframes keepsake-butterfly-flight{0%{transform:translate(-15px,-16px) rotate(-18deg)}to{transform:translate(20px,22px) rotate(14deg)}}@keyframes keepsake-record-spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes keepsake-equalizer{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}@keyframes keepsake-prism-drift{0%{transform:translate(-14px,-14px) rotate(-12deg);opacity:.5}to{transform:translate(20px,16px) rotate(12deg);opacity:.9}}@keyframes keepsake-postal-route{0%{stroke-dashoffset:0}to{stroke-dashoffset:-110}}@keyframes keepsake-paper-flight{0%,to{transform:translate(-135px,45px) rotate(-28deg)}30%{transform:translate(-45px,-75px) rotate(5deg)}60%{transform:translate(105px,-55px) rotate(36deg)}85%{transform:translate(130px,60px) rotate(78deg)}}@media (max-width:700px){.layered-demo[data-motion=carousel] .cover-memory-card{animation-delay:calc(var(--memory-index) * -3s - .5s)}.cover-memory-wheel{width:82%;left:9%;height:48%;top:8%}.cover-shutter-doors{top:62%;height:64%;width:78%}.layered-demo[data-motion=shutters] .layered-demo-cover{padding-top:32px}.layered-demo[data-motion=shutters] .layered-demo-cover strong{font-size:29px}.cover-butterflies>i{width:27px;height:23px}.layered-demo[data-motion=vinyl] .layered-demo-cover{width:clamp(230px,60vw,300px)}.layered-demo[data-motion=vinyl] .cover-memory-card{width:clamp(110px,29vw,132px);padding:9px}.cover-vinyl-disc{top:32%;width:220px}.cover-vinyl-wave{height:85px;left:4%;right:4%}.cover-vinyl-wave>i{width:4px}.cover-paper-plane{width:27px;height:27px}}@media (prefers-reduced-motion:reduce){.layered-demo[data-motion=shutters]:not([data-phase=closed]) .cover-shutter-doors>span{transition:none}}