/* The doceria's mixing bench, recipe notebook and basket (part 2). */

/* the painted bench on the counter, and the three buttons over the path */
.bancada-pintada { z-index: 2; display: flex; align-items: flex-end; min-height: 48px; padding: 0; border: 0; background: none; touch-action: manipulation; }   /* the tray is flat: the button grows upward to a thumb-sized target, its base stays on the counter */
.bancada-pintada.ancorado { transform: translate(-50%, -100%); }
.bancada-pintada img { display: block; width: 100%; height: auto !important; filter: drop-shadow(0 2px 2px rgb(92 60 38 / .3)); transform-origin: 50% 100%; transition: transform 250ms var(--curva); }
.bancada-pintada::after { content: ''; position: absolute; inset: -10px -6px; }
@media (hover: hover) { .bancada-pintada:hover img { transform: translateY(-3px); } }
.doceria-acoes { position: absolute; left: 0; right: 0; bottom: calc(var(--caminho-h) + 14px + env(safe-area-inset-bottom)); z-index: 4;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; padding: 0 12px; }
.doceria-acoes .etiqueta { min-height: 46px; padding: 8px 20px 8px 22px; font-size: 16px; }
.doceria-acoes .abrir-bancada { flex-basis: 100%; max-width: 260px; }
@media (min-width: 700px) { .doceria-acoes .abrir-bancada { flex-basis: auto; } }

/* the bench sheet: the bowl on top, the shelf of nine below */
.bancada-conteudo { display: grid; gap: 12px; align-content: start; }
.bancada-conteudo.com-resultado { align-content: center; }
.bancada-instrucao { margin: 0; text-align: center; font: 500 20px/1.25 var(--f-mao); color: var(--madeira); }
.montagem { display: grid; justify-items: center; gap: 10px; }
.tigela { position: relative; width: min(100%, 280px, 24vh); aspect-ratio: 640 / 486; }
.tigela > img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.tigela-fundo { filter: drop-shadow(0 4px 4px rgb(92 60 38 / .22)); }
/* the bowl's front wall again, over the chosen ingredients, so they sit inside it */
.tigela-frente { z-index: 2; clip-path: polygon(0.0% 25.5%, 3.8% 25.5%, 4.8% 31.0%, 7.7% 36.2%, 12.6% 41.0%, 19.1% 45.1%, 26.9% 48.3%, 35.7% 50.6%, 45.2% 51.7%, 54.8% 51.7%, 64.3% 50.6%, 73.1% 48.3%, 80.9% 45.1%, 87.4% 41.0%, 92.3% 36.2%, 95.2% 31.0%, 96.2% 25.5%, 100.0% 25.5%, 100.0% 100.0%, 0.0% 100.0%); }
.tigela.alvo .tigela-fundo { filter: drop-shadow(0 0 10px rgb(200 36 60 / .45)); }
.tigela-vazia { position: absolute; z-index: 3; left: 0; right: 0; top: 20%; text-align: center; font: 500 18px var(--f-mao); color: rgb(122 90 67 / .62); pointer-events: none; }
.na-tigela-lista { position: absolute; z-index: 1; left: 10%; right: 10%; top: 0; height: 47%; }
.na-tigela { transition: left 250ms var(--curva), rotate 250ms var(--curva), bottom 250ms var(--curva); position: absolute; bottom: 0; left: 50%; width: 30%; max-width: 76px; aspect-ratio: 1; translate: -50% 0; padding: 0; border: 0; background: none; touch-action: manipulation; }
.na-tigela-lista[data-n="2"] .na-tigela:nth-child(1) { left: 34%; rotate: -8deg; } .na-tigela-lista[data-n="2"] .na-tigela:nth-child(2) { left: 66%; rotate: 7deg; }
.na-tigela-lista[data-n="3"] .na-tigela:nth-child(1) { left: 22%; rotate: -10deg; } .na-tigela-lista[data-n="3"] .na-tigela:nth-child(2) { left: 50%; bottom: 4%; } .na-tigela-lista[data-n="3"] .na-tigela:nth-child(3) { left: 78%; rotate: 9deg; }
.na-tigela img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 2px 2px rgb(92 60 38 / .25)); }
/* stirring: a gentle turn that loops until the server answers, then the ingredients settle and fade into the mix */
.tigela.mexendo .na-tigela { animation: orbita 950ms ease-in-out infinite; }
.tigela.mexendo .na-tigela:nth-child(2) { animation-delay: -475ms; } .tigela.mexendo .na-tigela:nth-child(3) { animation-delay: -240ms; }
@keyframes orbita { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-10px, -6px) rotate(-12deg); } 50% { transform: translate(0, -10px) rotate(0deg); } 75% { transform: translate(10px, -6px) rotate(12deg); } }
.tigela.assenta .na-tigela-lista { animation: assenta 250ms ease-in forwards; }
@keyframes assenta { to { transform: translateY(18%) scale(.85); opacity: 0; } }
.vapor { position: absolute; z-index: 3; left: 50%; top: -8%; width: 70px; height: 56px; transform: translateX(-50%); pointer-events: none; opacity: 0; }
.vapor i { position: absolute; bottom: 0; width: 16px; height: 46px; border-radius: 50%; background: rgb(255 250 244 / .9); box-shadow: 0 0 0 2px rgb(183 163 207 / .3), 0 0 10px 2px rgb(183 163 207 / .45); filter: blur(3px); }   /* cream with a lilac edge: it reads on the paper */
.vapor i:nth-child(1) { left: 12px; } .vapor i:nth-child(2) { left: 30px; animation-delay: 300ms !important; } .vapor i:nth-child(3) { left: 48px; animation-delay: 600ms !important; }
.tigela.mexendo .vapor { opacity: 1; }
.tigela.mexendo .vapor i { animation: sobe-vapor 950ms ease-out infinite both; }
@keyframes sobe-vapor { from { transform: translate(0, 16px) scaleY(.5); opacity: 0; } 40% { opacity: .95; transform: translate(-5px, -6px) scale(1.1, 1); } to { transform: translate(6px, -32px) scaleX(1.7); opacity: 0; } }
.bancada-aviso { min-height: 1.4em; margin: 0; text-align: center; font: 500 18px var(--f-mao); color: var(--hibisco); }
.bancada-aviso.pisca { animation: pisca-aviso 400ms; }
@keyframes pisca-aviso { 50% { opacity: .3; } }
.prateleira { margin-bottom: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; padding: 10px; border-radius: 6px;
  background: linear-gradient(rgb(0 0 0 / 0) calc(33.3% - 3px), rgb(122 90 67 / .18) calc(33.3% - 3px) 33.3%, rgb(0 0 0 / 0) 33.3% calc(66.6% - 3px), rgb(122 90 67 / .18) calc(66.6% - 3px) 66.6%, rgb(0 0 0 / 0) 66.6%); }
