/* cave −4 · Forgotten Projects II · Risograph, o segundo andar da Forgotten Projects: a Riso MZ1070 da Duo Design e a tiragem que nunca parou. À luz negra: as paredes e o
   chão num violeta escuro, mais claros perto da calha; o papel branco fica azulado, e o rosa fluorescente da
   tinta, o número e o nome acendem. As cores das tintas são as da Riso: rosa fluorescente #FF48B0, azul-petróleo
   #00838A, amarelo #FFE800 e azul #0078BF */
.f-risograph { --wallc: #3E2F66; --accent: #FF48B0; --numc: #FF48B0; }

.f-risograph .slab {
  --top:
    repeating-linear-gradient(90deg, transparent 0 calc(29 * var(--u)), rgb(10 5 30 / .14) 0 calc(30 * var(--u))),
    radial-gradient(circle at 62% 22%, #5E4A98 0, #43347A 32%, #2C2252 64%, #1C1636 100%);
}
.f-risograph .wall-l { --c2: radial-gradient(ellipse 46% 80% at 80% 0%, #8A68DC 0, #5B44A2 38%, #3A2C6A 72%, #271D49 100%); }
.f-risograph .wall-r { --c1: radial-gradient(ellipse 58% 46% at 6% 0%, #8A68DC 0, #5B44A2 40%, #3A2C6A 74%, #271D49 100%); }
.f-risograph .wl-num, .f-risograph .wr-name { text-shadow: 0 0 calc(5 * var(--u)) rgb(255 72 176 / .75); }
.f-risograph .wr-name { color: #FF7CC6; }

/* a calha da luz negra, e o tubo a acender, violeta */
.f-risograph .rg-uv { --c: #2A2438; --c1: #221D30; --c2: #2E2840; }
.f-risograph .rg-uv-luz {
  border-radius: calc(1.2 * var(--u));
  background: linear-gradient(180deg, #F4EAFF, #B892FF 55%, #8C62F2);
  box-shadow: 0 0 calc(5 * var(--u)) calc(1.5 * var(--u)) rgb(186 140 255 / .85), 0 0 calc(34 * var(--u)) calc(12 * var(--u)) rgb(150 100 255 / .32);
}

/* os cartazes, presos sem moldura, e o da mesa: a imagem no fundo do próprio elemento */
.f-risograph .rg-cartaz {
  background: #F2EEFF center / cover no-repeat;
  box-shadow: calc(-.8 * var(--u)) calc(1 * var(--u)) calc(2.4 * var(--u)) rgb(10 5 30 / .5);
}
.f-risograph .rg-cartaz-goodidea { background-image: url(img/parede-good-idea.jpg); }
.f-risograph .rg-cartaz-zinefest { background-image: url(img/parede-zinefest-2018.jpg); }
.f-risograph .rg-cartaz-sperman { background-image: url(img/parede-sperman.jpg); }
.f-risograph .rg-cartaz-iamhome { background-image: url(img/parede-i-am-home.jpg); }

/* a Riso: cinzento-claro, um pouco violeta da luz. Nas faces da frente (o ::after), os 90deg vão de cima para
   baixo e os 180deg da esquerda (o tabuleiro de entrada) para a direita */
.f-risograph .rg-riso .b { --c: #E2E0EC; --c2: #C3C0D3; }
.f-risograph .rg-roda { --c: #2A2733; --c1: #24212C; --c2: #2A2733; }
.f-risograph .rg-movel {
  --c: #D8D6E3;
  --c1:
    linear-gradient(180deg, transparent calc(50% - .3 * var(--u)), rgb(40 30 70 / .3) 0 calc(50% + .3 * var(--u)), transparent 0),
    radial-gradient(ellipse 14% 2% at 16% 45%, #8E8AA3 0 90%, transparent 100%),
    radial-gradient(ellipse 14% 2% at 16% 55%, #8E8AA3 0 90%, transparent 100%),
    linear-gradient(90deg, rgb(40 30 70 / .22) 0 4%, transparent 0),
    #D5D3E0;
}
.f-risograph .rg-corpo-baixo {
  --c: #E6E4EF;
  --c1:
    linear-gradient(180deg, transparent 15%, rgb(40 30 70 / .22) 0 15.6%, transparent 0 80.4%, rgb(40 30 70 / .22) 0 81%, transparent 0),
    linear-gradient(90deg, transparent 72%, rgb(40 30 70 / .25) 0 74%, transparent 0),
    #E4E2EE;
}
/* a porta da frente: as duas juntas e o emblema, azul-escuro, em forma de lente, com o MZ no meio */
.f-risograph .rg-corpo-cima {
  --c: #ECEAF4;
  --c1:
    radial-gradient(ellipse 4.5% 3.4% at 30% 48%, #6E1C2B 0 92%, transparent 100%),
    radial-gradient(ellipse 9% 25% at 30% 48%, #233E78 0 94%, transparent 100%),
    linear-gradient(180deg, transparent 15%, rgb(40 30 70 / .22) 0 15.6%, transparent 0 80.4%, rgb(40 30 70 / .22) 0 81%, transparent 0),
    linear-gradient(90deg, rgb(40 30 70 / .18) 0 2.5%, transparent 0),
    #EAE8F2;
}
.f-risograph .rg-scanner { --c: #E8E6F0; box-shadow: inset 0 0 0 calc(.7 * var(--u)) #C8C5D8; }
.f-risograph .rg-painel {
  --c: #D3D1E2;
  --top:
    linear-gradient(180deg, transparent 8%, #4E5E58 0 26%, transparent 0),
    radial-gradient(circle, #8FA6D8 0 34%, transparent 40%) 0 0 / calc(2.6 * var(--u)) calc(2.6 * var(--u)),
    #DCDAE8;
}
.f-risograph .rg-tab { --c: #C9C6D9; }
.f-risograph .rg-guia-entrada { --c: #CBC8DA; --c1: #BFBCCF; --c2: #B4B1C5; }
.f-risograph .rg-alavanca { --c: #2E8B6E; --c1: #26785E; --c2: #2A8266; }
.f-risograph .rg-guia { background: #5C6E98; box-shadow: inset 0 0 0 calc(.4 * var(--u)) #43527A; }
.f-risograph .rg-papel {
  --c: #F2EEFF;
  --c1: repeating-linear-gradient(90deg, #F2EEFF 0 calc(.5 * var(--u)), #D2CCEB 0 calc(.62 * var(--u)));
  --c2: repeating-linear-gradient(180deg, #E8E3FA 0 calc(.5 * var(--u)), #CBC4E6 0 calc(.62 * var(--u)));
}
/* a saída: a pilha já impressa e, por cima, as folhas a sair da máquina, umas atrás das outras: cada uma desliza
   de dentro da máquina (a parte de dentro fica tapada pela face do corpo) e pousa por cima da anterior, que desce
   e desaparece quando a nova já a tapa. Ciclo de 9 s, uma folha a cada 3 s; sem movimento, fica a primeira */
.f-risograph .rg-pilha {
  --top: radial-gradient(circle at 50% 50%, rgb(255 72 176 / .55) 0 30%, transparent 30.5%), #F2EEFF;
  --c1: repeating-linear-gradient(90deg, #F2EEFF 0 calc(.3 * var(--u)), #FF9BD3 0 calc(.42 * var(--u)), #F2EEFF 0 calc(.6 * var(--u)), #9BB7DA 0 calc(.72 * var(--u)));
  --c2: repeating-linear-gradient(180deg, #F2EEFF 0 calc(.3 * var(--u)), #CBC4E6 0 calc(.4 * var(--u)));
}
.f-risograph .rg-saida { --c1: #E4DFF6; --c2: #DCD6F0; background: #F2EEFF center / 100% 100% no-repeat; opacity: 0; }
.f-risograph .rg-saida-1 { background-image: url(img/saida-minizinefest.jpg); opacity: 1; }
.f-risograph .rg-saida-2 { background-image: url(img/saida-zinefest-2018.jpg); }
.f-risograph .rg-saida-3 { background-image: url(img/saida-mnemozine.jpg); }
.f-risograph .rg-saida-clique { background: none; }
@media (prefers-reduced-motion: no-preference) {
  .f-risograph .rg-saida { animation: rg-sai 9s linear infinite; }
  .f-risograph .rg-saida-2 { animation-delay: -6s; }
  .f-risograph .rg-saida-3 { animation-delay: -3s; }
}
@keyframes rg-sai {
  0%          { opacity: 1; translate: 0 calc(-14 * var(--u)) calc(.6 * var(--u)); }
  6%, 33.3%   { opacity: 1; translate: 0 0 calc(.6 * var(--u)); }
  33.4%, 40%  { opacity: 1; translate: 0 0 calc(.3 * var(--u)); }
  40.1%, 100% { opacity: 0; translate: 0 0 0; }
}
.f-risograph .rg-frente { background: none; }
/* o monte do «It's No Longer I That Liveth», no chão: os livros, empilhados, com as lombadas pretas e as folhas
   de lado, e a capa do de cima à vista */
.f-risograph .rg-livro-pilha {
  background: #F4F1EA url(img/chao-its-no-longer.jpg) center / 100% 100% no-repeat;
  --c1: repeating-linear-gradient(90deg, #1E1B22 0 calc(.1 * var(--u)), #F1EDE4 0 calc(.54 * var(--u)), #1E1B22 0 calc(.64 * var(--u)));
  --c2: repeating-linear-gradient(180deg, #F1EDE4 0 calc(.54 * var(--u)), #C9C3B6 0 calc(.64 * var(--u)));
}

/* a pilha dos cartazes do KISMIF 2018, no chão: papéis de cores, com as folhas de lado, e o de cima à vista */
.f-risograph .rg-pilha-chao {
  --c: var(--papel);
  --c1: repeating-linear-gradient(90deg, var(--papel) 0 calc(.3 * var(--u)), color-mix(in oklab, var(--papel), #1F1C2C 18%) 0 calc(.4 * var(--u)));
  --c2: repeating-linear-gradient(180deg, var(--papel) 0 calc(.3 * var(--u)), color-mix(in oklab, var(--papel), #1F1C2C 18%) 0 calc(.4 * var(--u)));
}
.f-risograph .rg-papel-azul { --papel: #8F98E3; }
.f-risograph .rg-papel-amarelo { --papel: #F4D23C; }
.f-risograph .rg-papel-verde { --papel: #5BC861; }
.f-risograph .rg-papel-rosa { --papel: #F1C5D5; }
.f-risograph .rg-kismif { --papel: #E1803F; background: #E1803F url(img/chao-kismif.jpg) center / 100% 100% no-repeat; }

/* o iMac na mesa: no ecrã, as separações do «Oom», do Tommi Musturi, para a Riso, no Illustrator, três pranchas pixelizadas como os
   ecrãs do 07 (42 por 24, a puxar pelo ponto mais escuro de cada bloco, para as linhas finas se verem) */
.f-risograph .rg-imac .im-vidro { background: #EDEDED url(img/ecra-separacoes-42x24.png) center / 100% 100% no-repeat; image-rendering: pixelated; }

/* o A4 do concurso de minizines, na mesa */
.f-risograph .rg-minizine { --c1: #E8E4F5; --c2: #E2DDF2; background: #FFFFFF url(img/mesa-minizine.jpg) center / 100% 100% no-repeat; }

/* a mesa, branca, e as pernas escuras */
.f-risograph .rg-mesa { --c: #D9D3EE; --c1: #C9C2E2; --c2: #BDB5D8; }
.f-risograph .rg-perna { --c: #3A3450; --c1: #322C46; --c2: #2B2640; }
.f-risograph .rg-cartaz-mesa {
  --c1: #D9D2C6; --c2: #E3DCD0;
  background: #EDE6DA url(img/mesa-mariana.jpg) center / cover no-repeat;
}

/* as folhas que voam: os trabalhos, a brilhar um pouco à luz negra; rodam à volta do centro, à sua altura */
.f-risograph .rg-voo { transform-origin: 50% 50% calc(var(--z) * var(--u)); box-shadow: 0 0 calc(4 * var(--u)) rgb(236 220 255 / .35); }
.f-risograph .rg-cinzas { background: #DCEDEA url(img/voo-cinzas.jpg) center / 100% 100% no-repeat; }
.f-risograph .rg-condo { --c1: #E2DFD6; --c2: #DAD6CC; background: #ECE9DC url(img/mesa-condo.jpg) center / 100% 100% no-repeat; }
.f-risograph .rg-condo-clique { background: none; }
.f-risograph .rg-vr { background: #F1E3A6 url(img/voo-virtual-reality.jpg) center / 100% 100% no-repeat; }
.f-risograph .rg-belles { background: #E8442A url(img/voo-belles-de-jour.jpg) center / 100% 100% no-repeat; }
.f-risograph .rg-sofia { background: #7FE04A url(img/voo-sofia-neto.jpg) center / 100% 100% no-repeat; }

/* o rasto do tambor: retícula rosa, e o azul-petróleo por cima, desacertado */
.f-risograph .rg-rasto {
  background: radial-gradient(circle, #FF48B0 0 38%, transparent 44%) 0 0 / calc(2.4 * var(--u)) calc(2.4 * var(--u));
  box-shadow: 0 0 calc(10 * var(--u)) rgb(255 72 176 / .28);
  -webkit-mask-image: linear-gradient(90deg, #000 0 78%, rgb(0 0 0 / .55) 100%);
  mask-image: linear-gradient(90deg, #000 0 78%, rgb(0 0 0 / .55) 100%);
}
.f-risograph .rg-rasto-azul {
  background: repeating-linear-gradient(90deg, rgb(0 131 138 / .55) 0 calc(5 * var(--u)), transparent 0 calc(9 * var(--u)));
  box-shadow: none;
}

/* o tambor: discos rosa, com o aro mais escuro, que de lado fazem as nervuras; na ponta, o aro claro, a
   tinta e o eixo */
.f-risograph .rg-disco { border-radius: 50%; background: #F33FA6; box-shadow: inset 0 0 0 calc(.7 * var(--u)) #C22A82; }
.f-risograph .rg-disco-ponta {
  background: radial-gradient(circle, #2E2838 0 9%, #8C86A0 0 15%, #FF48B0 0 66%, #C8267F 0 72%, #ECE8F5 0 86%, #A39EB8 0 100%);
  box-shadow: 0 0 calc(10 * var(--u)) rgb(255 72 176 / .6);
}