/* piso 5, o lado da esquerda · Crowd Basket: o armário com o iPhone pousado (da biblioteca) e a app,
   e o cesto das compras no chão. */

.f-crowd-basket { --wallc: #DCE8DA; --accent: var(--mint); }



/* bancada: tampo de pedra clara, portas com puxadores, rodapé escuro */
.f-crowd-basket .counter {
  --c: #E9E4DA; --top: #EFEBE3; --c1: #D6D0C4;
  --c2:
    linear-gradient(#EFEBE3 0 0) top / 100% calc(4 * var(--u)) no-repeat,
    linear-gradient(#56645A 0 0) bottom / 100% calc(6 * var(--u)) no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(19 * var(--u)), #56645A 0 calc(27 * var(--u)), transparent 0 calc(46 * var(--u))) 0 calc(10 * var(--u)) / 100% calc(2 * var(--u)) no-repeat,
    repeating-linear-gradient(90deg, #BFD3C2 0 calc(45 * var(--u)), #8FA694 0 calc(46 * var(--u)));
}
.f-crowd-basket .bowl { --c: #F1ECE2; --top: #D9CFBF; }
.f-crowd-basket .fruit { --c: #E3593F; }
.f-crowd-basket .f2 { --c: var(--sun); }
.f-crowd-basket .f3 { --c: #8DB255; }
.f-crowd-basket .jar { --c: #E6EEF0; --top: #C9B48E; --c1: #D6E1E4; --c2: #C8D5D8; }
.f-crowd-basket .j2 { --top: #9C3F31; }

/* o ecrã do iPhone pousado: a lista vai-se riscando. O desenho foi feito para um ecrã de 24 por 46 e o
   iPhone está ampliado 4 vezes, por isso, cá dentro, a unidade é a do piso a dividir por 4 */
.f-crowd-basket [data-objecto="iphone"] { --u0: var(--u); }
.f-crowd-basket .iphone .cb-screen { --u: calc(var(--u0) / 4); position: absolute; inset: 0; border: 0; border-radius: inherit; }
.f-crowd-basket .cb-screen {
  position: relative; display: flex; flex-direction: column; gap: calc(2.4 * var(--u));
  padding: calc(5 * var(--u)) calc(2.6 * var(--u));
  background: #FBFAF6; border: calc(1.5 * var(--u)) solid #2B2937; border-radius: calc(4 * var(--u));
}
.f-crowd-basket .cb-screen b { /* título */
  flex: none; width: 64%; height: calc(3.4 * var(--u)); margin-bottom: calc(1 * var(--u));
  border-radius: calc(1 * var(--u)); background: var(--ink);
}
.f-crowd-basket .cb-screen i { /* uma linha da lista: círculo e texto */
  flex: none; position: relative; height: calc(3 * var(--u));
}
.f-crowd-basket .cb-screen i::before, .f-crowd-basket .cb-screen i::after {
  content: ""; position: absolute; top: 50%;
  animation: 7s steps(1) infinite; animation-delay: calc(var(--k) * .9s);
}
.f-crowd-basket .cb-screen i::before {
  left: 0; width: calc(3 * var(--u)); height: calc(3 * var(--u)); margin-top: calc(-1.5 * var(--u));
  border-radius: 50%; border: calc(.5 * var(--u)) solid #6E8A74;
  animation-name: crowd-basket-tick;
}
.f-crowd-basket .cb-screen i::after {
  left: calc(4.6 * var(--u)); width: calc((13 - var(--k) * 1.5) * var(--u)); height: calc(1.2 * var(--u)); margin-top: calc(-.6 * var(--u));
  border-radius: calc(.6 * var(--u)); background: rgb(31 28 44 / .32);
  animation-name: crowd-basket-done;
}
.f-crowd-basket .cb-screen em { /* o modelo no aparelho a sugerir: um brilho no fundo do ecrã */
  position: absolute; left: calc(2.6 * var(--u)); right: calc(2.6 * var(--u)); bottom: calc(3 * var(--u));
  height: calc(4 * var(--u)); border-radius: 99px;
  background: linear-gradient(90deg, #93BFA2, #F2C14E, #F48466, #93BFA2) 0 0 / 300% 100%;
  animation: crowd-basket-glow 3.5s linear infinite;
}



/* o cesto de plástico, com a rede de furos */
.f-crowd-basket .basket {
  --c: #D9483A; --top: #7E2A22;
  --c1: radial-gradient(circle, #9E3328 0 calc(1.2 * var(--u)), transparent calc(1.4 * var(--u))) 0 0 / calc(4 * var(--u)) calc(4 * var(--u)), #C63F32;
  --c2: radial-gradient(circle, #8A2C23 0 calc(1.2 * var(--u)), transparent calc(1.4 * var(--u))) 0 0 / calc(4 * var(--u)) calc(4 * var(--u)), #B23529;
}
.f-crowd-basket .handle { --c: #2B2937; }
.f-crowd-basket .bread { --c: #D9A465; --top: #E4B375; }
.f-crowd-basket .milk { --c: #F7F5F0; --c1: linear-gradient(180deg, transparent 0 40%, var(--cobalt) 0 60%, transparent 0) #EDEAE3; }
.f-crowd-basket .leek { --c: #8DB255; --top: #5E8B3A; }
.f-crowd-basket .apple { --c: #E3593F; }

@keyframes crowd-basket-tick { 0% { background: transparent; } 14%, 70% { background: #6E8A74; } 80%, to { background: transparent; } }
@keyframes crowd-basket-done { 0% { opacity: 1; } 14%, 70% { opacity: .35; } 80%, to { opacity: 1; } }
@keyframes crowd-basket-glow { to { background-position: 300% 0; } }