/* piso 5, o lado da direita · My Plot: a secretária encostada à parede da direita, com dois iPads
   pousados (da biblioteca) e um tabuleiro de rebentos. Animação: no iPad da horta, os canteiros da app
   ficam semeados um a um, e no tabuleiro os rebentos nascem ao mesmo ritmo. */

.f-my-plot { --wallc: #DCE8D2; --accent: #7DB46C; }

/* a secretária, de carvalho claro, com pernas de metal, e o tabuleiro de terra com os rebentos */
.f-my-plot .mp-mesa { --c: #D8B58C; --top: repeating-linear-gradient(90deg, #DDBD95 0 calc(16 * var(--u)), #D3B188 0 calc(17 * var(--u))); }
.f-my-plot .mp-perna { --c: #6B6B73; }
.f-my-plot .mp-tabuleiro { --c: #B98C5E; --top: repeating-linear-gradient(90deg, #5E412E 0 calc(4 * var(--u)), #6B4A35 0 calc(9 * var(--u))); }
.f-my-plot .seedling { --c: #6FA285; --top: #93C77F; border-radius: 50%; transform-origin: 50% 50% 0; }

/* os ecrãs dos iPads pousados: o desenho da app foi feito para um ecrã de 62 por 42 e o iPad está
   ampliado 2,8 vezes, por isso, cá dentro, a unidade é a do piso a dividir por 2,8 */
.f-my-plot [data-objecto="ipad-pro"] { --u0: var(--u); }
.f-my-plot .ipad-pro .plot-app { --u: calc(var(--u0) / 2.8); position: absolute; inset: 0; }
.f-my-plot .plot-app {
  display: grid; grid-template-rows: auto 1fr auto; gap: calc(3 * var(--u));
  padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(3 * var(--u));
  background: #F6F4EC;
}
.f-my-plot .plot-app b { font: 700 calc(5.4 * var(--u))/1 var(--sans); color: #2F4A2A; white-space: nowrap; }
.f-my-plot .plot-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; gap: calc(2 * var(--u)); }
.f-my-plot .plot-grid i { border-radius: calc(1.5 * var(--u)); background: #8C6A4E; box-shadow: inset 0 0 0 calc(.8 * var(--u)) #A4805F; }
.f-my-plot .plot-grid i:nth-child(-n+6) { background: radial-gradient(circle, #7DB46C 0 34%, transparent 36%) #8C6A4E; }
.f-my-plot .plot-tabs { display: flex; justify-content: space-around; padding-top: calc(2 * var(--u)); border-top: 1px solid rgb(31 28 44 / .12); }
.f-my-plot .plot-tabs i { width: calc(5 * var(--u)); height: calc(3 * var(--u)); border-radius: 9px; background: rgb(31 28 44 / .25); }
.f-my-plot .plot-tabs i:first-child { background: var(--accent); }
/* as sementeiras, no segundo iPad: três semanas, com os dias de semear a verde, os de colher a cor de
   laranja e o dia de hoje marcado */
.f-my-plot .plot-cal { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: calc(1.4 * var(--u)); }
.f-my-plot .plot-cal i { border-radius: calc(1 * var(--u)); background: rgb(31 28 44 / .08); }
.f-my-plot .plot-cal i:is(:nth-child(3), :nth-child(9), :nth-child(12), :nth-child(17)) { background: #7DB46C; }
.f-my-plot .plot-cal i:is(:nth-child(6), :nth-child(15), :nth-child(20)) { background: #E39B3D; }
.f-my-plot .plot-cal i:nth-child(11) { box-shadow: inset 0 0 0 calc(.8 * var(--u)) #2F4A2A; }

/* a animação: semear na app, nascer no tabuleiro (8 s) */
.f-my-plot .plot-grid i:nth-child(n+7) { animation: my-plot-cell 8s steps(1) infinite; }
.f-my-plot .plot-grid i:nth-child(8)  { animation-delay: .9s; }
.f-my-plot .plot-grid i:nth-child(9)  { animation-delay: 1.8s; }
.f-my-plot .plot-grid i:nth-child(10) { animation-delay: 2.7s; }
.f-my-plot .plot-grid i:nth-child(11) { animation-delay: 3.6s; }
.f-my-plot .plot-grid i:nth-child(12) { animation-delay: 4.5s; }
.f-my-plot .seedling { animation: my-plot-grow 8s cubic-bezier(.3, 1.4, .5, 1) infinite; animation-delay: calc(var(--n) * .9s); }
@keyframes my-plot-cell {
  0%, 8% { background: #8C6A4E; }
  9%, 82% { background: radial-gradient(circle, #7DB46C 0 34%, transparent 36%) #8C6A4E; }
  83%, 100% { background: #8C6A4E; }
}
@keyframes my-plot-grow {
  0%, 8% { scale: .1; }
  14%, 82% { scale: 1; }
  88%, 100% { scale: .1; }
}

/* a captura verdadeira da My Plot no ecrã do primeiro iPad: ao alto, rodada um quarto de volta para a parte de cima da app
   ficar do lado de quem se senta à secretária (o ecrã do iPad está deitado ao comprido) */
.f-my-plot .plot-captura {
  position: absolute; left: 50%; top: 50%;
  width: calc(100% * 16.14 / 21.42); height: calc(100% * 21.42 / 16.14);
  translate: -50% -50%; rotate: 90deg;
  background: #000 url(img/my-plot-app-ecra.jpg) center / cover no-repeat;
}