/* ============================================================
   MOVIMENTO DO SITE — duas coisas, ambas em todas as páginas.
   (+ 3, no fim: reserva do contorno de foco para as páginas sem navbar —
   vive aqui por ser o único CSS que um teste garante 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;
  }
}

/* ── 3. FOCO DO TECLADO (reserva) ────────────────────────────
   O anel de foco "oficial" é injetado pelo gpw-navbar.js (com a deteção de
   rato para as caixas de texto — ver tests/acessibilidade-base). Mas 17
   páginas NÃO carregam o navbar: login, cart, dashboard, upload, admin*,
   service-checkout, 404… e aí o Tab andava às escuras (auditoria
   2026-09-26). Esta é a reserva para essas: mesmo anel, só com outline, e
   sem caixas de texto nem <select> (o Chrome dá-lhes :focus-visible até com
   o rato, e elas já mudam a cor da borda ao focar). Nas páginas com navbar
   as duas regras coincidem — mesma cor e espessura, nada muda.
   !important pelo mesmo motivo do navbar: há outline:none inline. */
:is(a[href], button, summary, [tabindex]:not([tabindex="-1"]), [role="button"],
    input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"]):focus-visible {
  outline: 2px solid #F5C400 !important;
  outline-offset: 2px !important;
}