.jar3d{--jr-top: 0px;--jr-p: 0;--jr-title: 0;--jr-copy: 0;--jr-seal: 0;--jr-hint: 1;--jr-pin-h: calc(100vh - var(--jr-top));position:relative;height:calc(var(--jr-pin-h) + var(--jr-scroll, 200vh));margin:30px 0}@supports (height: 100svh){.jar3d{--jr-pin-h: calc(100svh - var(--jr-top))}}.jar3d__pin{position:sticky;top:var(--jr-top);height:var(--jr-pin-h);overflow:hidden;border-radius:20px;color:#fff;background:var(--jr-bg, #132511)}.jar3d__stage,.jar3d__stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.jar3d__stage canvas{display:block;cursor:grab;touch-action:pan-y}.jar3d__stage canvas.is-dragging{cursor:grabbing}.jar3d__still{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center}.jar3d__still img{position:absolute;height:70%;width:auto;left:50%;top:50%;transform:translate(-50%,-50%)}.jar3d.is-fallback canvas{display:none}.jar3d.is-fallback .jar3d__still{display:flex}.jar3d__vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%),linear-gradient(90deg,rgba(8,20,12,.78) 0%,rgba(8,20,12,.45) 36%,transparent 58%)}.jar3d__vignette:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay}.jar3d__copy{position:absolute;left:48px;top:50%;width:min(42%,420px);transform:translateY(-50%);pointer-events:none}.jar3d__copy a,.jar3d__copy .jar3d__badge{pointer-events:auto}.jar3d__eyebrow{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--jr-accent, #c9a45c);opacity:var(--jr-title);transform:translateY(calc((1 - var(--jr-title)) * 16px))}.jar3d__heading{margin:0 0 18px;font-size:clamp(30px,3.4vw,46px);line-height:1.08;font-weight:700;color:#fff;opacity:var(--jr-title);transform:translateY(calc((1 - var(--jr-title)) * 24px))}.jar3d__text{max-width:34ch;font-size:16px;line-height:1.6;opacity:var(--jr-copy);transform:translateY(calc((1 - var(--jr-copy)) * 20px))}.jar3d__text p{margin:0 0 12px;color:#fffc}.jar3d__actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:26px;opacity:var(--jr-copy);transform:translateY(calc((1 - var(--jr-copy)) * 20px))}.jar3d__button{display:inline-flex;align-items:center;min-height:46px;padding:0 26px;border-radius:999px;background:var(--jr-accent, #c9a45c);color:#132511;font-size:14px;font-weight:700;letter-spacing:.02em;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.jar3d__button:hover{transform:translateY(-1px);box-shadow:0 8px 20px #0000004d;color:#132511}.jar3d__badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid rgba(201,164,92,.6);border-radius:999px;font-size:13px;font-weight:600;color:var(--jr-accent, #c9a45c);opacity:var(--jr-seal);transform:scale(calc(.8 + .2 * var(--jr-seal)))}.jar3d__hint,.jar3d__drag{position:absolute;left:0;right:0;bottom:18px;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff9;pointer-events:none}.jar3d__hint{opacity:var(--jr-hint);animation:jar3d-bounce 1.8s ease-in-out infinite}.jar3d__drag{opacity:var(--jr-seal)}@keyframes jar3d-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}@media(prefers-reduced-motion:reduce){.jar3d__hint{animation:none}}@media screen and (max-width:991px){.jar3d{margin:20px 0}.jar3d__pin{border-radius:14px}.jar3d__vignette{background:radial-gradient(120% 90% at 50% 55%,transparent 55%,rgba(0,0,0,.55) 100%),linear-gradient(180deg,rgba(8,20,12,.85) 0%,rgba(8,20,12,.5) 34%,transparent 52%)}.jar3d__copy{left:22px;right:22px;top:28px;width:auto;transform:none;text-align:center}.jar3d__heading{font-size:clamp(26px,7vw,34px);margin-bottom:10px}.jar3d__text{margin:0 auto;font-size:14px}.jar3d__actions{justify-content:center;margin-top:16px}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/jar-3d.css.map */