/* Keep the approved orange art direction. Motion unfolds inside this fixed frame. */
.tasting{display:block;height:calc(100svh - 129px);min-height:620px;max-height:850px;padding:0;background:var(--orange);color:var(--paper);isolation:isolate}
.hero-copy{position:absolute;left:4%;top:7%;width:42%;z-index:7;pointer-events:none}
.hero-copy>.eyebrow{font-size:10px;margin:0 0 24px}.hero-copy h1{font:900 clamp(104px,9.4vw,154px)/.83 var(--display);letter-spacing:-.03em;margin-left:-4px}.hero-copy h1 br:first-of-type{display:initial}.hero-copy h1>span{color:#ffe4eb}
.hero-bottom{margin-top:24px;max-width:400px;gap:22px}.hero-bottom p{font-size:14px;line-height:1.6}.hero-bottom .text-button{color:var(--ink)}
.dip-playground{position:absolute;right:0;top:0;width:54%;height:100%;margin:0;perspective:1200px;isolation:isolate}
.hero-bowl{width:88%;height:80%;left:3%;top:20%;max-width:none;aspect-ratio:auto;translate:none;transform:rotate(-8deg);z-index:4;transition:width 1.1s cubic-bezier(.16,1,.3,1),height 1.1s cubic-bezier(.16,1,.3,1),top 1.1s cubic-bezier(.16,1,.3,1),left 1.1s cubic-bezier(.16,1,.3,1),transform .3s}
.hero-bowl>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(9px 25px 10px #76271150)}
.hero-bowl.target{transform:rotate(-3deg) scale(1.045)}.hero-bowl.splashed>img{animation:bowl-impact .7s cubic-bezier(.2,.8,.3,1)}
@keyframes bowl-impact{0%,100%{scale:1}25%{scale:1.055 .965;rotate:2deg}58%{scale:.985 1.02;rotate:-2deg}}
.bowl-shadow{display:none}
.bite{width:28%;left:68%;top:8%;z-index:20;transform:translate(var(--bx),var(--by)) rotate(var(--br)) scale(var(--bite-scale,1));transition:transform .6s cubic-bezier(.18,.8,.3,1),width 1s cubic-bezier(.16,1,.3,1),left 1s cubic-bezier(.16,1,.3,1),top 1s cubic-bezier(.16,1,.3,1)}
.bite.dragging{transition:none}.bite:disabled{opacity:1}.bite img{filter:drop-shadow(7px 15px 5px #69250040)}
.bite-tag{left:35%;bottom:0;font-size:8px;padding:6px 11px;box-shadow:0 3px 0 #8a30131c}.bite.dipped .bite-tag{opacity:1}.bite.dipped .bite-tag{font-size:0}.bite.dipped .bite-tag::before{content:'ONE MORE?';font-size:8px}.bite.dipped .bite-tag>span{font-size:16px}
.play-instruction{left:15%;top:9%;width:58%;transform:rotate(-7deg);color:var(--paper)}.play-instruction>span{font:italic 28px var(--serif);white-space:nowrap}.play-instruction svg{height:65px;width:130px;margin:0 0 0 80px}
.dip-caption{left:25%;right:auto;width:42%;bottom:5%;opacity:0;transform:translateY(15px);transition:opacity .5s .6s,transform .6s .6s;z-index:8}.dip-caption .eyebrow,.dip-caption p{display:none}.dip-caption h2{font:italic 32px/1 var(--serif);color:var(--paper);margin:0}
.dunk-result,#dunk-again,.scroll-cue{display:none!important}
.dip-ripple{left:17%;top:20%;width:64%;height:45%;border-width:4px}.splash{display:none}
.table-spread{position:absolute;inset:0;z-index:6;pointer-events:none}.arrival{position:absolute;opacity:0;visibility:hidden}.spread-open .arrival{opacity:1;visibility:visible}
.spread-open .hero-bowl{width:58%;height:60%;left:19%;top:25%}.spread-open .bite{width:21%;left:51%;top:2%}.spread-open .dip-caption{opacity:1;transform:translateY(0)}.spread-open .play-instruction{opacity:0!important}
.table-tub{width:27%;background:none;border:0;padding:0;z-index:6;pointer-events:auto;touch-action:none;translate:var(--tx,0px) var(--ty,0px);cursor:grab;user-select:none;transition:filter .2s}
.table-tub img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(6px 14px 5px #76271150);transform:rotate(var(--rest)) rotateY(var(--tilt,0deg));transition:transform .35s cubic-bezier(.2,1.5,.4,1),filter .35s;pointer-events:none}
.table-tub:hover img,.table-tub.drop-ready img,.table-tub.moving img{transform:translateY(-8px) rotate(0deg) rotateY(var(--tilt,0deg)) scale(1.06);filter:drop-shadow(9px 23px 8px #76271150)}.table-tub.moving{z-index:15;cursor:grabbing}
.tub-caption{display:block;position:relative;color:var(--paper);width:fit-content;margin:2px auto 0;padding-right:20px;text-align:left}.tub-caption strong{display:block;font-size:12px;line-height:1.2}.tub-caption small{display:block;font-size:9px;margin-top:4px;color:#391c19}.tub-caption i{font-style:normal;position:absolute;top:-2px;right:0;font-size:18px}
.tub-slot-0{left:-6%;top:1%;--rest:-14deg;--sx:-60vw;--sy:-35vh;--roll:-50deg;--delay:0ms}.tub-slot-1{right:0%;top:16%;--rest:12deg;--sx:50vw;--sy:-10vh;--roll:65deg;--delay:110ms}.tub-slot-2{right:1%;bottom:2%;--rest:-10deg;--sx:45vw;--sy:45vh;--roll:35deg;--delay:220ms}
.spread-open .table-tub{animation:tub-slide-in .75s var(--delay) both cubic-bezier(.16,1,.3,1)}
@keyframes tub-slide-in{from{opacity:0;transform:translateX(var(--sx))}to{opacity:1;transform:none}}
.table-vegetables{left:-8%;bottom:6%;width:33%;z-index:2;rotate:15deg;pointer-events:none}.table-vegetables img{width:100%;filter:drop-shadow(6px 16px 6px #76271140)}.spread-open .table-vegetables{animation:veg-tumble 1.25s .25s both cubic-bezier(.16,1.15,.3,1)}
@keyframes veg-tumble{from{opacity:0;transform:translateY(45px)}to{opacity:1;transform:translateY(0)}}
.table-bites{left:24%;bottom:1%;height:11%;width:28%;z-index:3}.table-bites img{position:absolute;width:32%;filter:drop-shadow(4px 8px 4px #76271140);opacity:0;transform:translateY(80px) scale(.2);transition:transform .7s cubic-bezier(.16,1.5,.3,1),opacity .4s}.table-bites img:nth-child(1){left:0;top:0;rotate:-25deg}.table-bites img:nth-child(2){left:39%;top:19%;rotate:22deg}.table-bites img:nth-child(3){left:72%;top:-15%;rotate:-15deg}
.spread-open .table-bites img:first-child,[data-dips="2"] .table-bites img:nth-child(2),[data-dips="3"] .table-bites img{opacity:1;transform:translateY(0) scale(1)}
.table-controls{position:absolute;left:4%;bottom:4%;z-index:9;max-width:38%;color:var(--ink)}.table-controls p{font-size:10px;letter-spacing:.2px}.table-controls>div{display:flex;gap:20px;margin-top:7px}.table-controls button{background:none;font-size:9px;padding:3px 0;border-bottom:1px solid #2b162030}.hero-in-view .chat-launch{display:none}
.dip-effects{position:absolute;inset:0;z-index:18;pointer-events:none}.dip-effects canvas,.dip-effects svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.dip-effects svg{stroke:none;opacity:0}.dip-shout{position:absolute;left:13%;top:18%;max-width:80%;font:900 clamp(32px,4.6vw,65px)/.88 var(--display);letter-spacing:-1px;color:#fff5df;text-shadow:3px 4px 0 #a5351c;opacity:0;rotate:-4deg}.drop-invitation{position:absolute;left:28%;top:42%;padding:8px 12px;background:var(--ink);color:var(--paper);font-size:9px;font-weight:700;letter-spacing:.5px;transform:rotate(-7deg) scale(.5);opacity:0;transition:transform .25s cubic-bezier(.2,1.8,.4,1),opacity .2s}.dip-playground:has(.hero-bowl.target) .drop-invitation{opacity:1;transform:rotate(-7deg) scale(1)}
@media(max-width:1050px) and (min-width:701px){.hero-copy h1{font-size:10.4vw}.hero-copy>.eyebrow{font-size:8px}.hero-bottom{gap:15px}.hero-bottom p{font-size:12px}.hero-bottom .pill-button{font-size:11px;padding:12px 18px;min-height:45px}.hero-bottom .text-button{font-size:10px}.play-instruction>span{font-size:24px}.dip-caption h2{font-size:27px}.tub-caption strong{font-size:10px}.tub-caption small{font-size:8px}.tub-caption{padding-right:15px}.table-controls p{font-size:9px}.table-controls button{font-size:8px}.table-tub{width:29%}.table-vegetables{width:35%}}
@media(max-width:700px){.preview-bar{font-size:7px;padding:5px 4%}.preview-bar span{font-size:6px}.site-header{height:74px;padding:0 4%}.logo-link img{height:70px;width:70px}.site-header nav{font-size:11px;gap:16px}.site-header nav a:last-child{display:none}.bag-button{font-size:10px;padding:7px 10px;gap:8px}.bag-button>span:last-child{display:none}.tasting{height:calc(100svh - 96px);min-height:710px;max-height:900px}.hero-copy{top:4%;left:6%;width:88%;max-width:none}.hero-copy>.eyebrow{font-size:8px;margin-bottom:14px}.hero-copy h1{font-size:clamp(66px,15.6vw,105px);line-height:.85;letter-spacing:-2px}.hero-copy h1 br:first-of-type{display:none}.hero-copy h1>span{display:inline-block}.hero-copy h1 br:nth-of-type(2){display:none}.hero-bottom{margin-top:13px;width:100%;max-width:none;gap:9px;justify-content:space-between;align-items:center}.hero-bottom p{font-size:10px;line-height:1.45;max-width:none;width:auto}.hero-bottom .pill-button{min-height:38px;padding:9px 14px;font-size:10px;gap:20px;margin:0}.hero-bottom .pill-button>span:last-child{font-size:17px}.hero-bottom .text-button{display:none}.dip-playground{width:100%;top:235px;height:calc(100% - 275px);margin:0}.hero-bowl{width:81%;height:88%;left:8%;top:19%;translate:none}.bite{width:27%;left:69%;top:0}.play-instruction{left:15%;top:0;width:65%}.play-instruction>span{font-size:22px}.play-instruction svg{height:45px;width:90px;margin:0 0 0 65px}.bite-tag{font-size:6px;padding:4px 7px;left:20%}.bite-tag span{font-size:12px;padding-left:5px}.bite.dipped .bite-tag::before{font-size:6px}.bite.dipped .bite-tag>span{font-size:12px}.spread-open .hero-bowl{width:58%;height:58%;left:19%;top:25%}.spread-open .bite{width:22%;top:0;left:45%}.table-tub{width:29%}.tub-slot-0{left:0%;top:1%}.tub-slot-1{right:-1%;top:25%}.tub-slot-2{right:0;bottom:0%}.table-vegetables{width:32%;left:0%;bottom:1%;rotate:8deg}.tub-caption{padding-right:12px;margin-top:0}.tub-caption strong{font-size:9px}.tub-caption small{font-size:7px;margin-top:3px}.tub-caption i{font-size:12px}.dip-caption{left:27%;width:46%;bottom:12%}.dip-caption h2{font-size:24px}.table-bites{left:36%;width:29%;bottom:0;height:9%}.table-controls{left:6%;bottom:2%;max-width:88%;width:88%;display:flex;justify-content:space-between;align-items:center;gap:10px}.table-controls p{font-size:8px;max-width:155px}.table-controls>div{display:flex;gap:12px;margin:0}.table-controls button{font-size:7px;max-width:80px;text-align:left}.dip-shout{top:19%;left:15%;font-size:38px;max-width:75%}.drop-invitation{font-size:7px;padding:6px 9px;left:25%;top:46%}}
@media(max-width:380px){.hero-copy h1{font-size:61px}.hero-copy>.eyebrow{font-size:7px}.hero-bottom p{font-size:9px}.tasting{min-height:690px}.dip-playground{top:222px;height:calc(100% - 262px)}.table-controls p{font-size:7px;max-width:130px}.tub-caption strong{font-size:8px}.tub-caption small{font-size:6px}}
@media(prefers-reduced-motion:reduce){.spread-open .arrival,.hero-bowl.splashed>img{animation:none!important}.arrival,.hero-bowl,.bite,.table-bites img{transition:none!important}.dip-effects{display:none}}

.is-dipping .bite-tag{opacity:0!important}
@media(min-width:701px){.dip-caption{bottom:11%}.table-bites{left:20%;bottom:0%;width:22%;height:9%}}

/* The headline is the response surface. Its frame stays fixed while letters move. */
.hero-copy{--headline-size:clamp(104px,9.4vw,154px)}
.hero-copy h1{font-size:var(--headline-size);height:calc(var(--headline-size)*2.58);line-height:.86;perspective:800px}
.entered .hero-copy h1{animation:none}
.hero-copy h1 .headline-row{display:flex;height:calc(var(--headline-size)*.86);align-items:center;color:var(--paper);white-space:nowrap}
.hero-copy h1 .headline-row:last-child{color:#ffe4eb}
.headline-word{display:block;font-size:calc(var(--headline-size)*var(--word-fit,1));transform-origin:12% 65%;line-height:.86}
.headline-letter{display:inline-block;transform-origin:center 80%}
.dip-effects{overflow:hidden}
.logo-link img,footer img,.loader-logo img,.logo-parts{mix-blend-mode:normal}
.loader-logo>svg{display:none}
.loader-logo,.loader-centre{width:300px}.loader-logo{height:300px}
.loader-logo img,.logo-parts{width:280px;height:280px}
.logo-symbol{clip-path:circle(21.6% at 49.7% 28.4%);transform-origin:49.7% 28.4%;animation:logo-swirl-turn 1.85s cubic-bezier(.25,.65,.25,1) both}
.loader-logo .logo-symbol img{animation:none;transform:none}
.logo-words{clip-path:inset(49.6% 0 0 0);animation:logo-word-arrive .8s .4s both cubic-bezier(.2,.8,.2,1)}
.loader-logo .logo-words img{animation:none}
.loader-caption{margin-top:10px}
@keyframes logo-swirl-turn{0%{opacity:0;transform:rotate(-250deg) scale(.55)}15%{opacity:1}65%{transform:rotate(18deg) scale(1.08)}82%{transform:rotate(-7deg) scale(.98)}100%{opacity:1;transform:rotate(0) scale(1)}}
@keyframes logo-word-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px) and (min-width:701px){.hero-copy{--headline-size:10.4vw}}
@media(min-width:701px) and (max-height:760px){
 .tasting{min-height:500px}
 .hero-copy{top:6%;--headline-size:min(10.4vw,calc((100svh - 129px)*.18))}
 .hero-copy>.eyebrow{margin-bottom:18px}
 .hero-bottom{margin-top:18px}
 .table-controls{bottom:3%}
}
@media(max-width:700px){
 .hero-copy{--headline-size:clamp(55px,15.2vw,78px);top:3%}
 .hero-copy h1{letter-spacing:-1px}
 .hero-bottom{margin-top:12px}
 .tasting{min-height:760px}
 .dip-playground{top:265px;height:calc(100% - 308px)}
 .hero-copy h1 .headline-row{display:flex}
 .loader-logo,.loader-centre{width:260px}.loader-logo{height:260px}.loader-logo img,.logo-parts{width:240px;height:240px}
}
@media(max-width:380px){.hero-copy{--headline-size:54px}.dip-playground{top:251px;height:calc(100% - 294px)}.tasting{min-height:730px}}
@media(prefers-reduced-motion:reduce){.logo-symbol,.logo-words{animation:none!important}}

/* Surface shading is confined to the food, underneath the bite. */
.dip-surface{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;border-radius:50%}
.surface-dent,.surface-wave{position:absolute;left:50%;top:43%;width:28%;height:18%;border-radius:50%;opacity:0;pointer-events:none}
.surface-dent{background:radial-gradient(ellipse at 52% 62%,transparent 24%,#51200d42 62%,#fff4c438 79%,transparent 85%);box-shadow:inset 2px 7px 8px #49200b45,inset -2px -3px 4px #fff6d44a;mix-blend-mode:multiply}
.surface-wave{width:30%;height:19%;border:2px solid #fff2c550;border-top-color:#63300e38;border-bottom-color:#fff7dc88;box-shadow:0 2px 3px #48210d20,inset 0 -2px 2px #51290d20}
/* Four-container stage. Entrances are coordinated by the reveal timeline. */
.table-spread{z-index:5}.table-tub{position:absolute}
.table-tub,.spread-open .table-tub{animation:none;visibility:visible;opacity:1;width:28%;cursor:pointer;translate:none;transition:none;will-change:transform,opacity}
.table-tub[hidden]{display:none}
.spread-open .table-tub{left:var(--land-x);top:var(--land-y);right:auto;bottom:auto;width:var(--land-size)}
.table-tub img{transform:none;filter:blur(0px) drop-shadow(2px 4px 2px #57200f35) drop-shadow(5px 12px 7px #67281150);transition:transform .22s ease,filter .22s ease}
.table-tub:hover img,.table-tub:focus-visible img{transform:translateY(-5px) scale(1.035);filter:drop-shadow(5px 18px 9px #67281145)}
.table-tub:focus-visible{outline:2px dashed var(--paper);outline-offset:5px;border-radius:50%}
.tub-slot-0{left:0;right:auto;top:8%;bottom:auto}.tub-slot-1{left:auto;right:2%;top:10%;bottom:auto}
.tub-slot-2{left:1%;right:auto;top:auto;bottom:8%}.tub-slot-3{left:auto;right:1%;top:auto;bottom:7%}
.spread-open .hero-bowl{width:50%;height:52%;left:25%;top:26%;transform:none}
.spread-open .bite{width:19%;left:42%;top:0}
.spread-open .dip-caption{left:28%;width:44%;bottom:13%;text-align:center}
.dip-caption h2{font-size:clamp(24px,2.5vw,36px)}
.tub-caption{padding-right:14px}.tub-caption strong{font-size:12px}.tub-caption small{font-size:9px}
.collection-note{font-size:9px;opacity:.7;align-self:center}
.hero-bowl.splashed>img{animation:none}.dip-ripple{display:none}
.table-controls{max-width:40%}.table-controls p{font-size:11px}
[data-reveal="moving"] .table-tub{pointer-events:none}
.table-tub .tub-caption{transform:translateX(var(--label-shift,0px));max-width:145px;white-space:normal;transition:opacity .2s ease;line-height:1.25}
[data-reveal="moving"] .tub-caption{opacity:0}
[data-reveal="idle"] .tub-caption{opacity:1}
@media(max-width:700px){
 .table-tub,.spread-open .table-tub{width:var(--land-size,28%)}
 .tub-slot-0{left:2%;top:4%;right:auto;bottom:auto}.tub-slot-1{right:2%;top:6%;left:auto;bottom:auto}
 .tub-slot-2{left:2%;bottom:7%;right:auto;top:auto}.tub-slot-3{right:2%;bottom:6%;left:auto;top:auto}
 .spread-open .hero-bowl{left:26%;top:23%;width:48%;height:52%}
 .spread-open .bite{left:42%;top:-3%;width:19%}
 .spread-open .dip-caption{left:28%;width:44%;bottom:16%}
 .dip-caption h2{font-size:21px}.tub-caption strong{font-size:9px}.tub-caption small{font-size:7px}
 .table-controls{max-width:88%}.table-controls p{font-size:8px}.collection-note{display:none}
}
