/* ═══════════════════════════════════════════════════════════
   Talentis — Design Enhancements
   Scroll reveal, hover states, hero polish
   ═══════════════════════════════════════════════════════════ */

/* ── Scroll reveal ── */
.tj-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.tj-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger para grids */
.tj-reveal:nth-child(2) { transition-delay: .08s; }
.tj-reveal:nth-child(3) { transition-delay: .16s; }
.tj-reveal:nth-child(4) { transition-delay: .24s; }

/* Respeitar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .tj-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Hover states ricos nos cards ── */
.rs-acard,
.tj-pillar,
.tj-sector-card,
.tj-card,
.rs-scard {
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1) !important;
}
.rs-acard:hover,
.tj-pillar:hover,
.tj-sector-card:hover,
.tj-card:hover,
.rs-scard:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(15, 25, 65, .12) !important;
}

/* Links de cards: subtle arrow movement */
.tj-card a,
.rs-acard a { transition: color .15s; }

/* ── Botões: micro-feedback ── */
.tj-btn {
  transition: transform .15s, box-shadow .2s, background .15s !important;
}
.tj-btn:hover {
  transform: translateY(-1px);
}
.tj-btn:active {
  transform: translateY(0);
}
.tj-btn--solid:hover {
  box-shadow: 0 8px 20px rgba(33, 117, 217, .35);
}

/* ── Hero: gradiente animado subtil sobre a imagem ── */
.rs-hero-new__ov {
  background: linear-gradient(120deg,
    rgba(15, 25, 65, .92) 0%,
    rgba(15, 25, 65, .78) 45%,
    rgba(21, 96, 187, .55) 100%) !important;
  background-size: 200% 200% !important;
  animation: tj-hero-shift 14s ease-in-out infinite;
}
@keyframes tj-hero-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-hero-new__ov { animation: none; }
}

/* ── Contadores stats (estado inicial) ── */
.tj-counter { font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────────
   Movimento reduzido — alargado no Lote 10.

   O ficheiro já respeitava prefers-reduced-motion na animação do hero,
   mas não nas transições de hover e nos deslocamentos de cartão. Para
   quem tem sensibilidade vestibular, um cartão que salta 5px a cada
   passagem do rato é tão incomodativo como um gradiente animado.

   Regra geral: quem pediu menos movimento não recebe movimento nenhum.
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .tj-pillar:hover,
  .tj-sector-card:hover,
  .tj-card:hover,
  .rs-scard:hover,
  .tj-btn:hover,
  .tj-btn:active {
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Foco visível — acrescentado no Lote 10.

   O projecto tinha 15 regras :focus em 10 ficheiros de CSS, nenhuma
   delas global. Quem navega por teclado ficava sem saber onde está em
   boa parte das páginas.

   :focus-visible e não :focus, para o anel não aparecer a quem clica
   com o rato — que é a razão pela qual muita gente remove o outline e
   fica sem nada.
   ───────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #175aa8;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Sobre fundo navy o azul não se distingue — usa-se branco. */
.tj-section--navy a:focus-visible,
.tj-section--navy button:focus-visible,
.tj-hdr a:focus-visible,
footer a:focus-visible {
  outline-color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────
   .sr-only — visível só para tecnologias de apoio.

   Serve para títulos de secção que a estrutura precisa mas o desenho
   não quer mostrar. Não se usa display:none nem visibility:hidden:
   essas tiram o elemento também do leitor de ecrã, que é o oposto do
   que se pretende.
   ───────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Excepção: o skip link tem de ficar visível ao receber foco. */
.sr-only:focus,
.sr-only:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}