/* ============================================================
   MOVIMENTO DO SITE — duas coisas, ambas em todas as páginas.

   1) A entrada dos modais (aqui em baixo).
   2) Respeitar quem pediu ao sistema para reduzir movimento (mais abaixo).

   ── 1. ENTRADA DOS MODAIS ──────────────────────────────────
   O carrinho, a confirmação e o login apareciam de repente: o JS troca o
   overlay de `display:none` para `flex` e a caixa surge feita. 150ms a
   aparecer tiram o safanão sem atrasar ninguém.

   Sem tocar em JavaScript: a animação corre sozinha quando o elemento passa
   a ser desenhado, e volta a correr de cada vez que o modal reabre (sair do
   `display:none` recomeça as animações CSS). Uma `transition` não servia —
   não há transição a partir de `display:none`.

   Aqui e não no CSS de cada página: o `.modal-box` está duplicado em 16
   páginas e este ficheiro chega às 50. */

/* Duas formas de abrir, ambas em uso: a classe `.active` (carrinho, login) e
   o `display:flex` inline posto pelo JS. Cobrir só uma deixava metade dos
   modais na mesma. */
.modal-overlay.active,
.modal-overlay[style*='flex'] { animation: gpwModalFundo .15s ease-out; }
.modal-overlay.active > .modal-box,
.modal-overlay[style*='flex'] > .modal-box { animation: gpwModalCaixa .15s ease-out; }

@keyframes gpwModalFundo { from { opacity: 0; } }
/* Sobe 8px e cresce de 98%: o suficiente para o olho seguir de onde veio,
   pouco o suficiente para não se reparar. */
@keyframes gpwModalCaixa { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ============================================================
   REDUZIR MOVIMENTO — respeitar quem pediu ao sistema para parar.

   Quem tem enxaqueca vestibular, perturbação do equilíbrio ou sensibilidade
   a movimento liga "reduzir movimento" no sistema operativo. Até aqui o site
   ignorava isso: a faixa do topo rolava sem parar em todas as páginas, os
   enfeites sazonais atravessavam o ecrã, o globo rodava. Movimento contínuo
   no campo de visão causa náusea a sério, não é questão de gosto.

   Carregado por TODAS as páginas (tests/reduzir-movimento.test.mjs garante).
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Regra geral: o que anima passa a instantâneo em vez de desaparecer.
     `0.01ms` e não `none` porque muita animação deixa o elemento no estado
     final (visível, no sítio certo); cortá-la a meio deixava-o escondido. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* EXCEÇÃO 1 — textos que rolam (a faixa do topo, a fita de vendas, o aviso
     do painel admin). Para estes, "completar instantaneamente" significa
     saltar para o FIM do percurso, ou seja para fora do ecrã: o utilizador
     ficava com uma barra vazia. Param onde começam, e leem-se na mesma. */
  #gpw-banner-track,
  .sold-track,
  .marquee-content {
    animation: none !important;
    transform: none !important;
  }

  /* EXCEÇÃO 2 — enfeites sazonais que atravessam o ecrã por cima de tudo.
     Parados a meio ficariam a tapar conteúdo; e como são só decoração, o
     melhor é não estarem lá. */
  .gpw-seasonal-imgs,
  [class*='gpw-seasonal'] {
    display: none !important;
  }
}