.ingrediente { position: relative; display: grid; justify-items: center; gap: 0; min-height: 96px; padding: 4px 2px 6px; border: 0; border-radius: 10px;
  background: none; color: var(--tinta); touch-action: none; cursor: grab; transition: background 200ms; }
.ingrediente img { width: 64px; height: 64px; object-fit: contain; pointer-events: none; transition: transform 250ms var(--curva); }
.ingrediente .nome { font: 500 17px/1.05 var(--f-mao); text-align: center; }
.ingrediente .qtd { position: absolute; top: 2px; right: 6px; font: 600 16px var(--f-texto); color: var(--madeira); }
.ingrediente[aria-pressed="true"] { background: rgb(200 36 60 / .1); box-shadow: inset 0 0 0 2px rgb(200 36 60 / .45); }
.ingrediente[aria-pressed="true"] img { transform: translateY(-3px); }
.ingrediente[aria-disabled="true"] { cursor: default; }
.ingrediente[aria-disabled="true"] img { filter: grayscale(.85) opacity(.45); }
.ingrediente[aria-disabled="true"] .qtd { color: var(--hibisco); font: 500 16px var(--f-mao); }
.fantasma-ingrediente { position: fixed; z-index: 60; width: 64px; height: 64px; pointer-events: none; filter: drop-shadow(0 6px 6px rgb(92 60 38 / .35)); }
.bancada-origem { margin: -4px 0 -6px; text-align: center; font: 500 clamp(16px, 2.2vw, 19px) var(--f-mao); color: var(--madeira); opacity: .85; }
/* "misturar" stays in reach at the bottom of the sheet, even on a short phone */
.misturar-fixo { position: sticky; bottom: -12px; z-index: 4; display: flex; justify-content: center; padding: 8px 0 4px; pointer-events: none; }
.misturar-fixo .misturar { pointer-events: auto; }
.misturar, .criacao-acoes .etiqueta, .item-cesta .etiqueta { font-size: 16px; }
.misturar { min-width: 200px; }
.misturar[aria-disabled="true"] { opacity: .55; }
.ingrediente.so-ver { cursor: default; }
.bancada-origem.curiosa { opacity: 1; color: var(--madeira); animation: aparece-texto 300ms both; }
.bancada-aviso .troque { display: block; font: 500 18px var(--f-mao); color: var(--hibisco); }
@media (max-height: 760px) {
  .tigela { width: min(100%, 210px); }
  .ingrediente { min-height: 80px; } .ingrediente img { width: 52px; height: 52px; }
}
.so-habib { margin: 0; font: 500 19px var(--f-mao); color: var(--madeira); }
.resultado-mistura { display: grid; justify-items: center; align-content: start; }
.criacao, .curiosa { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; }
.criacao img { width: 168px; height: 168px; object-fit: contain; animation: surge 650ms cubic-bezier(.2, .8, .2, 1) both; }
/* it rises out of where the bowl was, then the words come */
@keyframes surge { from { transform: translateY(70px) scale(.55); opacity: 0; } }
.criacao h3, .criacao .descricao, .criacao .nota, .criacao-acoes { animation: aparece-texto 400ms 350ms both; }
@keyframes aparece-texto { from { opacity: 0; } }
.criacao-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.criacao h3 { margin: 0; font: italic 600 26px var(--f-titulo); color: var(--hibisco); }
.criacao .descricao, .curiosa p { margin: 0; max-width: 34ch; font: 400 16px/1.55 var(--f-texto); }
.curiosa p { font: 500 22px/1.3 var(--f-mao); color: var(--madeira); }
.criacao .nota { margin: 2px 0 6px; font: 500 19px var(--f-mao); color: var(--madeira); }
.criacao .nota.nova { color: var(--hibisco); }

