/* =============================================================
   SPAR — Homepage: abertura, hero e atalhos

   PARTE 1 — Abertura
   Logotipo a formar-se letra a letra sobre um mapa das lojas.
   Depende de tokens.css.

   As fatias do logotipo sao janelas sobre o proprio ficheiro
   logo.png, por isso a marca aparece exactamente como e. As
   fraccoes abaixo foram medidas no ficheiro (1175 x 202 px).
   ============================================================= */

.intro {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--spar-surface);
}

/* Enquanto a abertura corre, a pagina por baixo nao deve rolar. */
body.intro-activa {
  overflow: hidden;
}

/* ---------- Mapa de fundo ---------- */
.intro-mapa {
  position: absolute;
  inset: -6%;                 /* folga para o leve zoom-out nao mostrar bordas */
  z-index: 0;
}

/* O mapa e decorativo: baixa-se o contraste para o logotipo dominar. */
.intro-mapa .leaflet-tile-pane {
  filter: grayscale(1) contrast(0.85) brightness(1.06);
}

.intro-mapa .leaflet-container {
  background: var(--spar-surface-sunken);
}

/* Veu suave por cima do mapa: calma o fundo sem o apagar. */
.intro-veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, .45);
}

/* ---------- Marcadores das lojas ---------- */
.intro-ponto {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--spar-green);
  box-shadow: 0 0 0 3px rgba(0, 121, 84, .22), 0 1px 2px rgba(0, 0, 0, .25);
  opacity: 0;
  animation: intro-ponto-entra 520ms cubic-bezier(.2, .8, .3, 1.4) forwards;
}

@keyframes intro-ponto-entra {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Palco ---------- */
.intro-palco {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4);
  text-align: center;
}

/* ---------- Logotipo ----------
   O logo.png tem fundo branco opaco, por isso assenta sobre um cartao
   branco — que e como a marca vive no cabecalho e no rodape. Assim nao
   ha caixas brancas soltas a flutuar sobre o mapa. */
