/* V06: illustrated boosters shared by shelf, dispense and opening. */
.bar-experience .opening-dialog,.bar-experience .packs-dialog{color-scheme:dark;scrollbar-width:thin;scrollbar-color:#665067 #131017}
.scene-machine{z-index:7}.machine-art{position:relative;container-type:inline-size}.machine-base{display:block;width:100%;height:auto}
.machine-stock{position:absolute;left:42.15%;top:30.15%;width:12.1%;height:38.3%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);background:#0b1115;container-type:inline-size;box-shadow:inset 0 0 6px #000;overflow:hidden}
.stock-pack{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:3% 5% 9%;border:0;border-bottom:3px ridge #7a7e7c;background:radial-gradient(ellipse at top,#20313d,#080a0e 76%);pointer-events:auto;cursor:pointer;overflow:hidden;isolation:isolate}
.stock-pack img{display:block;width:100%;height:100%;object-fit:contain;transition:filter .2s,transform .2s;filter:brightness(.9);flex-shrink:1}
.stock-pack::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#c6e8ff1c,transparent 25%,transparent 75%,#c6e8ff0c);pointer-events:none}
.stock-pack .shelf-label{position:absolute;bottom:0;left:0;right:0;background:#091118e6;border-top:1px solid #738a9270;color:#fff9e9;font:bold 3cqw/1.5 Arial,sans-serif;letter-spacing:.02em;text-align:center;z-index:2}
.stock-pack:hover img,.stock-pack:focus-visible img{filter:brightness(1.2);transform:scale(1.06)}.stock-pack:focus-visible{outline:2px solid #ffe3a1;outline-offset:-2px;z-index:3}.stock-pack.is-selected{box-shadow:inset 0 0 7px var(--pack-accent,#ffe3a1)}.stock-pack:disabled{cursor:wait}
.dispense-pack{width:4.5%;height:9.3%;top:65.7%;left:47.7%;background:none;border:0;box-shadow:none;z-index:8;filter:drop-shadow(0 4px 3px #0009)}.dispense-pack img{display:block;width:100%;height:100%;object-fit:contain}
.browse-packs{position:fixed;left:max(22px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));z-index:20;min-height:40px;padding:10px 15px;border:1px solid #ffe0a039;border-radius:30px;color:#f3d7a5;background:#0b0810ba;backdrop-filter:blur(12px);font:10px 'Courier New',monospace;letter-spacing:.4px}.browse-packs span{margin-left:14px}.browse-packs:hover{border-color:#e2c07e;background:#29202bc9}
.bar-experience .opening-dialog,.bar-experience .packs-dialog{background:#131017;color:#eee9dd;border:1px solid #9c806a55;border-radius:16px;box-shadow:0 25px 120px #000c}
.bar-experience .close-dialog{color:#e9e0d3;border-color:#8d7a6155}.bar-experience .close-dialog:hover{background:#6b564f}
.bar-experience .opening-dialog h2{font-size:30px;margin:22px 0 8px}.bar-experience .opening-dialog>p{color:#b4a9b6}.bar-experience .opening-dialog .eyebrow{color:var(--pack-accent,#e2c07e)}
.bar-experience .reveal-stage{height:min(44dvh,400px);min-height:260px;margin:5px 0 18px}.bar-experience .sealed-pack{width:auto;height:100%;aspect-ratio:992/1600;transform:rotate(-3deg);filter:drop-shadow(0 12px 18px #0008)}
.pack-illustration{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.bar-experience .tear-strip{position:absolute;top:3%;left:8%;width:84%;height:9%;padding:0;border:0;background:transparent;z-index:3;border-bottom:1px dashed #fff6}.bar-experience .tear-strip:hover,.bar-experience .tear-strip:focus-visible{background:#ffffff20;outline:1px solid #fffa;outline-offset:1px}
.bar-experience .burst{width:95%;height:95%;background:radial-gradient(ellipse,var(--pack-accent,#edbc6e),transparent 67%);clip-path:none;filter:blur(30px);opacity:.17}.bar-experience .opening-dialog.is-revealed .burst{opacity:.2}
.bar-experience .primary{background:var(--pack-accent,#edc366);color:#151015;border:0}.bar-experience .primary:hover{background:#fff1dc}.bar-experience .opening-dialog .outline{color:#eee1d7;border-color:#8b6d65}.bar-experience .opening-dialog .outline:hover{background:#332b36}.bar-experience .opening-dialog .text-button{color:#bcaabf}
.bar-experience .bar-modal-tools{border-color:#8472823b;color:#b9a7bc}.bar-modal-tools button{color:inherit}.bar-experience .card-back{color:var(--pack-accent);background:radial-gradient(ellipse at top,#383144,#151019);border-color:#554151;outline-color:var(--pack-accent)}.bar-experience .card-back::before{border-color:var(--pack-accent)}.bar-experience .opening-note{color:#8c7f92}
.bar-experience .packs-dialog{width:1120px;max-width:calc(100vw - 24px);padding:35px 38px 24px}.packs-heading .eyebrow{font-size:9px;letter-spacing:2px;color:#d7b178}.packs-heading h2{font:600 38px/1.12 Arial,sans-serif;letter-spacing:-1.5px;margin:13px 0 10px}.packs-heading p{font-size:12px;color:#b2a5b7;line-height:1.5}
.pack-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 16px;margin-top:28px}.pack-choice{min-width:0;position:relative;border:1px solid #d7bcaf24;border-radius:12px;padding:12px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--pack-accent),transparent 88%),transparent 70%);color:#f3eee6;cursor:pointer;transition:border-color .2s,background .2s}
.pack-choice:hover,.pack-choice:focus-visible{outline:0;border-color:var(--pack-accent);background-color:#ffffff06}.pack-choice img{width:100%;height:220px;object-fit:contain;filter:drop-shadow(0 8px 9px #0006);transition:transform .25s}.pack-choice:hover img{transform:translateY(-5px) rotate(-2deg)}.pack-choice strong{font-size:15px;letter-spacing:.5px}.pack-choice .pack-count{font:9px 'Courier New',monospace;color:var(--pack-accent);margin-top:3px}.pack-choice .pack-description{font-size:10px;line-height:1.4;color:#9c8ea3;text-align:center}.packs-footnote{font:9px/1.6 'Courier New',monospace;color:#8f8197;margin:25px 0 0;text-align:center}.pack-choice:disabled{opacity:.5;cursor:wait}
@media(max-width:600px){.bar-experience .packs-dialog{padding:28px 16px 20px}.packs-heading h2{font-size:30px;padding-right:20px}.pack-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pack-choice{padding:8px 6px 13px}.pack-choice img{height:200px}.pack-description{display:none}.browse-packs{left:14px;bottom:max(16px,env(safe-area-inset-bottom));font-size:9px}.bar-experience .opening-dialog{padding:23px 18px 18px}.bar-experience .opening-dialog h2{font-size:26px}.bar-experience .reveal-stage{height:40dvh;min-height:245px}.bar-experience .reveal-card{width:240px;height:280px}}
@media(prefers-reduced-motion:reduce){.pack-choice img,.stock-pack img{transition:none}.bar-experience .sealed-pack{transform:none}}
.bar-experience .sealed-pack{height:clamp(260px,44dvh,400px);width:calc(clamp(260px,44dvh,400px) * .62);min-width:0;min-height:0}
.bar-experience .card-front{color:#211d15}
@media(min-width:601px) and (max-height:800px){.pack-choice img{height:155px}.pack-grid{gap:14px;margin-top:20px}.bar-experience .packs-dialog{padding-top:25px}.packs-heading h2{font-size:32px}.packs-footnote{margin-top:15px}}
@media(max-width:600px){.bar-experience .sealed-pack{height:max(245px,40dvh);width:calc(max(245px,40dvh) * .62)}}

/* The warm glow follows the illustrated PULL button on the moving layer. */
.pull-light{position:absolute;left:57.7%;top:53.8%;width:3.9%;height:7.2%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:4;opacity:.18;background:radial-gradient(ellipse,transparent 42%,#ffe97d38 68%,#ffdf6b52 78%,transparent 85%);box-shadow:0 0 7px 2px #ffdf4266,0 0 18px 6px #ffb20040;transition:opacity .22s,filter .22s}
.scene-world.is-awake:not(.is-modal-open) .pull-light{opacity:.85;filter:brightness(1.2)}
@media(hover:hover) and (pointer:fine){.scene-world:not(.is-modal-open):has(.machine-hotspot:hover) .pull-light{opacity:.95;filter:brightness(1.3)}}
.scene-world.is-pulling .pull-light{animation:pull-light-flash 1s ease-out both}
@keyframes pull-light-flash{0%{opacity:1;filter:brightness(2.1);box-shadow:0 0 12px 5px #fff0a5b3,0 0 30px 12px #ffc21b80}25%{opacity:1;filter:brightness(1.8)}100%{opacity:.85;filter:brightness(1.2)}}
@media(prefers-reduced-motion:reduce){.pull-light{transition:none}.scene-world.is-pulling .pull-light{animation:none;opacity:1;filter:brightness(1.3)}}

.stock-pack.is-scanning{z-index:2;box-shadow:inset 0 0 0 2px #fff2b8,inset 0 0 18px #ffd05b8c}
.stock-pack.is-scanning img{filter:brightness(1.45) saturate(1.08)}
.stock-pack.is-selected{z-index:2;box-shadow:inset 0 0 0 2px #fff1a6,inset 0 0 17px #ffce6080}
.stock-pack.is-selected img{filter:brightness(1.2)}
.bar-experience[data-opening-state="selecting"] :is(.lamp-warmth,.floor-light){opacity:1}
.bar-experience[data-opening-state="selecting"] .scene-prompt{opacity:1;transform:translate(-50%,0)}
.bar-experience:is([data-opening-state="selecting"],[data-opening-state="dispensing"]) .pull-light{opacity:1;filter:brightness(1.5)}
.bar-experience[data-opening-state="dispensing"] .dispense-pack{animation:none}
.dispense-pack.is-delivered{opacity:1;transform:translateY(17px) rotate(2deg)}

/* V11: collect the physical pack before showing its opening. */
#collect-pack{padding:0;min-width:44px;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#collect-pack:not(:disabled){pointer-events:auto;cursor:grab;filter:drop-shadow(0 4px 3px #0009) drop-shadow(0 0 7px #ffe4a26b)}
#collect-pack:not(:disabled):active{cursor:grabbing}
#collect-pack img{user-select:none;-webkit-user-drag:none;transition:transform .22s,filter .22s}
#collect-pack:not(:disabled):hover img{transform:translateY(-3px) rotate(-2deg) scale(1.06);filter:brightness(1.12)}
#collect-pack:focus-visible{outline:2px solid #ffe3a1;outline-offset:5px;border-radius:5px}
.dispense-card-back{display:none}
#collect-pack.is-card #dispensed-art{display:none}
#collect-pack.is-card .dispense-card-back{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9%;width:100%;height:80%;border:2px solid var(--pack-accent);border-radius:7px;background:linear-gradient(140deg,#453a50,#151019);box-shadow:0 3px 12px #0009,0 0 12px color-mix(in srgb,var(--pack-accent),transparent 50%);color:var(--pack-accent)}
.dispense-card-back b{font:bold clamp(10px,1vw,20px) Arial,sans-serif;transform:rotate(-10deg)}
.dispense-card-back small{font:6px 'Courier New',monospace;letter-spacing:.6px}
.bar-experience[data-opening-state="awaiting-pickup"] .scene-prompt{opacity:1;transform:translate(-50%,0)}

/* A 4.3 second ritual: pressure builds, the foil parts, a face-down card emerges. */
.reveal-stage>.sealed-pack,.reveal-stage>.reveal-card{grid-area:1/1}
.pack-half{position:absolute;inset:0;display:none;pointer-events:none}
.pack-half-left{clip-path:inset(0 50% 0 0)}
.pack-half-right{clip-path:inset(0 0 0 50%)}
.pack-energy{position:absolute;inset:-20%;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--pack-accent),transparent 35%),transparent 65%);filter:blur(25px);opacity:0;z-index:-1}
.bar-experience .opening-dialog.tearing .tear-strip{animation:none;opacity:0;pointer-events:none}
.bar-experience .opening-dialog.tearing .sealed-pack{animation:pack-pressure 2.8s linear both;z-index:4}
.opening-dialog.tearing .pack-energy{animation:pack-energy-build 2.8s ease-in both}
.opening-dialog.tearing .sealed-pack::after{content:'';position:absolute;top:6%;bottom:6%;left:calc(50% - 1px);width:2px;pointer-events:none;background:linear-gradient(transparent,#fff5d0 22%,#fff 50%,#ffdf83 78%,transparent);box-shadow:0 0 8px 2px #fff2a999,0 0 24px 6px var(--pack-accent);animation:pack-seam-build 2.8s ease-in both}
.bar-experience .opening-dialog.is-unwrapping .sealed-pack{animation:none;transform:translateY(-12px) rotate(0deg) scale(1.04);filter:drop-shadow(0 8px 22px #0009)}
.opening-dialog.is-unwrapping #sealed-art{visibility:hidden}
.opening-dialog.is-unwrapping .pack-half{display:block}
.opening-dialog.is-unwrapping .pack-half-left{animation:foil-left 1.35s cubic-bezier(.16,.75,.25,1) both}
.opening-dialog.is-unwrapping .pack-half-right{animation:foil-right 1.35s cubic-bezier(.16,.75,.25,1) both}
.opening-dialog.is-unwrapping .sealed-pack::after{animation:none;opacity:0}
.opening-dialog.is-unwrapping .pack-energy{animation:energy-release 1.5s ease-out both}
.bar-experience .opening-dialog.is-unwrapping .reveal-card{animation:card-emerge 1.5s cubic-bezier(.16,.75,.25,1) both;pointer-events:none;z-index:3}
.bar-experience .opening-dialog.is-showcase:not(.is-unwrapping) .reveal-card{animation:none}
/* Wider jolts and shorter intervals make the final second feel ready to burst. */
@keyframes pack-pressure{
  0%{transform:rotate(-3deg)}
  16%{transform:translateY(-10px) rotate(0deg) scale(1.01)}
  28%{transform:translate(-3px,-13px) rotate(-1.8deg) scale(1.015)}
  38%{transform:translate(5px,-9px) rotate(3deg) scale(1.02)}
  47%{transform:translate(-7px,-15px) rotate(-4.5deg) scale(1.025)}
  55%{transform:translate(10px,-8px) rotate(5.8deg) scale(1.03)}
  62%{transform:translate(-12px,-17px) rotate(-7deg) scale(1.035)}
  68%{transform:translate(15px,-6px) rotate(8.5deg) scale(1.04)}
  73%{transform:translate(-18px,-19px) rotate(-10deg) scale(1.04)}
  77.5%{transform:translate(20px,-5px) rotate(11deg) scale(1.04)}
  81.5%{transform:translate(-22px,-20px) rotate(-12deg) scale(1.04)}
  85%{transform:translate(23px,-4px) rotate(12.5deg) scale(1.04)}
  88%{transform:translate(-24px,-21px) rotate(-13deg) scale(1.04)}
  90.8%{transform:translate(24px,-4px) rotate(13deg) scale(1.04)}
  93.3%{transform:translate(-24px,-21px) rotate(-13deg) scale(1.04)}
  95.6%{transform:translate(24px,-4px) rotate(13deg) scale(1.04)}
  97.7%{transform:translate(-24px,-21px) rotate(-13deg) scale(1.04)}
  99.2%{transform:translate(24px,-4px) rotate(13deg) scale(1.04)}
  100%{transform:translateY(-12px) rotate(0deg) scale(1.04)}
}
@keyframes pack-energy-build{0%{opacity:0;transform:scale(.65)}55%{opacity:.25;transform:scale(.9)}100%{opacity:.65;transform:scale(1.2)}}
@keyframes pack-seam-build{0%,25%{opacity:0;transform:scaleY(.05)}65%{opacity:.25;transform:scaleY(.5)}100%{opacity:.95;transform:scaleY(1)}}
@keyframes foil-left{0%{transform:none;opacity:1}60%{opacity:.85}100%{transform:translate(-34%,-3%) rotate(-11deg);opacity:0}}
@keyframes foil-right{0%{transform:none;opacity:1}60%{opacity:.85}100%{transform:translate(34%,3%) rotate(11deg);opacity:0}}
@keyframes energy-release{0%{opacity:.65;transform:scale(1.2)}35%{opacity:.75;transform:scale(1.5)}100%{opacity:0;transform:scale(1.8)}}
@keyframes card-emerge{0%{opacity:0;transform:translateY(8px)}65%{opacity:1}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#collect-pack img{transition:none}.bar-experience .opening-dialog.tearing .sealed-pack,.pack-half,.pack-energy,.opening-dialog.tearing .sealed-pack::after{animation:none!important}}