/* rés-do-chão: o tapete «welcome», a planta (do teste 01), as duas Barcelona Chair com o cubo e a parede das caixas do correio */
.f-rc .mat {
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper); border-radius: calc(4 * var(--u));
  font: 500 calc(10.5 * var(--u))/1 var(--mono); letter-spacing: .12em; padding-left: .12em;
}
.f-rc .bench { --c: var(--wood); }
.f-rc .pot { --c: #D9805F; }
.f-rc .leaf { --c: #6FA285; }
.f-rc .caixas { --c: #5A6F95; --top: #6F84AA; }
.f-rc .caixas-frente {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr);
  gap: calc(2 * var(--u)); padding: calc(2 * var(--u));
  background: #4A5D80;
}
.f-rc .caixas-frente span {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(1.6 * var(--u)) calc(2.4 * var(--u));
  border-radius: calc(1.4 * var(--u));
  background: linear-gradient(#C9D2E1, #B3BED2);
  color: var(--ink);
  font: 600 calc(4.6 * var(--u))/1.1 var(--mono); white-space: nowrap;
}
.f-rc .caixas-frente i { /* a ranhura */
  display: block; height: calc(1.6 * var(--u)); width: 60%;
  border-radius: calc(2 * var(--u)); background: var(--ink);
}
.f-rc .caixas-frente span:first-child { background: linear-gradient(#F7B49F, var(--coral)); }
/* os Claudes da casa, numa linha só, separados por vírgulas, entre dois filetes */
.f-rc .equipa { margin: 0 0 22px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 44ch; font-size: 15px; font-weight: 650; color: var(--ink); }

/* o ecrã gigante, virado para a rua: o Psychedelic Hyperspace em CSS. O ecrã tem 172 × 96 unidades; cada partícula
   nasce fora dele, a 100 a 175 unidades do centro, e cai em espiral até 13 a 16 (o buraco, que o logo tapa), cada vez
   mais depressa a rodar, como no esboço (lá, o rodar cresce até oito vezes perto do centro); depois recomeça. Com menos
   movimento, ficam paradas onde estão */
.f-rc .rc-ecra {
  box-sizing: border-box; border: calc(2.4 * var(--u)) solid #1B1A22; border-radius: calc(1 * var(--u));
  background: #000; overflow: hidden;
  box-shadow: 0 0 calc(18 * var(--u)) rgb(143 179 204 / .25);
}
.f-rc .rc-espaco { position: absolute; inset: 0; overflow: hidden; }
.f-rc .rc-espaco i {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--s) * var(--u)); height: calc(var(--s) * var(--u)); margin: calc(var(--s) * var(--u) / -2);
  border-radius: 50%; opacity: var(--o);
  background: radial-gradient(circle, color-mix(in oklab, var(--k), #fff 25%) 0 38%, var(--k) 40% 62%, color-mix(in oklab, var(--k), transparent 55%) 64% 100%);
  animation: rc-espiral var(--t) linear var(--d) infinite;
}
@keyframes rc-espiral {
  0% { transform: rotate(var(--a0)) translateX(calc(var(--r0) * var(--u))); }
  55% { transform: rotate(calc(var(--a0) + var(--volta) * .2)) translateX(calc((var(--r0) * .45 + var(--r1) * .55) * var(--u))); }
  85% { transform: rotate(calc(var(--a0) + var(--volta) * .5)) translateX(calc((var(--r0) * .15 + var(--r1) * .85) * var(--u))); }
  100% { transform: rotate(calc(var(--a0) + var(--volta))) translateX(calc(var(--r1) * var(--u))); }
}
.f-rc .rc-logo {
  position: absolute; left: 50%; top: 50%; width: calc(56 * var(--u)); aspect-ratio: 400 / 228; translate: -50% -50%;
  background: url(img/duodsgn-400.png) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) { .f-rc .rc-espaco i { animation-play-state: paused; } }

/* a placa da casa, na parede do elevador: escura, com as duas linhas em mono, cada uma riscada por um traço coral, como
   um sinal de proibição */
.f-rc .rc-placa {
  display: grid; align-content: center; gap: calc(2.2 * var(--u)); padding: 0 calc(4 * var(--u));
  background: var(--ink); border-radius: calc(1.6 * var(--u));
  box-shadow: calc(1 * var(--u)) calc(1.4 * var(--u)) calc(3 * var(--u)) rgb(31 28 44 / .2);
  font: 600 calc(4.4 * var(--u))/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper);
}
.f-rc .rc-placa span { display: flex; align-items: center; gap: calc(2.4 * var(--u)); white-space: nowrap; }
.f-rc .rc-placa span::before {
  content: ""; flex: none; width: calc(4.6 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  border: calc(.8 * var(--u)) solid var(--coral); box-sizing: border-box;
  background: linear-gradient(45deg, transparent calc(50% - .4 * var(--u)), var(--coral) 0 calc(50% + .4 * var(--u)), transparent 0);
}