/* ============================================================
   ACRICA · Camada de interação — movimento, estado e resposta
   Depende de tokens.css + components.css. Carrega DEPOIS deles.

   Três regras que valem para tudo aqui:
   1. Nada essencial depende de JS ou de animação. Sem JS, a página
      aparece inteira — o efeito só entra quando `js-motion` existe.
   2. `prefers-reduced-motion` desliga movimento, não conteúdo.
   3. Nenhuma regra daqui mexe em cor de texto sobre fundo. Contraste
      é responsabilidade dos tokens; efeito não pode reprovar a AA.
   ============================================================ */

/* ============================================================
   1. SURGIMENTO NO SCROLL
   O JS marca os alvos e o observer liga o `is-in`.
   Sem JS o seletor `.js-motion` nunca existe e nada fica escondido.
   ============================================================ */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
/* 16px e o teto seguro: o padding minimo do .container e 20px (clamp 1.25rem).
   Com 24px o elemento ainda nao revelado empurrava a pagina e criava rolagem
   horizontal no celular — medido em 390px no Doar e na home. */
.js-motion [data-reveal="left"]  { transform: translateX(-16px); }
.js-motion [data-reveal="right"] { transform: translateX(16px); }
.js-motion [data-reveal="zoom"]  { transform: scale(0.96); }
.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   2. BARRA DE PROGRESSO DE LEITURA
   Decorativa: aria-hidden no DOM, invisível para leitor de tela.
   ============================================================ */
.read-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  transform: scaleX(var(--read-progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--sun));
  pointer-events: none;
  will-change: transform;
}

/* ============================================================
   3. CABEÇALHO QUE REAGE AO SCROLL
   ============================================================ */
.site-header {
  transition:
    height var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.site-header.is-stuck {
  box-shadow: var(--shadow-md);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}
.site-header.is-stuck .site-header__inner { height: 62px; }
.site-header.is-stuck .site-logo img { width: 38px; height: 38px; }
.site-header .site-logo img { transition: width var(--dur) var(--ease), height var(--dur) var(--ease); }

/* Âncora não pode parar embaixo do cabeçalho grudado */
:target,
[id] { scroll-margin-top: 96px; }

/* ============================================================
   4. NAVEGAÇÃO — sublinhado que cresce + seção corrente
   ============================================================ */
.site-nav a { position: relative; }
.site-nav a::after {
  content: ""; position: absolute; left: 0.9em; right: 0.9em; bottom: 0.28em;
  height: 2px; border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }
/* Dois estados diferentes, duas leituras diferentes:
   `page` (pilula, vem do HTML) = a aba em que voce esta;
   `location` (cor + sublinhado, vem do scrollspy) = a secao que esta na tela.
   Antes os dois usavam a mesma pilula e a home aparecia com dois itens acesos. */
.site-nav a[aria-current="location"] { color: var(--brand); }
.site-nav a[aria-current="location"]::after { transform: scaleX(1); }

/* ============================================================
   5. BOTÕES — brilho na passagem e pressão no clique
   ============================================================ */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 35%,
              rgba(255,255,255,0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateX(120%); }
.btn--secondary::before,
.btn--ghost::before { background: linear-gradient(115deg, transparent 35%,
              color-mix(in srgb, var(--brand) 18%, transparent) 50%, transparent 65%); }
.btn:active { transform: translateY(1px) scale(0.985); }

/* O botão de doar pulsa devagar até o leitor interagir com ele */
.btn--donate.btn--lg { animation: acr-heartbeat 3.6s var(--ease) infinite; }
.btn--donate.btn--lg:hover,
.btn--donate.btn--lg:focus-visible { animation-play-state: paused; }
@keyframes acr-heartbeat {
  0%, 88%, 100% { box-shadow: var(--shadow-accent); }
  92%  { box-shadow: var(--shadow-accent), 0 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent); }
  96%  { box-shadow: var(--shadow-accent), 0 0 0 18px transparent; }
}

/* ============================================================
   6. CARTÕES — a foto respira, a borda acende
   ============================================================ */
.card__media img { transition: transform var(--dur-slow) var(--ease); }
.card--hover:hover .card__media img,
.card--hover:focus-within .card__media img { transform: scale(1.06); }
.card--hover:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.32));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.card--hover:hover .card__media::after { opacity: 1; }

/* Pessoas da diretoria e da equipe */
.person {
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.person:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow-sm); }

/* Cartões da intranet e do DS */
.atalho { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.atalho:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ============================================================
   7. HERO — manchas que derivam, cartões que flutuam
   ============================================================ */
.hero__blob--1 { animation: acr-drift-a 22s var(--ease) infinite alternate; }
.hero__blob--2 { animation: acr-drift-b 26s var(--ease) infinite alternate; }
@keyframes acr-drift-a {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-26px, 22px, 0) scale(1.12); }
}
@keyframes acr-drift-b {
  from { transform: translate3d(0,0,0) scale(1.06); }
  to   { transform: translate3d(24px, -20px, 0) scale(0.94); }
}

.hero__float { animation: acr-float 7s var(--ease) infinite alternate; }
.hero__float--br { animation-duration: 8.5s; animation-delay: -2s; }
@keyframes acr-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* Paralaxe leve da foto do hero — o JS alimenta --parallax */
.hero__media .frame img { transform: translateY(var(--parallax, 0px)) scale(1.04); }

/* O destaque do título é desenhado, não pintado de uma vez */
.hero h1 .hl { position: relative; }
.hero h1 .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.22em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--sun) 60%, transparent);
  z-index: -1;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 900ms var(--ease) 400ms;
}
.js-motion .hero h1 .hl::after { transform: scaleX(0); }
.js-motion .hero h1.is-in .hl::after,
html:not(.js-motion) .hero h1 .hl::after { transform: scaleX(1); }

/* ============================================================
   8. NÚMEROS DE IMPACTO
   O JS conta de 0 até o valor. O número real fica sempre disponível
   em .sr-only para leitor de tela — a contagem é só visual.
   ============================================================ */
.stat__num { font-variant-numeric: tabular-nums; }
.stat { transition: transform var(--dur) var(--ease); }
.stat:hover { transform: translateY(-3px); }

/* ============================================================
   9. VOLTAR AO TOPO
   Botão de verdade, com nome acessível e alvo de 48px.
   ============================================================ */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 55; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-md); cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--brand); color: var(--text-onbrand); border-color: var(--brand); }
.to-top svg { width: 22px; height: 22px; }

/* ============================================================
   10. MENU NO CELULAR — entra deslizando
   ============================================================ */
@media (max-width: 940px) {
  .site-nav.is-open { animation: acr-slide-down var(--dur) var(--ease); }
  .site-nav.is-open a { animation: acr-slide-down var(--dur) var(--ease) backwards; }
  .site-nav.is-open a:nth-child(2) { animation-delay: 40ms; }
  .site-nav.is-open a:nth-child(3) { animation-delay: 80ms; }
  .site-nav.is-open a:nth-child(4) { animation-delay: 120ms; }
  .site-nav.is-open a:nth-child(5) { animation-delay: 160ms; }
}
@keyframes acr-slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
/* O ícone do menu vira X quando aberto */
[data-nav-toggle] svg { transition: transform var(--dur) var(--ease); }
[data-nav-toggle][aria-expanded="true"] svg { transform: rotate(90deg); }

/* ============================================================
   11. CONTROLES DE TEMA E IDIOMA
   ============================================================ */
[data-theme-toggle] svg { transition: transform var(--dur-slow) var(--ease); }
[data-theme-toggle]:hover svg { transform: rotate(35deg); }
.lang-switch button { transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.lang-switch button:active { transform: scale(0.94); }

/* Troca de tema sem piscar a página inteira */
.theme-fading, .theme-fading * {
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease) !important;
}

/* ============================================================
   12. CHIPS DE FILTRO E CARTÕES DE VALOR (Projetos / Doar)
   ============================================================ */
.chip { transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
                    color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.chip:active { transform: scale(0.96); }
.amount-btn:active, .method-card:active { transform: scale(0.97); }
.amount-btn, .method-card { transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }

/* Barra de meta da campanha cresce quando entra na tela.
   A largura vem inline do JS que monta o cartão, então quem zera e
   restaura é o interactions.js — regra de folha não vence estilo inline. */
.progress__bar { transition: width 1.2s var(--ease); }

/* Links do rodapé deslizam de leve */
.footer-col a { transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.footer-col a:hover { transform: translateX(3px); }
.social a { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.social a:hover { transform: translateY(-3px) scale(1.06); }

/* ============================================================
   13. MOVIMENTO REDUZIDO — desliga tudo que se move
   O tokens.css já zera duração de animação e transição; aqui se
   garante que nada dependa de um estado final que não vai chegar.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js-motion .hero h1 .hl::after,
  .hero h1 .hl::after { transform: scaleX(1) !important; }
  .btn--donate.btn--lg { animation: none; }
  .hero__blob--1, .hero__blob--2, .hero__float { animation: none; }
  .hero__media .frame img { transform: scale(1.04); }
  .btn::before { display: none; }
}