/* piso 2 · Sites da Mundo Fantasma: a montra da loja, com o letreiro e um
   ecrã grande a mostrar o site; a máquina de arcada do Playground; o canto do
   Darkroom, com luz vermelha e provas a secar; a Orbital, em anéis. */

.f-sites-mf { --wallc: #F1E4CB; --accent: var(--sun); }

/* Darkroom */
.f-sites-mf .sm-glow { background: radial-gradient(ellipse 55% 75% at 84% 34%, rgb(226 58 58 / .5), rgb(226 58 58 / .12) 60%, transparent 85%); }
.f-sites-mf .sm-floorglow { background: radial-gradient(ellipse 60% 70% at 84% 0%, rgb(226 58 58 / .3), transparent 75%); }
.f-sites-mf .sm-lamp { --c: #3A1F22; --top: #4A2629; --c2: #FF5A4E; }
.f-sites-mf .sm-lamp::before { box-shadow: 0 0 calc(18 * var(--u)) calc(6 * var(--u)) rgb(255 70 60 / .7); }
.f-sites-mf .sm-bench { --c: #3A3645; --top: #4A4655; }
.f-sites-mf .sm-tray { --c: #EDE8DF; }
.f-sites-mf .sm-pole { --c: #3A3645; }
/* provas: retratos feitos de capas (um mosaico de cores com a silhueta por cima) */
.f-sites-mf .sm-print {
  --m1: #E9C6B6; --m2: #8FA9D6; --m3: var(--sun); --m4: var(--mint);
  border: calc(2 * var(--u)) solid #FFFDF8;
  background:
    radial-gradient(circle at 50% 38%, rgb(31 28 44 / .62) 0 19%, transparent 20%),
    radial-gradient(ellipse 46% 30% at 50% 100%, rgb(31 28 44 / .62) 0 98%, transparent 100%),
    conic-gradient(from 90deg at 50% 50%, var(--m1) 25%, var(--m2) 0 50%, var(--m3) 0 75%, var(--m4) 0) 0 0 / 50% 34%;
}
.f-sites-mf .sm-print::before {
  content: ""; position: absolute; left: 50%; top: calc(-5 * var(--u));
  width: calc(3 * var(--u)); height: calc(7 * var(--u)); margin-left: calc(-1.5 * var(--u));
  background: var(--wood);
}
.f-sites-mf .sm-p2 { --m1: var(--coral); --m2: #2B3A67; --m3: #E9C6B6; --m4: var(--sun); }
.f-sites-mf .sm-p3 { --m1: var(--mint); --m2: var(--coral); --m3: #8FA9D6; --m4: var(--page-1); }
.f-sites-mf .sm-p4 { --m1: var(--sun); --m2: var(--mint); --m3: var(--coral); --m4: #2B3A67; }
.f-sites-mf .sm-dev::before { display: none; }
/* as provas verdadeiras, no fio: a imagem já traz a margem branca, o número de capas, a data e o logótipo */
.f-sites-mf .sm-prova { border: 0; background: #FFFDF8 var(--prova) center / 100% 100% no-repeat; }

/* Playground: a máquina de arcada */
.f-sites-mf .sm-arcade { --c: #2B3A67; --c1: linear-gradient(160deg, var(--sun) 0 16%, var(--coral) 0 24%, #34477A 0); --c2: #24325A; }
.f-sites-mf .sm-panel { --c: #1F1C2C; --top: #2B2733; }
.f-sites-mf .sm-stick { --c: #9AA0AC; }
.f-sites-mf .sm-ball { --c: var(--coral); }
.f-sites-mf .sm-btn { border-radius: 50%; background: var(--sun); }
.f-sites-mf .sm-btn + .sm-btn { background: var(--mint); }
.f-sites-mf .sm-marquee {
  display: grid; place-items: center; background: var(--sun); color: var(--ink);
  font: 700 calc(6 * var(--u))/1 var(--dots); letter-spacing: .06em; text-transform: uppercase;
}
.f-sites-mf .sm-screen { overflow: hidden; background: #14121B; box-shadow: inset 0 0 0 calc(2 * var(--u)) #000; }
.f-sites-mf .sm-screen i {
  position: absolute; top: 0; width: 22%; aspect-ratio: 2 / 3;
  background: linear-gradient(transparent 0 70%, rgb(255 255 255 / .6) 0 80%, transparent 0) var(--coral);
  translate: 0 calc(-12 * var(--u));
}
.f-sites-mf .sm-screen i:nth-child(1) { left: 10%; }
.f-sites-mf .sm-screen i:nth-child(2) { left: 39%; background-color: var(--cobalt); }
.f-sites-mf .sm-screen i:nth-child(3) { left: 68%; background-color: var(--sun); }
.f-sites-mf .sm-screen span { /* as capas já empilhadas no fundo */
  position: absolute; left: 4%; right: 4%; bottom: 4%; height: 22%;
  background: repeating-linear-gradient(90deg, var(--mint) 0 18%, var(--coral) 0 34%, var(--sun) 0 50%, #8FA9D6 0 68%);
}

/* a montra */
.f-sites-mf .sm-frame {
  border: calc(4 * var(--u)) solid var(--ink); border-bottom-width: 0;
  background: linear-gradient(115deg, transparent 0 30%, rgb(255 255 255 / .16) 0 36%, transparent 0 70%, rgb(255 255 255 / .12) 0 73%, transparent 0);
}
.f-sites-mf .sm-plinth { --c: #EDE6DA; }
/* os cartazes: cada um é uma categoria do site no desktop (1280 × 1000), recortada ao centro para caber ao alto: o
   cabeçalho com a cor da categoria, a capa em destaque e o grafo */
.f-sites-mf .sm-cover { background: center / cover #EDE6DA; box-shadow: 0 0 0 calc(.6 * var(--u)) rgb(31 28 44 / .25); }
.f-sites-mf .sm-cat-comics { background-image: url(img/cat-comics-cartaz.jpg); }
.f-sites-mf .sm-cat-manga { background-image: url(img/cat-manga-cartaz.jpg); }
.f-sites-mf .sm-cat-alternative { background-image: url(img/cat-alternative-cartaz.jpg); }
.f-sites-mf .sm-cat-pt { background-image: url(img/cat-pt-cartaz.jpg); }
.f-sites-mf .sm-tv { --c: #26232F; }

/* o ecrã: a home do site a funcionar (a capa que troca de dez em dez segundos, o gradiente dela, a fita das notícias
   e o grafo), gravada do site verdadeiro em 30 segundos, em laço */
.f-sites-mf .sm-site { overflow: hidden; background: #C98A86; }
.f-sites-mf .sm-site video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* a Orbital */
.f-sites-mf .sm-label {
  display: grid; place-items: center;
  font: 600 calc(7 * var(--u))/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt);
}
.f-sites-mf .sm-ped { --c: #EDE6DA; }
.f-sites-mf .sm-avatar {
  --m1: var(--coral); --m2: var(--sun); --m3: #8FA9D6; --m4: var(--mint);
  border-radius: 50%; border: calc(1.6 * var(--u)) solid var(--sun);
  background:
    radial-gradient(circle at 50% 40%, rgb(31 28 44 / .6) 0 18%, transparent 19%),
    radial-gradient(ellipse 46% 30% at 50% 100%, rgb(31 28 44 / .6) 0 98%, transparent 100%),
    conic-gradient(from 90deg at 50% 50%, var(--m1) 25%, var(--m2) 0 50%, var(--m3) 0 75%, var(--m4) 0) 0 0 / 50% 34%;
}
.f-sites-mf .sm-ring { border-radius: 50%; border: calc(1.4 * var(--u)) solid rgb(61 111 182 / .6); }
.f-sites-mf .sm-r2 { border-style: dashed; }
.f-sites-mf .sm-ring i {
  position: absolute; left: 50%; top: calc(-4.2 * var(--u));
  width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-left: calc(-3.5 * var(--u));
  border-radius: 50%; background: var(--coral);
}
.f-sites-mf .sm-r2 i { background: var(--cobalt); }
.f-sites-mf .sm-r3 i { background: var(--sun); box-shadow: 0 0 0 calc(.8 * var(--u)) var(--ink); }

/* o site a funcionar: as capas caem no Playground, a prova revela-se, a Orbital roda */
.f-sites-mf .sm-screen i { animation: sites-mf-fall 3s linear infinite; }
.f-sites-mf .sm-screen i:nth-child(2) { animation-delay: -1s; }
.f-sites-mf .sm-screen i:nth-child(3) { animation-delay: -2s; }
@keyframes sites-mf-fall { to { translate: 0 calc(26 * var(--u)); } }
.f-sites-mf .sm-dev { animation: sites-mf-develop 5s ease-in infinite; }
@keyframes sites-mf-develop { 0%, 10% { opacity: .08; } 70%, 92% { opacity: 1; } to { opacity: .08; } }
.f-sites-mf .sm-ring { animation: sites-mf-orbit 16s linear infinite; }
.f-sites-mf .sm-r2 { animation-duration: 11s; animation-direction: reverse; }
.f-sites-mf .sm-r3 { animation-duration: 7s; }
@keyframes sites-mf-orbit { to { rotate: z 1turn; } }

/* o nome é o mais comprido do prédio: menos espaço entre letras para caber numa linha */
.f-sites-mf .wr-name { letter-spacing: .06em; white-space: nowrap; }

/* a caixa de luz da Mundo Fantasma, na parede, por cima da arcada: o logótipo verdadeiro, na versão cor-de-rosa da
   marca (#FF5296, o do ficheiro de 2024 do José), na frente; as camadas por trás, num rosa mais escuro, a dar a
   espessura; e o clarão rosado de uma caixa acesa por dentro */
.f-sites-mf .sm-luz-fundo { background: url(img/mundo-fantasma-logo-rosa.svg) center / 100% 100% no-repeat; filter: brightness(.62) saturate(1.1); }
.f-sites-mf .sm-luz {
  background: url(img/mundo-fantasma-logo-rosa.svg) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 calc(3 * var(--u)) rgb(255 120 180 / .55));
}

/* as janelas da home e das quatro categorias: o vídeo maior, numa página à parte (vivo/*.html), que só carrega
   quando se abre */
.ovo-mf-vivo iframe {
  display: block; width: min(480px, calc(100vw - 52px)); aspect-ratio: 1280 / 1000; height: auto;
  max-height: calc(100svh - 110px); border: 0; border-radius: 2px; background: #C98A86;
}

/* o Phoenix, na janela: o ecrã da máquina é ao alto (832 × 1024), com 480 px de altura */
.ovo-mf-phoenix iframe { display: block; height: min(480px, calc(100svh - 110px)); aspect-ratio: 832 / 1024; width: auto; border: 0; border-radius: 2px; background: #000; }
/* a ligação para o site, na legenda das janelas, como nas da −3 */
:is(.ovo-mf-vivo, #ovo-mf-orbital) span a { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }