/* Foil wrappers: separate front, gusset, sealed tab and emerging paper. */
#ritual-stage.foil-scene{display:flex;align-items:flex-end;justify-content:center;gap:30px;height:330px;max-width:540px;width:100%;margin:12px auto 24px;padding:70px 25px 26px;perspective:850px;overflow:visible;background:radial-gradient(ellipse at 50% 80%,#e8dff780,transparent 65%);isolation:isolate}
#ritual-stage.foil-scene[data-step='1']{touch-action:none}
.foil-packet{position:relative;width:90px;height:215px;flex:0 1 90px;min-width:0;perspective:650px;transform:rotate(var(--packet-tilt));animation:foil-arrive .48s both;animation-delay:var(--packet-delay)}
.foil-form{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(5deg);transition:transform .35s}
.foil-shadow{position:absolute;left:0;right:-12px;bottom:-12px;height:16px;border-radius:50%;background:#42577c30;filter:blur(6px);transform:skewX(-18deg)}
.foil-face{position:absolute;inset:0;border:1.8px solid #138fba;border-radius:5px 6px 8px 7px;background:linear-gradient(96deg,#c4b55c,#fff5a2 11%,#ffffd0 17%,#fff388 27%,#ffeb78 54%,#fff8bb 74%,#d8c159 93%,#aa944b);box-shadow:inset 3px 0 3px #fff9,inset -4px 0 5px #74663944,4px 8px 11px #42557928;transform:translateZ(9px);overflow:hidden;transform-origin:50% 95%}
.foil-back{position:absolute;inset:1px -5px 1px 2px;border:1.5px solid #218db0;border-radius:6px;background:linear-gradient(90deg,#aaa685,#f3e7a7,#c4b071);transform:translateZ(-5px)}
.foil-side{position:absolute;right:-7px;top:5px;bottom:5px;width:17px;border:1px solid #2389a9;border-radius:50% 25% 30% 40%;background:linear-gradient(90deg,#efdfa0,#ad9751 45%,#f9f0bd);transform:rotateY(66deg);transform-origin:left}
.foil-crimp,.foil-bottom{position:absolute;left:0;right:0;height:18px;border-bottom:1px dashed #188bb48c;background:repeating-linear-gradient(90deg,#fff8 0 1px,#e6cc7199 1px 3px);box-shadow:inset 0 3px 2px #fff8}
.foil-bottom{bottom:0;border-top:1px solid #168ba770;border-bottom:0;height:22px;background:repeating-linear-gradient(90deg,#fff5b7 0 1px,#d1ba72 1px 3px)}
.foil-art{position:absolute;inset:38px 8px 32px;text-align:center;border-block:1px solid #fff8;color:#128fb6;background:linear-gradient(100deg,#fff7,transparent 35%,#fff7);display:flex;align-items:center;flex-direction:column;justify-content:center;gap:12px}
.foil-art b{display:grid;place-content:center;width:48px;height:43px;font-size:35px;line-height:1;border:1.5px solid #149ac4;border-radius:45% 45% 42% 42%;background:#fffef6e6;font-weight:500;box-shadow:1px 2px #96956a30}
.foil-art span{font-size:10px;font-weight:650;letter-spacing:.03em;white-space:nowrap}.foil-art small{font-size:8px;writing-mode:vertical-rl;letter-spacing:2px;height:51px}
.foil-crease{position:absolute;inset:25px 0 20px;background:conic-gradient(from 70deg at 20% 85%,transparent,#8c75502a 5deg,transparent 14deg),conic-gradient(from 245deg at 80% 80%,transparent,#fff9 4deg,transparent 17deg);opacity:.65}
.foil-cap{position:absolute;left:-1px;right:-1px;top:-4px;height:26px;border:1.5px solid #1698bc;border-bottom:1.5px dashed #178baa;border-radius:4px 4px 1px 1px;background:repeating-linear-gradient(90deg,#ffffff60 0 1px,transparent 1px 3px),linear-gradient(95deg,#d99fb7,#ffdae9 20%,#fff4f8 34%,#ffc6e1 64%,#ad6f93);transform:translateZ(12px);transform-style:preserve-3d;transform-origin:0 90%;box-shadow:0 2px 2px #738d9633;z-index:5}
.foil-cap span{position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(90deg,#fff9 0 1px,transparent 1px 3px),linear-gradient(90deg,#9db6c1,#f8ffff 28%,#acbdc8 62%,#e5edf0);backface-visibility:hidden;transform:rotateX(180deg)}
.foil-mouth{position:absolute;left:4px;right:3px;top:0;height:10px;border:2px solid #8ab4bf;border-radius:50%;background:linear-gradient(#354757,#91b1b7);box-shadow:0 2px #edfcff;transform:translateZ(8px) rotateX(22deg);opacity:0}
.foil-paper{position:absolute;inset:18px 10px auto;height:125px;border:1px solid #c1b0b9;background:linear-gradient(90deg,#eee4dc,#fffef5 12%,#fffef5 88%,#e5daca);border-radius:4px;transform:translateZ(0);text-align:center;color:#8e73b6;box-shadow:0 4px 6px #51608024;opacity:0}
.foil-paper i{display:block;font-style:normal;font-size:30px;margin-top:20px}.foil-paper em{display:block;font-style:normal;font-size:10px;writing-mode:vertical-rl;margin:6px auto}
.foil-open .foil-mouth{opacity:1}.foil-open .foil-cap{transform:translate3d(72px,-28px,28px) rotateZ(32deg) rotateX(-165deg);opacity:.9}
.foil-open .foil-face{border-radius:2px 5px 8px 7px}
.foil-scene[data-action=tear] .foil-form{animation:foil-tug .95s both;animation-delay:var(--packet-delay)}
.foil-scene[data-action=tear] .foil-cap{animation:foil-rip .85s cubic-bezier(.35,.05,.2,1) both;animation-delay:var(--packet-delay)}
.foil-scene[data-action=tear] .foil-mouth{animation:foil-mouth-open .85s both;animation-delay:var(--packet-delay)}
.foil-scene[data-action=squeeze] .foil-face{animation:foil-squeeze .88s both}.foil-scene[data-action=squeeze] .foil-side{animation:foil-gusset .88s both}.foil-scene[data-action=squeeze] .foil-crease{opacity:1}.foil-scene[data-action=squeeze] .foil-paper{animation:foil-paper-rise .88s both}.foil-scene[data-action=squeeze] .foil-form{animation:foil-press .88s both}
@keyframes foil-arrive{from{opacity:0;transform:translateY(28px) rotate(var(--packet-tilt)) scale(.9)}to{opacity:1;transform:rotate(var(--packet-tilt))}}
@keyframes foil-rip{0%,12%{transform:translateZ(12px)}28%{transform:translate3d(4px,-2px,16px) rotateZ(-5deg) rotateX(-28deg)}50%{transform:translate3d(25px,-13px,24px) rotateZ(9deg) rotateX(-105deg)}75%{transform:translate3d(80px,-38px,36px) rotateZ(37deg) rotateX(-188deg)}100%{transform:translate3d(72px,-28px,28px) rotateZ(32deg) rotateX(-165deg)}}
@keyframes foil-tug{0%,100%{transform:rotateY(-18deg) rotateX(5deg)}25%{transform:rotateY(-29deg) rotateX(11deg) translateX(-4px)}55%{transform:rotateY(-7deg) rotateX(-5deg) translateX(-8px)}75%{transform:rotateY(-22deg) rotateX(7deg)}}
@keyframes foil-mouth-open{0%,40%{opacity:0}70%,100%{opacity:1}}
@keyframes foil-squeeze{0%{transform:translateZ(9px) scale(1,1)}30%{transform:translateZ(6px) scale(.86,.94)}60%{transform:translateZ(4px) scale(.72,.84);border-radius:16px 12px 9px 9px}100%{transform:translateZ(3px) scale(.76,.78);border-radius:16px 12px 9px 9px}}
@keyframes foil-gusset{to{transform:rotateY(84deg) scaleY(.78)}}
@keyframes foil-paper-rise{0%{opacity:0;transform:translate3d(0,0,0)}15%{opacity:1}55%{opacity:1;transform:translate3d(0,-65px,0) rotateX(-10deg)}100%{opacity:1;transform:translate3d(0,-125px,0) rotateX(4deg)}}
@keyframes foil-press{50%{transform:rotateY(-6deg) rotateX(12deg) translateY(4px)}100%{transform:rotateY(-14deg) rotateX(6deg)}}
/* True perspective is kept through the vessel, its reflections and contents. */
#jar-picker{perspective:1100px;padding-top:14px;overflow:visible}.glass-jar{width:min(92%,405px);transform:rotateX(-5deg) rotateY(-11deg);transform-style:preserve-3d;border:2px solid #5399b0a6;border-bottom:12px solid #669bb8a6;border-radius:72px 72px 95px 95px;background:linear-gradient(95deg,#6bb8cd66,#d9f8fa99 5%,#faffffdd 10%,#fff2 18%,#a3dee322 43%,#e4ffff44 75%,#639bbd66 97%),radial-gradient(ellipse at 50% 95%,#80bbd777,transparent 55%);box-shadow:inset 8px 0 7px #fff,inset -12px 0 8px #47799c44,inset 0 -20px 7px #d0f2f7,18px 20px 22px #59698324,1px 32px 14px -16px #535f9460}
.glass-jar:before{inset:7px 6px 10px;border:2px solid #ffffffb0;background:linear-gradient(101deg,transparent 6%,#fffd 7%,#fff6 10%,transparent 14%,transparent 77%,#ffffff99 84%,#fff2 88%,transparent 90%);box-shadow:inset -3px 0 3px #4591b24d;transform:translateZ(20px)}
.glass-jar:after{height:34px;bottom:0;background:radial-gradient(ellipse,#f0fcff66 40%,#7da9c6a6 80%,#fcffff);border:2px solid #6496b980;box-shadow:0 3px 0 #ecffff,inset 0 -6px 2px #9bc7dbaa;transform:translateZ(6px)}
.glass-jar .jar-rim{left:7%;width:86%;height:58px;top:-25px;border:5px solid #a2cdd8;border-bottom:7px solid #6b9aba;background:radial-gradient(ellipse,#53759099 15%,#bedee399 58%,#f6ffff 64%,#88b5c6 71%,#edffff 78%);box-shadow:inset 0 4px 2px #4d75887a,0 -2px 0 #fcffff,0 7px 0 #c6e5ee,0 10px 2px #386d924d;transform:translateZ(12px)}
.glass-jar .jar-rim:after{content:'';position:absolute;left:-5px;right:-5px;top:18px;height:30px;border-radius:0 0 50% 50%;border:2px solid #9ec8d3;border-top:0;background:linear-gradient(90deg,#afd5e288,#fff7 17%,#99bcc433 64%,#6e9eba77);z-index:-1}
.glass-jar .glass-shine{width:14px;left:4%;top:65px;height:56%;background:linear-gradient(#fff5,#ffff 20%,#fff9 80%,transparent);transform:translateZ(24px);box-shadow:5px 0 7px #fff8}
.glass-jar .jar-label{box-shadow:inset 4px 0 6px #fff8,inset -4px 0 7px #c07eac44,2px 6px 7px #51678b28;transform:translateZ(26px) rotate(-3deg)}
.glass-jar.resting{transform:translateY(8px) rotateX(-5deg) rotateY(-11deg) scale(.93)}
.glass-jar.resting .jar-rim{background:radial-gradient(ellipse at 38% 30%,#ffe9f4,#ffc1e2 62%,#d994bd);border-color:#d891b6;border-top-color:#ffe7f3;border-bottom-color:#bb739f;box-shadow:inset 0 2px 2px #fff,0 8px 0 #bf87af,0 11px 1px #f5cae8}
.glass-jar .jar-strip{background:linear-gradient(100deg,#d4bb58,#fffcbd 22%,#fff08c 64%,#b39743);border-color:#248caf;border-width:1.5px;box-shadow:3px 4px 4px #35516b50,inset 2px 0 1px #fff9}
.glass-jar.shaking{animation:glass-tumble .7s ease-in-out}.glass-jar.shaking:before{animation:glass-reflection .7s ease-in-out}
@keyframes glass-tumble{0%,100%{transform:rotateX(-5deg) rotateY(-11deg)}20%{transform:translateX(-12px) rotateZ(-7deg) rotateY(-23deg) rotateX(1deg)}45%{transform:translateX(13px) rotateZ(7deg) rotateY(9deg) rotateX(-10deg)}68%{transform:translateX(-7px) rotateZ(-4deg) rotateY(-18deg)}85%{transform:rotateZ(2deg) rotateY(-5deg)}}
@keyframes glass-reflection{40%{opacity:.6;transform:translateX(4px) translateZ(20px)}80%{opacity:1;transform:translateX(-3px) translateZ(20px)}}
#treat-progress.selected-tray{gap:8px;margin:12px 0}#treat-progress.selected-tray span{width:auto;min-height:0;border:1px solid #d4bedc;border-radius:14px;padding:4px 10px;font-size:12px;background:#fff8ef;box-shadow:none;white-space:normal}#treat-progress.selected-tray span:before{display:none}
@media(max-width:600px){#ritual-stage.foil-scene{gap:17px;padding:70px 12px 26px;height:320px}.foil-packet{flex-basis:74px;height:200px}.foil-art{inset-inline:5px}.foil-art span{font-size:8px}.foil-art small{font-size:7px}.foil-art b{width:39px;height:36px;font-size:29px}.foil-open .foil-cap{transform:translate3d(43px,-24px,20px) rotateZ(32deg) rotateX(-165deg)}}
@media(prefers-reduced-motion:reduce){.foil-packet,.foil-scene *,.glass-jar,.glass-jar *{animation:none!important;transition:none!important}.foil-scene[data-action=squeeze] .foil-paper{opacity:1;transform:translateY(-85px)}.foil-scene[data-action=tear] .foil-cap{opacity:0}}
.foil-waiting .foil-packet{transform:translateY(26px) scale(.72) rotate(var(--packet-tilt));animation:none;transition:transform .4s}.foil-waiting .foil-shadow{opacity:.5}
@media(max-width:600px){#ritual-stage.foil-scene[data-foil-count="4"]{flex-wrap:wrap;align-content:center;gap:40px 45px;height:580px;padding-top:70px}.foil-scene[data-foil-count="4"] .foil-packet{flex:0 0 78px}}