/* Aviso de carregamento (assets/js/loader.js): uma tira de papel pousada sobre o cartaz, com as
   arestas creme e vermelha das folhas, uma citação em Garamond, picotado ponteado e uma barra
   de progresso em pontos de costura. Depois do arranque, a «fita» no fundo da página acompanha
   tudo o que ainda chega em segundo plano (miniaturas, imagens, vídeos). */
.loader {
  position: fixed; left: 50%; bottom: clamp(88px, 13vh, 280px); z-index: 70;
  width: min(92vw, 36em);
  transform: translate(-50%, 1.4em) rotate(-.6deg);
  opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.loader[hidden] { display: none; }
.loader.is-in { opacity: 1; transform: translate(-50%, 0) rotate(-.6deg); pointer-events: auto; }

.loader-sheet {
  position: relative;
  padding: 1.05em 1.35em 1em;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: .45em .45em 0 var(--edge-cream), .85em .9em 0 var(--edge-red), var(--shadow);
}
/* grão do papel */
.loader-sheet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .36  0 0 0 0 .3  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.loader-close {
  position: absolute; top: 0; right: 0; z-index: 1;
  min-width: var(--touch); min-height: var(--touch);
  font-family: var(--mono); font-size: var(--s0); color: var(--muted);
}
.loader-close:hover, .loader-close:focus-visible { color: var(--accent); }

.loader-kicker {
  display: flex; align-items: center; gap: .6em;
  margin: 0 2.2em .75em 0;
  font-family: var(--mono); font-size: var(--s-1); text-transform: lowercase;
}
.loader-kicker img { width: 1.5em; flex: none; }
:root[data-theme="dark"] .loader-kicker img { filter: invert(1); }

.loader-quote { margin: 0; transition: opacity .5s var(--ease); }
.loader-quote.is-fading { opacity: 0; }
.loader-quote blockquote { margin: 0; }
.loader-quote blockquote p {
  margin: 0;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: calc(var(--s1) * 1.14); line-height: 1.28;
  text-wrap: balance; hyphens: manual;
}
.loader-original { margin: .4em 0 0; font-family: var(--serif); font-style: italic; font-size: var(--s-1); color: var(--muted); }
.loader-original[hidden] { display: none; }
.loader-quote figcaption {
  margin-top: .55em;
  font-family: var(--serif); font-size: var(--s0);
  font-variant-caps: all-small-caps; letter-spacing: .07em; color: var(--muted);
}

/* picotado: a parte técnica "destaca-se" da citação */
.loader-tech {
  margin-top: 1em; padding-top: .85em;
  border-top: 2px dotted var(--rule);
  font-family: var(--mono); font-size: var(--s-2); color: var(--muted);
}
.loader-msg { margin: 0 0 .65em; color: var(--ink); text-transform: lowercase; }
.loader.is-error .loader-msg { color: var(--accent); }

/* barra em pontos de costura: tracejado cinzento por coser, pontos vermelhos já cosidos */
.loader-bar {
  position: relative; height: .6em;
  background: repeating-linear-gradient(90deg, var(--rule) 0 .32em, transparent .32em .62em) center / 100% 2px no-repeat;
}
.loader-bar i {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: repeating-linear-gradient(90deg, var(--accent) 0 .44em, transparent .44em .62em) center / 100% 3px no-repeat;
  transition: width .35s linear;
}
.loader.is-building .loader-bar i { animation: loader-stitch 1.1s linear infinite; }
@keyframes loader-stitch { to { background-position: .62em center; } }
.loader-nums { display: flex; justify-content: space-between; gap: 1em; margin: .45em 0 0; font-variant-numeric: tabular-nums; }
.loader-items { margin: .3em 0 0; font-variant-numeric: tabular-nums; }
.loader-retry {
  margin-top: .8em; min-height: calc(var(--touch) * .8); padding: 0 1em;
  font-family: var(--mono); font-size: var(--s-1); text-transform: lowercase;
  border: 1px solid var(--accent); color: var(--accent);
}
.loader-retry:hover { background: var(--accent); color: var(--paper); }

/* entrar antes do tempo: o aviso abana, sem reprovar */
.loader.is-nudged .loader-sheet { animation: loader-nudge .5s var(--ease); }
@keyframes loader-nudge { 20%, 60% { transform: translateX(-.45em); } 40%, 80% { transform: translateX(.45em); } }

/* ───────── fita: ficheiros a carregar em segundo plano, no fundo da página ─────────
   Uma tira de papel encostada ao fundo, com o picotado em cima e os pontos de costura vermelhos
   a avançar à medida que os ficheiros chegam. Os controlos do fundo sobem enquanto ela está lá. */
.fita {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 72;
  display: flex; align-items: center; gap: .35em 1.1em; flex-wrap: wrap;
  padding: .7em clamp(12px, 2vw, 48px) .65em;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 -.3em 0 var(--edge-cream), 0 -1px 0 var(--rule), var(--shadow);
  font-family: var(--mono); font-size: var(--s-2); line-height: 1.35;
  transform: translateY(110%);
  transition: transform .5s var(--ease), right .5s var(--ease);
}
.fita[hidden] { display: none; }
.fita.is-in { transform: none; }
body.panel-open .fita { right: var(--panel-w); }
/* grão do papel */
.fita::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .36  0 0 0 0 .3  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* picotado cinzento por coser + pontos vermelhos já cosidos (a percentagem) */
.fita-barra {
  position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--rule) 0 .34em, transparent .34em .66em) center / 100% 2px no-repeat;
}
.fita-barra i {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: repeating-linear-gradient(90deg, var(--accent) 0 .46em, transparent .46em .66em) center / 100% 3px no-repeat;
  transition: width .4s linear;
}
/* agulha: três pontos que se cosem sem parar enquanto há ficheiros a caminho */
.fita-agulha {
  flex: none; width: 2.2em; height: .7em;
  background: repeating-linear-gradient(90deg, var(--accent) 0 .44em, transparent .44em .74em) 0 50% / 200% 2px no-repeat;
  animation: fita-cose 1s linear infinite;
}
@keyframes fita-cose { to { background-position: -.74em 50%; } }
.fita.is-pronta .fita-agulha { animation: none; background-size: 100% 2px; }
.fita-texto { flex: 1 1 26em; min-width: 0; margin: 0; }
.fita-msg { font-weight: 600; text-transform: lowercase; }
.fita-calma { color: var(--muted); }
.fita-dados { margin: 0 2em 0 0; display: flex; gap: .2em .9em; flex-wrap: wrap; justify-content: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fita-nums { color: var(--ink); }
.fita-tipos { color: var(--muted); }
.fita-x {
  position: absolute; top: 50%; right: clamp(4px, 1vw, 24px); z-index: 1;
  transform: translateY(-50%);
  min-width: 2.4em; min-height: 2.4em;
  font-family: var(--mono); font-size: var(--s0); color: var(--muted);
}
.fita-x:hover, .fita-x:focus-visible { color: var(--accent); }
.fita.is-pronta .fita-msg { color: var(--accent); }
/* os controlos do fundo sobem enquanto a fita está à vista */
.legend, .filter-chip, .attract-hint { transition: bottom .5s var(--ease); }
body.has-fita .legend,
body.has-fita .filter-chip { bottom: calc(var(--gap) * 1.4 + var(--fita-h, 3em)); }
body.has-fita .attract-hint { bottom: calc(6vh + var(--fita-h, 3em)); }

/* botão «entrar» enquanto carrega: a barra cose-se por baixo do texto */
body.is-loading .splash-enter {
  cursor: progress;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: left bottom;
  background-size: calc(var(--load, 0) * 100%) 3px;
}

@media (max-width: 720px) {
  .loader { bottom: 12px; width: calc(100vw - 24px); }
  .loader-quote blockquote p { font-size: var(--s1); }
  .fita { font-size: 12px; padding-right: 3em; }
  .fita-calma, .fita-tipos { display: none; }
  .fita-dados { margin-right: 0; }
  body.panel-open .fita { right: 0; }
  body.has-fita .filter-chip { bottom: calc(64px + var(--fita-h, 3em)); }
}
@media (prefers-reduced-motion: reduce) {
  .loader, .loader.is-in { transform: translate(-50%, 0); }
  .loader.is-nudged .loader-sheet, .loader.is-building .loader-bar i { animation: none; }
  .fita { transition: none; }
  .fita-agulha { animation: none; background-size: 100% 2px; }
}