.intro-cartao {
  padding: clamp(var(--sp-4), 4vw, var(--sp-7));
  background-color: var(--spar-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .16);
  opacity: 0;
  animation: intro-cartao-entra 460ms cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes intro-cartao-entra {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

.intro-logo {
  --logo-w: clamp(220px, 40vw, 520px);
  position: relative;
  width: var(--logo-w);
  height: calc(var(--logo-w) * 202 / 1175);
}

/* Bloco vermelho: abre da esquerda para a direita.
   E ele, sozinho, que desenha os quatro lados do rectangulo — as fatias
   das letras ficam todas por dentro (ver abaixo). Medido no logo.png: o
   vermelho vai de x=12,5 a 898,5 e de y=12,5 a 190, e a cor e #e4002b,
   um grau ao lado do --spar-red. Com a cor do token viam-se faixas mais
   claras onde as fatias assentavam. */
.intro-bloco {
  position: absolute;
  left: calc(var(--logo-w) * 0.01064);
  top: calc(var(--logo-w) * 202 / 1175 * 0.06188);
  width: calc(var(--logo-w) * 0.75404);
  height: calc(var(--logo-w) * 202 / 1175 * 0.87871);
  background-color: #e4002b;
  transform-origin: left center;
  transform: scaleX(0);
  animation: intro-bloco-abre 520ms cubic-bezier(.2, .7, .3, 1) 120ms forwards;
}

@keyframes intro-bloco-abre {
  to { transform: scaleX(1); }
}

/* Cada letra e uma janela sobre o logotipo real. Como o vermelho da
   fatia e o mesmo do bloco, so a letra branca se ve a aparecer. */
.intro-letra,
.intro-arvore {
  --fatia-y: 0px;
  position: absolute;
  top: var(--fatia-y);
  height: 100%;
  background-image: var(--logo-src);
  background-repeat: no-repeat;
  background-size: var(--logo-w) auto;
  opacity: 0;
}

/* As fatias das letras nao chegam ao cimo nem ao fundo do rectangulo:
   ficam entre os 15% e os 85% da altura (as letras vao dos 23% aos 77%).
   Quando iam de alto a baixo, cada uma trazia a sua propria borda do
   vermelho, arredondada ao pixel por conta propria, e o limite do
   rectangulo ficava aos degraus — ora a fatia, ora o bloco. */
.intro-letra {
  --fatia-y: calc(var(--logo-w) * 202 / 1175 * 0.15);
  height: calc(var(--logo-w) * 202 / 1175 * 0.70);
}

.intro-letra {
  animation: intro-letra-entra 380ms cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes intro-letra-entra {
  from { opacity: 0; transform: translateY(14%) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.intro-letra--s {
  left:  calc(var(--logo-w) * 0.1898);
  width: calc(var(--logo-w) * 0.1149);
  background-position: calc(var(--logo-w) * -0.1898) calc(-1 * var(--fatia-y));
  animation-delay: 560ms;
}

.intro-letra--p {
  left:  calc(var(--logo-w) * 0.3421);
  width: calc(var(--logo-w) * 0.1157);
  background-position: calc(var(--logo-w) * -0.3421) calc(-1 * var(--fatia-y));
  animation-delay: 700ms;
}

.intro-letra--a {
  left:  calc(var(--logo-w) * 0.4706);
  width: calc(var(--logo-w) * 0.1319);
  background-position: calc(var(--logo-w) * -0.4706) calc(-1 * var(--fatia-y));
  animation-delay: 840ms;
}

.intro-letra--r {
  left:  calc(var(--logo-w) * 0.6315);
  width: calc(var(--logo-w) * 0.1157);
  background-position: calc(var(--logo-w) * -0.6315) calc(-1 * var(--fatia-y));
  animation-delay: 980ms;
}

/* A arvore fecha a assinatura. */
.intro-arvore {
  left:  calc(var(--logo-w) * 0.7830);
  width: calc(var(--logo-w) * 0.2000);
  background-position: calc(var(--logo-w) * -0.7830) 0;
  transform-origin: center;
  animation: intro-arvore-entra 460ms cubic-bezier(.2, .8, .3, 1.2) 1140ms forwards;
}

@keyframes intro-arvore-entra {
  from { opacity: 0; transform: scale(.55) rotate(-8deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Assinatura ---------- */
.intro-frase {
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--spar-green-text);
  background-color: rgba(255, 255, 255, .88);
  border-radius: var(--radius-pill);
  opacity: 0;
  animation: intro-frase-entra 520ms ease 1500ms forwards;
}

@keyframes intro-frase-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Controlos (som + saltar) ---------- */
.intro-controlos {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 3;
  display: flex;
  gap: var(--sp-2);
}

.intro-saltar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: var(--sp-1) var(--sp-4);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--spar-ink);
  background-color: rgba(255, 255, 255, .85);
  border: 1px solid var(--spar-line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.intro-saltar:hover {
  background-color: var(--spar-surface);
  border-color: var(--spar-ink-muted);
}

/* ---------- Saida ---------- */
.intro.intro-a-sair {
  animation: intro-sai 620ms cubic-bezier(.4, 0, .2, 1) forwards;
  pointer-events: none;
}

@keyframes intro-sai {
  to { opacity: 0; transform: scale(1.06); visibility: hidden; }
}

/* ---------- Preferencia por menos movimento ----------
   Mostra-se o estado final de imediato, sem sequencia. */
@media (prefers-reduced-motion: reduce) {
  .intro-cartao,
  .intro-bloco,
  .intro-letra,
  .intro-arvore,
  .intro-frase,
  .intro-ponto {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .intro-bloco { transform: scaleX(1) !important; }

  .intro.intro-a-sair {
    animation: none !important;
    opacity: 0;
    visibility: hidden;
  }
}


/* =============================================================
   PARTE 2 — Hero de boas-vindas + folhetos em destaque
   ============================================================= */

.hero {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--sp-4);
  width: var(--moldura);
  margin: var(--sp-5) auto var(--sp-4);
  align-items: stretch;
}

/* ---------- Bloco de boas-vindas ---------- */
.hero-principal {
  position: relative;
  /* `isolation` cria o contexto de composicao: sem ela o multiply das
     camadas de fundo iria misturar-se com a pagina, e nao com o verde. */
  isolation: isolate;
  overflow: hidden;              /* recorta as imagens pelos cantos redondos */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  padding: clamp(var(--sp-5), 5vw, var(--sp-9));
  border-radius: var(--radius-lg);
  background-color: var(--spar-green);
  color: var(--spar-ink-inverse);
}

/* ---------- Fundo rotativo do painel verde ----------
   Quatro imagens que se sucedem em fusao cruzada.

   A legibilidade nao e obtida por tentativa e erro: `multiply` sobre o
   verde da marca so pode escurecer, nunca clarear. O branco da imagem
   devolve exactamente o verde de origem, portanto o contraste do texto
   branco nunca desce abaixo dos 5.4:1 que o painel ja tinha — mesmo com
   uma fotografia clara. E tambem por isso nao ha veu por cima: seria um
   remendo para um problema que a composicao ja nao tem. */
/* Sem `z-index`: um valor aqui criaria um contexto de empilhamento e as
   camadas passariam a misturar-se com o interior deste contentor (vazio)
   em vez do verde do painel — o multiply deixava de ter efeito. */
.hero-fundos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-fundo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  filter: saturate(.7);
  opacity: 0;
  animation: hero-alternar 28s linear infinite;
}

/* Cada imagem entra 7s depois da anterior. */
.hero-fundo:nth-child(1) { animation-delay:  0s; }
.hero-fundo:nth-child(2) { animation-delay:  7s; }
.hero-fundo:nth-child(3) { animation-delay: 14s; }
.hero-fundo:nth-child(4) { animation-delay: 21s; }

@keyframes hero-alternar {
  0%   { opacity: 0; }
  3%   { opacity: .78; }
  25%  { opacity: .78; }
  28%  { opacity: 0; }
  100% { opacity: 0; }
}

/* O texto tem de ficar acima das camadas de fundo. */
.hero-principal > :not(.hero-fundos) {
  position: relative;
  z-index: 1;
}

/* Sem movimento: fica so a primeira imagem, parada. */
@media (prefers-reduced-motion: reduce) {
  .hero-fundo {
    animation: none;
    opacity: 0;
  }

  .hero-fundo:nth-child(1) {
    opacity: .78;
  }
}

/* "SPAR Portugal" com o mesmo tipo de letra de "O seu vizinho
   preferido" (.hero-frase): mesmo tamanho, peso e cor, sem maiusculas. */
.hero-sobretitulo {
  margin: 0;
  font-size: var(--fs-h3);
  color: rgba(255, 255, 255, .92);
}

.hero-titulo {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-wrap: balance;
  color: var(--spar-ink-inverse);
}

.hero-frase {
  margin: 0;
  font-size: var(--fs-h3);
  color: rgba(255, 255, 255, .92);
}

.hero-botao {
  align-self: flex-start;
  margin-top: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-5);
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--spar-green);
  background-color: var(--spar-surface);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform var(--t-base), box-shadow var(--t-base),
              background-color var(--t-base), color var(--t-base);
}

/* Ao passar o rato as cores invertem: botao verde, letras brancas.
   O contorno branco mantem a forma do botao sobre o fundo verde. */
.hero-botao:hover {
  color: var(--spar-ink-inverse);
  background-color: var(--spar-green);
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--spar-ink-inverse), var(--shadow-lg);
}

/* ---------- Coluna dos folhetos ---------- */
.hero-folhetos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--spar-line);
  border-radius: var(--radius-lg);
  background-color: var(--spar-surface);
}

.hero-folhetos-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.hero-folhetos-topo h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--spar-red);
}

