/* Piso 6 · Viagens — o theroad.to, o motor que faz sites de viagem.
   Animação: a rota corre no mapa em relevo, os alfinetes caem nas
   paragens, e no portátil o site da viagem vai-se compondo. */

.f-viagens { --wallc: #D5E5EC; --accent: #3D9BB6; }

/* o cartaz do Interrail de 1990: «Vincent van Gogh und die Moderne», no Museum Folkwang, em Essen
   (11 de Agosto a 4 de Novembro de 1990), pendurado sem moldura, impresso em duotone, coral e sol, como as
   fotografias desta sala (o duotone.py); clicar abre o verdadeiro com 480 px */
.f-viagens .vg-poster {
  background: #E2DACB url(img/poster-essen-duo.jpg) center / 100% 100% no-repeat;
  box-shadow: calc(-.8 * var(--u)) calc(1 * var(--u)) calc(2.4 * var(--u)) rgb(31 28 44 / .28);
}

/* postais */
.f-viagens .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); padding: calc(4 * var(--u)); }
.f-viagens .cards i {
  border: calc(2 * var(--u)) solid #FFFDF8; border-radius: calc(1 * var(--u));
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(31 28 44 / .25);
}
.f-viagens .cards i:nth-child(odd) { rotate: -4deg; }
.f-viagens .cards i:nth-child(3n) { rotate: 5deg; }
/* os postais são fotografias de viagem, impressas em duotone, cada uma numa cor da casa (o duotone.py, que as
   corta como antes): o de Osaka e mais cinco; clicar abre cada uma, verdadeira, com 480 px (no lb.html) */
.f-viagens .jp { position: relative; background: #F6EBDD url(img/osaka-duo.jpg) center / 100% 100% no-repeat; }
.f-viagens .is { position: relative; background: #F6EBDD url(img/viagem-is-duo.jpg) center / 100% 100% no-repeat; }
.f-viagens .po { position: relative; background: #F6EBDD url(img/viagem-po-480.jpg) center / cover no-repeat; }
.f-viagens .nl { position: relative; background: #F6EBDD url(img/viagem-nl-duo.jpg) center / 100% 100% no-repeat; }
.f-viagens .gd { position: relative; background: #F6EBDD url(img/viagem-gd-duo.jpg) center / 100% 100% no-repeat; }
.f-viagens .eu { position: relative; background: #F6EBDD url(img/viagem-eu-duo.jpg) center / 100% 100% no-repeat; }

/* secretária e, no ecrã do MacBook Pro (da biblioteca), o site da Dinamarca, pixelizado (36 por 24)
   a partir de uma captura do topo; clicar abre-o pequeno (o ovo-dinamarca, no lb.html) */
.f-viagens .desk { --c: #CFB08C; --top: #DCC09E; }
.f-viagens .mb-vidro { background: #F3EEE6 url(img/dinamarca-pixel-36.png) center / 100% 100% no-repeat; image-rendering: pixelated; }

/* a mesa e o mapa */
.f-viagens .mtable { --c: #B48A60; --top: #C49A6C; }
.f-viagens .map {
  position: absolute; inset: calc(2 * var(--u)); width: calc(100% - 4 * var(--u)); height: calc(100% - 4 * var(--u));
  transform: translateZ(calc(3 * var(--u)));
  border-radius: calc(2 * var(--u));
}
.f-viagens .map .land { fill: #EDE3CB; stroke: #CDBB96; stroke-width: .8; }
.f-viagens .map .route { fill: none; stroke: var(--coral); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 4 3; }
.f-viagens .mt { --c: #A9B98A; --top: #C2CF9F; }
.f-viagens .mt .mt { --c: #8E9E70; --top: #F3EEE6; }
.f-viagens .pin { --c: #3A3645; --top: var(--coral); }
.f-viagens .pin::before { background: #3A3645; }

/* malas */
.f-viagens .case { --c: var(--coral); --top: color-mix(in oklab, var(--coral), white 18%); border-radius: calc(3 * var(--u)); }
.f-viagens .case-2 { --c: #2B3A67; --top: #3A4C80; }
.f-viagens .handle { --c: #3A3645; }
.f-viagens .strap { --c: #D2AE86; }
.f-viagens .stickers { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: calc(5 * var(--u)); }
.f-viagens .stickers i { width: calc(13 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: var(--sun); box-shadow: inset 0 0 0 calc(2 * var(--u)) #FFFDF8; }
/* na mala, no lugar da etiqueta azul, a fotografia de Lisboa colada, por cima do botão de O Convite */
.f-viagens .stickers .st-lisboa {
  position: relative; z-index: 2; width: calc(17 * var(--u)); aspect-ratio: 4 / 3; border-radius: calc(1 * var(--u)); rotate: -10deg;
  background: #F6EBDD url(img/viagem-po-duo.jpg) center / 100% 100% no-repeat;
}
.f-viagens .stickers i:nth-child(3) { background: var(--mint); }
/* na mala azul, a etiqueta de bagagem do voo de Estugarda: cartão com a ponta cortada e o furo, o fio até à correia,
   a faixa coral e o código do aeroporto */
.f-viagens .vg-etiqueta { overflow: visible; }
.f-viagens .vg-etiqueta::before { /* o fio */
  content: ""; position: absolute; left: 50%; top: calc(-4 * var(--u)); width: calc(.6 * var(--u)); height: calc(6.5 * var(--u));
  translate: -50% 0; rotate: 8deg; background: #F3EEE6; border-radius: 1px;
}
.f-viagens .vg-etiqueta i {
  position: absolute; inset: 0; rotate: 6deg; display: grid; place-items: end center; padding-bottom: calc(3 * var(--u));
  clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
  background:
    radial-gradient(circle at 50% calc(3 * var(--u)), #2B3A67 0 calc(1.1 * var(--u)), transparent calc(1.2 * var(--u))),
    linear-gradient(transparent 30%, var(--coral) 30% 44%, transparent 44%),
    #FFF6E4;
  font: 700 calc(4.4 * var(--u))/1 var(--mono); font-style: normal; letter-spacing: .04em; color: var(--ink);
  box-shadow: inset 0 0 0 calc(.4 * var(--u)) rgb(31 28 44 / .15);
}

/* a animação (8 s): rota e alfinetes */
.f-viagens .map .route { stroke-dasharray: 4 3; animation: viagens-dash 1.4s linear infinite; }
.f-viagens .pin { animation: viagens-pin 8s cubic-bezier(.3, 1.5, .5, 1) infinite; animation-delay: calc(var(--n) * 1s); }
@keyframes viagens-dash { to { stroke-dashoffset: -7; } }
@keyframes viagens-pin {
  0%, 4% { translate: 0 0 calc(30 * var(--u)); opacity: 0; }
  10%, 84% { translate: 0 0 0; opacity: 1; }
  92%, 100% { translate: 0 0 0; opacity: 0; }
}


/* a janela do site de Estugarda: o princípio do site a correr para baixo, e a ligação para o site inteiro */
#ovo-estugarda span a { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* o tampo da mesa abre o Birkenkopf: o botão fica por cima do mapa, à altura dele */
.f-viagens .vg-tampo { transform: translateZ(calc(3.2 * var(--u))); }