/* terraço: o letreiro com o logo da Duo Design, a casota, o mastro com 2026, o ar condicionado (do teste 01) */
.f-terraco .leg { --c: var(--ink); }
.f-terraco .beam { --c: #2B2838; }
/* a placa na frente da viga: «Since 1992», na letra e no espaçamento da antiga placa DESIGN */
.f-terraco .plaque {
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font: 700 calc(10 * var(--u))/1 var(--mono); letter-spacing: .9em; padding-left: .9em; text-transform: uppercase;
  white-space: nowrap;
}
/* o logo da Duo Design (o PNG de 400 px do site antigo), de pé na viga, com a grossura de uma parede:
   as fatias de trás são o recorte do logo (máscara) num azul mais escuro, e a da frente é o logo.
   Ergue-se todo junto quando o terraço aparece */
.f-terraco .logo { animation: popup .9s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: .35s; }
.f-terraco .logo-frente { background: url(img/duodsgn-400.png) center / contain no-repeat; }
.f-terraco .logo-lado {
  background: #6C93B0;
  -webkit-mask: url(img/duodsgn-400.png) center / contain no-repeat;
  mask: url(img/duodsgn-400.png) center / contain no-repeat;
}
.f-terraco .logo-lado:first-child { background: #5D8299; }
@keyframes popup {
  from { transform: translateZ(calc(var(--z) * var(--u))) rotateX(0deg); }
  to   { transform: translateZ(calc(var(--z) * var(--u))) rotateX(-90deg); }
}
.f-terraco .hut { --c: #ECE5DA; }
.f-terraco .door { background: var(--cobalt); border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 0 0; box-shadow: inset calc(-4 * var(--u)) 0 0 rgb(0 0 0 / .15); }
.f-terraco .mast { --c: var(--ink); }
/* a lâmpada do cimo do mastro e o brilho; a lâmpada acende-se com o brilho, em Morse (em baixo) */
.f-terraco .mast-lampada { --c: #7E1216; --top: #9E171C; --c1: #6E1013; --c2: #861317; }   /* apagada: vermelho-escuro */
.f-terraco .mast-luz {
  border-radius: 50%;
  background: radial-gradient(closest-side, #FFF4EE 0 10%, #FF3B30 22%, rgb(255 48 40 / .55) 40%, rgb(255 40 40 / 0) 100%);
  animation: terraco-luz 27.12s steps(1) infinite;
}
/* a lâmpada do cimo do mastro diz «HELLO HUMAN» em Morse, em ciclo (o José Rui, a 11 de Novembro: «Hello, Human...
   em loop»; dantes piscava como as antenas): ponto de 1 unidade, traço de 3, 1 entre sinais, 3 entre letras, 7 entre
   as palavras e 14 de pausa antes de recomeçar; a unidade é de 0.24 s, 113 unidades, 27.12 s. A vírgula não entra,
   para a mensagem se ler. As percentagens fizeram-se com um script, a partir do código Morse */
@keyframes terraco-luz {
  0.000% { opacity: 1; }
  0.885% { opacity: 0; }
  1.770% { opacity: 1; }
  2.655% { opacity: 0; }
  3.540% { opacity: 1; }
  4.425% { opacity: 0; }
  5.310% { opacity: 1; }
  6.195% { opacity: 0; }
  8.850% { opacity: 1; }
  9.735% { opacity: 0; }
  12.389% { opacity: 1; }
  13.274% { opacity: 0; }
  14.159% { opacity: 1; }
  16.814% { opacity: 0; }
  17.699% { opacity: 1; }
  18.584% { opacity: 0; }
  19.469% { opacity: 1; }
  20.354% { opacity: 0; }
  23.009% { opacity: 1; }
  23.894% { opacity: 0; }
  24.779% { opacity: 1; }
  27.434% { opacity: 0; }
  28.319% { opacity: 1; }
  29.204% { opacity: 0; }
  30.088% { opacity: 1; }
  30.973% { opacity: 0; }
  33.628% { opacity: 1; }
  36.283% { opacity: 0; }
  37.168% { opacity: 1; }
  39.823% { opacity: 0; }
  40.708% { opacity: 1; }
  43.363% { opacity: 0; }
  49.558% { opacity: 1; }
  50.442% { opacity: 0; }
  51.327% { opacity: 1; }
  52.212% { opacity: 0; }
  53.097% { opacity: 1; }
  53.982% { opacity: 0; }
  54.867% { opacity: 1; }
  55.752% { opacity: 0; }
  58.407% { opacity: 1; }
  59.292% { opacity: 0; }
  60.177% { opacity: 1; }
  61.062% { opacity: 0; }
  61.947% { opacity: 1; }
  64.602% { opacity: 0; }
  67.257% { opacity: 1; }
  69.912% { opacity: 0; }
  70.796% { opacity: 1; }
  73.451% { opacity: 0; }
  76.106% { opacity: 1; }
  76.991% { opacity: 0; }
  77.876% { opacity: 1; }
  80.531% { opacity: 0; }
  83.186% { opacity: 1; }
  85.841% { opacity: 0; }
  86.726% { opacity: 1; }
  87.611% { opacity: 0; }
  100% { opacity: 0; }
}
.f-terraco .flag {
  display: grid; place-items: center;
  background: var(--coral); color: var(--ink);
  font: 700 calc(13 * var(--u))/1 var(--mono);
  transform-origin: 0 100%;
}
.f-terraco .ac { --c: #DAD5CD; }
.f-terraco .fan {
  position: absolute; left: 50%; top: 50%;
  width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin: calc(-15 * var(--u));
  border-radius: 50%;
  background: conic-gradient(from 0deg, #8E8898 0 15%, transparent 0 25%, #8E8898 0 40%, transparent 0 50%, #8E8898 0 65%, transparent 0 75%, #8E8898 0 90%, transparent 0) #B9B3AA;
  box-shadow: 0 0 0 calc(2 * var(--u)) #9E978E;
  transform: translateZ(calc(.6 * var(--u)));
  animation: spin 1.6s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }

/* a gaivota tem três poleiros e voa sempre em frente, de um para o seguinte: A, o parapeito da frente (x 120, y 297,
   z 30, virada para a direita); B, a ventoinha do ar condicionado (x 124, y 250, z 43, onde roda com a ventoinha); e C,
   o telhado da casota, por cima da porta (x 228, y 234, z 74, virada para a esquerda). Cada clique leva-a ao poleiro
   seguinte (A, B, C, A...). Nunca se vira: levanta para onde está virada e pousa virada para onde chega, porque cada
   perna do voo é uma curva de Hermite que sai de um poleiro com o rumo dele e chega ao seguinte com o rumo dele (a
   tangente com 700 de força, para ela dar uma volta larga, por fora do prédio, sem passar pelo logo, pelo mastro nem
   pela casota), e o rumo em voo é a tangente da curva (atan2 da derivada). A altura faz um arco de 150 por cima da
   recta entre os dois poleiros.
   O estado é um grupo de três rádios escondidos (gv-a, gv-b, gv-c, no lb.html), porque um ciclo de três não se faz
   com popovers (cada clique só abre ou fecha um); na gaivota, o rótulo à vista é o do poleiro seguinte. Cada perna tem a
   sua propriedade registada (--p1, --p2, --p3), que só transita ao entrar no estado dela; as outras mudam logo. A
   perna activa é a primeira com valor, pela ordem 3, 2, 1: em A, --p3 = 1 (e --p2 = 1, para a partida de C não cair
   em A); em B, --p1 = 1; em C, --p1 = --p2 = 1. O desenho tem 34 unidades e vai a 1,4: 48 unidades, 60 cm, o tamanho de uma gaivota a sério */
@property --p1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --p2 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --p3 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sacode { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --q { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --lr { syntax: "<number>"; inherits: true; initial-value: 60; }
@property --lh { syntax: "<number>"; inherits: true; initial-value: 100; }
@property --giro { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --toque { syntax: "auto | none"; inherits: true; initial-value: auto; }
.f-terraco { --p1: 0; --p2: 1; --p3: 1; transition: --p3 7s cubic-bezier(.4, 0, .5, 1); }
:root:has(#gv-b:checked) .f-terraco { --p1: 1; --p2: 0; --p3: 0; transition: --p1 7s cubic-bezier(.4, 0, .5, 1); }
:root:has(#gv-c:checked) .f-terraco { --p1: 1; --p2: 1; --p3: 0; transition: --p2 7s cubic-bezier(.4, 0, .5, 1); }
.f-terraco .gaivota {
  /* perna 1: de A a B */
  --h00-1: calc(2 * var(--p1) * var(--p1) * var(--p1) - 3 * var(--p1) * var(--p1) + 1); --h10-1: calc(var(--p1) * var(--p1) * var(--p1) - 2 * var(--p1) * var(--p1) + var(--p1));
  --h01-1: calc(-2 * var(--p1) * var(--p1) * var(--p1) + 3 * var(--p1) * var(--p1)); --h11-1: calc(var(--p1) * var(--p1) * var(--p1) - var(--p1) * var(--p1));
  --d00-1: calc(6 * var(--p1) * var(--p1) - 6 * var(--p1)); --d10-1: calc(3 * var(--p1) * var(--p1) - 4 * var(--p1) + 1); --d11-1: calc(3 * var(--p1) * var(--p1) - 2 * var(--p1));
  --e00-1: calc(12 * var(--p1) - 6); --e10-1: calc(6 * var(--p1) - 4); --e11-1: calc(6 * var(--p1) - 2);
  --x1: calc(var(--h00-1) * 120 + var(--h10-1) * 700.0 + var(--h01-1) * 124 + var(--h11-1) * -0.0);
  --dx1: calc(var(--d00-1) * 120 + var(--d10-1) * 700.0 - var(--d00-1) * 124 + var(--d11-1) * -0.0);
  --ex1: calc(var(--e00-1) * 120 + var(--e10-1) * 700.0 - var(--e00-1) * 124 + var(--e11-1) * -0.0);
  --y1: calc(var(--h00-1) * 297 + var(--h10-1) * 0.0 + var(--h01-1) * 250 + var(--h11-1) * -700.0);
  --dy1: calc(var(--d00-1) * 297 + var(--d10-1) * 0.0 - var(--d00-1) * 250 + var(--d11-1) * -700.0);
  --ey1: calc(var(--e00-1) * 297 + var(--e10-1) * 0.0 - var(--e00-1) * 250 + var(--e11-1) * -700.0);
  --z1: calc(30 + 13 * var(--p1) + sin(var(--p1) * 180deg) * 150);
  /* perna 2: de B a C */
  --h00-2: calc(2 * var(--p2) * var(--p2) * var(--p2) - 3 * var(--p2) * var(--p2) + 1); --h10-2: calc(var(--p2) * var(--p2) * var(--p2) - 2 * var(--p2) * var(--p2) + var(--p2));
  --h01-2: calc(-2 * var(--p2) * var(--p2) * var(--p2) + 3 * var(--p2) * var(--p2)); --h11-2: calc(var(--p2) * var(--p2) * var(--p2) - var(--p2) * var(--p2));
  --d00-2: calc(6 * var(--p2) * var(--p2) - 6 * var(--p2)); --d10-2: calc(3 * var(--p2) * var(--p2) - 4 * var(--p2) + 1); --d11-2: calc(3 * var(--p2) * var(--p2) - 2 * var(--p2));
  --e00-2: calc(12 * var(--p2) - 6); --e10-2: calc(6 * var(--p2) - 4); --e11-2: calc(6 * var(--p2) - 2);
  --x2: calc(var(--h00-2) * 124 + var(--h10-2) * -0.0 + var(--h01-2) * 228 + var(--h11-2) * -700.0);
  --dx2: calc(var(--d00-2) * 124 + var(--d10-2) * -0.0 - var(--d00-2) * 228 + var(--d11-2) * -700.0);
  --ex2: calc(var(--e00-2) * 124 + var(--e10-2) * -0.0 - var(--e00-2) * 228 + var(--e11-2) * -700.0);
  --y2: calc(var(--h00-2) * 250 + var(--h10-2) * -700.0 + var(--h01-2) * 234 + var(--h11-2) * 0.0);
  --dy2: calc(var(--d00-2) * 250 + var(--d10-2) * -700.0 - var(--d00-2) * 234 + var(--d11-2) * 0.0);
  --ey2: calc(var(--e00-2) * 250 + var(--e10-2) * -700.0 - var(--e00-2) * 234 + var(--e11-2) * 0.0);
  --z2: calc(43 + 31 * var(--p2) + sin(var(--p2) * 180deg) * 150);
  /* perna 3: de C a A */
  --h00-3: calc(2 * var(--p3) * var(--p3) * var(--p3) - 3 * var(--p3) * var(--p3) + 1); --h10-3: calc(var(--p3) * var(--p3) * var(--p3) - 2 * var(--p3) * var(--p3) + var(--p3));
  --h01-3: calc(-2 * var(--p3) * var(--p3) * var(--p3) + 3 * var(--p3) * var(--p3)); --h11-3: calc(var(--p3) * var(--p3) * var(--p3) - var(--p3) * var(--p3));
  --d00-3: calc(6 * var(--p3) * var(--p3) - 6 * var(--p3)); --d10-3: calc(3 * var(--p3) * var(--p3) - 4 * var(--p3) + 1); --d11-3: calc(3 * var(--p3) * var(--p3) - 2 * var(--p3));
  --e00-3: calc(12 * var(--p3) - 6); --e10-3: calc(6 * var(--p3) - 4); --e11-3: calc(6 * var(--p3) - 2);
  --x3: calc(var(--h00-3) * 228 + var(--h10-3) * -700.0 + var(--h01-3) * 120 + var(--h11-3) * 700.0);
  --dx3: calc(var(--d00-3) * 228 + var(--d10-3) * -700.0 - var(--d00-3) * 120 + var(--d11-3) * 700.0);
  --ex3: calc(var(--e00-3) * 228 + var(--e10-3) * -700.0 - var(--e00-3) * 120 + var(--e11-3) * 700.0);
  --y3: calc(var(--h00-3) * 234 + var(--h10-3) * 0.0 + var(--h01-3) * 297 + var(--h11-3) * 0.0);
  --dy3: calc(var(--d00-3) * 234 + var(--d10-3) * 0.0 - var(--d00-3) * 297 + var(--d11-3) * 0.0);
  --ey3: calc(var(--e00-3) * 234 + var(--e10-3) * 0.0 - var(--e00-3) * 297 + var(--e11-3) * 0.0);
  --z3: calc(74 + -44 * var(--p3) + sin(var(--p3) * 180deg) * 150);
  /* a perna activa: a primeira com valor, pela ordem 3, 2, 1 */
  --s3: min(1, var(--p3) * 100000);
  --s2: calc(min(1, var(--p2) * 100000) * (1 - var(--s3)));
  --s1: calc(1 - var(--s3) - var(--s2));
  --gx: calc(var(--s1) * var(--x1) + var(--s2) * var(--x2) + var(--s3) * var(--x3));
  --gy: calc(var(--s1) * var(--y1) + var(--s2) * var(--y2) + var(--s3) * var(--y3));
  --gz: calc(var(--s1) * var(--z1) + var(--s2) * var(--z2) + var(--s3) * var(--z3));
  --dx: calc(var(--s1) * var(--dx1) + var(--s2) * var(--dx2) + var(--s3) * var(--dx3));
  --dy: calc(var(--s1) * var(--dy1) + var(--s2) * var(--dy2) + var(--s3) * var(--dy3));
  --ex: calc(var(--s1) * var(--ex1) + var(--s2) * var(--ex2) + var(--s3) * var(--ex3));
  --ey: calc(var(--s1) * var(--ey1) + var(--s2) * var(--ey2) + var(--s3) * var(--ey3));
  --voo: calc(var(--s1) * var(--p1) + var(--s2) * var(--p2) + var(--s3) * var(--p3));   /* 0 a levantar, 1 pousada */
  --s: sin(var(--voo) * 180deg);
  /* o passeio sozinho (o --q, de 0 a 1, animado pelo gv-passeio-*): uma volta inteira num círculo tangente ao rumo
     do poleiro, para o lado de fora (o --lsig), com o raio --lr, a subir até --lh e a descer; parte em frente e chega
     ao mesmo poleiro virada como estava, por isso nunca se vira. O rumo em voo é a tangente do círculo */
  --fl: hypot(var(--dx), var(--dy));
  --fx: calc(var(--dx) / var(--fl)); --fy: calc(var(--dy) / var(--fl));
  --qs: sin(var(--q) * 360deg); --qc: cos(var(--q) * 360deg);
  --ox: calc(var(--lr) * (var(--fx) * var(--qs) - var(--lsig) * var(--fy) * (1 - var(--qc))));
  --oy: calc(var(--lr) * (var(--fy) * var(--qs) + var(--lsig) * var(--fx) * (1 - var(--qc))));
  --oz: calc(var(--lh) * sin(var(--q) * 180deg));
  --vx: calc(var(--fx) * var(--qc) - var(--lsig) * var(--fy) * var(--qs));
  --vy: calc(var(--fy) * var(--qc) + var(--lsig) * var(--fx) * var(--qs));
  --mq: min(1, sin(var(--q) * 180deg) * 6);
  --m: max(min(1, var(--s) * 5), var(--mq));                    /* 0 pousada, 1 em voo */
  --abre: calc(.01 + .99 * var(--m) + .45 * var(--sacode) * (1 - var(--m)));
  --bate: calc(sin(var(--voo) * 12 * 360deg) * 30deg * (max(0, 1 - var(--voo) * 4) + max(0, var(--voo) * 4 - 3))
    + sin(var(--q) * 14 * 360deg) * 30deg * (max(0, 1 - var(--q) * 6) + max(0, var(--q) * 6 - 5)));
  /* inclina-se para dentro da curva: a curvatura é o produto cruzado da primeira e da segunda derivadas */
  --banca: calc(clamp(-1, (var(--dx) * var(--ey) - var(--dy) * var(--ex)) / (var(--dx) * var(--dx) + var(--dy) * var(--dy)) * .8, 1) * 24deg * var(--m) + var(--lsig) * 18deg * var(--mq));
  position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d;
  transform:
    translate3d(calc((var(--gx) + var(--ox)) * var(--u)), calc((var(--gy) + var(--oy)) * var(--u)), calc((var(--gz) + var(--oz)) * var(--u)))
    rotateZ(atan2(var(--vy), var(--vx)))
    rotateX(var(--banca))
    scale3d(1.4, 1.4, 1.4);
  --lsig: 1;
  animation: gv-sacode 13.7s linear infinite, gv-passeio-a 97s linear 7s infinite;
}
/* se ninguém lhe tocar, levanta sozinha de vez em quando, dá uma volta por fora do prédio e volta ao mesmo poleiro: três
   voltas por estado, de tamanhos, alturas e intervalos diferentes, num ciclo comprido, para não parecer sempre a mesma
   (o José Rui, 13 de Novembro: «se ninguém clicar ela voa sozinha»; sem JavaScript, o acaso é este desencontro). O
   ciclo recomeça a cada clique, porque cada poleiro tem a sua animação, e começa 7 s depois, quando ela já pousou. Cada
   volta sai para o lado de fora: do parapeito, para a frente; da ventoinha, para a direita, por cima da casota; da
   casota, para a frente. Em voo não se lhe pode tocar (o --toque) */
:root:has(#gv-b:checked) .f-terraco .gaivota { animation: gv-sacode 13.7s linear infinite, gv-passeio-b 96.4s linear 7s infinite, gv-giro-b 96.4s linear 7s infinite; }
:root:has(#gv-c:checked) .f-terraco .gaivota { --lsig: -1; animation: gv-sacode 13.7s linear infinite, gv-passeio-c 101s linear 7s infinite; }
.f-terraco .gv-alvo .ecra-btn { pointer-events: var(--toque, auto); }
.f-terraco .gv-roda { transform-style: preserve-3d; rotate: z var(--giro); }
/* na ventoinha, roda com ela (1,6 s por volta, como o spin do ar condicionado), depois de pousar, e pára enquanto passeia:
   o --giro, no gv-giro-b, só anda entre as voltas, e cada intervalo é um número inteiro de voltas da ventoinha */
/* o rótulo à vista é o do poleiro seguinte */
.f-terraco .gv-alvo label { display: none; cursor: pointer; }
.f-terraco .gv-alvo .gv-ir-b { display: block; }
:root:has(#gv-b:checked) .f-terraco .gv-alvo .gv-ir-b { display: none; }
:root:has(#gv-b:checked) .f-terraco .gv-alvo .gv-ir-c { display: block; }
:root:has(#gv-c:checked) .f-terraco .gv-alvo .gv-ir-b { display: none; }
:root:has(#gv-c:checked) .f-terraco .gv-alvo .gv-ir-a { display: block; }
.f-terraco .gv-roda > * { transform-style: preserve-3d; }
/* o desenho, à maneira de uma gaivota-de-patas-amarelas, a do Porto (o José Rui pediu-a mais realista, a 11 de
   Novembro; a primeira era uma caricatura): corpo comprido, cabeça pequena de testa baixa, olho pequeno de íris clara e
   anel vermelho, bico forte e amarelo, de ponta curva e com a mancha vermelha no de baixo, patas cor-de-rosa; pousada, as
   asas dobradas cinzentas e as pontas pretas, com as manchas brancas, a passar a cauda (as pontas somem-se em voo). Os
   desenhos são SVG no próprio CSS. O perfil vê-se dos dois lados */
.f-terraco .gv-perfil { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 150'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M164 112 L161 146 M150 147 L168 147 M178 112 L180 146 M172 147 L190 147' stroke='%23E39A8F' stroke-width='4.5' fill='none'/%3E%3C/g%3E%3Cpath d='M232 62 C242 88 222 114 188 116 L122 114 C96 112 70 98 44 86 L28 80 L32 70 C80 62 150 50 212 48 C226 48 232 54 232 62 Z' fill='%23FBFAF6'/%3E%3Cpath d='M214 50 C170 50 110 56 70 68 L50 74 C90 88 150 94 198 84 C214 78 222 64 214 50 Z' fill='%23A9B3BD'/%3E%3Cpath d='M78 92 C120 96 160 94 196 85' stroke='%23FBFAF6' stroke-width='3' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.f-terraco .gv-perfil i { position: absolute; display: block; }
.f-terraco .gv-pontas { left: -6%; top: 46%; width: 30%; height: 20%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M100 4 L4 16 L0 22 L8 26 L100 24 Z' fill='%231F1C2C'/%3E%3Ccircle cx='14' cy='21' r='3' fill='%23FBFAF6'/%3E%3Ccircle cx='30' cy='20' r='2.4' fill='%23FBFAF6'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: calc(1 - var(--m)); transform-origin: 100% 40%; animation: gv-cauda 5.9s ease-in-out infinite; }
.f-terraco .gv-cabeca { left: 62.9%; top: 9.3%; width: 37.1%; height: 41.3%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 126 62'%3E%3Cpath d='M56 25 L102 29 C109 29 112 33 109 37 L103 35 L58 35 Z' fill='%23F2C64E'/%3E%3Cpath d='M2 46 C-2 24 16 6 36 6 C52 6 60 15 60 26 C61 33 59 38 56 41 L40 52 C26 57 8 56 2 46 Z' fill='%23FBFAF6'/%3E%3Ccircle cx='42' cy='21' r='3.6' fill='%23F3E3A2'/%3E%3Ccircle cx='42' cy='21' r='2.1' fill='%231F1C2C'/%3E%3Ccircle cx='42' cy='21' r='4.2' fill='none' stroke='%23E0483E' stroke-width='.9'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: 18% 86%; animation: gv-cabeca 14.3s steps(1) infinite; }
.f-terraco .gv-bico-baixo { left: 46%; top: 55%; width: 38%; height: 16%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10'%3E%3Cpath d='M0 0 L46 1 L40 8 C30 9 10 8 0 6 Z' fill='%23F2C64E'/%3E%3Ccircle cx='37' cy='4.5' r='3' fill='%23E0483E'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: 0 30%; animation: gv-grito 14.3s steps(1) infinite; }
/* as costas vistas de cima (o manto e as pontas das asas dobradas) e as asas, compridas e estreitas, de ponta preta, que
   se abrem a partir do corpo (o --abre) e batem (o --bate) */
.f-terraco .gv-costas { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 80'%3E%3Cpath d='M300 40 C292 10 252 4 200 6 L60 22 L40 32 L40 48 L60 58 L200 74 C252 76 292 70 300 40 Z' fill='%23A9B3BD'/%3E%3Cpath d='M68 24 L0 36 L0 44 L68 56 Z' fill='%231F1C2C'/%3E%3Ccircle cx='12' cy='40' r='4' fill='%23FBFAF6'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.f-terraco .gv-asa-e {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 370'%3E%3Cpath d='M116 370 L112 250 L96 120 L70 0 L50 40 L30 150 L18 260 L8 370 Z' fill='%23A9B3BD'/%3E%3Cpath d='M96 120 L70 0 L50 40 L36 120 Z' fill='%231F1C2C'/%3E%3Ccircle cx='70' cy='62' r='7' fill='%23FBFAF6'/%3E%3Cpath d='M8 370 L18 260 L30 150' stroke='%23FBFAF6' stroke-width='5' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: 50% 100%;
  transform: translateZ(calc(var(--z) * var(--u))) rotateX(calc(-1 * var(--bate) - 6deg * var(--m))) scaleY(var(--abre));
}
.f-terraco .gv-asa-d {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 370'%3E%3Cg transform='translate(0 370) scale(1 -1)'%3E%3Cpath d='M116 370 L112 250 L96 120 L70 0 L50 40 L30 150 L18 260 L8 370 Z' fill='%23A9B3BD'/%3E%3Cpath d='M96 120 L70 0 L50 40 L36 120 Z' fill='%231F1C2C'/%3E%3Ccircle cx='70' cy='62' r='7' fill='%23FBFAF6'/%3E%3Cpath d='M8 370 L18 260 L30 150' stroke='%23FBFAF6' stroke-width='5' fill='none'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: 50% 0;
  transform: translateZ(calc(var(--z) * var(--u))) rotateX(calc(var(--bate) + 6deg * var(--m))) scaleY(var(--abre));
}
/* fechadas, as asas somem-se (dobradas a um centésimo, ficavam riscos por cima das costas) */
.f-terraco .gv-asa { opacity: clamp(0, (var(--abre) - .03) * 30, 1); }
.f-terraco .gv-alvo { background: none; }

/* pousada, o que as gaivotas fazem, pouco e em ciclos de durações desencontradas, para nunca se repetir igual: a
   cabeça inclina-se um nada, para um lado e para o outro, aos solavancos, e baixa-se de vez em quando, como a espreitar
   o chão; a cauda abana; as asas sacodem-se, meio abertas, duas vezes; e o grito, de cabeça para cima e bico aberto.
   Nada de virar a cabeça para trás nem de a meter nas costas (o José Rui: «movimentos com a cabeça que nem no
   Exorcista») */
@keyframes gv-cabeca {   /* num só ciclo com o grito, para não calharem juntos */
  0%, 100% { transform: none; }
  9% { transform: rotate(-7deg); }
  15% { transform: none; }
  27% { transform: rotate(9deg); }
  31% { transform: none; }
  40% { transform: translateY(14%) rotate(16deg); }           /* a espreitar o chão */
  46% { transform: none; }
  58% { transform: rotate(-6deg); }
  62% { transform: none; }
  80% { transform: rotate(-30deg); }                          /* o grito: cabeça para cima */
  81% { transform: rotate(-34deg); }
  82% { transform: rotate(-30deg); }
  83% { transform: rotate(-34deg); }
  84% { transform: rotate(-30deg); }
  88% { transform: none; }
}
@keyframes gv-grito {   /* o bico de baixo abre-se no grito, aos solavancos, com a cabeça */
  0%, 80%, 88%, 100% { rotate: 0deg; }
  80.5%, 82%, 83.5% { rotate: 34deg; }
  81.2%, 82.8% { rotate: 14deg; }
}
@keyframes gv-cauda { 0%, 70%, 100% { rotate: 0deg; } 75% { rotate: 10deg; } 80% { rotate: -6deg; } 85% { rotate: 6deg; } 90% { rotate: 0deg; } }
@keyframes gv-passeio-a {
  0% { --q: 0; --lr: 70; --lh: 90; --toque: auto; }
  13.4021% { --q: 0; --lr: 70; --lh: 90; --toque: auto; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  13.4536% { --toque: none; }
  24.7423% { --q: 1; --lr: 70; --lh: 90; --toque: none; animation-timing-function: step-end; }
  24.7938% { --q: 0; --toque: auto; }
  49.4845% { --q: 0; --lr: 110; --lh: 150; --toque: auto; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  49.5361% { --toque: none; }
  63.9175% { --q: 1; --lr: 110; --lh: 150; --toque: none; animation-timing-function: step-end; }
  63.9691% { --q: 0; --toque: auto; }
  82.4742% { --q: 0; --lr: 50; --lh: 60; --toque: auto; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  82.5258% { --toque: none; }
  91.7526% { --q: 1; --lr: 50; --lh: 60; --toque: none; animation-timing-function: step-end; }
  91.8041% { --q: 0; --toque: auto; }
  100% { --q: 0; --lr: 70; --lh: 90; --toque: auto; }
}
@keyframes gv-passeio-b {
  0% { --q: 0; --lr: 50; --lh: 110; --toque: auto; }
  13.2780% { --q: 0; --lr: 50; --lh: 110; --toque: auto; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  13.3299% { --toque: none; }
  23.6515% { --q: 1; --lr: 50; --lh: 110; --toque: none; animation-timing-function: step-end; }
  23.7033% { --q: 0; --toque: auto; }
  46.8880% { --q: 0; --lr: 70; --lh: 150; --toque: auto; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  46.9398% { --toque: none; }
  60.3734% { --q: 1; --lr: 70; --lh: 150; --toque: none; animation-timing-function: step-end; }
  60.4253% { --q: 0; --toque: auto; }
  78.6307% { --q: 0; --lr: 55; --lh: 120; --toque: auto; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  78.6826% { --toque: none; }
  90.0415% { --q: 1; --lr: 55; --lh: 120; --toque: none; animation-timing-function: step-end; }
  90.0934% { --q: 0; --toque: auto; }
  100% { --q: 0; --lr: 50; --lh: 110; --toque: auto; }
}
@keyframes gv-giro-b {
  0% { --giro: 0deg; }
  13.2780% { --giro: 2880deg; }
  23.6515% { --giro: 2880deg; }
  46.8880% { --giro: 7920deg; }
  60.3734% { --giro: 7920deg; }
  78.6307% { --giro: 11880deg; }
  90.0415% { --giro: 11880deg; }
  100% { --giro: 14040deg; }
}
@keyframes gv-passeio-c {
  0% { --q: 0; --lr: 45; --lh: 90; --toque: auto; }
  14.8515% { --q: 0; --lr: 45; --lh: 90; --toque: auto; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  14.9010% { --toque: none; }
  24.7525% { --q: 1; --lr: 45; --lh: 90; --toque: none; animation-timing-function: step-end; }
  24.8020% { --q: 0; --toque: auto; }
  44.5545% { --q: 0; --lr: 70; --lh: 130; --toque: auto; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  44.6040% { --toque: none; }
  57.4257% { --q: 1; --lr: 70; --lh: 130; --toque: none; animation-timing-function: step-end; }
  57.4752% { --q: 0; --toque: auto; }
  83.1683% { --q: 0; --lr: 55; --lh: 100; --toque: auto; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  83.2178% { --toque: none; }
  94.0594% { --q: 1; --lr: 55; --lh: 100; --toque: none; animation-timing-function: step-end; }
  94.1089% { --q: 0; --toque: auto; }
  100% { --q: 0; --lr: 45; --lh: 90; --toque: auto; }
}
@keyframes gv-sacode { 0%, 61%, 69%, 100% { --sacode: 0; } 63%, 67% { --sacode: 1; } 65% { --sacode: .2; } }
@media (prefers-reduced-motion: reduce) {
  .f-terraco { transition: none !important; }
  .f-terraco .gv-roda { animation: none !important; }
  .f-terraco :is(.gaivota, .gv-cabeca, .gv-bico-baixo, .gv-pontas) { animation: none; }
}

/* os rádios da gaivota, fora da vista e do teclado */
.gv-estado { position: fixed; left: 0; bottom: 0; margin: 0; padding: 0; border: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }