/* ============================================================
   ENTRADA DE CONCERTO — micro-interacções e superfícies
   ------------------------------------------------------------
   A entrada ao scroll é coreografada em motion.js. Aqui vive o que
   responde ao utilizador: o rato, o toque, o teclado e as superfícies
   que o browser desenharia por sua conta.
   ============================================================ */

:root {
  --mo-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --mo-rapido: 180ms;
  --mo-medio: 320ms;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --brilho-x: 50%;
  --brilho-y: 0%;
}

/* ------------------------------------------------------------
   0. Entrada em curso
   Enquanto motion.js coreografa a chegada de um elemento, as
   transições de hover têm de estar caladas: as duas disputariam a
   mesma propriedade em sentidos opostos.
   ------------------------------------------------------------ */

.mo-entrando,
.mo-entrando::after {
  transition: none !important;
}

/* ------------------------------------------------------------
   1. Superfícies do browser
   O que não desenhámos continua a ser a nossa página.
   ------------------------------------------------------------ */

::selection {
  background: rgba(139, 92, 246, 0.42);
  color: #fff;
  text-shadow: none;
}

html {
  scroll-behavior: smooth;
  accent-color: #8b5cf6;
  caret-color: #f5b301;
  color-scheme: dark;
  scrollbar-color: rgba(139, 92, 246, 0.55) rgba(255, 255, 255, 0.05);
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.7), rgba(91, 33, 182, 0.85));
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(196, 181, 253, 0.9), rgba(139, 92, 246, 0.95));
  background-clip: padding-box;
}

/* Marcadores de lista e números tabulares na cor da marca. */
li::marker {
  color: rgba(245, 179, 1, 0.85);
}

.countdown-number,
.stat-value,
.candidate-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ------------------------------------------------------------
   2. Foco visível — o teclado merece o mesmo cuidado que o rato
   ------------------------------------------------------------ */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #f5b301;
  outline-offset: 3px;
  border-radius: 6px;
  transition: outline-offset var(--mo-rapido) var(--mo-expo);
}

:where(a, button):focus-visible {
  outline-offset: 4px;
}

/* ------------------------------------------------------------
   3. Botões — resposta física ao toque
   ------------------------------------------------------------ */

.btn,
button.btn,
a.btn {
  transition:
    transform var(--mo-rapido) var(--mo-expo),
    box-shadow var(--mo-medio) var(--mo-expo),
    filter var(--mo-rapido) linear;
  will-change: transform;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn-primary:hover:not(:disabled) {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(245, 179, 1, 0.24);
}

/* O clique tem de se sentir: o botão cede sob o dedo e volta. */
.btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
  transition-duration: 80ms;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  transform: none;
  filter: saturate(0.4);
  cursor: not-allowed;
}

/* ------------------------------------------------------------
   4. Cartões — elevação com brilho seguindo o cursor
   As variáveis --tilt-* e --brilho-* são escritas por motion.js,
   e só em dispositivos com rato.
   ------------------------------------------------------------ */

.feature-item,
.program-card,
.testimonial-card,
.province-card,
.stat-card {
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform var(--mo-medio) var(--mo-expo),
    box-shadow var(--mo-medio) var(--mo-expo),
    border-color var(--mo-medio) linear;
}

@media (hover: hover) and (pointer: fine) {
  .feature-item:hover,
  .program-card:hover,
  .testimonial-card:hover,
  .province-card:hover,
  .stat-card:hover {
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-6px);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.55),
      0 0 30px rgba(245, 179, 1, 0.16);
    border-color: rgba(245, 179, 1, 0.34);
  }

  /* Reflexo que acompanha o cursor pela superfície do cartão. */
  .feature-item::after,
  .program-card::after,
  .testimonial-card::after,
  .province-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--mo-medio) var(--mo-expo);
    background: radial-gradient(
      340px circle at var(--brilho-x) var(--brilho-y),
      rgba(245, 179, 1, 0.13),
      transparent 62%
    );
  }

  .feature-item:hover::after,
  .program-card:hover::after,
  .testimonial-card:hover::after,
  .province-card:hover::after {
    opacity: 1;
  }
}

/* O ícone acompanha a subida do cartão, com um passo de atraso. */
.feature-icon {
  transition: transform var(--mo-medio) var(--mo-expo);
}

.feature-item:hover .feature-icon {
  transform: translateY(-3px) scale(1.06);
}

/* ------------------------------------------------------------
   5. Ligações — sublinhado que cresce a partir da origem
   ------------------------------------------------------------ */

.nav-links a,
.footer-inner a {
  position: relative;
  text-underline-offset: 0.28em;
}

.nav-links a::after,
.footer-inner a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #f5b301, #a78bfa);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mo-medio) var(--mo-expo);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.footer-inner a:hover::after {
  transform: scaleX(1);
}

.nav-links a.is-active::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, #a78bfa, #5b21b6);
}

/* ------------------------------------------------------------
   6. Campos de formulário — o foco leva a atenção ao sítio certo
   ------------------------------------------------------------ */

input:not([type='checkbox']):not([type='radio']),
select,
textarea {
  transition:
    border-color var(--mo-medio) linear,
    box-shadow var(--mo-medio) var(--mo-expo),
    background-color var(--mo-medio) linear;
}

input:not([type='checkbox']):not([type='radio']):focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}

/* Campo preenchido e válido: confirmação discreta, sem ícone a saltar. */
input:not(:placeholder-shown):valid:not(:focus) {
  border-color: rgba(245, 179, 1, 0.34);
}

/* ------------------------------------------------------------
   7. Imagens — chegam de foco quando carregam
   ------------------------------------------------------------ */

.cta-gallery img,
.province-card img,
.hero-visual img {
  transition: transform 600ms var(--mo-expo), filter 600ms var(--mo-expo);
}

@media (hover: hover) and (pointer: fine) {
  .province-card:hover img,
  .cta-gallery a:hover img {
    transform: scale(1.045);
  }
}

/* ------------------------------------------------------------
   8. Preferência de movimento reduzido
   Uma regra, aplicada a tudo o que este ficheiro introduz.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .feature-item,
  .program-card,
  .testimonial-card,
  .province-card,
  .stat-card,
  .feature-icon,
  .nav-links a::after,
  .footer-inner a::after,
  .cta-gallery img,
  .province-card img,
  .hero-visual img,
  input,
  select,
  textarea {
    transition: none !important;
  }

  .btn:hover:not(:disabled),
  .btn:active:not(:disabled),
  .feature-item:hover,
  .program-card:hover,
  .testimonial-card:hover,
  .province-card:hover,
  .stat-card:hover {
    transform: none !important;
  }

  .feature-item::after,
  .program-card::after,
  .testimonial-card::after,
  .province-card::after {
    display: none;
  }
}