/* The scroll-built burger: exploded layers close bottom-up, "Cooking…", then "Done!" under a steam puff.
   Themes set: --t-ink --t-accent --t-track --t-glow --t-shadow --t-steam */
.tower{position:relative;height:470vh}
.t-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.t-box{position:absolute;z-index:2;left:var(--t-x,50%);top:0;height:48svh;aspect-ratio:865/1000;perspective:1100px;
  transform:translate(-50%,-50%) translate3d(var(--bx,0px),var(--by,0px),0) scale(var(--bs,1));will-change:transform}
/* swap point: 0.16 s, while the puff is thickest */
.t-layer{position:absolute;left:calc(50% + var(--dx) * 100%);top:calc(var(--cy) * 100%);width:calc(var(--w) * 100%);height:auto;
  transform:translate(-50%,-50%) translate3d(var(--ox,0px),var(--oy,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(var(--r,0deg))
    scale(calc(var(--s,1) * var(--sx,1)),calc(var(--s,1) * var(--sy) * var(--sq,1)));opacity:var(--o,1);
  transform-origin:50% 62%;will-change:transform;transition:opacity .1s linear .16s;z-index:calc(10 - var(--i))}
.t-final{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:20;transform:scale(.965);
  transition:opacity .14s linear,transform .2s ease-out}
.t-shadow{position:absolute;left:8%;right:8%;bottom:-5%;height:12%;border-radius:50%;background:radial-gradient(closest-side,var(--t-shadow),transparent);
  opacity:calc(.35 + var(--built,0) * .5);transform:scaleX(calc(.7 + var(--built,0) * .3));z-index:0}
.t-glow{position:absolute;left:-20%;right:-20%;top:30%;bottom:-25%;border-radius:50%;background:radial-gradient(closest-side,var(--t-glow),transparent 75%);
  opacity:var(--heat,0);z-index:0;pointer-events:none}
.t-shine{position:absolute;inset:0;z-index:21;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.62) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:130% 0;
  -webkit-mask:url(img/tower/full.webp) center/100% 100% no-repeat;mask:url(img/tower/full.webp) center/100% 100% no-repeat;mix-blend-mode:soft-light}
.t-steam{position:absolute;inset:-18% -22% 0;z-index:22;pointer-events:none}
.t-steam i,.t-steam b{position:absolute;display:block;border-radius:50%;opacity:0}
.t-steam i{width:11%;height:40%;top:2%;background:radial-gradient(closest-side,var(--t-steam),transparent);filter:blur(3px)}
.t-steam i:nth-child(1){left:30%}.t-steam i:nth-child(2){left:46%;animation-delay:.8s!important}.t-steam i:nth-child(3){left:58%;animation-delay:1.5s!important}.t-steam i:nth-child(4){left:38%;animation-delay:2.1s!important}
.m-cook .t-steam i{animation:wisp 2.6s cubic-bezier(.3,.6,.4,1) infinite}
@keyframes wisp{0%{opacity:0;transform:translate3d(0,60%,0) scale(.6,.5)}35%{opacity:.55}100%{opacity:0;transform:translate3d(30%,-55%,0) scale(1.7,1.25)}}
.t-steam b{width:78%;height:58%;background:radial-gradient(closest-side,rgba(255,250,240,.97) 0%,rgba(255,248,236,.88) 46%,rgba(255,246,232,0) 78%)}
.t-steam b:nth-child(5){left:-4%;top:18%}.t-steam b:nth-child(6){left:28%;top:10%}.t-steam b:nth-child(7){left:10%;top:40%}
.t-steam b:nth-child(8){left:32%;top:42%}.t-steam b:nth-child(9){left:0%;top:60%}.t-steam b:nth-child(10){left:26%;top:64%}.t-steam b:nth-child(11){left:14%;top:-4%}
.m-done .t-steam b{animation:puff .95s cubic-bezier(.2,.75,.25,1) both}
.m-done .t-steam b:nth-child(odd){animation-delay:.05s}
@keyframes puff{0%{opacity:0;transform:scale(.4)}14%{opacity:.95;transform:scale(1)}30%{opacity:.9;transform:translate3d(0,-5%,0) scale(1.08)}100%{opacity:0;transform:translate3d(0,-48%,0) scale(1.6)}}
/* the swap happens under the puff: layers out and the finished burger in at ~200 ms */
.m-done .t-layer{opacity:0}
.m-done .t-final{opacity:1;transform:none;transition:opacity .1s linear .16s,transform .8s cubic-bezier(.3,1.55,.5,1) .16s}
.m-done .t-shine{opacity:1;animation:shine 1.1s cubic-bezier(.4,0,.2,1) .6s both}
@keyframes shine{from{background-position:130% 0}to{background-position:-30% 0}}
.t-stamp{position:absolute;z-index:23;left:-2%;top:6%;padding:.12em .34em .08em;border:.07em solid currentColor;border-radius:.2em;
  font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:.01em;color:var(--t-accent);transform:rotate(-7deg) scale(1.7);opacity:0;pointer-events:none}
.m-done .t-stamp{animation:stamp .5s cubic-bezier(.2,1.5,.4,1) .34s both}
@keyframes stamp{0%{opacity:0;transform:rotate(-16deg) scale(1.8)}55%{opacity:1}100%{opacity:1;transform:rotate(-7deg) scale(1)}}

/* "toss": the ingredient's name punches in huge behind the burger, in its own colour */
.t-words{position:absolute;inset:0;z-index:1;pointer-events:none}
.t-words div{position:absolute;left:0;right:0;top:var(--t-wy,22%);transform:translateY(-50%) scale(1.4);text-align:center;white-space:nowrap;
  font-weight:900;font-stretch:62%;text-transform:uppercase;line-height:.8;color:var(--wc);opacity:0;
  transition:opacity .18s linear,transform .55s cubic-bezier(.2,1.3,.35,1)}
.t-words div.in{opacity:.92;transform:translateY(-50%) scale(1)}
.t-stage:not(.m-build) .t-words div{opacity:0}
[data-motion=toss] .b-build{display:none}

/* text blocks under / beside the burger: one at a time */
.t-ui{position:absolute;z-index:30}
.t-blk{transition:opacity .4s ease-out,transform .6s cubic-bezier(.2,.8,.2,1)}
.t-stage:not(.m-hero) .b-hero,.t-stage:not(.m-build) .b-build,.t-stage:not(.m-cook) .b-cook,.t-stage:not(.m-done) .b-done{opacity:0;transform:translate3d(0,18px,0);visibility:hidden;pointer-events:none}
.b-build,.b-cook,.b-done{position:absolute;left:0;right:0;bottom:0}
.t-count{font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-bottom:6px}
.t-steps{position:relative;min-height:1.95em}
.t-steps .rv{position:absolute;left:0;right:0;bottom:0;opacity:0;transition:opacity .12s linear}
.t-steps .rv.in{opacity:1;transition:opacity .01s linear .1s}
.t-steps .rv.in .wi{transition-delay:calc(.1s + var(--d,0) * 45ms)}
.t-cooklabel{display:flex;justify-content:space-between;align-items:baseline}
.t-dots::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.t-bar{position:relative;height:6px;border-radius:6px;background:var(--t-track);overflow:hidden;margin-top:12px}
.t-bar i{position:absolute;inset:0;border-radius:6px;background:var(--t-accent);transform-origin:left;transform:scaleX(var(--cookp,0))}
.b-done .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

@media (prefers-reduced-motion:reduce){
  .tower{height:auto}
  .t-stage{position:relative;height:auto;min-height:100svh}
  .m-cook .t-steam i,.m-done .t-steam b,.m-done .t-shine,.m-done .t-stamp{animation:none}
  .m-done .t-stamp{opacity:1;transform:rotate(-7deg)}
}

/* "Done!" has its own call button, so the floating one steps aside */
.t-done .call-pill{transform:translate(-50%,160%)!important}