.db3d{--db3d-ease: cubic-bezier(.22, 1, .36, 1);--db3d-ink: #ffffff;--db3d-muted: rgba(255, 255, 255, .52);--db3d-kraft: #9a9a9a;--db3d-kraft-deep: #5a5a5a;--db3d-cream: #e8e8e8;--db3d-espresso: #0a0a0a;--db3d-accent: #ffffff;--db3d-brutal: #ffffff;--db3d-stage-h: min(82svh, 780px);position:relative;width:100%;min-height:auto;display:flex;flex-direction:column;color:var(--db3d-ink);background:radial-gradient(ellipse 90% 60% at 50% -10%,rgba(255,255,255,.06),transparent 55%),radial-gradient(ellipse 50% 40% at 85% 70%,rgba(255,255,255,.04),transparent 60%),radial-gradient(ellipse 40% 50% at 10% 80%,rgba(0,0,0,.35),transparent 55%),linear-gradient(165deg,#0a0a0a,#111 42%,#050505);font-family:Space Grotesk,Helvetica Neue,Arial,sans-serif;overflow-x:clip;isolation:isolate}.db3d *,.db3d *:before,.db3d *:after{box-sizing:border-box}.db3d__atmosphere{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.db3d__orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;animation:db3dOrbFloat 18s var(--db3d-ease) infinite alternate}.db3d__orb--1{width:min(55vw,520px);height:min(55vw,520px);top:8%;left:50%;transform:translate(-50%);background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%)}.db3d__orb--2{width:min(40vw,360px);height:min(40vw,360px);bottom:18%;left:5%;background:radial-gradient(circle,rgba(255,255,255,.05),transparent 70%);animation-duration:22s;animation-delay:-4s}.db3d__orb--3{width:min(35vw,300px);height:min(35vw,300px);top:40%;right:4%;background:radial-gradient(circle,rgba(255,255,255,.04),transparent 70%);animation-duration:26s;animation-delay:-8s}.db3d__noise{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px;mix-blend-mode:overlay}@keyframes db3dOrbFloat{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(12px,-18px,0) scale(1.06)}}.db3d__orb--1{animation-name:db3dOrbFloatCenter}@keyframes db3dOrbFloatCenter{0%{transform:translate(-50%) translateZ(0) scale(1)}to{transform:translate(-50%) translate3d(0,-16px,0) scale(1.05)}}.db3d__stage{position:relative;z-index:1;flex:0 0 auto;min-height:var(--db3d-stage-h);display:grid;grid-template-rows:auto 1fr;align-items:center;justify-items:center;padding:clamp(2rem,5vh,3.5rem) 1.25rem 2.5rem;gap:.5rem;overflow:visible}.db3d__brand{text-align:center;max-width:36rem;z-index:2;position:relative}.db3d__asterisk{display:inline-block;margin-left:.14em;font-family:Bebas Neue,Space Grotesk,sans-serif;font-weight:400;font-style:normal;line-height:1;color:transparent;-webkit-text-stroke:1px var(--db3d-brutal);transform-origin:50% 52%;vertical-align:middle;position:relative;top:-.04em}.db3d__story-title .db3d__asterisk{font-size:.38em;-webkit-text-stroke-width:1.5px;opacity:0;transform:rotate(-90deg) scale(.5);animation:none;transition:opacity .75s var(--db3d-ease) .9s,transform .75s var(--db3d-ease) .9s}.db3d.is-ready .db3d__story-title .db3d__asterisk{opacity:1;transform:rotate(0) scale(1);animation:db3dAsteriskSpin 20s linear infinite 1.2s}@keyframes db3dAsteriskSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.db3d__coming-soon{display:inline-flex;margin:0 0 1.25rem;padding:0}.db3d__coming-soon-inner{display:inline-block;padding:.35rem .9rem;border:1px solid rgba(255,255,255,.32);background:transparent;color:var(--db3d-ink);font-family:Space Grotesk,sans-serif;font-size:clamp(.68rem,1.2vw,.78rem);font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1}.db3d__coming-soon--footer{margin:0}.db3d__coming-soon--footer .db3d__coming-soon-inner{font-family:Bebas Neue,Space Grotesk,sans-serif;font-size:clamp(1.1rem,3vw,1.5rem);font-weight:400;padding:.65rem 1.6rem;letter-spacing:.28em;border:2px solid var(--db3d-ink);background:var(--db3d-ink);color:var(--db3d-espresso)}.db3d__mark{margin:0 0 .65rem;font-family:Space Grotesk,sans-serif;font-size:clamp(.7rem,1.2vw,.8rem);font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--db3d-muted)}.db3d__heading{margin:0;font-family:Bebas Neue,Space Grotesk,sans-serif;font-weight:400;font-size:clamp(2.75rem,8vw,5.25rem);line-height:.95;letter-spacing:.02em;text-transform:uppercase;color:var(--db3d-ink)}.db3d__tagline{margin:.85rem 0 0;font-family:Space Grotesk,sans-serif;font-size:clamp(.95rem,2vw,1.15rem);font-weight:300;letter-spacing:.01em;text-transform:none;color:var(--db3d-muted)}.db3d__stage-center{position:relative;width:min(84vw,620px);aspect-ratio:1 / 1;display:grid;place-items:center;cursor:grab;outline:none;-webkit-tap-highlight-color:transparent;overflow:visible}.db3d__stage-center:active{cursor:grabbing}.db3d__stage-center:focus-visible{box-shadow:none;outline:2px solid rgba(255,255,255,.35);outline-offset:12px;border-radius:50%}.db3d__model-wrap{position:absolute;top:-14%;right:-18%;bottom:-14%;left:-18%;z-index:3;width:auto;height:auto;opacity:0;pointer-events:none;transition:opacity .7s var(--db3d-ease);overflow:visible;-webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 0%,#000 52%,rgba(0,0,0,.55) 72%,transparent 88%);mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 0%,#000 52%,rgba(0,0,0,.55) 72%,transparent 88%)}.db3d__model-wrap.is-loading{opacity:0}.db3d__model-wrap.is-ready{opacity:1;pointer-events:auto}.db3d__model-wrap.is-failed{display:none}.db3d__model-wrap model-viewer{width:100%;height:100%;--poster-color: transparent;background:transparent!important;outline:none;overflow:visible}.db3d__model-wrap model-viewer::part(default-progress-bar){display:none!important}.db3d__model-wrap model-viewer::part(default-ar-button),.db3d__model-wrap model-viewer::part(default-ar-failure){display:none}.db3d__sticker{position:relative;width:var(--db3d-sticker-size, 88px);height:var(--db3d-sticker-size, 88px);transform:translate(-50%,-50%) rotate(-8deg);pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));transition:opacity .45s var(--db3d-ease),transform .7s var(--db3d-ease);animation:db3dStickerIn .9s var(--db3d-ease) both}.db3d__sticker:not([visible]){opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.85)}.db3d__sticker-img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%;pointer-events:none}@keyframes db3dStickerIn{0%{opacity:0;transform:translate(-50%,-50%) rotate(-18deg) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}.db3d__bag-scene{position:relative;width:min(72%,260px);aspect-ratio:3 / 4.2;perspective:900px;transform-style:preserve-3d;z-index:2}.db3d__bag-shadow{position:absolute;left:50%;bottom:-6%;width:78%;height:14%;transform:translate(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);filter:blur(8px);opacity:.85;transition:transform .8s var(--db3d-ease),opacity .8s var(--db3d-ease)}.db3d__bag{--tilt-x: 0deg;--tilt-y: 0deg;position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transform:rotateX(var(--tilt-x)) rotateY(calc(var(--tilt-y) + var(--idle-y, 0deg))) translateZ(0);animation:db3dBagFloat 5.5s ease-in-out infinite,db3dBagIdle 12s linear infinite;transition:transform .7s var(--db3d-ease);will-change:transform}@keyframes db3dBagFloat{0%,to{translate:0 0}50%{translate:0 -10px}}@keyframes db3dBagIdle{0%{--idle-y: -12deg}to{--idle-y: 12deg}}@property --idle-y{syntax: "<angle>"; inherits: true; initial-value: 0deg;}.db3d__bag-front,.db3d__bag-back,.db3d__bag-side,.db3d__flap,.db3d__flap-face,.db3d__filter,.db3d__hook{position:absolute;transform-style:preserve-3d;backface-visibility:hidden}.db3d__bag-front{top:8%;right:6%;bottom:4%;left:6%;border-radius:6px 6px 10px 10px;background:linear-gradient(160deg,rgba(255,255,255,.12),transparent 40%),linear-gradient(180deg,#d4c0a0 0%,var(--db3d-kraft) 45%,var(--db3d-kraft-deep) 100%);background-size:cover;background-position:center;box-shadow:inset 0 1px #ffffff38,inset 0 -20px 40px #0000002e;transform:translateZ(14px);overflow:hidden}.db3d__bag-front:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);pointer-events:none}.db3d__bag-back{top:8%;right:6%;bottom:4%;left:6%;border-radius:6px 6px 10px 10px;background:linear-gradient(180deg,#a8895e,#6e5232);transform:translateZ(-14px) rotateY(180deg)}.db3d__bag-side{top:8%;bottom:4%;width:28px;background:linear-gradient(180deg,#b89768,#7a5a36)}.db3d__bag-side--left{left:6%;transform-origin:left center;transform:translateZ(0) rotateY(-90deg)}.db3d__bag-side--right{right:6%;transform-origin:right center;transform:translateZ(0) rotateY(90deg)}.db3d__bag-label{position:absolute;inset:22% 12% auto;display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;color:var(--db3d-espresso)}.db3d__bag-label-brand{font-size:.55rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.75}.db3d__bag-label-name{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.6rem,5vw,2.1rem);line-height:1}.db3d__bag-seal{position:absolute;left:50%;bottom:14%;width:42%;height:1px;transform:translate(-50%);background:#1a120c40}.db3d__filter{top:18%;left:18%;right:18%;height:48%;border-radius:4px 4px 40% 40%;background:repeating-linear-gradient(90deg,rgba(243,235,224,.15) 0 2px,transparent 2px 6px),linear-gradient(180deg,#f5efe4,#d9cbb4);transform:translateZ(2px) scaleY(.2);transform-origin:top center;opacity:0;transition:transform .85s var(--db3d-ease) .15s,opacity .5s var(--db3d-ease) .1s}.db3d__flap{top:4%;left:8%;right:8%;height:18%;transform-origin:top center;transform:translateZ(15px) rotateX(0);transition:transform .9s var(--db3d-ease)}.db3d__flap-face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:5px 5px 2px 2px}.db3d__flap-face--front{background:linear-gradient(180deg,#dfc9a8,#c4a574);transform:translateZ(1px);box-shadow:inset 0 1px #ffffff40}.db3d__flap-face--back{background:linear-gradient(180deg,#efe4d2,#d8c6a8);transform:rotateX(180deg) translateZ(1px)}.db3d__notch{position:absolute;top:42%;left:50%;width:22%;height:10%;transform:translate(-50%);border-radius:0 0 50% 50%;background:#1a120c2e;z-index:2}.db3d__hook{top:20%;width:18%;height:28%;transform-origin:top center;transition:transform .85s var(--db3d-ease) .2s;z-index:1}.db3d__hook--left{left:4%;transform:translateZ(8px) rotate(0)}.db3d__hook--right{right:4%;transform:translateZ(8px) rotate(0)}.db3d__hook-tab{display:block;width:100%;height:100%;border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 30%),linear-gradient(180deg,#e6d5b8,#b89568);box-shadow:0 2px 8px #0003;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}.db3d__story{position:relative;z-index:2;flex:1 0 auto;width:100%;max-width:52rem;margin:0 auto;padding:clamp(3rem,10vh,6rem) 1.5rem 5rem;opacity:0;transform:translateY(36px);pointer-events:none;transition:opacity .8s var(--db3d-ease) .35s,transform .8s var(--db3d-ease) .35s;overflow:hidden}.db3d.is-ready .db3d__story{opacity:1;transform:translateY(0);pointer-events:auto}.db3d__story-intro{text-align:left;margin-bottom:clamp(2.5rem,6vh,4rem);position:relative;z-index:1;border-top:3px solid var(--db3d-ink);padding-top:1.5rem}.db3d__story-eyebrow{margin:0 0 .75rem;font-family:Bebas Neue,Space Grotesk,sans-serif;font-size:clamp(.85rem,2vw,1rem);font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--db3d-brutal)}.db3d__story-title{margin:0;font-family:Bebas Neue,Space Grotesk,sans-serif;font-weight:400;font-size:clamp(2.5rem,8vw,4.5rem);line-height:.92;letter-spacing:.03em;text-transform:uppercase;color:var(--db3d-ink);max-width:14ch}.db3d__steps{display:flex;flex-direction:column;gap:0;position:relative;z-index:1}.db3d__step{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2rem);align-items:start;padding:clamp(1.5rem,4vh,2.25rem) 0;border-bottom:2px solid rgba(255,255,255,.14);opacity:0;transform:translateY(28px);transition:opacity .75s var(--db3d-ease),transform .75s var(--db3d-ease)}.db3d__step:first-child{border-top:2px solid rgba(255,255,255,.14)}.db3d__step.is-visible{opacity:1;transform:translateY(0)}.db3d__step-num{font-family:Bebas Neue,Space Grotesk,sans-serif;font-size:clamp(3.5rem,10vw,6rem);line-height:.8;color:transparent;-webkit-text-stroke:clamp(1.5px,.045em,2.5px) var(--db3d-brutal);paint-order:stroke fill;min-width:2.2ch;letter-spacing:.02em}.db3d__step-heading{margin:.15rem 0 .55rem;font-family:Bebas Neue,Space Grotesk,sans-serif;font-weight:400;font-size:clamp(1.65rem,4.5vw,2.75rem);line-height:.95;letter-spacing:.04em;text-transform:uppercase;color:var(--db3d-brutal)}.db3d__step-detail{margin:0;max-width:34rem;font-family:Space Grotesk,sans-serif;font-size:clamp(.88rem,1.6vw,1rem);font-weight:400;line-height:1.6;letter-spacing:.01em;text-transform:none;color:var(--db3d-muted)}.db3d__cta-wrap{display:flex;justify-content:center;margin-top:clamp(3rem,8vh,5rem)}.db3d__cta{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.9rem 2.25rem;border:2px solid var(--db3d-ink);background:transparent;color:var(--db3d-ink);font-family:Bebas Neue,Space Grotesk,sans-serif;font-size:1rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .35s var(--db3d-ease),border-color .35s var(--db3d-ease),color .35s var(--db3d-ease),transform .35s var(--db3d-ease)}.db3d__cta:hover{background:var(--db3d-ink);border-color:var(--db3d-ink);color:var(--db3d-espresso);transform:translateY(-2px)}@media(max-width:640px){.db3d__stage{padding-top:clamp(4rem,12vh,5.5rem)}.db3d__stage-center{width:min(92vw,380px)}.db3d__model-wrap{top:-10%;right:-12%;bottom:-10%;left:-12%}.db3d__bag-scene{width:min(78%,220px)}.db3d__step{grid-template-columns:1fr;gap:.35rem}.db3d__step-num{font-size:clamp(2.4rem,12vw,3.2rem);-webkit-text-stroke-width:1.75px}}@media(prefers-reduced-motion:reduce){.db3d__orb,.db3d__bag,.db3d__sticker,.db3d__story-title .db3d__asterisk{animation:none!important}.db3d.is-ready .db3d__story,.db3d.is-ready .db3d__story-title .db3d__asterisk{opacity:1;transform:none}.db3d__bag,.db3d__flap,.db3d__hook,.db3d__filter,.db3d__step,.db3d__cta,.db3d__model-wrap{transition-duration:.01ms!important}.db3d__step{opacity:1;transform:none}}
/*# sourceMappingURL=/cdn/shop/t/44/assets/drip-bags-3d.css.map */