.hero-folhetos-topo a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--spar-green-text);
}

/* Duas capas de cada vez, sempre do mesmo tamanho. Havendo mais, o
   script da pagina vai rodando a janela (1-2, 2-3, 3-1...) em vez de
   as encolher para caberem todas. */
.hero-folhetos-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.hero-folhetos-lista .hero-folheto[hidden] {
  display: none;
}

/* Setas para andar entre folhetos. So aparecem quando ha mais do que
   dois (o script tira-lhes o atributo hidden). As margens negativas
   anulam o gap do painel e encostam as setas as capas e ao fundo do
   cartao — senao ficava um vazio grande de cada lado. */
.hero-folhetos-setas {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: calc(-1 * var(--sp-2));
  margin-bottom: calc(-1 * var(--sp-2));
}

.hero-folhetos-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--spar-green);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.hero-folhetos-seta svg {
  width: 18px;
  height: 18px;
}

.hero-folhetos-seta:hover {
  color: var(--spar-green-text);
  background-color: var(--spar-success-bg);
}

.hero-folhetos-seta:active {
  transform: scale(.9);
}

@media (max-width: 560px) {
  .hero-folhetos-lista {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero-folheto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--spar-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--spar-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.hero-folheto:hover {
  border-color: var(--spar-green-text);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Capa do folheto: a primeira pagina.
   A proporcao acompanha a da folha (A4, 1:1.414), para a capa
   encaixar no cartao sem cortes nem faixas vazias. */
.hero-folheto-capa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1.414;
  border-radius: var(--radius-sm);
  background-color: var(--spar-surface-alt);
  overflow: hidden;
}

.hero-folheto-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero-folheto-vazio {
  display: none;
  padding: var(--sp-2);
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--spar-ink-muted);
}

.hero-folheto-capa:not(:has(img)) .hero-folheto-vazio,
.hero-folheto-capa.sem-imagem .hero-folheto-vazio {
  display: block;
}

/* Nome do folheto (Acores, Portugal Continental): maior e em verde SPAR. */
.hero-folheto-nome {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--spar-green);
}

