/* Simple soft sticker bag, following the supplied designbyaron / Eddy motion reference. */
.opening-screen .packet-open{position:absolute;left:50%;top:50%;width:250px;height:366px;transform:translate(-50%,-50%);z-index:12;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.packet-open:focus-visible{outline:2px solid var(--pink);outline-offset:7px}
.packet-surface{position:absolute;inset:0;transform-style:preserve-3d;transform:translateY(var(--pack-hover-y,0px)) rotateX(var(--pack-rx,0deg)) rotateY(var(--pack-ry,0deg)) rotateZ(var(--pack-rz,0deg)) scale(var(--pack-hover-scale,1)) scale(var(--pack-press,1));transition:transform .48s cubic-bezier(.17,1.5,.35,1);will-change:transform}
.pack-back{position:absolute;inset:0;background:var(--blue);border-top:12px solid #F4F5F044;border-bottom:9px solid #F4F5F022;transform:rotateY(180deg) translateZ(1px);backface-visibility:hidden;clip-path:polygon(0 1%,3% 0,6% 1%,9% 0,12% 1%,88% 1%,91% 0,94% 1%,97% 0,100% 1%,100% 99%,97% 100%,94% 99%,6% 99%,3% 100%,0 99%)}
.packet-surface .packet,.packet-surface .tear-strip{backface-visibility:hidden;transform:translateZ(1px)}
.is-ready .packet-wrap{animation:packIdle var(--m-pack-idle,4.4s) ease-in-out infinite}.is-hovering .packet-wrap{animation-play-state:paused}
.pack-gaze{display:flex;gap:12px;transform-origin:center;animation:packBlink var(--m-pack-blink,3.6s) linear infinite}.is-opening .pack-gaze{animation:none}
.is-hovering .pack-gaze{animation-duration:calc(var(--m-pack-blink,3.6s)*.72)}
@keyframes packIdle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes packBlink{0%,47%,53%,100%{transform:scaleY(1)}49%,51%{transform:scaleY(.1)}}
@media(max-width:760px){.opening-screen .packet-open{width:228px;height:334px}.pack-gaze{gap:10px}}
.opening-screen{grid-template-rows:76px minmax(0,1fr) 88px;background:var(--paper)}
.opening-screen .visual-column{overflow:hidden;position:relative;display:grid;place-items:center}
.opening-screen .stage{position:absolute;left:50%;top:50%;width:1120px;max-width:none;height:650px;margin:-325px 0 0 -560px;transform:scale(var(--scene-scale,1));transform-origin:center;perspective:1300px;outline:none;isolation:isolate}
.opening-screen .packet-wrap{position:absolute;left:50%;top:50%;width:230px;height:350px;margin:-175px 0 0 -115px;transform:rotate(-3deg);transition:none;z-index:5;will-change:transform,opacity}
.opening-screen .packet{position:absolute;inset:24px 0 0;background:transparent;color:var(--paper);clip-path:none;box-shadow:none;transform-style:flat;transform-origin:50% 10%}
.opening-screen .packet:before,.opening-screen .packet:after{display:none}
.pack-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:none;pointer-events:none}.bag-silhouette{fill:var(--blue)}.bag-fold-left{fill:var(--paper);opacity:.16}.bag-fold-right{fill:var(--ink);opacity:.08}.bag-seal{fill:var(--ink);opacity:.06}
.opening-screen .pack-brand{position:absolute;left:20px;top:24px;margin:0;display:block}.opening-screen .pack-brand img{display:block;width:82px;height:auto;object-fit:contain}
.pack-eyes{position:absolute;top:41%;left:50%;display:flex;gap:12px;transform:translateX(-50%) translate(var(--gaze-x,0px),var(--gaze-y,0px));transition:transform .16s ease-out;transform-origin:center}.pack-eyes span{display:block;width:11px;height:37px;border-radius:8px;background:var(--paper)}
.pack-caption{position:absolute;left:19px;right:19px;bottom:26px;display:flex;align-items:center;justify-content:space-between;font-size:7px;line-height:1.2;letter-spacing:.015em;color:var(--paper);opacity:.8}
.opening-screen .tear-strip{position:absolute;inset:0 0 auto;height:29px;z-index:8;display:block;padding:0;background:var(--blue);clip-path:polygon(0 5px,2.17% 0,4.35% 5px,6.52% 0,8.7% 5px,10.87% 0,13.04% 5px,15.22% 0,17.39% 5px,19.57% 0,21.74% 5px,23.91% 0,26.09% 5px,28.26% 0,30.43% 5px,32.61% 0,34.78% 5px,36.96% 0,39.13% 5px,41.3% 0,43.48% 5px,45.65% 0,47.83% 5px,50% 0,52.17% 5px,54.35% 0,56.52% 5px,58.7% 0,60.87% 5px,63.04% 0,65.22% 5px,67.39% 0,69.57% 5px,71.74% 0,73.91% 5px,76.09% 0,78.26% 5px,80.43% 0,82.61% 5px,84.78% 0,86.96% 5px,89.13% 0,91.3% 5px,93.48% 0,95.65% 5px,97.83% 0,100% 5px,100% 100%,0 100%);transform-origin:98% 100%;will-change:transform,opacity}
.strip-seal{position:absolute;left:0;right:0;top:17px;height:3px;background:var(--paper);opacity:.35}.strip-fold{position:absolute;left:0;top:4px;width:65px;height:25px;background:var(--pink);clip-path:polygon(0 0,100% 100%,0 100%);opacity:0}
.bag-mouth{position:absolute;left:0;top:9px;width:100%;height:38px;z-index:6;opacity:0;transform:scaleY(.05);transform-origin:50% 45%;pointer-events:none}
.stage:is(.is-ready,.is-opening) .floating-sticker{will-change:transform,opacity}
.stage.is-opening .sticker-paper{filter:none;transition:none}
.opening-screen .floor-shadow{left:50%;top:50%;width:190px;height:12px;margin:190px 0 0 -95px;transform:none;filter:blur(13px);background:var(--ink);opacity:.07;transition:none}
.opening-screen .reveal-card{left:50%;top:50%;width:260px;height:370px;margin:-185px 0 0 -130px;transform:translate(0,-5px) rotate(-5deg) scale(.06);opacity:0;z-index:6;border-radius:7px;border:6px solid #FFFFFF;box-shadow:0 8px 18px #1C231F0C;will-change:transform,opacity}
.opening-screen .card-illustration{height:164px}.opening-screen .card-body h2{font-size:24px}.opening-screen .card-body p{width:auto;font-size:9px}.opening-screen .card-bottom{margin-top:15px}
.opening-screen .floating-sticker{position:absolute;left:50%;right:auto;top:50%;width:154px;height:174px;margin:-87px 0 0 -77px;transform:translate(0,-130px) scale(0);opacity:0;z-index:7;filter:drop-shadow(0 5px 4px #1C231F08);--end-x:0px;--end-y:0px;--end-r:0deg}
.opening-screen .sticker-one{--end-x:-260px;--end-y:35px;--end-r:-13deg}.opening-screen .sticker-two{--end-x:255px;--end-y:-95px;--end-r:14deg}.opening-screen .sticker-three{--end-x:235px;--end-y:150px;--end-r:9deg}
.opening-screen .satellite{position:absolute;left:50%;top:50%;width:65px;height:74px;margin:-37px 0 0 -32.5px;transform:translate(0,-130px) scale(0);opacity:0;z-index:1;object-fit:contain;pointer-events:none;filter:none;--end-x:var(--desktop-x,0px);--end-y:var(--desktop-y,0px);--end-r:var(--desktop-r,0deg);--end-scale:1}
.opening-screen .stage-status{position:absolute;top:auto;bottom:4px;left:50%;transform:translateX(-50%);margin:0;padding:4px 10px;width:max-content;max-width:90%;background:var(--paper);border-radius:0;font-size:10px;line-height:1.6;color:var(--muted);z-index:10}
.opening-screen .is-open .packet-wrap,.opening-screen .is-open .floor-shadow{opacity:0;visibility:hidden;pointer-events:none}.opening-screen .is-open .reveal-card{opacity:1;transform:translate(0,-5px) rotate(-5deg) scale(1)}.opening-screen .is-open .floating-sticker{opacity:1;transform:translate(var(--end-x),var(--end-y)) rotate(var(--end-r)) scale(1)}.opening-screen .is-open .satellite{opacity:.28;transform:translate(var(--end-x),var(--end-y)) rotate(var(--end-r)) scale(var(--end-scale))}.opening-screen .is-open .stage-status{color:var(--blue)}
.opening-actions{padding:12px 24px 24px;gap:24px}.opening-actions .primary{width:230px;min-height:48px;border-radius:2px}.opening-actions .text-button{font-size:11px}
@media(max-width:760px){
 .opening-screen{grid-template-rows:64px minmax(0,1fr) 86px}.opening-nav{padding:13px 6%}.opening-nav .tiny-en{font-size:7px;letter-spacing:.07em}.opening-nav .brand img{width:31px;height:31px}
 .opening-screen .stage{width:390px;height:650px;max-width:none;margin:-325px 0 0 -195px;transform:scale(var(--scene-scale,1))}.opening-screen .packet-wrap{width:208px;height:318px;margin:-159px 0 0 -104px}.opening-screen .packet{inset:24px 0 0}.opening-screen .pack-brand{left:18px;top:23px}.opening-screen .pack-brand img{width:76px}.pack-eyes{gap:10px}.pack-eyes span{height:33px;width:10px}.pack-caption{font-size:7px;left:18px;right:18px;bottom:25px}
 .opening-screen .reveal-card{width:230px;height:340px;margin:-170px 0 0 -115px}.opening-screen .is-open .reveal-card{transform:translate(0,-73px) rotate(-4deg) scale(1)}.opening-screen .card-illustration{height:145px}.opening-screen .card-illustration img{width:130px;height:130px}.opening-screen .card-body{padding:7px 12px 0}.opening-screen .card-body h2{font-size:22px;margin-top:5px}.opening-screen .card-body p{font-size:9px}.opening-screen .card-bottom{margin:14px 12px 0;padding-top:9px}
 .opening-screen .floating-sticker{width:110px;height:125px;margin:-62.5px 0 0 -55px}.opening-screen .sticker-one{--end-x:-118px;--end-y:219px;--end-r:-9deg}.opening-screen .sticker-two{--end-x:0px;--end-y:209px;--end-r:4deg}.opening-screen .sticker-three{--end-x:118px;--end-y:219px;--end-r:10deg}
 .opening-screen .satellite{--end-x:var(--mobile-x,0px);--end-y:var(--mobile-y,0px);--end-r:var(--mobile-r,0deg);width:36px;height:41px;margin:-20.5px 0 0 -18px}.opening-screen .is-open .satellite{opacity:.13}.opening-screen .stage-status{bottom:8px;font-size:10px;max-width:95%}.opening-actions{gap:18px;padding:10px 7% 22px}.opening-actions .primary{width:210px;font-size:11px}.opening-actions .text-button{font-size:10px}
}
@media(max-width:360px){.opening-nav .tiny-en{display:none}.opening-actions .primary{width:190px}.opening-actions{gap:13px}}
@media(prefers-reduced-motion:reduce){.opening-screen .packet-wrap,.opening-screen .reveal-card,.opening-screen .floating-sticker,.opening-screen .satellite{will-change:auto}}

.opening-screen .stage:not(.is-open) .stage-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.is-open .pack-gaze{animation:none}

/* The reveal ends on a clean sheet. Only the three chosen stickers remain. */
.opening-screen .is-open .satellite{display:none}
.opening-screen .floating-sticker{padding:0;border:0;border-radius:0;background:transparent;pointer-events:none;filter:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.opening-screen .is-open .floating-sticker{pointer-events:auto;cursor:grab;transform:translate(calc(var(--end-x) + var(--sticker-x,0px)),calc(var(--end-y) + var(--sticker-y,0px))) rotate(var(--end-r))}
.opening-screen .floating-sticker:focus-visible{outline:2px dashed var(--blue);outline-offset:4px;border-radius:30%}
.sticker-paper{position:relative;display:block;width:100%;height:100%;transform-origin:50% 68%;transform:translateY(0) rotate(var(--sticker-lean,0deg)) scale(1);filter:drop-shadow(0 1px 1px #1C231F08);transition:transform .28s cubic-bezier(.2,1.5,.4,1),filter .2s ease-out;pointer-events:none}
.sticker-paper>img{display:block;width:100%;height:100%;object-fit:contain;clip-path:polygon(0 0,100% 0,100% 100%,57.5% 100%,0 100%);transition:clip-path .18s ease-out;pointer-events:none}
.sticker-paper>.sticker-curl{position:absolute;inset:0;display:block;width:100%;height:100%;stroke:none;opacity:0;filter:drop-shadow(1px 3px 2px #1C231F25);transition:opacity .16s ease-out;pointer-events:none}
.opening-screen .is-open .floating-sticker.is-dragging{cursor:grabbing}
.opening-screen .is-open .floating-sticker.is-dragging .sticker-paper{transform:translateY(-9px) rotate(var(--sticker-lean,0deg)) scale(1.08);filter:drop-shadow(0 14px 7px #1C231F25)}
.opening-screen .is-open .floating-sticker.is-dragging .sticker-paper>img{clip-path:polygon(0 0,100% 0,100% 62.22%,57.5% 100%,0 100%)}
.opening-screen .is-open .floating-sticker.is-dragging .sticker-curl{opacity:1}
.sticker-instructions{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(hover:hover){
 .opening-screen .is-open .floating-sticker:not(.is-dragging):hover .sticker-paper{transform:translateY(-5px) rotate(-2deg) scale(1.035);filter:drop-shadow(0 8px 4px #1C231F18)}
 .opening-screen .is-open .floating-sticker:hover .sticker-paper>img{clip-path:polygon(0 0,100% 0,100% 62.22%,57.5% 100%,0 100%)}
 .opening-screen .is-open .floating-sticker:hover .sticker-curl{opacity:1}
}
@media(prefers-reduced-motion:reduce){
 .sticker-paper,.opening-screen .is-open .floating-sticker:hover .sticker-paper,.opening-screen .is-open .floating-sticker.is-dragging .sticker-paper{transform:none}
}