
.origin-ceremony{position:relative;isolation:isolate;overflow:hidden;min-height:650px;max-width:1060px;margin:22px auto;padding:40px 32px 30px;text-align:center;border:1px solid #d9b77760;border-radius:20px;background:radial-gradient(ellipse at 23% 45%,#16385399,transparent 55%),radial-gradient(ellipse at 88% 60%,#5b173973,transparent 55%),linear-gradient(130deg,#0a1424,#090e19 55%,#240f21);box-shadow:0 22px 65px #0005,inset 0 0 80px #0003}
.ceremony-border{position:absolute;inset:10px;border:1px solid #d9b77726;border-radius:13px;pointer-events:none;z-index:-1}.ceremony-border:before,.ceremony-border:after{content:'✦';position:absolute;left:50%;transform:translateX(-50%);color:#d9b777;font-size:19px;background:#101421;padding:0 18px;top:-16px}.ceremony-border:after{top:auto;bottom:-16px}
.ceremony-kicker{color:#d9b777;font-size:9px;letter-spacing:3px;margin:0 0 22px}.ceremony-title{font-size:clamp(28px,3vw,41px);margin:19px 0 10px;color:#f3dfaa}.ceremony-subtitle{color:#b5b8c5;font-size:13px;max-width:510px;margin:0 auto;line-height:1.8;min-height:44px}.ceremony-stages{display:flex;justify-content:center;gap:30px;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#7f8899}.ceremony-stages span{padding:7px 0;border-bottom:1px solid #d9b77724}.ceremony-stages .current{color:#f3dfaa;border-color:#d9b777}.ceremony-stages .complete{color:#d9b777}.ceremony-stages .complete:before{content:'✓ ';color:#d9b777}
.ceremony-altar{position:relative;width:min(340px,80vw);height:272px;margin:0 auto;display:grid;place-items:center;perspective:800px}.ceremony-halo{position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#d9b77716,transparent 65%);box-shadow:0 0 55px #27608a22}.ceremony-orbit{position:absolute;width:220px;height:220px;border:1px solid #d9b77730;border-radius:50%;transform:rotateX(55deg) rotateZ(-15deg);box-shadow:0 0 0 10px #d9b77704,0 0 0 11px #d9b77716}.ceremony-orbit:after{content:'✦';position:absolute;color:#d9b777;top:-11px;left:45%;font-size:20px}
.ceremony-hat{position:relative;border:0;background:none;padding:0;width:300px;max-width:100%;height:260px;cursor:pointer;filter:drop-shadow(0 18px 18px #0008);animation:hat-float 4s ease-in-out infinite;transition:filter .3s}.ceremony-hat img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.ceremony-hat:hover:not(:disabled){filter:drop-shadow(0 0 20px #d9b77744)}.ceremony-hat:disabled{cursor:default;opacity:1}.ceremony-hat:focus-visible{outline:1px solid #d9b777;outline-offset:0;border-radius:50%}
.ceremony-dust{position:absolute;inset:15px;pointer-events:none}.ceremony-dust i{position:absolute;left:var(--sx);top:var(--sy);width:2px;height:2px;background:#f3dfaa;border-radius:50%;box-shadow:0 0 8px #d9b777;animation:dust-drift 3s ease-in-out infinite;animation-delay:calc(var(--i)*-.21s)}
.ceremony-result{position:relative;min-height:110px;max-width:650px;margin:-5px auto 12px}.ceremony-category{font-size:9px;letter-spacing:3px;color:#d9b777;margin:0 0 8px}.ceremony-value{font-size:clamp(29px,4vw,46px);color:#f3dfaa;margin:0 0 10px;line-height:1.15}.ceremony-caption{max-width:475px;margin:auto;color:#a5afbf;font-size:12px;line-height:1.8}.ceremony-action{min-width:270px;padding:14px 25px;letter-spacing:.3px;box-shadow:0 4px 24px #d9b77715}.ceremony-note{font-size:10px;color:#9295a5;margin:18px auto 0;max-width:490px}.ceremony-summaries:empty{display:none}.ceremony-summaries{display:flex;justify-content:center;gap:25px;margin:22px auto 0}.ceremony-summaries>div{min-width:170px;border-top:1px solid #d9b77738;padding:12px}.ceremony-summaries span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:1.8px;color:#a2a9bb}.ceremony-summaries strong{display:block;font:18px Georgia;color:#f3dfaa;margin-top:5px}
.is-spinning .ceremony-hat{animation:hat-turn 1.1s cubic-bezier(.4,0,.2,1) infinite}.is-spinning .ceremony-halo{animation:halo-pulse 1s ease-in-out infinite}.is-spinning .ceremony-orbit{border-color:#d9b77799;box-shadow:0 0 35px #d9b77724}.is-spinning .ceremony-value{font-size:28px;animation:halo-pulse 1s ease-in-out infinite}.is-revealed .ceremony-value{animation:result-appear .7s cubic-bezier(.16,1,.3,1) both;text-shadow:0 0 35px #d9b77744}.is-revealed .ceremony-halo{background:radial-gradient(circle,#d9b77730,transparent 68%)}
.ceremony-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}.ceremony-confetti i{position:absolute;top:47%;left:50%;width:7px;height:11px;background:var(--color);border-radius:1px;opacity:0;animation:confetti-flight 1.8s cubic-bezier(.12,.65,.4,1) var(--lag) both}.ceremony-confetti i:nth-child(3n){width:4px;height:4px;border-radius:50%}
@keyframes hat-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-11px) rotate(3deg)}}@keyframes hat-turn{0%{transform:translateY(-5px) rotateY(0) rotate(-7deg)}50%{transform:translateY(-17px) rotateY(180deg) rotate(7deg)}100%{transform:translateY(-5px) rotateY(360deg) rotate(-7deg)}}@keyframes halo-pulse{0%,100%{opacity:.65}50%{opacity:1}}@keyframes dust-drift{0%,100%{opacity:.2;transform:translateY(6px)}50%{opacity:.9;transform:translateY(-9px)}}@keyframes result-appear{from{opacity:0;transform:translateY(17px) scale(.9);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes confetti-flight{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}65%{opacity:1;transform:translate(calc(var(--x)*.8),var(--y)) rotate(var(--turn))}100%{opacity:0;transform:translate(var(--x),250px) rotate(var(--turn))}}
@media(max-width:600px){.origin-ceremony{padding:30px 18px;min-height:620px;border-radius:12px}.ceremony-kicker{font-size:8px;letter-spacing:1.8px}.ceremony-title{margin-top:16px}.ceremony-subtitle{min-height:65px}.ceremony-altar{height:245px}.ceremony-hat{width:270px;height:245px}.ceremony-stages{gap:16px;font-size:9px}.ceremony-action{min-width:0;width:100%}.ceremony-summaries{gap:5px;flex-wrap:wrap}.ceremony-result{min-height:130px}}
@media(prefers-reduced-motion:reduce){.origin-ceremony *{animation:none!important;transition:none!important}.ceremony-confetti,.ceremony-dust{display:none}.is-revealed .ceremony-value{opacity:1;filter:none}}

/* Layered ritual: atmosphere, orbital engraving, acceleration and a restrained gold burst. */
.origin-ceremony{background:radial-gradient(ellipse at 12% 55%,#153e6590,transparent 52%),radial-gradient(ellipse at 93% 45%,#6c163c6b,transparent 50%),linear-gradient(120deg,#080f1d,#0c1020 52%,#1e0c1d);box-shadow:0 25px 90px #0007,inset 0 0 120px #0005}
.origin-ceremony:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(115deg,transparent 0 65px,#d9b77703 66px,transparent 67px 140px),radial-gradient(ellipse at 50% 53%,#d9b7770b,transparent 55%)}
.origin-ceremony:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;box-shadow:inset 0 0 70px #02050a70}
.ceremony-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.85}
.ceremony-kicker,.ceremony-stages,.ceremony-title,.ceremony-subtitle,.ceremony-result,.ceremony-action,.ceremony-note,.ceremony-summaries{position:relative;z-index:2}
.ceremony-altar{height:310px;margin-top:0;margin-bottom:0;z-index:2;transform-style:preserve-3d}
.ceremony-hat{z-index:3;transform-origin:50% 69%;animation:hat-levitate 5s ease-in-out infinite;filter:drop-shadow(-11px 8px 18px #255d8644) drop-shadow(13px 12px 20px #6e1e4044) drop-shadow(0 15px 10px #0007)}
.ceremony-halo{width:290px;height:290px;background:radial-gradient(circle,#f3dfaa0d,#285a8820 36%,transparent 69%);transition:background 1s,box-shadow 1s}
.ceremony-seal{position:absolute;inset:10px;display:grid;place-items:center;pointer-events:none;opacity:.7;mask-image:radial-gradient(circle,#000 45%,#0009 70%,transparent 75%)}
.ceremony-seal i{position:absolute;display:block;border-radius:50%;border:1px solid #d9b77750;width:275px;height:275px;animation:seal-orbit 42s linear infinite}
.ceremony-seal .seal-outer{outline:1px solid #d9b7771a;outline-offset:8px;border-style:dashed;border-width:1px;box-shadow:0 0 0 5px #d9b77704}
.ceremony-seal .seal-middle{width:235px;height:235px;border:3px double #d9b77746;animation-direction:reverse;animation-duration:32s}
.ceremony-seal .seal-inner{width:218px;height:218px;border:1px dotted #d9b7775c;animation-duration:24s;transform:rotateX(25deg)}
.ceremony-seal .seal-cross{width:180px;height:180px;border-radius:16%;transform:rotate(45deg);border-color:#d9b7771f;animation-duration:60s}
.ceremony-seal .seal-outer:before,.ceremony-seal .seal-outer:after,.ceremony-seal .seal-middle:before,.ceremony-seal .seal-middle:after{content:'✧';position:absolute;left:50%;top:-12px;color:#f3dfaa;font:21px Georgia;text-shadow:0 0 14px #d9b77780;transform:translateX(-50%);background:#0d1323}
.ceremony-seal .seal-outer:after,.ceremony-seal .seal-middle:after{top:auto;bottom:-12px}.ceremony-seal .seal-middle:before{content:'✦';font-size:14px;top:-9px}.ceremony-seal .seal-middle:after{content:'✦';font-size:14px;bottom:-9px}
.ceremony-beams{position:absolute;inset:-35px -65px;opacity:.16;filter:blur(7px);pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 53%,transparent 0deg 18deg,#d9b77728 20deg,transparent 24deg 45deg);mask-image:radial-gradient(ellipse,#000 5%,transparent 65%);animation:seal-orbit 65s linear infinite}
.ceremony-flash{position:absolute;inset:15px;pointer-events:none;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff3cfaa 0,#f3dfaa40 20%,#d9b77711 45%,transparent 68%);z-index:4}
.ceremony-result:before,.ceremony-result:after{content:'';position:absolute;top:3px;width:65px;height:1px;background:linear-gradient(90deg,transparent,#d9b77760);left:calc(50% - 205px)}.ceremony-result:after{left:auto;right:calc(50% - 205px);transform:scaleX(-1)}
.ceremony-action{position:relative;overflow:hidden;border-color:#f3dfaa99;background:linear-gradient(110deg,#b89455,#f0d59c 45%,#d9b777 68%,#b89455)!important;box-shadow:0 5px 0 #5e4627,0 10px 30px #0004,inset 0 1px #fff3}.ceremony-action:after{content:'';position:absolute;inset:0;transform:translateX(-140%) skewX(-25deg);background:linear-gradient(90deg,transparent,#fff6,transparent);animation:button-glimmer 6s ease-in-out infinite}.ceremony-action:disabled:after{animation:none}
.ceremony-stages .complete{animation:stage-complete .7s ease both}.ceremony-summaries>div{animation:result-appear .8s ease both}.ceremony-summaries>div+div{animation-delay:.12s}
.is-spinning .ceremony-hat{animation:hat-invocation 4.6s cubic-bezier(.4,0,.2,1) both,hat-await 1.2s ease-in-out 4.6s infinite}
.is-spinning .ceremony-seal{opacity:1;transition:opacity .6s}.is-spinning .ceremony-seal i{animation-duration:5s;border-color:#f3dfaa80}.is-spinning .ceremony-seal .seal-middle{animation-duration:3.8s}.is-spinning .ceremony-beams{opacity:.65;animation-duration:12s;transition:opacity 1s}.is-spinning .ceremony-orbit{animation:altar-gather 1.4s ease-in-out infinite}.is-spinning .ceremony-result{animation:waiting-breathe 1.8s ease-in-out infinite}
.is-revealed .ceremony-flash{animation:reveal-flash 1.4s cubic-bezier(.16,1,.3,1) both}.is-revealed .ceremony-orbit{animation:reveal-shockwave 1.6s ease-out both}.is-revealed .ceremony-seal{animation:seal-awaken 1.8s ease-out both}.is-revealed .ceremony-value{animation:grand-reveal 1.1s cubic-bezier(.16,1,.3,1) both;background:linear-gradient(100deg,#b89251,#fff0bf 38%,#f3dfaa 60%,#b89251);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:0 0 45px #d9b77720}.is-revealed .ceremony-category{animation:result-appear .65s ease both}.is-revealed .ceremony-caption{animation:result-appear 1s .15s both}.is-revealed .ceremony-action{animation:result-appear .8s .35s both}
@keyframes hat-levitate{0%,100%{transform:translate3d(0,3px,0) rotate(-4deg)}50%{transform:translate3d(0,-13px,15px) rotate(3deg)}}
@keyframes hat-invocation{0%{transform:translateY(0) rotateY(0) rotate(-4deg)}14%{transform:translateY(-21px) rotateY(-30deg) rotate(6deg) scale(1.04)}30%{transform:translateY(-26px) rotateY(180deg) rotate(-5deg) scale(1.07)}50%{transform:translateY(-20px) rotateY(720deg) rotate(6deg) scale(1.06)}72%{transform:translateY(-28px) rotateY(1440deg) rotate(-5deg) scale(1.08)}88%{transform:translateY(-13px) rotateY(1788deg) rotate(4deg) scale(1.02)}100%{transform:translateY(-6px) rotateY(1800deg) rotate(0deg) scale(1)}}
@keyframes hat-await{0%,100%{transform:translateY(-6px) rotate(-2deg)}50%{transform:translateY(-13px) rotate(2deg)}}
@keyframes seal-orbit{to{rotate:360deg}}@keyframes button-glimmer{0%,65%{transform:translateX(-140%) skewX(-25deg)}90%,100%{transform:translateX(140%) skewX(-25deg)}}@keyframes waiting-breathe{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes reveal-flash{0%{opacity:0;transform:scale(.2)}15%{opacity:.8}100%{opacity:0;transform:scale(2)}}@keyframes reveal-shockwave{0%{opacity:1;transform:rotateX(55deg) scale(.8);border-color:#fff0bf}100%{opacity:0;transform:rotateX(55deg) scale(2.7);border-color:#d9b77700}}@keyframes seal-awaken{0%{opacity:1;filter:brightness(2)}100%{opacity:.7;filter:brightness(1)}}@keyframes grand-reveal{0%{opacity:0;transform:translateY(22px) scale(.87);filter:blur(9px);letter-spacing:5px}100%{opacity:1;transform:none;filter:blur(0);letter-spacing:normal}}@keyframes stage-complete{0%{text-shadow:0 0 18px #f3dfaa}100%{text-shadow:none}}@keyframes altar-gather{0%,100%{box-shadow:0 0 20px #d9b77720}50%{box-shadow:0 0 50px #d9b77750}}
@media(max-width:600px){.ceremony-altar{height:285px}.ceremony-seal{inset:0}.ceremony-seal i{width:245px;height:245px}.ceremony-seal .seal-middle{width:210px;height:210px}.ceremony-seal .seal-inner{width:193px;height:193px}.ceremony-seal .seal-cross{width:165px;height:165px}.ceremony-beams{inset:-10px -10px}.ceremony-result:before,.ceremony-result:after{display:none}}
@media(prefers-reduced-motion:reduce){.origin-ceremony *,.origin-ceremony:before,.origin-ceremony:after{animation:none!important;transition:none!important}.ceremony-field,.ceremony-beams,.ceremony-flash{display:none}.is-revealed .ceremony-value{color:#f3dfaa;background:none;opacity:1;filter:none;letter-spacing:normal}.ceremony-orbit{opacity:.5}}

.ceremony-sound{position:absolute;top:18px;right:22px;z-index:6;padding:5px 9px;border:1px solid #d9b77738;border-radius:20px;background:#0a1424a6;color:#d9b777;font-size:10px;cursor:pointer}.ceremony-sound:hover{border-color:#d9b77799;background:#172439}.ceremony-sound[aria-pressed="false"]{color:#a4acba}.ceremony-kicker{padding:14px 0 0}@media(max-width:600px){.ceremony-sound{top:18px;right:18px}.ceremony-kicker{padding-top:29px}}
