.ingredient-showcase{--showcase-bg:#dcc6a8;--showcase-ink:#442b22;--cup-size:clamp(290px,38vw,560px);--pointer-x:0px;--pointer-y:0px;--scroll-shift:0px;--tilt-x:0deg;--tilt-y:0deg;--scroll-tilt-x:0deg;--scroll-tilt-y:0deg;--cup-depth:52px;--back-depth:-60px;--front-depth:110px;background:var(--showcase-bg);color:var(--showcase-ink);position:relative;padding:0!important;transition:background-color .7s ease,color .7s ease;isolation:isolate;overflow:clip}
.showcase-stage{position:relative;min-height:clamp(650px,88svh,1000px);display:grid;place-items:center;isolation:isolate;overflow:clip}
.showcase-eyebrow{position:absolute;z-index:7;left:24px;right:24px;top:34px;text-align:center;font-size:1.125em;line-height:1;letter-spacing:.08em;text-transform:uppercase;margin:0}
.showcase-slides{position:absolute;inset:0;z-index:2;pointer-events:none;perspective:1100px;perspective-origin:50% 46%;transform-style:preserve-3d}
.showcase-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease,visibility 0s .7s;transform-style:preserve-3d}
.showcase-slide.is-active{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
.showcase-slide.is-leaving{visibility:visible;transition:opacity .6s ease,visibility 0s .65s}
.showcase-title{position:absolute;left:50%;top:46%;width:max-content;max-width:none;transform:translate(-50%,-50%) translate3d(calc(var(--pointer-x)*-.45),calc(var(--scroll-shift)*-.22),-95px) rotateY(calc(var(--tilt-y)*-.2));color:var(--showcase-ink);font-size:clamp(125px,23vw,350px);font-weight:600;line-height:.7;letter-spacing:-.055em;white-space:nowrap;text-transform:uppercase;margin:0;z-index:1;opacity:.92;transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .7s}
.showcase-slide:not(.is-active) .showcase-title{transform:translate(-50%,-50%) translateX(calc(var(--switch-direction,1)*9vw));opacity:0}
.showcase-cup-wrap{position:absolute;left:50%;top:46%;width:var(--cup-size);aspect-ratio:1;transform:translate(-50%,-50%) translate3d(var(--pointer-x),calc(var(--pointer-y) + var(--scroll-shift)),var(--cup-depth)) rotateX(calc(var(--tilt-x) + var(--scroll-tilt-x))) rotateY(calc(var(--tilt-y) + var(--scroll-tilt-y)));transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,.7,.18,1);will-change:transform;z-index:3}
.showcase-cup{width:100%;height:100%;object-fit:contain;filter:drop-shadow(calc(6px + var(--pointer-x)*-.3) calc(25px + var(--pointer-y)*-.3) 20px #442b2233);transform:rotate(-5deg) translateY(0) scale(1);transition:transform .85s cubic-bezier(.22,.7,.18,1),opacity .55s ease;will-change:transform}
.showcase-slide:not(.is-active) .showcase-cup{transform:translateY(45px) rotate(calc(var(--switch-direction,1)*-14deg)) scale(.87);opacity:0}
.showcase-slide.is-leaving .showcase-cup{transform:translateY(-36px) rotate(calc(var(--switch-direction,1)*12deg)) scale(.95);opacity:0}
.showcase-ingredient-layer{position:absolute;left:-7%;top:8%;width:114%;height:85%;object-fit:contain;z-index:2;pointer-events:none;opacity:0;transform:translate3d(calc(var(--pointer-x)*-.6),calc(var(--pointer-y)*-.6 - var(--scroll-shift)*.5),var(--back-depth)) rotateX(calc(var(--tilt-x)*-.35)) rotateY(calc(var(--tilt-y)*-.35)) rotate(-1deg) scale(1);transition:transform 1s cubic-bezier(.22,.7,.18,1),opacity .7s ease;will-change:transform;visibility:hidden}
.showcase-slide[data-ingredient-ready=true] .showcase-ingredient-layer{visibility:visible}
.showcase-slide.is-active[data-ingredient-ready=true] .showcase-ingredient-layer{opacity:1}
.showcase-ingredient-back{-webkit-mask-image:linear-gradient(#000 0%,#000 58%,transparent 76%);mask-image:linear-gradient(#000 0%,#000 58%,transparent 76%)}
.showcase-ingredient-front{z-index:4;left:-16%;top:6%;width:132%;height:100%;filter:blur(3px);-webkit-mask-image:linear-gradient(transparent 0%,transparent 52%,#000 73%);mask-image:linear-gradient(transparent 0%,transparent 52%,#000 73%);transform:translate3d(calc(var(--pointer-x)*1.45),calc(var(--pointer-y)*1.45 + var(--scroll-shift)*1.2),var(--front-depth)) rotateX(calc(var(--tilt-x)*1.2)) rotateY(calc(var(--tilt-y)*1.2)) rotate(2deg) scale(1.08)}
.showcase-slide:not(.is-active) .showcase-ingredient-layer{transform:translateY(25px) rotate(calc(var(--switch-direction,1)*8deg)) scale(.85);opacity:0}
.showcase-nav{position:absolute;top:46%;z-index:8;width:52px;height:52px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--cream,#fff7e9);color:var(--showcase-ink);box-shadow:0 3px 14px #442b2215;font-size:28px;line-height:1;cursor:pointer;transform:translate(-50%,-50%);transition:background .2s,box-shadow .25s,scale .25s}
.showcase-prev{left:calc(50% - var(--cup-size)*.52)}
.showcase-next{left:calc(50% + var(--cup-size)*.52)}
.showcase-nav:hover{scale:1.08;box-shadow:0 5px 20px #442b2230}
.showcase-nav:active{scale:.96}
.showcase-nav:focus-visible,.showcase-dot:focus-visible,.showcase-cta:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.showcase-bottom{position:absolute;left:24px;right:24px;bottom:32px;z-index:9;display:flex;flex-direction:column;align-items:center;gap:20px}
.showcase-cta{display:inline-flex;align-items:center;gap:20px;font-size:1.5em;font-weight:500;line-height:1;letter-spacing:-.015em;border-radius:50px;background:var(--cream,#fff7e9);color:var(--showcase-ink);padding:12px 22px;box-shadow:0 3px 15px #442b2215;min-height:44px;transition:transform .3s,box-shadow .3s}
.showcase-cta:hover{transform:translateY(-3px);box-shadow:0 8px 22px #442b2225}
.showcase-dots{display:flex;justify-content:center;align-items:center;gap:4px}
.showcase-dot{position:relative;width:40px;height:28px;padding:0;border:0;background:none;cursor:pointer;color:var(--showcase-ink)}
.showcase-dot:after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:currentColor;opacity:.25;transition:width .3s,opacity .3s}
.showcase-dot[aria-pressed=true]:after{width:22px;border-radius:10px;opacity:1}
.showcase-copy{position:relative;z-index:6;text-align:center;padding:0 24px 60px;max-width:900px;margin:auto}
.showcase-product-name{font-size:3em;line-height:.8;letter-spacing:-.03em;margin:0 0 .3em;font-weight:500}
.showcase-product-description{font-size:1.875em;line-height:1;max-width:35ch;margin:0 auto}
.showcase-screenreader{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
@media(max-width:991px){.ingredient-showcase{--cup-size:clamp(300px,48vw,460px);--cup-depth:32px;--back-depth:-45px;--front-depth:75px}.showcase-slides{perspective:900px}.showcase-stage{min-height:clamp(610px,84svh,900px)}.showcase-title{font-size:26vw;letter-spacing:-.06em}.showcase-eyebrow{font-size:.95em}.showcase-product-name{font-size:2.6em}.showcase-product-description{font-size:1.55em}.showcase-ingredient-layer{left:-18%;width:136%;height:80%;top:9%}.showcase-ingredient-front{left:-24%;width:148%;height:100%;top:4%}.showcase-nav{width:46px;height:46px;font-size:26px}.showcase-cta{font-size:1.3em}}
@media(max-width:479px){.ingredient-showcase{--cup-size:min(82vw,330px);--cup-depth:20px;--back-depth:-32px;--front-depth:52px}.showcase-slides{perspective:760px}.showcase-stage{min-height:clamp(540px,80svh,760px)}.showcase-title{font-size:28vw}.showcase-eyebrow{top:28px;left:16px;right:16px;font-size:.85em}.showcase-prev{left:calc(50% - var(--cup-size)*.47)}.showcase-next{left:calc(50% + var(--cup-size)*.47)}.showcase-nav{width:44px;height:44px;font-size:25px}.showcase-bottom{bottom:24px;gap:16px}.showcase-cta{font-size:1.25em;padding:12px 18px}.showcase-copy{padding:0 20px 46px}.showcase-product-name{font-size:2.5em}.showcase-product-description{font-size:1.5em}.showcase-ingredient-layer{left:-25%;width:150%;top:6%;height:86%}.showcase-ingredient-front{left:-34%;width:168%;height:100%;top:4%;filter:blur(2px)}}
@media(hover:none){.showcase-nav:hover,.showcase-cta:hover{scale:1;transform:translate(-50%,-50%)}.showcase-cta:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.showcase-slides{perspective:none}.showcase-slides,.showcase-slide{transform-style:flat}.ingredient-showcase,.ingredient-showcase *{transition:none!important;animation:none!important;will-change:auto!important}.showcase-cup-wrap{transform:translate(-50%,-50%)}.showcase-title{transform:translate(-50%,-50%)}.showcase-ingredient-layer{transform:none}.showcase-ingredient-front{transform:scale(1.08)}.showcase-slide.is-leaving{visibility:hidden}}