.hero-folheto-accao {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--spar-green-text);
}

.hero-folhetos-vazio {
  margin: 0;
  padding: var(--sp-5) var(--sp-2);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--spar-ink-muted);
}

/* =============================================================
   PARTE 3 — Os tres atalhos principais
   ============================================================= */

.atalhos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  width: var(--moldura);
  margin: 0 auto var(--sp-7);
}

.atalho {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  padding: var(--sp-4);
  border: 1px solid var(--spar-line);
  border-radius: var(--radius-lg);
  background-color: var(--spar-surface);
  text-decoration: none;
  color: var(--spar-ink);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}

.atalho:hover {
  border-color: var(--spar-green-text);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Imagem revelada ao passar o rato: esbatida, para o texto continuar
   a ler-se sem esforco. Fica por tras do conteudo (z-index 0 vs 1). */
.atalho-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: saturate(.45) contrast(.92);
  transform: scale(1.04);
  transition: opacity var(--t-base), transform 600ms ease;
  pointer-events: none;
}

.atalho:hover .atalho-fundo,
.atalho:focus-visible .atalho-fundo {
  opacity: .28;
  transform: scale(1);
}

.atalho-conteudo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* O atalho das lojas mostra um mini-mapa em vez de uma fotografia. */
.atalho-mapa {
  display: block;
  width: 100%;
  height: 100%;
}

.atalho--lojas .atalho-fundo {
  filter: saturate(.5);
}

.atalho-mapa .leaflet-tile-pane {
  filter: grayscale(1) contrast(.9);
}

.atalho-mapa .leaflet-container {
  background: var(--spar-surface-alt);
}

.atalho-ponto {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--spar-green);
}

.atalho-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--spar-success-bg);
}

.atalho-icone img {
  width: 24px;
  height: 24px;
}

.atalho-titulo {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--spar-green-text);
}

.atalho-texto {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--spar-ink-muted);
}

/* =============================================================
   Responsivo
   ============================================================= */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .atalhos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero,
  .atalhos {
    width: var(--moldura);
  }

  .hero-botao {
    align-self: stretch;
    justify-content: center;
  }
}