.magic-button{--pearl-size: 148px;--pearl-ring-size: 176px;--ease: cubic-bezier(.2, .65, .3, 1);--ring-length: 521.50438;--button-scale: 1;--press-drop: var(--pearl-drop, 0px);position:absolute;z-index:2;left:50%;top:var(--btn-center-y, 230px);width:var(--pearl-size);height:var(--pearl-size);padding:0;border:0;border-radius:50%;background:transparent;transform:translate(-50%,calc(-50% + var(--press-drop))) scale(var(--button-scale)) perspective(520px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));transform-style:preserve-3d;transform-origin:center;animation:breathe 4s ease-in-out infinite;cursor:pointer;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .46s cubic-bezier(.22,1,.36,1)}.button-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;transform-style:preserve-3d;pointer-events:none}.button-face:before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;background:radial-gradient(ellipse 72% 57% at 35% 16%,#ffffffef,#f6f0e6ba 70%) padding-box,linear-gradient(145deg,#fff,#d6bd86 26%,#f4e9ce 46%,#d0a69a 76%,#fff5d4) border-box;box-shadow:inset 0 3px 4px #fffffffa,inset 0 -7px 14px #c7a67a30,0 1px 2px #8a6a3f38,0 6px 12px -4px #9b784540,0 18px 34px -10px #9b784538,0 0 70px #e0c28d20;transition:transform .6s var(--ease),opacity .5s var(--ease),border-radius .6s var(--ease),box-shadow .24s ease;pointer-events:none}.magic-button:before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,#8a6a3f5c,#9b784533 56%,transparent 78%);filter:blur(12px);opacity:.85;transform:translate3d(0,14px,-44px);transition:transform .26s var(--ease),opacity .26s var(--ease);pointer-events:none}.button-face:after{content:"";position:absolute;inset:8px;border-radius:inherit;border-top:1px solid #fffcf7;border-bottom:1px solid #d1ae8e35;transform:translateZ(1px) rotate(-32deg);transition:opacity .25s;pointer-events:none}.button-shine{position:absolute;inset:2px;border-radius:inherit;overflow:hidden;transform:translateZ(2px);pointer-events:none;transition:opacity .25s}.button-shine:before{content:"";position:absolute;inset:-35%;background:radial-gradient(ellipse 44% 25% at 50% 34%,#fffef9f5,#fff5dd50 48%,transparent 78%),linear-gradient(118deg,transparent 27%,#ffffff45 42%,#ffffffe0 49%,#fff7e15c 55%,transparent 69%);filter:blur(1.2px);opacity:.48;transform:translate(var(--shine-x, -18%),var(--shine-y, -22%)) rotate(var(--sheen-angle, 0deg)) scale(.85);transition:transform .2s var(--ease),opacity .25s}.button-shine:after{content:"";position:absolute;inset:-70%;background:linear-gradient(110deg,transparent 40%,#fffef675 47%,#ffffffd9 49%,#f3ddb73b 53%,transparent 60%);transform:translate(-65%) rotate(-12deg);opacity:0}.is-interacting .button-shine:before{opacity:.85}.is-interacting .button-shine:after{animation:pearl-glint 1.8s var(--ease) both}.is-phone-tilting .button-shine:after{animation:none;opacity:.28;transform:translate(var(--sheen-slide, 0%)) rotate(var(--sheen-angle, 0deg));transition:transform .2s var(--ease)}@keyframes pearl-glint{0%{opacity:0;transform:translate(-65%) rotate(-12deg)}30%,65%{opacity:.75}to{opacity:0;transform:translate(65%) rotate(-12deg)}}@keyframes breathe{0%,to{transform:translate(-50%,-50%) scale(1) perspective(520px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))}50%{transform:translate(-50%,-50%) scale(1.02) perspective(520px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))}}.button-light{position:absolute;inset:1px;border-radius:inherit;background:radial-gradient(circle at 50% 44%,#fffef6db,#e6bf7326 55%,transparent 74%);filter:blur(5px);opacity:.12;transition:opacity 1.2s ease-out}.cross{--cross-scale: 1;--cross-lift: 17px;position:relative;display:block;width:61px;height:80px;margin:auto;overflow:visible;transform:translateZ(var(--cross-lift)) scale(var(--cross-scale));transition:opacity .25s,transform .28s var(--ease)}.is-interacting .cross{--cross-scale: 1.055;--cross-lift: 20px}.is-holding .cross{--cross-scale: 1.08;--cross-lift: 23px}.is-ready .cross{--cross-scale: 1.1;--cross-lift: 25px}#cross-sculpture{transform-box:view-box;transform-origin:24px 32px}.cross-reflection{opacity:.38;transform:translate(var(--cross-glint, -9px));transition:transform .2s var(--ease),opacity .24s}.is-interacting .cross-reflection,.is-holding .cross-reflection,.is-ready .cross-reflection{opacity:.85}.cross-aura{position:absolute;inset:25%;border-radius:50%;background:radial-gradient(ellipse,#e2b35466,#fff5dc44 48%,transparent 73%);filter:blur(9px);opacity:.35;transition:opacity 1s ease-out}.rotating-rim{position:absolute;inset:0;width:var(--pearl-size, 148px);height:var(--pearl-size, 148px);overflow:visible;pointer-events:none;transform-origin:center;animation:rim-turn 16s linear infinite;transition:opacity .25s}@keyframes rim-turn{to{transform:rotate(360deg)}}.water-plane{position:absolute;left:50%;top:var(--btn-center-vy, var(--btn-center-y, 230px));width:var(--pearl-size, 148px);height:var(--pearl-size, 148px);transform:translate(-50%,calc(-50% + var(--pearl-drop, 0px)))}.water-canvas{position:absolute;left:50%;top:50%;width:600px;height:600px;transform:translate(-50%,-50%);filter:blur(.45px);pointer-events:none}.has-water-canvas .water-wave,.has-water-canvas .water-plane:after{display:none}.water-wave{position:absolute;inset:0;border-radius:50%;opacity:0;background:radial-gradient(circle,transparent 62%,#c7aa7c12 64%,#a78b633b 65%,#fffffff5 66%,#f8e6bb66 67%,transparent 70%)}.water-wave:before,.water-wave:after{content:"";position:absolute;border-radius:50%}.water-wave:before{inset:3%;border:2px solid #fffdf980;filter:blur(1.2px);box-shadow:0 3px 7px #ae8c5c25,inset 0 -3px 7px #a58a6226,0 0 12px #e1c58c32}.water-wave:after{inset:8%;border:2px solid #c3a36c30;filter:blur(1px);box-shadow:inset 0 3px 4px #fffdf4d9,0 -2px 5px #fffc}.water-plane:after{content:"";position:absolute;inset:-8%;border-radius:50%;opacity:0;background:radial-gradient(circle,#c9ae7e13 42%,#c3a67a38 58%,#fffef3b3 63%,transparent 71%)}.is-water-impact .water-plane:after{animation:water-dimple 1.05s ease-out both}.is-water-impact .water-wave{animation:water-wave 2.3s cubic-bezier(.12,.4,.25,1) both}.water-wave:nth-child(2){animation-delay:.13s}.water-wave:nth-child(3){animation-delay:.29s}.water-wave:nth-child(4){animation-delay:.48s}.water-wave:nth-child(5){animation-delay:.71s}@keyframes water-wave{0%{opacity:0;transform:scale(.82);filter:blur(.2px)}9%{opacity:.9}35%{opacity:.58}75%{opacity:.16}to{opacity:0;transform:scale(3.5);filter:blur(.65px)}}@keyframes water-dimple{0%{opacity:0;transform:scale(.88)}22%{opacity:.85;transform:scale(1.02)}to{opacity:0;transform:scale(1.55)}}.progress-ring{position:absolute;left:50%;top:50%;width:var(--pearl-ring-size, 176px);height:var(--pearl-ring-size, 176px);overflow:visible;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;pointer-events:none;opacity:0;transition:opacity .18s}.progress-ring circle{fill:none;stroke-width:1.3}.progress-track{stroke:#cdb786;opacity:.22}.progress-value{stroke:url(#progress-gold);stroke-linecap:round;stroke-dasharray:var(--ring-length);stroke-dashoffset:var(--ring-length)}.progress-ring.has-comet{--cm-w: 2.2px}.progress-ring.has-comet .progress-value{display:none}.progress-ring .cm{stroke-linecap:round;stroke-dasharray:var(--L) 200;stroke-dashoffset:var(--L)}.progress-ring .ct{stroke:url(#progress-gold)}.progress-ring .ct1{--L: 34;--E: -66;stroke-width:calc(var(--cm-w) * .35);opacity:.05}.progress-ring .ct2{--L: 28;--E: -72;stroke-width:calc(var(--cm-w) * .4);opacity:.055}.progress-ring .ct3{--L: 23;--E: -77;stroke-width:calc(var(--cm-w) * .46);opacity:.06}.progress-ring .ct4{--L: 18.5;--E: -81.5;stroke-width:calc(var(--cm-w) * .52);opacity:.07}.progress-ring .ct5{--L: 14.5;--E: -85.5;stroke-width:calc(var(--cm-w) * .58);opacity:.08}.progress-ring .ct6{--L: 11;--E: -89;stroke-width:calc(var(--cm-w) * .66);opacity:.09}.progress-ring .ct7{--L: 8;--E: -92;stroke-width:calc(var(--cm-w) * .75);opacity:.1}.progress-ring .ct8{--L: 5.5;--E: -94.5;stroke-width:calc(var(--cm-w) * .84);opacity:.11}.progress-ring .ct9{--L: 3.5;--E: -96.5;stroke-width:calc(var(--cm-w) * .93);opacity:.13}.progress-ring .ct10{--L: 2;--E: -98;stroke-width:calc(var(--cm-w) * 1);opacity:.15}.progress-ring .ch{stroke:var(--gold-bright)}.progress-ring .ch1{--L: 1.1;--E: -98.9;stroke-width:calc(var(--cm-w) * 1.25);opacity:1}.progress-ring .ch2{--L: .45;--E: -99.55;stroke-width:calc(var(--cm-w) * .6);stroke:color-mix(in srgb,var(--gold-bright) 45%,white);opacity:1}.progress-ring .cg{stroke:var(--gold-bright)}.progress-ring .cg1{--L: 15;--E: -85;stroke-width:5px;opacity:.2}.progress-ring .cg2{--L: 7;--E: -93;stroke-width:7px;opacity:.3}.progress-ring .cg3{--L: 2.6;--E: -97.4;stroke-width:9px;opacity:.45}.is-holding .progress-ring .cm{stroke-dashoffset:var(--E);transition:stroke-dashoffset 1.2s linear}.is-ready .progress-ring .cm,.is-searching .progress-ring .cm,.is-locating .progress-ring .cm{stroke-dashoffset:var(--E)}.experience.is-holding,.experience.is-ready{--pearl-drop: 3px}.is-holding .magic-button,.is-ready .magic-button{--button-scale: .945;animation:none;transition-duration:.15s;transition-timing-function:var(--ease)}@media(hover:hover)and (prefers-reduced-motion:no-preference){.magic-button:hover .button-face{transform:translateY(-2px);transition:transform .22s var(--ease)}.magic-button:hover .button-face:before{box-shadow:inset 0 3px 4px #fffffffa,inset 0 -7px 14px #c7a67a30,0 1px 2px #8a6a3f33,0 10px 18px -5px #9b784545,0 26px 44px -12px #9b78453d,0 0 70px #e0c28d20}.magic-button:hover:before{transform:translate3d(0,18px,-52px);opacity:1}}.is-holding .magic-button .button-face,.is-ready .magic-button .button-face{transform:none}.is-holding .magic-button:before,.is-ready .magic-button:before{transform:translate3d(0,5px,-22px);opacity:.9;transition-duration:.15s}.is-holding .magic-button .button-face:before,.is-ready .magic-button .button-face:before{box-shadow:inset 0 5px 11px #ae8c5923,inset 0 -2px 4px #fff,0 1px 2px #8a6a3f4d,0 3px 6px -2px #9b784540,0 8px 16px -6px #9b784530,0 0 44px #e8bf732b}.is-holding .rotating-rim,.is-ready .rotating-rim{animation-play-state:paused}.is-holding .button-light,.is-ready .button-light{opacity:1}.is-holding .cross-aura,.is-ready .cross-aura{opacity:.85}.is-holding .progress-ring,.is-ready .progress-ring{opacity:1}.is-holding .progress-value{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s linear}.is-ready .progress-value{stroke-dashoffset:0}@property --button-scale{syntax: "<number>"; initial-value: 1; inherits: true;}@property --press-drop{syntax: "<length>"; initial-value: 0px; inherits: true;}@keyframes pearl-press-sink{0%{--button-scale: 1;--press-drop: 0px;animation-timing-function:cubic-bezier(.23,1,.32,1)}10%{--button-scale: .955;--press-drop: 2px;animation-timing-function:cubic-bezier(.45,0,.55,1)}to{--button-scale: .93;--press-drop: 5px}}.is-holding .magic-button{animation:pearl-press-sink 1.2s both;transition:none}.is-ready .magic-button{--button-scale: .93;--press-drop: 5px;animation:none;transition:none}.is-holding .button-face:before{transition:transform .6s var(--ease),opacity .5s var(--ease),border-radius .6s var(--ease),box-shadow 1.1s cubic-bezier(.45,0,.55,1)}@media(prefers-reduced-motion:reduce){.is-holding .magic-button,.is-ready .magic-button{animation:none;--button-scale: .95;--press-drop: 2px}.progress-ring.has-comet .cm{display:none}.progress-ring.has-comet .progress-value{display:inline}}