/* the notebook */
.caderno-capa { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -6px 0 12px; }
.caderno-capa img { width: 44px; height: auto; filter: drop-shadow(0 2px 2px rgb(92 60 38 / .3)); }
@media (min-width: 700px) { .caderno-capa img { width: 56px; } }
.caderno-conta { margin: 0; text-align: center; font: 500 20px var(--f-mao); color: var(--madeira); }
.receitas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.receita-espaco { display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 150px; padding: 8px 6px; border-radius: 8px; text-align: center;
  background: rgb(122 90 67 / .05); box-shadow: inset 0 0 0 1px rgb(122 90 67 / .12); }
.receita-espaco.achada { border: 1px solid rgb(122 90 67 / .2); background: rgb(255 252 244 / .7); }
.receita-espaco img { width: 84px; height: 84px; object-fit: contain; }
.receita-espaco h3 { margin: 0; font: italic 600 18px/1.1 var(--f-titulo); color: var(--hibisco); }
.receita-espaco .ingredientes { margin: 0; font: 400 16px/1.3 var(--f-texto); color: var(--madeira); }
.receita-espaco .sombra { opacity: .2; }
.receita-espaco .dica { margin: 0; font: 500 17px/1.15 var(--f-mao); color: var(--tinta); }

/* the basket */
.cestinha-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.item-cesta { display: grid; grid-template-columns: 64px 1fr auto auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: rgb(255 252 244 / .7); }
.item-cesta img { width: 64px; height: 64px; object-fit: contain; }
.item-texto { display: grid; gap: 2px; }
.item-cesta .nome { font: italic 600 19px/1.1 var(--f-titulo); color: var(--tinta); }
.item-cesta .descricao { font: 400 16px/1.4 var(--f-texto); color: var(--madeira); }
.so-guardar { font: 500 16px var(--f-mao); color: var(--madeira); white-space: nowrap; }
.item-cesta .qtd { font: 600 16px var(--f-texto); color: var(--madeira); }
.item-cesta .etiqueta { min-height: 44px; padding: 6px 16px 6px 20px; }
@media (max-width: 420px) { .item-cesta { grid-template-columns: 56px 1fr auto; } .item-cesta img { width: 56px; height: 56px; } .item-cesta .etiqueta { grid-column: 2 / -1; justify-self: start; } }
.cestinha-lista .vazio { padding: 16px; text-align: center; font: 500 20px var(--f-mao); color: var(--madeira); }

@media (prefers-reduced-motion: reduce) {
  .tigela.mexendo .na-tigela-lista { animation: esvai 300ms both; }
  .tigela.mexendo .na-tigela { animation: none; }
  @keyframes esvai { to { opacity: .2; } }
  .tigela.assenta .na-tigela-lista { animation: esvai 1ms both; }
  .tigela.mexendo .vapor i { animation: none; opacity: .6; }
  .criacao img { animation: aparece 300ms both; }
  @keyframes aparece { from { opacity: 0; } }
}
@media (min-width: 700px) { .tigela { width: 260px; } }