/* Cave · Lab — as experiências do ano, um laboratório de cientista maluco; a parede do LAB é a
   projecção do Afterglow Path, a experiência psicadélica, porque o Claude da casa é o Aldous
   (de Aldous Huxley), e o livro dele está na bancada dos frascos.
   Animação: os Mac minis treinam o Qwen (a barra avança, a perda desce), o Halo da
   Moonside muda de cor com o estado do Claude, a impressora 3D imprime uma peça, os LED da
   placa de ensaio piscam, o vídeo da projecção passa em ciclo e os terminais dos três Claudes
   piscam. */

.f-lab { --wallc: #E2DCEF; --accent: #8E7CC3; }

/* bancada e frascos */
.f-lab .bench { --c: #EDE8DF; --top: #F7F4EE; }
.f-lab .bench-front { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(3 * var(--u)); padding: calc(3 * var(--u)); background: #DAD3C6; }
.f-lab .bench-front i { position: relative; background: #E6E0D5; border-radius: calc(2 * var(--u)); }
.f-lab .bench-front i::after { content: ""; position: absolute; left: 40%; right: 40%; top: 18%; height: calc(3 * var(--u)); border-radius: 9px; background: #8F8676; }
.f-lab .jar {
  --top: #B98E62;
  --c2: linear-gradient(to bottom, rgb(255 255 255 / .6) 0 28%, var(--j) 0 44%, var(--page-1) 0 66%, color-mix(in oklab, var(--j), var(--ink) 12%) 0);
  --c1: linear-gradient(to right, rgb(255 255 255 / .5) 0 28%, color-mix(in oklab, var(--j), white 18%) 0);
  border-radius: calc(2 * var(--u));
}

/* os dois Mac minis e o treino no ecrã do Studio Display (da biblioteca): as medidas do ecrã
   são as do objecto, que vai ampliado 1,2 vezes */
.f-lab .side { --c: #CFC6B6; --top: #DCD4C5; }
.f-lab .qwen {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: auto 1fr auto; gap: calc(2 * var(--u));
  padding: calc(3 * var(--u)); background: #15131D;
}
.f-lab .qwen b { font: 700 calc(4.6 * var(--u))/1 var(--mono); color: #CFC4F2; letter-spacing: .04em; white-space: nowrap; }
.f-lab .loss {
  --ln: linear-gradient(to top right, transparent calc(50% - .7px), #F48466 calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px));
  background: var(--ln) 0 0 / 40% 75% no-repeat, var(--ln) 100% 100% / 60% 25% no-repeat;
}
.f-lab .bar { height: calc(4 * var(--u)); border-radius: 9px; background: rgb(255 255 255 / .14); overflow: hidden; }
.f-lab .bar i { display: block; width: 64%; height: 100%; background: var(--accent); }

/* microfone */
.f-lab .mic-base, .f-lab .mic-pole { --c: #3A3645; }
.f-lab .mic-head {
  --c: #6E6A78;
  --top: radial-gradient(circle, #9A96A3 0 20%, #6E6A78 21%);
  --c1: repeating-linear-gradient(90deg, #5A5664 0 calc(1.5 * var(--u)), #7E7A88 0 calc(3 * var(--u)));
  --c2: repeating-linear-gradient(180deg, #4E4A58 0 calc(1.5 * var(--u)), #6E6A78 0 calc(3 * var(--u)));
  border-radius: 50%;
}

/* mesa redonda e os três Claudes, cada um no seu MacBook Pro (da biblioteca): as medidas do
   terminal são as do objecto, que vai ampliado 1,1 vezes */
.f-lab .rt-foot { --c: #6B6478; }
.f-lab .rt-top {
  --c: #D8BC98; --c1: transparent; --c2: transparent;
  border-radius: 50%;
  box-shadow: calc(2 * var(--u)) calc(2.5 * var(--u)) 0 #A88A66;
}
.f-lab .term {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: calc(1.5 * var(--u));
  padding: calc(2.4 * var(--u)) calc(2.2 * var(--u)); background: #1F1C2C;
}
.f-lab .term b { font: 700 calc(3.6 * var(--u))/1 var(--mono); color: #CFC4F2; }
.f-lab .term i { height: calc(1.3 * var(--u)); width: 80%; background: rgb(255 255 255 / .28); border-radius: 9px; }
.f-lab .term i + i { width: 48%; }
.f-lab .term i:last-child::after { content: ""; display: block; margin-left: 112%; width: calc(1.8 * var(--u)); height: calc(2.2 * var(--u)); translate: 0 calc(-.45 * var(--u)); background: var(--coral); }

/* a bancada do hardware, azul, com o tapete verde de corte e gavetas de cores */
.f-lab .lab-hw {
  --c: var(--cobalt);
  --c2: color-mix(in oklab, var(--cobalt), #1F1C2C 24%);
  --top:
    repeating-linear-gradient(90deg, transparent 0 calc(5.4 * var(--u)), rgb(255 255 255 / .2) 0 calc(6 * var(--u))),
    repeating-linear-gradient(0deg, transparent 0 calc(5.4 * var(--u)), rgb(255 255 255 / .2) 0 calc(6 * var(--u))),
    #3E8B68;
}
.f-lab .lab-hw-frente { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(2.6 * var(--u)); padding: calc(3 * var(--u)); background: color-mix(in oklab, var(--cobalt), #1F1C2C 22%); }
.f-lab .lab-hw-frente i { position: relative; background: var(--sun); border-radius: calc(1.5 * var(--u)); }
.f-lab .lab-hw-frente i:nth-child(2) { background: var(--coral); }
.f-lab .lab-hw-frente i:nth-child(3) { background: var(--mint); }
.f-lab .lab-hw-frente i:nth-child(4) { background: #E8336D; }
.f-lab .lab-hw-frente i::after { content: ""; position: absolute; left: 36%; right: 36%; top: 16%; height: calc(2.6 * var(--u)); border-radius: 9px; background: #FFF6E8; }

/* o braço robótico: cada .lab-ra-eixo é uma junta, que roda pela base */
.f-lab .lab-ra-eixo { --w: 0; --d: 0; --h: 0; transform-origin: 0 0 calc(var(--z) * var(--u)); }
.f-lab .lab-ra { --c: #3A3645; }
.f-lab .lab-ra-osso { --c: #F08A2A; --c1: #E07A1E; --c2: #D06E16; }
.f-lab .lab-ra-junta { --c: #3A3645; border-radius: calc(1.4 * var(--u)); }
.f-lab .lab-ra-dedo { --c: #6E6A78; }
.f-lab .lab-cubo {
  --c: var(--cobalt);
  --top: repeating-linear-gradient(90deg, var(--sun) 0 32%, #1F1C2C 0 34%) , var(--sun);
  --c1: repeating-linear-gradient(90deg, var(--coral) 0 32%, #1F1C2C 0 34%);
  --c2: repeating-linear-gradient(90deg, var(--mint) 0 32%, #1F1C2C 0 34%);
}

/* a placa de ensaio, com três LED, e o Arduino */
.f-lab .lab-ensaio {
  --c: #F4F1EA; --c2: #DAD5CB;
  --top: radial-gradient(circle, rgb(31 28 44 / .35) 0 calc(.3 * var(--u)), transparent calc(.4 * var(--u))) 0 0 / calc(1.5 * var(--u)) calc(1.5 * var(--u)),
         linear-gradient(90deg, transparent 0 4%, #E04848 0 6%, transparent 0 94%, #3D6FB6 0 96%, transparent 0), #F4F1EA;
}
.f-lab .lab-led { --c: #FF4D4D; border-radius: 50% 50% 0 0; }
.f-lab .lab-led-2 { --c: var(--sun); }
.f-lab .lab-led-3 { --c: #45D07A; }
.f-lab .lab-arduino { --c: #00979C; --top: linear-gradient(#1F1C2C 0 0) 50% 40% / 34% 34% no-repeat, linear-gradient(#C9CDD2 0 0) 0 80% / 22% 26% no-repeat, #00979C; }

/* a impressora 3D, com a mesa dourada, a peça cor-de-rosa e a bobine de filamento azul */
.f-lab .lab-imp, .f-lab .lab-imp-torre, .f-lab .lab-imp-ponte { --c: #2E2B36; }
.f-lab .lab-imp-mesa { --c: #A9842F; --top: repeating-linear-gradient(90deg, #C9A24A 0 calc(1.6 * var(--u)), #BB9440 0 calc(3.2 * var(--u))); }
.f-lab .lab-imp-cabeca { --c: #F08A2A; --c1: #E07A1E; --c2: #D06E16; }
.f-lab .lab-imp-peca { --c: #E8336D; transform-origin: 50% 50% calc(var(--z) * var(--u)); }
.f-lab .lab-bobine {
  --c: #2BB3C9; --top: repeating-linear-gradient(90deg, #2BB3C9 0 calc(.6 * var(--u)), #2297AB 0 calc(1.2 * var(--u)));
  --c1: repeating-linear-gradient(0deg, #2BB3C9 0 calc(.6 * var(--u)), #2297AB 0 calc(1.2 * var(--u)));
  --c2: radial-gradient(circle, #FFF6E8 0 16%, #1F1C2C 17% 26%, #2BB3C9 27% 74%, #1F1C2C 75%);
}
.f-lab .lab-bobine::before { border-radius: 50%; }



/* TRMNL: memória em e-ink */
/* o cartaz de Blake: preto, como a projecção, com a frase em letra grande e «Infinite.» nas cores da luz */
.f-lab .lab-cartaz {
  box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(4.4 * var(--u)); background: #15131B; color: #EDE8F6;
  box-shadow: calc(1.5 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)) rgb(31 28 44 / .3);
}
.f-lab .lab-cartaz p { margin: 0; font: 700 calc(5.4 * var(--u))/1.08 var(--sans); letter-spacing: -.01em; }
.f-lab .lab-cartaz b { display: block; margin-top: calc(1.5 * var(--u)); font-size: 1.7em; background: linear-gradient(90deg, #FF5FA2, #FFB13B, #46E07B, #4FC3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-lab .lab-cartaz small { font: 500 calc(2.6 * var(--u))/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9C95AE; }
/* o cartaz em grande, na janela de 480 */
.ovo-blake .lab-blake { box-sizing: border-box; width: min(480px, calc(100vw - 52px)); aspect-ratio: 62 / 64; display: flex; flex-direction: column; justify-content: space-between; padding: 34px; background: #15131B; color: #EDE8F6; text-transform: none; letter-spacing: 0; text-align: left; white-space: normal; }
.ovo-blake .lab-blake p { margin: 0; font: 700 36px/1.08 var(--sans); letter-spacing: -.01em; }
.ovo-blake .lab-blake b { display: block; margin-top: 12px; font-size: 1.7em; background: linear-gradient(90deg, #FF5FA2, #FFB13B, #46E07B, #4FC3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ovo-blake .lab-blake small { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9C95AE; }

/* a animação: treino, o Halo, a impressão e os cursores.
   O Halo faz o ciclo de uma resposta do Claude com as cores do daemon do claude-lamp:
   à espera (230, 130, 10), a pensar (índigo, 80, 60, 200), a trabalhar (o batimento entre o
   amarelo torrado e o verde, 0, 120, 0), a escrever ficheiros (0, 200, 0) e de volta à espera */
.f-lab .bar i { animation: lab-train 8s steps(16) infinite; }
.f-lab .moonside-halo { animation: lab-claude 8s linear infinite; }
.f-lab .lab-imp-peca { animation: lab-imprimir 8s steps(14) infinite; }
.f-lab .lab-imp-cabeca { animation: lab-cabeca 1.6s ease-in-out infinite alternate; }
.f-lab .term i:last-child::after { animation: lab-blink 1s steps(2) infinite; }
.f-lab .rt-top > :nth-child(2) .term i:last-child::after { animation-delay: -.35s; }
.f-lab .rt-top > :nth-child(3) .term i:last-child::after { animation-delay: -.7s; }
@keyframes lab-train { 0% { width: 6%; } 80%, 100% { width: 100%; } }
@keyframes lab-claude {
  0%, 12% { --mh-luz: #E6820A; }
  18%, 32% { --mh-luz: #503CC8; }
  38% { --mh-luz: #007800; } 42% { --mh-luz: #E6820A; } 46% { --mh-luz: #007800; }
  50% { --mh-luz: #E6820A; } 54% { --mh-luz: #007800; }
  60%, 74% { --mh-luz: #00C800; }
  82%, 100% { --mh-luz: #E6820A; }
}
@keyframes lab-imprimir { 0% { scale: 1 1 .08; } 86%, 100% { scale: 1 1 1; } }
.f-lab .lab-led { animation: lab-blink 1.2s steps(2) infinite; }
.f-lab .lab-led-2 { animation-delay: -.4s; }
.f-lab .lab-led-3 { animation-delay: -.8s; }

@keyframes lab-cabeca { from { translate: 0 calc(-3 * var(--u)) 0; } to { translate: 0 calc(3 * var(--u)) 0; } }
@keyframes lab-blink { 50% { opacity: 0; } }

/* a parede do LAB, toda projectada: um túnel de luz psicadélico, feito só com CSS. Por baixo, o
   escuro; dois leques de raios de cores a rodar em sentidos contrários (e a somar-se, como luz);
   dois jogos de anéis a crescer do centro, desencontrados, para o túnel nunca parar; e a luz
   branca ao meio. As cores rodam todas devagar. Vai do chão ao cimo da parede e desvanece só
   nos lados; o nome do piso fica claro por cima. Com o movimento reduzido, fica parado */
.f-lab .lab-projeccao {
  overflow: hidden; background: #0B0714;
  -webkit-mask: linear-gradient(90deg, transparent, #000 4% 96%, transparent);
  mask: linear-gradient(90deg, transparent, #000 4% 96%, transparent);
}
.f-lab .lab-projeccao b { position: absolute; inset: 0; overflow: hidden; animation: lab-tons 14s linear infinite; }
.f-lab .lab-projeccao i {
  position: absolute; left: 50%; top: 50%; width: calc(370 * var(--u)); aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen;
}
.f-lab .lab-projeccao i:nth-child(1) {
  background: repeating-conic-gradient(from 0deg, #FF2D95 0 3deg, transparent 3deg 8deg, #FFB000 8deg 10deg, transparent 10deg 15deg,
    #28E07A 15deg 18deg, transparent 18deg 23deg, #2BC8FF 23deg 26deg, transparent 26deg 31deg, #9B5CFF 31deg 35deg, transparent 35deg 40deg);
  -webkit-mask: radial-gradient(circle, transparent 0 4%, #000 22%); mask: radial-gradient(circle, transparent 0 4%, #000 22%);
  animation: lab-roda 26s linear infinite;
}
.f-lab .lab-projeccao i:nth-child(2) {
  background: repeating-conic-gradient(from 7deg, transparent 0 5deg, #FF6A3D 5deg 6.5deg, transparent 6.5deg 11deg, #E040FB 11deg 12.5deg, transparent 12.5deg 17deg, #F6E05E 17deg 18deg);
  opacity: .8; animation: lab-roda 38s linear infinite reverse;
}
.f-lab .lab-projeccao i:nth-child(3), .f-lab .lab-projeccao i:nth-child(4) {
  background: repeating-radial-gradient(circle, transparent 0 calc(7 * var(--u)), rgb(255 255 255 / .55) calc(8 * var(--u)), transparent calc(9.5 * var(--u)) calc(15 * var(--u)));
  animation: lab-anel 3.2s linear infinite;
}
.f-lab .lab-projeccao i:nth-child(4) { animation-delay: -1.6s; }
.f-lab .lab-projeccao i:nth-child(5) {
  width: calc(90 * var(--u));
  background: radial-gradient(circle, #FFFFFF 0 6%, rgb(255 240 200 / .85) 14%, rgb(255 120 200 / .35) 34%, transparent 66%);
  animation: lab-pulso 1.6s ease-in-out infinite alternate;
}
.f-lab .wr-name { color: #FFF6E8; text-shadow: 0 0 calc(2.4 * var(--u)) rgb(20 16 30 / .85); }
@keyframes lab-roda { to { rotate: 1turn; } }
@keyframes lab-anel { 0% { scale: .5; opacity: 0; } 30% { opacity: 1; } 100% { scale: 1.5; opacity: 0; } }
@keyframes lab-pulso { from { scale: .85; opacity: .8; } to { scale: 1.15; opacity: 1; } }
@keyframes lab-tons { to { filter: hue-rotate(360deg); } }

/* o livro do Huxley, encostado à parede, à direita dos frascos */
.f-lab .lab-livro-roda { --w: 0; --d: 0; --h: 0; transform-origin: 0 0 calc(var(--z) * var(--u)); }
.f-lab .lab-livro { --c: #F1EADB; --c1: #2E5E4E; --c2: #D9B7B0; }
.f-lab .lab-capa { background: #D9B7B0 url(img/doors-480.jpg) center / cover no-repeat; box-shadow: 0 0 0 calc(.3 * var(--u)) rgb(31 28 44 / .25); }

/* as janelas dos frascos: o protótipo a funcionar, 960 × 640, com 480 px de largura */
.ovo-lab-vivo iframe { display: block; width: min(480px, calc(100vw - 52px)); aspect-ratio: 3 / 2; height: auto; border: 0; border-radius: 2px; background: #1A1820; }
/* as portas do armário, com o esboço de Processing a correr: ao alto, 480 de altura; a da imagem, deitada, 480 de largura */
.ovo-lab-processing iframe { display: block; border: 0; border-radius: 2px; background: #000; }
.ovo-lab-retrato iframe { height: min(480px, calc(100svh - 110px)); aspect-ratio: 9 / 16; width: auto; }
.ovo-lab-paisagem iframe { width: min(480px, calc(100vw - 52px)); aspect-ratio: 4 / 3; height: auto; }
.f-lab .bench-front i { cursor: pointer; }
.f-lab .lab-hw-frente i { cursor: pointer; }

/* o terminal do treino do Qwen, na janela de 480: escuro, em letra mono, as linhas a aparecer uma a uma; a perda de
   treino a branco, a de validação a âmbar */
.lab-qwen { box-sizing: border-box; width: min(480px, calc(100vw - 52px)); padding: 0 14px 12px; border-radius: 6px; background: #121117; color: #D9D4EA; font: 400 11px/1.55 var(--mono); text-transform: none; letter-spacing: 0; text-align: left; white-space: normal; }
.lab-qwen p { margin: 0; animation: lab-qwen-entra .25s ease-out both; }
.lab-qwen-barra { display: block; height: 20px; margin: 0 -14px 10px; border-radius: 6px 6px 0 0; background: #24222C radial-gradient(circle, #FF5F57 0 4px, transparent 4.5px) 12px 50% / 12px 12px no-repeat; }
.lab-qwen .lq-cmd { color: #FFFFFF; margin-bottom: 4px; }
.lab-qwen .lq-res { color: #8F8AA3; }
.lab-qwen .lq-val { color: #FFB65C; }
.lab-qwen .lq-fim { margin-top: 6px; color: #7FD39A; }
@keyframes lab-qwen-entra { from { opacity: 0; } }
.lab-qwen > p:nth-of-type(1) { animation-delay: 0.30s; }
.lab-qwen > p:nth-of-type(2) { animation-delay: 0.62s; }
.lab-qwen > p:nth-of-type(3) { animation-delay: 0.94s; }
.lab-qwen > p:nth-of-type(4) { animation-delay: 1.26s; }
.lab-qwen > p:nth-of-type(5) { animation-delay: 1.58s; }
.lab-qwen > p:nth-of-type(6) { animation-delay: 1.90s; }
.lab-qwen > p:nth-of-type(7) { animation-delay: 2.22s; }
.lab-qwen > p:nth-of-type(8) { animation-delay: 2.54s; }
.lab-qwen > p:nth-of-type(9) { animation-delay: 2.86s; }
.lab-qwen > p:nth-of-type(10) { animation-delay: 3.18s; }
.lab-qwen > p:nth-of-type(11) { animation-delay: 3.50s; }
.lab-qwen > p:nth-of-type(12) { animation-delay: 3.82s; }
.lab-qwen > p:nth-of-type(13) { animation-delay: 4.14s; }
.lab-qwen > p:nth-of-type(14) { animation-delay: 4.46s; }
.lab-qwen > p:nth-of-type(15) { animation-delay: 4.78s; }
.lab-qwen > p:nth-of-type(16) { animation-delay: 5.10s; }
.lab-qwen > p:nth-of-type(17) { animation-delay: 5.42s; }
.lab-qwen > p:nth-of-type(18) { animation-delay: 5.74s; }
.lab-qwen > p:nth-of-type(19) { animation-delay: 6.06s; }
.lab-qwen > p:nth-of-type(20) { animation-delay: 6.38s; }
.lab-qwen > p:nth-of-type(21) { animation-delay: 6.70s; }
.lab-qwen > p:nth-of-type(22) { animation-delay: 7.02s; }
.lab-qwen > p:nth-of-type(23) { animation-delay: 7.34s; }
@media (prefers-reduced-motion: reduce) { .lab-qwen p { animation: none; } }