/* ==========================================================================
   Página não encontrada (lab 11)
   Ecrã inteiro, sem cabeçalho nem rodapé, sempre em tema escuro. Logótipo no
   canto superior esquerdo (sem ligação: o botão é o caminho de volta); em
   baixo à esquerda, o título (Erro 404), a frase e o botão.
   Fundo: linhas de varrimento e ruído por cima do fundo escuro, decorativos
   (aria-hidden), como no site da TMSR. Com movimento reduzido ficam parados.
   ========================================================================== */
.not-found {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-bg);
}
.not-found__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding-block: var(--space-3);
}
@media (min-width: 64em) { .not-found__inner { padding-block: var(--space-4); } }
.not-found__logo { grid-row: 1; width: 4rem; height: auto; }
@media (min-width: 64em) { .not-found__logo { width: 7.5rem; } }
.not-found__body { grid-row: 3; max-width: var(--measure); }

.not-found__title { margin: 0; max-width: none; }
.not-found__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-subtle);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: uppercase;
}
.not-found__code { display: block; color: var(--color-text); font-size: var(--text-h1-hp); line-height: 1; }
.not-found__text { margin: var(--space-4) 0 0; }
.not-found__action { margin: var(--space-5) 0 0; }

/* Fundo (TMSR): linhas de varrimento de 2px e ruído de pontos */
.not-found__scanlines,
.not-found__noise { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.not-found__scanlines {
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 2px);
  opacity: 0.5;
}
.not-found__noise {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px, 7px 7px;
  opacity: 0.7;
}
/* Chat 36 (decidido no chat 15, 2.27): as linhas e o ruído animam 5 segundos
   e desaparecem num fade de 600ms; fica o fundo do site. As contagens param
   as animações aos 5 segundos (6s × 0,8333; 0,15s × 33,333). */
@media (prefers-reduced-motion: no-preference) {
  .not-found__scanlines { animation: not-found-scan 6s 0.8333 linear forwards, not-found-fade 600ms ease 5s forwards; }
  .not-found__noise { animation: not-found-noise 0.15s steps(3) 33.333 forwards, not-found-fade 600ms ease 5s forwards; }
}
@keyframes not-found-fade { to { opacity: 0; } }
@keyframes not-found-scan {
  0% { background-position: 0 0; }
  100% { background-position: 0 200px; }
}
@keyframes not-found-noise {
  0% { background-position: 0 0, 0 0, 0 0; }
  20% { background-position: -2px 1px, 1px -2px, 2px 1px; }
  40% { background-position: 2px -1px, -2px 1px, -1px -2px; }
  60% { background-position: -1px 2px, 2px -1px, 1px 2px; }
  80% { background-position: 1px -2px, -1px 2px, -2px -1px; }
  100% { background-position: 0 0, 0 0, 0 0; }
}

/* ==========================================================================
   Mosaico «404» (chat 25, decisões 2.39, ponto 14) — variante not-found--mosaic
   Sem logótipo. «Erro» por cima do mosaico (o 404 só para leitores de ecrã);
   o mosaico ao centro do ecrã; o texto e o botão (sem seta) centrados no
   espaço por baixo. Três algarismos feitos de quadrados, cada um com a sua
   imagem base e sempre uma só imagem em todos os quadrados. Cada grupo de
   quadrados tem uma imagem: com o rato num grupo, o algarismo todo vira para
   a imagem desse grupo; quando o rato sai do algarismo, volta à base. O mosaico inclina-se um pouco na direção
   do rato. Nada se mexe sozinho. Decorativo (aria-hidden). Com movimento
   reduzido: troca sem virar e sem inclinação.
   ========================================================================== */
/* Linhas 1fr · auto · 1fr: o mosaico fica ao centro do ecrã e o texto ao
   meio do espaço de baixo. */
.not-found--mosaic .not-found__inner { grid-template-rows: 1fr auto 1fr; padding-block: 0; }
.nf-mosaic-wrap {
  grid-row: 2;
  justify-self: center;
}
.not-found--mosaic .not-found__body {
  grid-row: 3;
  align-self: center;
  justify-self: center;
  text-align: center;
  padding-block: var(--space-4);
}
.not-found--mosaic .not-found__text {
  margin: 0;
  color: var(--color-text-subtle);
  font-family: var(--font-body);
  font-size: 1rem;
}
.nf-mosaic-wrap .not-found__title { margin: 0 0 var(--space-2); text-align: center; }
.nf-mosaic {
  --gap: 4px;
  --tile: min(6rem, calc((100vw - var(--page-margin) * 2 - 1rem - var(--gap) * 10) / 11));
  --box-w: calc(3 * var(--tile) + 2 * var(--gap));
  --box-h: calc(5 * var(--tile) + 4 * var(--gap));
  display: flex;
  gap: calc(var(--tile) + 2 * var(--gap));
  transition: transform 300ms var(--ease-hover);
}
@media (min-width: 48em) { .nf-mosaic { --gap: 8px; } }
/* Em desktop o quadrado limita-se também pela altura do ecrã, para o mosaico
   ao centro deixar espaço para o texto por baixo (nunca abaixo de 40px). */
@media (min-width: 64em) {
  .nf-mosaic { --tile: max(2.5rem, min(6rem, calc((100svh - 32rem) / 5))); }
}
.nf-mosaic__digit {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, var(--tile));
  grid-template-rows: repeat(5, var(--tile));
  gap: var(--gap);
  perspective: 800px;
}
.nf-mosaic__tile {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 400ms var(--ease-hover);
}
.nf-mosaic__tile.is-turned { transform: rotateY(180deg); }
.nf-mosaic__face {
  --img-w: calc(var(--box-h) * var(--ratio, 1));
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background-color: var(--color-surface);
  background-repeat: no-repeat;
  /* Sem JS: a fotografia inteira pela altura do algarismo, ao centro. Com JS,
     o mosaic.js enquadra a imagem no algarismo (--iw, --ih, --px, --py, em píxeis). */
  background-size: var(--iw, var(--img-w)) var(--ih, var(--box-h));
  background-position:
    var(--px, calc((var(--box-w) - var(--img-w)) / 2 - var(--x) * (var(--tile) + var(--gap))))
    var(--py, calc(0px - var(--y) * (var(--tile) + var(--gap))));
}
.nf-mosaic__face--back { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
  .nf-mosaic, .nf-mosaic__tile { transition: none; }
}