/* ============================================================
   Telleria Solutions — links/links.css
   A página das ligações da bio do Instagram, no estilo do site novo:
   preto, letra de pontos, pôr do sol e as dunas do primeiro ecrã por trás.
   Feita a pensar no telemóvel (é aí que o Instagram a abre).
   ============================================================ */
@font-face {
  font-family: "Geist Pixel Circle";
  src: url("/fonts/GeistPixel-Circle.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sun-2: #b9b0d7;
  --sun-4: #f4c2b2;
  --sun-5: #e38c7d;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: "Geist Pixel Circle", ui-monospace, monospace;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --cta-glow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 22px rgba(255, 255, 255, 0.32),
    0 0 44px rgba(255, 255, 255, 0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  min-height: 100svh;
  background: #000;
  color: #fff;
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sun-4); outline-offset: 3px; border-radius: 6px; }

/* Fundo: o canvas do hero-bg.js, fixo. Sem canvas, o mesmo pôr do sol em gradiente.
   Por cima, uma camada escura para o texto branco se ler bem sobre o céu claro. */
.hero-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #938cbf 0%, #e7d5e2 22%, #f4c2b2 29%, #43203b 37%, #12070f 62%, #000 82%);
}
.hero-bg canvas { display: block; width: 100%; height: 100%; }
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.35) 32%, rgb(0 0 0 / 0.45) 60%, rgb(0 0 0 / 0.8) 100%);
}

/* PT / EN, no canto */
.lang-toggle {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 5;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgb(40 40 42 / 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lang-toggle button {
  min-width: 38px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #c8c8c8;
  font: 600 0.75rem var(--font-body);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.lang-toggle button.active { background: #fff; color: #000; }

/* ---------- conteúdo ---------- */
.links {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(460px, 100% - 2rem);
  margin-inline: auto;
  padding: max(3.6rem, calc(env(safe-area-inset-top) + 3rem)) 0 calc(2.2rem + env(safe-area-inset-bottom));
  text-align: center;
}
.logo { width: 176px; height: auto; margin-bottom: 1.6rem; }
h1 {
  font: 400 clamp(1.65rem, 7.4vw, 2.2rem)/1.14 var(--font-display);
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
  text-wrap: balance;
}
/* só as duas linhas do título (as letras do efeito de escrita também são spans) */
h1 > span { display: block; }
.sub {
  max-width: 34ch;
  margin-bottom: 1.9rem;
  color: rgb(255 255 255 / 0.82);
  font-size: 0.97rem;
  line-height: 1.55;
  text-wrap: balance;
}

.lista { list-style: none; display: grid; gap: 0.75rem; width: 100%; }
.ligacao {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 64px;
  padding: 0.8rem 1rem 0.8rem 0.8rem;
  border: 1px solid rgb(244 194 178 / 0.22);
  border-radius: 18px;
  background: rgb(16 14 20 / 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: #fff;
  text-align: left;
  text-decoration: none;
  transition: transform 0.25s var(--ease), border-color 0.25s, background-color 0.25s;
}
.ligacao:hover { transform: translateY(-2px); border-color: rgb(244 194 178 / 0.55); background-color: rgb(24 20 30 / 0.74); }
.ligacao:active { transform: scale(0.98); }
.icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgb(244 194 178 / 0.1);
  color: var(--sun-4);
}
.icone svg { width: 21px; height: 21px; }
.texto { display: grid; gap: 0.08rem; min-width: 0; }
.texto b { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.texto small { color: rgb(255 255 255 / 0.62); font-size: 0.82rem; line-height: 1.35; }
.seta {
  margin-left: auto;
  padding-left: 0.4rem;
  color: rgb(255 255 255 / 0.5);
  font: 400 1.15rem/1 var(--font-display);
  transition: translate 0.25s var(--ease), color 0.25s;
}
.ligacao:hover .seta { translate: 3px 0; color: var(--sun-4); }

/* a principal: o WhatsApp, em pílula branca com brilho, como o botão do site */
.ligacao.principal {
  border-color: transparent;
  background: #fff;
  color: #000;
  box-shadow: var(--cta-glow);
}
.ligacao.principal:hover { background: #fff; border-color: transparent; }
.ligacao.principal .icone { background: #1faa55; color: #fff; }
.ligacao.principal small { color: rgb(0 0 0 / 0.6); }
.ligacao.principal .seta { color: rgb(0 0 0 / 0.45); }
.ligacao.principal:hover .seta { color: #000; }

.rodape { margin-top: 2.2rem; color: rgb(255 255 255 / 0.5); font-size: 0.8rem; }

/* o título escreve-se letra a letra (links.js): as letras estão no sítio desde o
   início, só escondidas; o cursor é um bloco de pontos, como a letra */
.teclar .tecla { visibility: hidden; }
.teclar .tecla.vista { visibility: visible; }
h1.teclar { animation: none; }
.cursor-tecla {
  position: absolute;
  z-index: 5;
  width: 0.5em;
  height: 0.84em;
  background: radial-gradient(circle, var(--sun-4) 0 40%, transparent 46%) 0 0 / 0.105em 0.105em;
  filter: drop-shadow(0 0 0.12em rgb(241 150 116 / 0.75));
  pointer-events: none;
  animation: piscar-cursor 1.05s steps(1) infinite;
}
.cursor-tecla.a-escrever { animation: none; }
.cursor-tecla.sair { opacity: 0; transition: opacity 0.4s; }
@keyframes piscar-cursor { 50% { opacity: 0; } }

/* entrada: cada bloco sobe e aparece, um a seguir ao outro */
.anim { animation: entrar 0.8s var(--ease) var(--d, 0s) backwards; }
@keyframes entrar {
  from { opacity: 0; translate: 0 18px; filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .anim { animation: none; }
  .ligacao, .seta { transition: none; }
}