/* Only mount after a confirmed user action. JS owns lifetime and cleanup. */
.product-celebration { position: fixed; z-index: 110; top: max(20px,env(safe-area-inset-top)); left: 50%; display: flex; align-items: center; gap: 12px; width: min(420px,calc(100vw - 32px)); padding: 16px; border: 1px solid #dfd0ed; border-radius: 18px; background: #fff; color: #292332; box-shadow: 0 12px 40px #37214c24; transform: translateX(-50%); isolation: isolate; }
.product-celebration__icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: #f0eafa; color: #7138be; }
.product-celebration__icon svg { width: 24px; height: 24px; }
.product-celebration__copy { min-width: 0; flex: 1; }
.product-celebration__copy strong { display: block; color: #292332; font-size: 15px; line-height: 1.4; }
.product-celebration__copy p { margin: 4px 0 0; color: #646070; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.product-celebration__dismiss { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #646070; }
.product-celebration__dismiss:focus-visible { outline: 3px solid #7138be; outline-offset: 2px; }
.product-celebration__dismiss svg { width: 18px; height: 18px; }
.product-celebration__halo { display: none; pointer-events: none; }
body:not([data-motion=quiet]) .product-celebration { animation: product-celebration-arrive .3s ease-out both; }
body[data-motion=vivid] .product-celebration { border-color: #c9a6ea; box-shadow: 0 14px 48px #7138be30; }
body[data-motion=vivid] .product-celebration__icon { animation: product-celebration-glow 2.4s ease-in-out 2; }
body[data-motion=vivid] .product-celebration__halo { position: absolute; z-index: -1; inset: -18px; display: block; border-radius: 32px; background: radial-gradient(ellipse,#ad78dd36,transparent 70%); animation: product-celebration-bloom 2.4s ease-in-out 2; }
body[data-motion=vivid] .product-celebration__halo:before { position: absolute; top: 14px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #b486dc; content: ''; box-shadow: -130px 8px #b486dc,-90px -8px #e4b356,-40px -4px #c395e3,45px -9px #e4b356,96px -2px #b486dc,130px 14px #e4b356; animation: product-celebration-sparks 2.4s ease-out 2; }
body[data-motion=vivid] .product-celebration:before,
body[data-motion=vivid] .product-celebration:after { position: absolute; z-index: -1; inset: -5px; border: 1px solid #b388d75c; border-radius: 22px; content: ''; pointer-events: none; animation: product-celebration-ring 2.4s ease-out 2; }
body[data-motion=vivid] .product-celebration:after { animation-delay: .6s; }
@keyframes product-celebration-arrive { from { opacity: 0; transform: translate(-50%,-12px); } to { opacity: 1; transform: translate(-50%,0); } }
@keyframes product-celebration-glow { 0%,100% { box-shadow: 0 0 0 0 #b78bd500; } 50% { box-shadow: 0 0 26px 5px #b78bd54d; } }
@keyframes product-celebration-ring { from { opacity: .7; transform: scale(.98); } to { opacity: 0; transform: scale(1.12); } }
@keyframes product-celebration-bloom { 0%,100% { opacity: .2; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes product-celebration-sparks { from { opacity: 0; transform: translateY(12px) scale(.8); } 25% { opacity: 1; } to { opacity: 0; transform: translateY(-14px) scale(1.15); } }
body[data-motion=quiet] .product-celebration,
body[data-motion=quiet] .product-celebration * { animation: none!important; transition: none!important; }
body[data-motion=quiet] .product-celebration:before,
body[data-motion=quiet] .product-celebration:after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .product-celebration,.product-celebration * { animation: none!important; transition: none!important; }
  .product-celebration:before,.product-celebration:after,.product-celebration__halo { display: none!important; }
}

.pingora-dialog > .product-celebration{position:sticky;top:0;left:auto;width:100%;max-width:100%;transform:none;margin:0 0 16px;z-index:2}
