.bj-cap{--cap-a:#6f8bff;--cap-b:#b56cff;--cap-glow:#8fb1ff}.bj-cap[data-theme=NEBULA]{--cap-a:#ff7ad9;--cap-b:#9b5cff;--cap-glow:#ffb3ec}.bj-cap[data-theme=AURORA]{--cap-a:#3dffc8;--cap-b:#3d8bff;--cap-glow:#9dffe3}.bj-cap[data-theme=SATURN]{--cap-a:#ffd84d;--cap-b:#ff8a3d;--cap-glow:#ffe9a3}.bj-cap[data-theme=MOON]{--cap-a:#e6ecff;--cap-b:#8090cf;--cap-glow:#fff}.bj-cap-sky{border:1px solid color-mix(in srgb, var(--cap-a) 45%, transparent);background:radial-gradient(1.5px 1.5px at 12% 18%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 78% 12%, #fff 60%, transparent 61%), radial-gradient(1.5px 1.5px at 88% 64%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 24% 78%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 52% 34%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 64% 88%, #fff 60%, transparent 61%), radial-gradient(120% 80% at 15% 0%, color-mix(in srgb, var(--cap-a) 32%, transparent), transparent 60%), radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--cap-b) 34%, transparent), transparent 62%), var(--bj-card);box-shadow:0 0 40px color-mix(in srgb, var(--cap-glow) 18%, transparent);border-radius:1.5rem;position:relative;overflow:hidden}.bj-cap-pod{width:112px;height:168px;filter:drop-shadow(0 0 18px color-mix(in srgb, var(--cap-glow) 55%, transparent));margin:0 auto;position:relative}.bj-cap-half{background:linear-gradient(135deg, color-mix(in srgb, var(--cap-a) 90%, white 10%), var(--cap-b));width:100%;height:50%;position:absolute;left:0}.bj-cap-half:after{content:"";background:#ffffff59;border-radius:999px;width:18%;height:56%;position:absolute;top:14%;left:16%}.bj-cap-top{transform-origin:20% 100%;border-radius:56px 56px 10px 10px;top:0}.bj-cap-bottom{background:linear-gradient(135deg, var(--cap-b), color-mix(in srgb, var(--cap-b) 70%, black 30%));border-radius:10px 10px 56px 56px;bottom:0}.bj-cap-bottom:after{height:40%;top:10%}.bj-cap-seam{background:var(--cap-glow);height:6px;box-shadow:0 0 14px var(--cap-glow), 0 0 28px var(--cap-glow);border-radius:999px;animation:2.4s ease-in-out infinite bj-cap-seam;position:absolute;top:calc(50% - 3px);left:-4px;right:-4px}.bj-cap-sticker{font-size:2.1rem;line-height:1;position:absolute;bottom:18%;left:50%;transform:translate(-50%)}.bj-cap-lock{font-size:1.5rem;line-height:1;position:absolute;top:calc(50% - 15px);left:50%;transform:translate(-50%)}@keyframes bj-cap-seam{0%,to{opacity:.65}50%{opacity:1}}.bj-cap-dots span{animation:1.4s infinite bj-cap-dot;display:inline-block}.bj-cap-dots span:nth-child(2){animation-delay:.2s}.bj-cap-dots span:nth-child(3){animation-delay:.4s}@keyframes bj-cap-dot{0%,60%,to{opacity:.25}30%{opacity:1}}.bj-cap-count{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;display:grid}.bj-cap-count>div{border:1px solid color-mix(in srgb, var(--cap-a) 30%, transparent);text-align:center;background:#00000047;border-radius:1rem;padding:.6rem .25rem}.bj-cap-opening .bj-cap-pod{animation:.7s ease-in-out both bj-cap-shake}.bj-cap-opening .bj-cap-top{animation:1s cubic-bezier(.3,.7,.4,1) .7s forwards bj-cap-lid}.bj-cap-opening .bj-cap-seam{animation:.7s ease-in both bj-cap-flash}.bj-cap-burst{background:radial-gradient(circle, #fff 0%, var(--cap-glow) 35%, transparent 70%);opacity:0;pointer-events:none;border-radius:50%;width:60px;height:60px;margin:-30px 0 0 -30px;position:absolute;top:50%;left:50%}.bj-cap-opening .bj-cap-burst{animation:1.3s ease-out .75s forwards bj-cap-burst}@keyframes bj-cap-shake{0%,to{transform:rotate(0)}15%{transform:rotate(-6deg)}30%{transform:rotate(6deg)}45%{transform:rotate(-5deg)}60%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}}@keyframes bj-cap-lid{to{opacity:0;transform:translate(-30px,-90px)rotate(-38deg)}}@keyframes bj-cap-flash{to{box-shadow:0 0 30px #fff, 0 0 60px var(--cap-glow)}}@keyframes bj-cap-burst{0%{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(9)}}.bj-cap-paper{border:1px solid color-mix(in srgb, var(--cap-a) 50%, transparent);background:linear-gradient(180deg, color-mix(in srgb, var(--cap-a) 10%, transparent), transparent 40%), repeating-linear-gradient(180deg, transparent 0 calc(1.9em - 1px), #ffffff0f calc(1.9em - 1px) 1.9em), var(--bj-card-2);box-shadow:0 0 36px color-mix(in srgb, var(--cap-glow) 22%, transparent);border-radius:1.5rem}.bj-cap-rise{animation:.9s ease-out both bj-cap-rise}@keyframes bj-cap-rise{0%{opacity:0;transform:translateY(24px)scale(.98)}to{opacity:1;transform:none}}.bj-cap-swatch{background:linear-gradient(135deg, var(--cap-a), var(--cap-b));width:2.75rem;height:2.75rem;box-shadow:0 0 14px color-mix(in srgb, var(--cap-glow) 45%, transparent);border-radius:999px;justify-content:center;align-items:center;font-size:1.3rem;display:flex}.bj-cap-sealing .bj-cap-top{animation:.9s cubic-bezier(.3,.7,.4,1) both bj-cap-close}@keyframes bj-cap-close{0%{opacity:.2;transform:translate(-24px,-70px)rotate(-30deg)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.bj-cap-seam,.bj-cap-dots span,.bj-cap-opening .bj-cap-pod,.bj-cap-opening .bj-cap-top,.bj-cap-opening .bj-cap-seam,.bj-cap-opening .bj-cap-burst,.bj-cap-sealing .bj-cap-top,.bj-cap-rise{animation:none!important}.bj-cap-opening .bj-cap-top{opacity:0}}
