/* ============================================================
   IL CALDERONE (versione D) — mensola di ingredienti da trascinare dentro
   Il pezzo che trascini e' un clone fisso sulla pagina; il fumo e' una tela
   sopra il calderone. Niente di tutto questo cambia il layout della sezione.
   ============================================================ */
.brew{position:absolute;inset:0;z-index:4;pointer-events:none}
.brew canvas{position:absolute;left:-25%;top:-75%;width:150%;height:175%;pointer-events:none}
.brew .shelf{position:absolute;left:0;right:0;bottom:0;height:0}
.bi{position:absolute;padding:0;border:0;background:none;cursor:grab;pointer-events:auto;touch-action:none;
  width:clamp(44px,var(--w,9%),77px);transform:translate(-50%,0) rotate(var(--r,0deg));transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1);-webkit-tap-highlight-color:transparent}
.bi img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 4px 0 rgba(60,20,20,.16))}
.bi:hover{transform:translate(-50%,-6px) rotate(calc(var(--r,0deg) * -1)) scale(1.08)}
.bi.away{opacity:.22;pointer-events:none}
.brew.busy .bi{opacity:.4;pointer-events:none}
.bdrag{position:fixed;left:0;top:0;z-index:990;pointer-events:none;will-change:transform;filter:drop-shadow(0 12px 8px rgba(60,20,20,.22))}
.bdrag img{display:block;width:100%;height:auto}

/* la bocca del calderone: si accende quando ci porti sopra un ingrediente */
.bmouth{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.bmouth i{position:absolute;left:0;top:0;width:clamp(150px,30vw,300px);height:clamp(54px,11vw,110px);transform:translate(-50%,-50%) scale(.85);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,240,190,.75),rgba(255,240,190,0));opacity:0;transition:opacity .2s,transform .3s}
.brew.hot .bmouth i{opacity:1;transform:translate(-50%,-50%) scale(1.05)}

/* il colore del liquido cambia con gli ingredienti */
.bliquid{position:absolute;left:19%;top:11%;width:62%;height:21%;border-radius:50%;pointer-events:none;
  background:var(--lq,transparent);mix-blend-mode:color;filter:blur(clamp(14px,2.6vw,30px));opacity:0;transition:opacity .5s,background .5s}

/* i tre posti del calderone */
.bslots{position:absolute;left:50%;top:7%;transform:translateX(-50%);display:flex;gap:10px;pointer-events:none}
.bslots i{width:clamp(14px,2.2vw,22px);aspect-ratio:1;border-radius:50%;border:2px dashed var(--red);background:transparent;transition:background .3s,border-style .3s,transform .4s cubic-bezier(.3,1.8,.5,1)}
.bslots i.on{background:var(--c);border-style:solid;border-color:var(--c);transform:scale(1.25)}

.brew-hint{position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);white-space:nowrap;font-family:Bayon,Impact,sans-serif;font-size:clamp(14px,1.5vw,22px);
  text-transform:uppercase;color:var(--red);opacity:.85;pointer-events:none}
@media (prefers-reduced-motion:reduce){.bi,.bmouth i{transition:none}}

/* la bottiglia nuova e Corinna che la porta via: sopra tutta la pagina, ma fissi alla finestra */
.bfx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:985}
.bbottle,.bkid{position:absolute;left:0;top:0;will-change:transform;max-width:none;height:auto}
.bbottle{filter:drop-shadow(0 6px 4px rgba(50,20,20,.22))}
.bkid{filter:drop-shadow(0 10px 6px rgba(50,20,20,.18))}
.bglow{position:absolute;left:0;top:0;width:120px;height:120px;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);opacity:0;mix-blend-mode:multiply;will-change:transform}

/* il calderone e' quello della strega: la tela del fumo e' piu' larga e gli ingredienti sono quelli che volano */
.brew.wide canvas{left:-40%;top:-100%;width:215%;height:200%}
.witchfly.away{opacity:.15;pointer-events:none}
.witchfly .sp{touch-action:none;cursor:grab}
.circle .bslots{position:absolute;left:50%;top:auto;bottom:6%;transform:translateX(-50%);z-index:5}
.circle .brew-hint{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);white-space:normal;text-align:center;width:100%;font-size:clamp(12px,1.3vw,18px);z-index:5}
.bliquid{left:36%;top:43%;width:32%;height:9%}

/* mentre si crea la pozione vola solo Corinna: le altre creature e gli ingredienti in volo si nascondono */
.brewing #infos .witchfly,.brewing .hero-fly{opacity:0!important;transition:opacity .3s;pointer-events:none!important}