/* A tactile, quiet stage that keeps the existing Snag visual language. */
.tactile-opening{width:560px;padding:24px 32px 22px;background:#f8f8fa;display:flex;flex-direction:column;align-items:stretch;min-height:0;overflow-x:hidden;text-align:center;--tear-progress:0}
.opening-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:3}
.opening-demo-label{font-size:9px;letter-spacing:.8px;color:#73737b;font-weight:500;text-align:left}
.opening-controls{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.opening-controls button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 10px;border:1px solid #e5e5e9;border-radius:20px;background:#ffffffb3;font-size:10px;color:#72727b;white-space:nowrap}
.opening-controls button[aria-pressed=true]{background:#efedf6;color:#665188;border-color:#ddd7e9}
.opening-controls button span{font-size:16px;line-height:1}
.opening-copy{margin-top:26px;position:relative;z-index:2}
.opening-copy .section-label{margin:0 0 12px;color:#797981;font-size:9px}
.tactile-opening .opening-copy h2{font-size:32px;line-height:1.12;letter-spacing:-1.1px;margin:0;font-weight:600}
.tear-surface{position:relative;display:block;isolation:isolate;width:100%;height:310px;padding:0;touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent;user-select:none;flex-shrink:0;border-radius:28px;background:transparent;border:0}
.tear-surface:active{cursor:grabbing}
.tear-surface:focus-visible{outline:2px solid #8a72ac;outline-offset:-12px}
.tactile-opening .foil-piece{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:transform .22s ease-out;will-change:transform}
.tactile-opening .foil-piece .pack-illustration{width:280px;height:310px;margin:0;animation:none;max-width:none;filter:none}
.foil-cap{clip-path:polygon(0 0,100% 0,100% 20%,0 23%);z-index:3;transform-origin:78% 22%}
.foil-body{clip-path:polygon(0 23%,100% 20%,100% 100%,0 100%);z-index:2}
.is-dragging .foil-cap{transform:translateX(calc(var(--tear-progress)*20px)) rotate(calc(var(--tear-progress)*-5deg)) translateY(calc(var(--tear-progress)*-9px))}
.is-dragging .foil-body{transform:rotate(calc(var(--tear-progress)*2deg)) scale(calc(1 - var(--tear-progress)*.025))}
.opening-halo{position:absolute;left:50%;top:45%;width:240px;height:230px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#e1dce94d,transparent 70%);opacity:.75;pointer-events:none}
.tear-seal{position:absolute;z-index:4;top:20%;left:33%;right:31%;display:flex;align-items:center;gap:8px;transform:rotate(-3deg);pointer-events:none;opacity:.85}
.tear-seal>span{height:1px;flex:1;background:repeating-linear-gradient(90deg,#8e7aa2 0 4px,transparent 4px 8px)}
.tear-seal i{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:white;box-shadow:0 2px 10px #2c263619;color:#7c6596;font-size:15px;font-style:normal}
.opening-sparks{position:absolute;left:50%;top:27%;font-size:90px;color:#c8b9dc;opacity:0;transform:translate(-50%,-50%) scale(.4);pointer-events:none}
.tactile-opening .opening-phase{font-size:12px;line-height:1.5;text-transform:none;letter-spacing:0;color:#777780;margin:0 0 18px;min-height:18px}
.tactile-opening .tear-open-button{align-self:center;min-width:190px;min-height:46px;gap:25px;font-size:13px}
.opening-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:23px;border-top:1px solid #e6e6ea;padding-top:11px;color:#8a8a92;font-size:10px;text-align:left}
.opening-bottom .text-button{font-size:11px;min-height:36px;color:#74707d;white-space:nowrap}
.is-tearing .foil-cap{animation:foilTear .78s cubic-bezier(.25,.7,.3,1) forwards}
.is-tearing .foil-body{animation:foilDrop 1.2s cubic-bezier(.25,.65,.3,1) forwards}
.is-tearing .tear-seal{transition:opacity .1s;opacity:0}
.is-tearing .opening-halo{animation:unpackGlow 1.3s ease-out both}
.is-tearing .opening-sparks{animation:unpackSpark 1.1s .15s ease-out both}
.is-tearing .tear-open-button{opacity:.65}
.is-tearing .tear-surface{cursor:default}
@keyframes foilTear{0%{transform:translate(0,0) rotate(0)}35%{transform:translate(25px,-14px) rotate(-12deg)}100%{transform:translate(140px,-90px) rotate(28deg);opacity:0}}
@keyframes foilDrop{0%{transform:scale(1)}25%{transform:translateY(5px) scale(.97) rotate(2deg)}65%{transform:translateY(32px) scale(.95) rotate(-4deg);opacity:1}100%{transform:translateY(155px) scale(.88) rotate(-8deg);opacity:0}}
@keyframes unpackGlow{40%{opacity:1;transform:translate(-50%,-50%) scale(1.3);background:radial-gradient(ellipse,#e1d6eea6,transparent 70%)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
@keyframes unpackSpark{30%{opacity:.65;transform:translate(-50%,-50%) scale(.9) rotate(-10deg)}100%{opacity:0;transform:translate(-50%,-70%) scale(1.2) rotate(15deg)}}

.opening-result{--result-color:#81968a;width:550px;padding:25px 30px 0;text-align:center;overflow:hidden;background:#fff;isolation:isolate;display:flex;flex-direction:column}
.result-body{min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
.opening-result.result-uncommon{--result-color:#438d7c}
.opening-result.result-rare{--result-color:#8875b8}
.opening-result.result-dream{--result-color:#b78336}
.opening-result>.modal-close{top:19px;right:19px;z-index:5}
.result-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-right:29px;position:relative;z-index:3;flex-shrink:0}
.result-discovery{font-size:10px;font-weight:500;color:var(--result-color);letter-spacing:.1px;text-align:left}
.result-share{display:flex;align-items:center;gap:5px;min-height:36px;font-size:10px;color:#74747d;white-space:nowrap;padding:5px}
.result-share .icon{width:14px;height:14px;transform:rotate(-45deg)}
.result-stage{position:relative;margin:4px -10px 0;min-height:230px;display:grid;place-items:center;isolation:isolate}
.result-aura{position:absolute;inset:10px 30px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--result-color) 14%,transparent),transparent 70%);opacity:.8;z-index:-1;animation:resultAura 1.2s ease-out both}
.result-orbit{position:absolute;width:190px;height:190px;border:1px solid color-mix(in srgb,var(--result-color) 17%,transparent);border-radius:50%;z-index:-1;opacity:0}
.result-rare .result-orbit,.result-dream .result-orbit{animation:resultOrbit 1.2s .12s ease-out both}
.result-dream .result-stage:after{content:'✧';position:absolute;right:15%;top:14%;font-size:25px;color:var(--result-color);animation:resultShimmer 1.7s ease-out both}
.opening-result .result-stage .prize-figure{margin:0;gap:0;width:100%;padding:0;position:relative;z-index:2}
.opening-result .result-stage .product-photo,.opening-result .result-stage>.product-art{width:300px;height:230px;max-width:90%;margin:0 auto;object-fit:contain;animation:prizeArrives .75s cubic-bezier(.2,.8,.2,1) both}
.opening-result .result-stage .image-credit{margin-top:4px;max-width:360px;font-size:7px}
.result-uncommon .result-stage .product-photo{animation-duration:.85s}
.result-rare .result-stage .product-photo,.result-dream .result-stage .product-photo{animation-duration:1s}
.result-copy{position:relative;z-index:2;padding-top:12px}
.result-copy .tier-pill{font-size:9px;padding:5px 10px;background:color-mix(in srgb,var(--result-color) 9%,white)}
.result-kicker{font-size:11px;color:#85858d;margin:12px 0 6px;animation:resultCopyIn .4s .13s both}
.opening-result .result-copy h2{font-size:17px;font-weight:400;color:#818189;letter-spacing:-.2px;line-height:1.35;margin:0;animation:resultCopyIn .4s .18s both}
.opening-result .result-copy h2 span{display:block;color:#1d1d1f;font-size:29px;font-weight:600;line-height:1.15;letter-spacing:-1px;margin:1px auto 0;max-width:420px}
.opening-result .result-copy h2 br{display:none}
.result-value{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 0 12px;animation:resultCopyIn .4s .24s both}
.result-value strong{font-size:32px;letter-spacing:-1px;font-weight:600}
.result-value>span{font-size:9px;color:#86868e;text-align:left;max-width:45px;line-height:1.4}
.result-collection{font-size:10px;color:#83838c;display:flex;align-items:center;justify-content:center;gap:5px;margin:0 0 19px;animation:resultCopyIn .4s .28s both}
.result-collection .icon{width:12px;height:12px;color:#81968a}
.result-footer{position:relative;z-index:3;margin:0 -30px;padding:18px 30px 19px;border-top:1px solid #eeeef1;background:#fafafb;animation:resultCopyIn .4s .3s both;flex-shrink:0}
.opening-result .reveal-actions{margin:0;grid-template-columns:1fr 1fr;gap:10px}
.opening-result .reveal-actions button{min-height:46px;padding:10px 12px;font-size:12px}
.result-open-again{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;border:1px solid #e2e2e8;border-radius:24px;background:white;color:#4d4b55;font-size:12px;margin-top:10px}
.result-open-again .icon{width:14px;height:14px;color:#82778f}
.result-open-again strong{font-weight:600;color:#39343f}
.result-open-again>span:last-child{margin-left:auto;margin-right:6px;color:#8b8394}
.result-open-again>.icon{margin-right:auto;margin-left:6px}
.result-open-again:hover{background:#f4f1f7;border-color:#d4cbdf}
.result-pack-label{font-size:9px;color:#8b8b93;line-height:1.4;margin-top:8px}
.opening-result .fine-print{font-size:9px;line-height:1.5;margin-top:10px;color:#8b8b93}
.result-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.result-particles i{position:absolute;left:var(--x);top:12%;width:4px;height:7px;border-radius:1px;background:var(--result-color);opacity:0;animation:resultParticle 1.8s var(--delay) ease-out both}
.result-particles i:nth-child(3n){width:3px;height:3px;border-radius:50%}
.result-instant *{animation:none!important}
.result-instant .result-particles,.result-instant .result-orbit{display:none}
@keyframes prizeArrives{from{opacity:0;transform:translateY(35px) scale(.83) rotate(-4deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes resultCopyIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes resultAura{from{opacity:0;transform:scale(.5)}to{opacity:.8;transform:scale(1)}}
@keyframes resultOrbit{0%{opacity:.4;transform:scale(.6)}100%{opacity:0;transform:scale(1.65)}}
@keyframes resultShimmer{0%{opacity:0;transform:scale(.4) rotate(-25deg)}40%{opacity:.65}100%{opacity:0;transform:scale(1.2) rotate(20deg)}}
@keyframes resultParticle{10%{opacity:.6}100%{opacity:0;transform:translate(var(--drift),340px) rotate(var(--turn))}}
@media(max-width:600px){
  .modal-backdrop:has(.tactile-opening),.modal-backdrop:has(.opening-result){padding:10px;align-items:center}
  .tactile-opening{padding:19px 22px 15px;border-radius:25px;max-height:calc(100dvh - 20px)}
  .opening-demo-label{font-size:8px;letter-spacing:.4px}
  .opening-controls button{min-height:36px;font-size:10px;padding:6px 9px}
  .opening-copy{margin-top:22px}
  .tactile-opening .opening-copy h2{font-size:29px}
  .tear-surface{height:clamp(190px,35dvh,290px)}
  .tactile-opening .foil-piece .pack-illustration{height:100%;width:auto}
  .tear-seal{left:30%;right:26%}
  .tactile-opening .opening-phase{font-size:12px;margin-bottom:16px}
  .tactile-opening .tear-open-button{width:100%;min-height:48px;font-size:14px}
  .opening-bottom{margin-top:17px;font-size:9px;gap:8px}
  .opening-bottom .text-button{font-size:11px!important;min-height:40px}
  .opening-result{padding:18px 22px 0;border-radius:25px;max-height:calc(100dvh - 20px)}
  .result-topline{padding-right:25px}
  .result-discovery{font-size:10px}
  .result-stage{min-height:0;margin-top:6px}
  .opening-result .result-stage .product-photo,.opening-result .result-stage>.product-art{height:clamp(125px,25dvh,220px);width:260px}
  .result-copy{padding-top:9px}
  .result-kicker{margin-top:9px;font-size:11px}
  .opening-result .result-copy h2{font-size:14px}
  .opening-result .result-copy h2 span{font-size:25px;max-width:320px;letter-spacing:-.7px}
  .result-value{margin:11px 0 9px}
  .result-value strong{font-size:30px}
  .result-collection{margin-bottom:15px;font-size:10px}
  .result-footer{margin-inline:-22px;padding:14px 22px max(16px,env(safe-area-inset-bottom))}
  .opening-result .reveal-actions{grid-template-columns:1fr 1fr;gap:8px}
  .opening-result .reveal-actions button{font-size:11px;min-height:46px;padding:10px 8px;gap:5px}
  .result-open-again{min-height:46px;font-size:12px;margin-top:9px}
  .result-pack-label{font-size:9px}
  .opening-result .fine-print{font-size:8px;margin-top:8px}
}
@media(max-height:680px){
  .tactile-opening .opening-copy{margin-top:12px}.tactile-opening .opening-copy h2{font-size:25px}.tear-surface{height:210px}.tactile-opening .foil-piece .pack-illustration{height:100%;width:auto}.opening-bottom{margin-top:13px}
  .opening-result .result-stage .product-photo{height:135px}.opening-result .result-stage{min-height:0}.opening-result .result-copy h2 span{font-size:23px}.result-copy{padding-top:5px}.result-kicker{margin-top:7px}.result-value{margin:8px 0}.result-value strong{font-size:27px}.result-collection{margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .tactile-opening *,.opening-result *{animation:none!important;transition:none!important}
  .is-tearing .foil-cap{opacity:0}.is-tearing .foil-body{opacity:.3}
  .result-particles,.result-orbit,.opening-sparks,.result-dream .result-stage:after{display:none}
}