/* piso 7 · Memory for Claude Code, onde está o posto de envio do correio.
   A estante 606 com os vinis e o TRMNL, o som (descido do 08), a memória em 3D,
   o projector com o código na parede e o posto de envio do correio. */

.f-memory { --wallc: #D9E2F2; --accent: var(--cobalt); }

.f-memory .rug {
  background: color-mix(in oklab, var(--cobalt), var(--paper) 80%);
  border-radius: calc(10 * var(--u));
  box-shadow: inset 0 0 0 calc(5 * var(--u)) color-mix(in oklab, var(--cobalt), var(--paper) 64%);
}

/* ---------- Vitsoe 606 ---------- */
.f-memory .s606 { --c: transparent; --c1: transparent; --c2: transparent; }
/* as calhas, as prateleiras e o armário são as peças da 606 da biblioteca (biblioteca/vitsoe-606) */
.f-memory .lp { /* lombadas dos LP: capas de 31,5 cm */
  --top: repeating-linear-gradient(180deg, #2B2937 0 calc(1.2 * var(--u)), #E5DCCB 0 calc(1.8 * var(--u)), #9C3F31 0 calc(2.6 * var(--u)), #F1ECE2 0 calc(3.1 * var(--u)), #3D6FB6 0 calc(4.1 * var(--u)), #1F1C2C 0 calc(4.8 * var(--u)), #D7C29A 0 calc(5.9 * var(--u)), #F1ECE2 0 calc(6.3 * var(--u)), #5E8C6E 0 calc(7.2 * var(--u)));
  --c1: repeating-linear-gradient(180deg, #23212E 0 calc(1.2 * var(--u)), #D9CFBC 0 calc(1.8 * var(--u)), #8A372A 0 calc(2.6 * var(--u)), #E8E1D3 0 calc(3.1 * var(--u)), #355F9C 0 calc(4.1 * var(--u)), #191724 0 calc(4.8 * var(--u)), #C8B288 0 calc(5.9 * var(--u)), #E8E1D3 0 calc(6.3 * var(--u)), #527C61 0 calc(7.2 * var(--u)));
  --c2: #2B2937;
}
.f-memory .lp-b { --c2: var(--coral); }
.f-memory .lp-b, .f-memory .lp-c { --top: repeating-linear-gradient(180deg, #E5DCCB 0 calc(.9 * var(--u)), #1F1C2C 0 calc(2 * var(--u)), #F2C14E 0 calc(2.6 * var(--u)), #2B2937 0 calc(3.6 * var(--u)), #E5DCCB 0 calc(4.1 * var(--u)), #9FB6D9 0 calc(5.2 * var(--u)), #2B2937 0 calc(5.9 * var(--u))); }
.f-memory .lp-b { --c1: repeating-linear-gradient(180deg, #DCD2C0 0 calc(.9 * var(--u)), #191724 0 calc(2 * var(--u)), #E2B243 0 calc(2.6 * var(--u)), #23212E 0 calc(3.6 * var(--u)), #DCD2C0 0 calc(4.1 * var(--u)), #8CA5CB 0 calc(5.2 * var(--u)), #23212E 0 calc(5.9 * var(--u))); }
.f-memory .lp-c { --c2: var(--mint); --c1: repeating-linear-gradient(180deg, #8A372A 0 calc(1.4 * var(--u)), #E8E1D3 0 calc(2 * var(--u)), #23212E 0 calc(3.3 * var(--u)), #C8B288 0 calc(4.1 * var(--u)), #355F9C 0 calc(4.9 * var(--u)), #E8E1D3 0 calc(5.4 * var(--u)), #191724 0 calc(6.6 * var(--u))); }
.f-memory .cover { border-radius: calc(.6 * var(--u)); box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgb(31 28 44 / .2); }
.f-memory .cover-1 { background: #EDEBE6 url(img/bon-iver-480.jpg) center / cover no-repeat; }   /* Bon Iver, Bon Iver */
.f-memory .cover-2 { background: #EEEDEB url(img/phil-france-480.jpg) center / cover no-repeat; }   /* Phil France, The Swimmer */
.f-memory .cover-3 { background: #235BA8 url(img/zero-7-480.jpg) center / cover no-repeat; }   /* Zero 7, Swimmers */
.f-memory .cover-4 { background: #2F8F86 url(img/thievery-corporation-480.jpg) center / cover no-repeat; }   /* Thievery Corporation, Saudade */
.f-memory .cover-5 { background: #786A52 url(img/eric-hilton-480.jpg) center / cover no-repeat; }   /* Eric Hilton, Infinite Everywhere */
.f-memory .cover-6 { background: #203564 url(img/olafur-arnalds-480.jpg) center / cover no-repeat; }   /* Ólafur Arnalds, re:member */
.f-memory .cover-7 { background: #888D86 url(img/matthew-halsall-480.jpg) center / cover no-repeat; }   /* Matthew Halsall, An Ever Changing View */
.f-memory .cover-8 { background: #C8D4D4 url(img/cinematic-orchestra-480.jpg) center / cover no-repeat; }   /* The Cinematic Orchestra, To Believe */
.f-memory .cover-9 { background: #E6E6E3 url(img/portico-quartet-480.jpg) center / cover no-repeat; }   /* Portico Quartet, Art in the Age of Automation */
/* o primeiro disco da fila, do lado de quem vê: a ponta da fila é a capa dele, num plano à parte, à escala do
   disco; a face da fila, por trás, fica transparente */
.f-memory .lp-cabeca { --c2: transparent; }

/* ---------- o vaso ---------- */
.f-memory .pot { --c: #D9805F; }
.f-memory .leaf { --c: #6FA285; }

/* TRMNL: painel e-ink num pé, refresca de vez em quando (o clarão invertido). No ecrã, o painel do Memory for
   Claude Code que o José mandou a 3 de Novembro, a preto sobre o cinzento do papel e-ink (o branco da imagem
   multiplica pelo cinzento); clicar abre-o com 480 px (o ovo-trmnl, no lb.html); está na 606, rodado para a sala */
.f-memory .trmnl { --c: #2B2937; --c2: transparent; }
.f-memory .eink {
  padding: calc(.6 * var(--u));
  background: url(img/trmnl-memory-480.jpg) center / 100% 100% no-repeat content-box, #E4E2DC;
  background-blend-mode: multiply;
  border: calc(1.4 * var(--u)) solid #2B2937;
  animation: memory-eink 8.4s steps(1) infinite;
}

/* o posto de envio, ao pé do tubo */
.f-memory .post {
  --c: #C9D4E6; --top: radial-gradient(circle at 70% 50%, #2B2937 0 calc(4.5 * var(--u)), transparent calc(5 * var(--u))) #C9D4E6;
  --c2: linear-gradient(180deg, transparent 0 calc(8 * var(--u)), var(--coral) 0 calc(11 * var(--u)), transparent 0) #AEBBD1;
}
.f-memory .post-cap { --c: var(--coral); }

@keyframes memory-eink {
  0%, 31% { filter: none; }
  32% { filter: invert(1); }
  33%, to { filter: none; }
}

/* nome comprido: menos espaço entre letras para não chegar ao tubo */
.f-memory .wr-name { letter-spacing: .08em; }

/* ---------- o som, descido do 08 ---------- */
/* o móvel baixo do som, de carvalho claro, com os discos à vista na prateleira */
.f-memory .mem-movel { --c: #D9BE96; --c1: #CBAE85; --c2: #C2A47A; }
.f-memory .mem-movel-frente {
  border-radius: calc(.8 * var(--u));
  background: color-mix(in oklab, #D9BE96, #1F1C2C 30%);
}
.f-memory .mem-movel-frente i {
  position: absolute; left: 4%; right: 4%; top: 12%; bottom: 8%;
  background: repeating-linear-gradient(90deg, #2B2937 0 calc(1.2 * var(--u)), #E5DCCB 0 calc(1.8 * var(--u)), #9C3F31 0 calc(2.6 * var(--u)), #F1ECE2 0 calc(3.1 * var(--u)), #3D6FB6 0 calc(4.1 * var(--u)), #1F1C2C 0 calc(4.8 * var(--u)), #D7C29A 0 calc(5.9 * var(--u)), #F1ECE2 0 calc(6.3 * var(--u)), #5E8C6E 0 calc(7.2 * var(--u)));
}

/* o clique no gira-discos: sem JavaScript, um som só começa com um clique num controlo do próprio
   browser, por isso por cima do tampo está o leitor de áudio, invisível, recortado à volta do botão de
   play e ampliado duas vezes até cobrir o tampo (o recorte tem metade do tampo, em unidades do piso).
   O leitor fica com o play ao centro do recorte: no Chrome, o play vai dos 12 aos 40 px do leitor; no
   Safari, este recorte foi testado pelo José. As três músicas estão num só ficheiro, com dois segundos
   entre elas, e o loop do leitor volta ao princípio */
.f-memory .mem-play {
  inset: auto; left: calc(-2.1 * var(--u)); top: calc(-3.05 * var(--u));
  width: calc(42.5 * var(--u) / 2); height: calc(31.9 * var(--u) / 2);
  overflow: hidden; transform-origin: 0 0; scale: 2;
}
.f-memory .mem-play audio {
  position: absolute; left: calc(50% - 26px); top: calc(50% - 26px);
  width: 160px; height: 54px; opacity: .01;
}

/* o mostrador do som, entre as colunas: apagado, até a música tocar */
.f-memory .mem-mostrador {
  display: grid; align-content: center; gap: calc(2.4 * var(--u)); padding: 0 calc(4 * var(--u));
  overflow: hidden; border-radius: calc(1 * var(--u));
  background: linear-gradient(165deg, rgb(255 255 255 / .07), transparent 45%), #17151F;
  box-shadow: inset 0 0 0 calc(.8 * var(--u)) #34303F;
  font: 700 calc(8 * var(--u))/1 var(--dots); color: var(--coral);
  text-shadow: 0 0 calc(1.6 * var(--u)) rgb(240 106 76 / .55);
}
.f-memory .mem-mostrador b { font-size: calc(4.2 * var(--u)); letter-spacing: .24em; text-transform: uppercase; color: var(--sun); }
.f-memory .mem-mostrador > * { opacity: 0; transition: opacity .6s; }
.f-memory .mem-janela { display: block; height: 1em; overflow: hidden; }
.f-memory .mem-fita { display: block; }
.f-memory .mem-fita i { display: block; width: max-content; height: 1em; font-style: normal; white-space: nowrap; }

/* a música: no Safari, que sabe quando um som está a tocar (:playing), o disco só roda com música,
   saem notas das colunas e o mostrador acende; nos outros browsers, o disco roda sempre, e as notas e
   o mostrador ficam quietos. O nome muda com a música: a fita dos três nomes anda com uma animação do
   tamanho do ficheiro (666,816 s) que só corre enquanto o som corre, e pára quando ele pára ou espera
   pelo ficheiro (:buffering); cada nome passa da direita para a esquerda, como num leitor de rede */
.f-memory .mem-nota {
  display: grid; place-items: center; opacity: 0;
  font: 700 calc(11 * var(--u))/1 var(--sans); color: var(--coral);
  text-shadow: 0 0 calc(1.2 * var(--u)) #FFFDF8, 0 0 calc(2.4 * var(--u)) rgb(255 255 255 / .8);
}
.f-memory .mem-nota:nth-of-type(3n+2) { color: var(--cobalt); }
.f-memory .mem-nota:nth-of-type(3n) { color: #E8336D; }
@supports selector(:playing) {
  .f-memory .sl-prato i { animation-play-state: paused; }
  .f-memory:has(audio:playing) .sl-prato i { animation-play-state: running; }
  .f-memory:has(audio:playing) .mem-nota { animation: mem-nota 2.4s ease-out infinite; animation-delay: var(--atraso); }
  .f-memory:has(audio:playing) .mem-mostrador > * { opacity: 1; }
  .f-memory .mem-fita { animation: mem-faixas 666.816s step-end infinite paused; }
  .f-memory .mem-fita i { animation: mem-passa 9s linear infinite paused; }
  .f-memory:has(audio:playing:not(:buffering)) :is(.mem-fita, .mem-fita i) { animation-play-state: running; }
}
/* as músicas começam aos 0, aos 235,13 e aos 419,15 s do ficheiro: Finding New Beliefs, Girl With the
   Typewriter Eyes e Dis moi qui vous êtes encore, com 2 s de silêncio depois das duas primeiras */
@keyframes mem-faixas {
  0% { translate: 0 0; }
  35.2621% { translate: 0 -1em; }
  62.8580% { translate: 0 -2em; }
}
@keyframes mem-passa {
  from { translate: calc(70 * var(--u)) 0; }
  to { translate: -100% 0; }
}
@keyframes mem-nota {
  0% { opacity: 0; translate: 0 0 0; }
  15% { opacity: 1; }
  100% { opacity: 0; translate: calc(var(--dx) * var(--u)) calc(var(--dy) * var(--u)) calc(34 * var(--u)); }
}

/* ---------- a memória em 3D ---------- */
/* os eixos: um ponto no chão da sala (--x, --y) à altura --z, de onde rodam os registos e os documentos */
.f-memory .mem-eixo {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: 0; height: 0;
  transform: translateZ(calc(var(--z) * var(--u))); transform-style: preserve-3d;
}
.f-memory .mem-eixo > i { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
/* a base de dados: cinco discos de vidro azul, a flutuar desencontrados */
.f-memory .mem-disco {
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgb(255 255 255 / .75), rgb(255 255 255 / 0) 42%),
    radial-gradient(circle, color-mix(in oklab, var(--cobalt), #fff 45%) 0 30%, color-mix(in oklab, var(--cobalt), #fff 20%) 70%, var(--cobalt));
  box-shadow: 0 0 0 calc(.8 * var(--u)) rgb(255 255 255 / .6), 0 0 calc(10 * var(--u)) rgb(61 111 182 / .55);
  opacity: .88;
  animation: mem-flutua 6s ease-in-out calc(var(--k) * -1.2s) infinite alternate;
}
.f-memory .mem-brilho { border-radius: 50%; background: radial-gradient(circle, rgb(61 111 182 / .32), rgb(61 111 182 / 0) 68%); }
@keyframes mem-flutua { to { translate: 0 0 calc(3 * var(--u)); } }
/* os registos: doze fichas a descer em espiral à volta dos discos, uma volta e meia cada, e a desaparecer em baixo */
/* (a opacidade anda na ficha e não no invólucro: um invólucro com opacidade achata o 3D do que tem dentro) */
.f-memory .mem-espiral > i { animation: mem-desce 18s linear var(--atr) infinite; }
.f-memory .mem-espiral b { animation: mem-aparece 18s linear var(--atr) infinite; }
@keyframes mem-desce {
  from { transform: translateZ(calc(132 * var(--u))) rotate(0deg); }
  to { transform: translateZ(calc(24 * var(--u))) rotate(540deg); }
}
@keyframes mem-aparece { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } }
.f-memory .mem-espiral b {
  border-radius: calc(1 * var(--u));
  background: repeating-linear-gradient(180deg, transparent 0 calc(3 * var(--u)), rgb(61 111 182 / .55) 0 calc(3.8 * var(--u))) calc(2 * var(--u)) calc(4 * var(--u)) / calc(100% - 4 * var(--u)) calc(100% - 7 * var(--u)) no-repeat,
    linear-gradient(180deg, var(--coral) 0 calc(2.2 * var(--u)), transparent 0), #FFFDF8;
  box-shadow: 0 0 calc(3 * var(--u)) rgb(61 111 182 / .35);
}
/* os documentos: cinco cartões maiores, a rodar devagar em órbita, por cima da espiral */
.f-memory .mem-orbita { animation: mem-roda 60s linear infinite; }
.f-memory .mem-orbita > i { rotate: z var(--a); }
@keyframes mem-roda { from { rotate: z 0deg; } to { rotate: z 360deg; } }
.f-memory .mem-orbita b {
  display: grid; place-items: start center; padding-top: calc(4 * var(--u)); box-sizing: border-box;
  border-radius: calc(1.4 * var(--u));
  background: repeating-linear-gradient(180deg, transparent 0 calc(2.6 * var(--u)), rgb(31 28 44 / .22) 0 calc(3.2 * var(--u))) calc(3 * var(--u)) calc(12 * var(--u)) / calc(100% - 6 * var(--u)) calc(100% - 15 * var(--u)) no-repeat,
    color-mix(in oklab, var(--cobalt), #fff 82%);
  box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgb(61 111 182 / .5), 0 0 calc(6 * var(--u)) rgb(61 111 182 / .3);
  font: 600 calc(3.6 * var(--u))/1 var(--mono); letter-spacing: .06em; color: var(--cobalt);
  transform-style: preserve-3d;
}
/* o nome escreve-se dos dois lados do cartão, cada um só visível de frente, para nunca se ler ao espelho */
.f-memory .mem-orbita b span { position: absolute; top: calc(4 * var(--u)); left: 0; right: 0; text-align: center; backface-visibility: hidden; }
.f-memory .mem-orbita b span + span { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
  .f-memory :is(.mem-disco, .mem-espiral > i, .mem-espiral b, .mem-orbita, .mem-codigo, .mem-feixe) { animation-play-state: paused; }
}

/* ---------- o projector e o código na parede ---------- */
.f-memory .mem-pe { --c: #3A3746; }
.f-memory .mem-projector { --c: #E6E3DC; --top: repeating-linear-gradient(90deg, #E6E3DC 0 calc(1.6 * var(--u)), #C9C5BC 0 calc(2.2 * var(--u))) calc(3 * var(--u)) calc(8 * var(--u)) / calc(10 * var(--u)) calc(9 * var(--u)) no-repeat, #E6E3DC; }
/* o feixe: um plano de luz que abre do projector (à direita, a 99 da parede, à altura 52 a 58) até à projecção (à
   esquerda, na parede, da altura 70 à 146); no plano, a altura z fica a 166 − z do cimo */
.f-memory .mem-feixe {
  background: linear-gradient(90deg, rgb(255 253 240 / .75), rgb(255 253 240 / .25));
  clip-path: polygon(0 calc(20 / 150 * 100%), 100% calc(108 / 150 * 100%), 100% calc(114 / 150 * 100%), 0 calc(96 / 150 * 100%));
  pointer-events: none;
}
.f-memory .mem-projeccao {
  overflow: hidden; clip-path: inset(0 round calc(1 * var(--u))); border-radius: calc(1 * var(--u));
  background: radial-gradient(ellipse at 50% 50%, rgb(255 253 240 / .95), rgb(255 253 240 / .7) 70%, rgb(255 253 240 / .35));
  box-shadow: 0 0 calc(8 * var(--u)) rgb(255 253 240 / .8);
}
/* o código passa, de baixo para cima, e a luz do projector tremeluz: a projecção e o feixe piscam e perdem força a
   espaços, desencontrados, como uma lâmpada velha */
/* (o código anda com top, e não com translate: no Safari do telemóvel, um filho animado com translate ganha camada
   própria e o overflow da projecção, que está em 3D, deixava de o cortar; o clip-path corta-o também) */
.f-memory .mem-codigo { display: block; position: relative; top: 0; padding: calc(3 * var(--u)) calc(4 * var(--u)); animation: mem-passa 16s linear infinite, mem-treme 3.7s steps(1) infinite; }
.f-memory .mem-feixe { animation: mem-treme-feixe 3.7s steps(1) infinite; }
.f-memory .mem-codigo i {
  display: block; font: 500 calc(2.5 * var(--u))/1.55 var(--mono); font-style: normal; white-space: pre;
  color: color-mix(in oklab, var(--cobalt), var(--ink) 30%); filter: blur(calc(.15 * var(--u)));
}
.f-memory .mem-codigo i:nth-child(18n+14) { color: var(--coral); }
@keyframes mem-passa { to { top: calc(-18 * 1.55 * 2.5 * var(--u)); } }   /* uma volta: as 18 linhas, de 1,55 × 2,5 */
@keyframes mem-treme {
  0%, 100% { filter: none; opacity: 1; }
  7% { opacity: .55; } 9% { opacity: 1; } 31% { opacity: .8; filter: blur(calc(.3 * var(--u))); } 33% { opacity: 1; filter: none; }
  58% { opacity: .4; } 59% { opacity: .9; } 61% { opacity: .5; } 63% { opacity: 1; } 86% { opacity: .75; } 88% { opacity: 1; }
}
@keyframes mem-treme-feixe {
  0%, 100% { opacity: 1; }
  7% { opacity: .5; } 9% { opacity: 1; } 31% { opacity: .75; } 33% { opacity: 1; }
  58% { opacity: .3; } 59% { opacity: .85; } 61% { opacity: .4; } 63% { opacity: 1; } 86% { opacity: .7; } 88% { opacity: 1; }
}