/* =========================================================
   Érick Jesus — Sistema de micro-interações + identidade da capa
   Arquivo novo (carrega DEPOIS de styles.css). Doc: PADRAO-MICROINTERACOES.md
   Regras de ouro:
   1) Só transform/opacity (e cor/sombra) — nada que cause layout shift.
   2) prefers-reduced-motion: some o MOVIMENTO, fica o feedback de ESTADO
      (cor, borda, sombra, ícone). Opacidade/cor não são "motion" no WCAG 2.3.3.
   3) Sem JS, o conteúdo aparece normal (reveal só esconde com html.mo-js).
   ========================================================= */

:root {
  /* Tokens de movimento */
  --mo-ease: cubic-bezier(.2, .7, .2, 1);       /* saída suave */
  --mo-press-in: 80ms;
  --mo-press-out: 160ms;
  --mo-fast: 160ms;
  --mo-base: 220ms;
  --mo-reveal: 480ms;
  --mo-lift: 4px;

  /* Identidade da capa do LinkedIn */
  --cap-green-deep: #102a21;    /* fundo da faixa */
  --cap-text: #f4f7f4;          /* texto principal sobre a faixa */
  --cap-text-muted: #eef3f0;    /* texto secundário sobre a faixa */
  --cap-yellow: #ffd84d;        /* sublinhado / foco / hover (= --tag-sun) */
  --cap-cursor: #4a1fb8;        /* roxo da etiqueta de cursor (branco = 9,6:1) */
}

/* ---------- 1. Estado pressed (todo botão) ----------
   Movimento: afunda 1px + encolhe 3%. Estado (sempre, até em reduced-motion):
   fundo mais escuro. */
.btn, .nav-toggle, .lang-option, .hero-avatar-btn, .proto-reset {
  transition: background-color var(--mo-fast) ease, color var(--mo-fast) ease,
    border-color var(--mo-fast) ease, box-shadow var(--mo-fast) ease,
    transform var(--mo-press-out) var(--mo-ease);
}
.btn:active, .nav-toggle:active, .lang-option:active, .hero-avatar-btn:active, .proto-reset:active {
  transform: translateY(1px) scale(.97);
  transition-duration: var(--mo-fast), var(--mo-fast), var(--mo-fast), var(--mo-fast), var(--mo-press-in);
}
.btn--primary:active { background: #0e241b; }
.btn--secondary:active { background: var(--border); }
.btn--cta:active { background: #e6bf36; }
.work-card--prudential .btn--cta:active { background: #d9e6f8; }
.lang-option:not(.is-active):hover { background: var(--surface-muted); }
.lang-option:not(.is-active):active { background: var(--border); }
.btn[disabled] { cursor: progress; }

/* EXCEÇÃO: o CTA do card de case (link esticado). Transform no .btn viraria o
   "containing block" do ::after (inset:0) e o clique do card encolheria até o
   tamanho do botão enquanto aperta (mesmo bug do "pisca" documentado no
   styles.css). Por isso o "pressed" desse botão vai no CARD inteiro. */
.work-card .btn:active { transform: none; }

/* ---------- 2. Cards: lift no hover/foco + pressed ---------- */
.work-card {
  transition: transform var(--mo-base) var(--mo-ease), box-shadow var(--mo-base) var(--mo-ease);
}
@media (hover: hover) {
  .work-card:hover { transform: translateY(calc(var(--mo-lift) * -1)); box-shadow: 0 18px 36px -12px rgba(16, 42, 33, .38); }
}
.work-card:has(.btn:focus-visible) { transform: translateY(calc(var(--mo-lift) * -1)); box-shadow: 0 18px 36px -12px rgba(16, 42, 33, .38); }
.work-card:has(.btn:active) { transform: translateY(0) scale(.992); box-shadow: 0 6px 14px -8px rgba(16, 42, 33, .4); transition-duration: var(--mo-press-in); }
/* o outline de foco-dentro já existe (styles.css); só garante que fique visível com o lift */
.work-card:focus-within { outline-offset: 4px; }

/* ---------- 3. Links: sublinhado animado ---------- */
/* 3a. Links de texto que JÁ nascem sublinhados: espessura/offset animam (a
   marca "é link" nunca some — AAA: não depender só de cor). */
main p a:not(.btn), .case-sources a, .proto-caption a, .rodape-legal a, .rodape-credit, .wcag-badge, .lgpd-note a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--mo-base) var(--mo-ease), text-underline-offset var(--mo-base) var(--mo-ease), color var(--mo-fast) ease;
}
main p a:not(.btn):hover, .case-sources a:hover, .proto-caption a:hover, .rodape-legal a:hover, .rodape-credit:hover, .wcag-badge:hover,
main p a:not(.btn):focus-visible, .case-sources a:focus-visible, .proto-caption a:focus-visible {
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
/* 3b. Links sem sublinhado (navegação, CTA de texto): linha que cresce da esquerda */
.nav-links a:not(.lang-option), .depoimentos-cta a, .case-next-title, .back-link { position: relative; }
.nav-links a:not(.lang-option)::after, .depoimentos-cta a::after, .case-next-title::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mo-base) var(--mo-ease);
  pointer-events: none;
}
.nav-links a:not(.lang-option):hover::after, .nav-links a:not(.lang-option):focus-visible::after,
.depoimentos-cta a:hover::after, .depoimentos-cta a:focus-visible::after,
.case-next-title:hover::after, .case-next-title:focus-visible::after { transform: scaleX(1); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- 4. Ícone de seta que desliza ---------- */
.mo-arrow { display: inline-block; transition: transform var(--mo-base) var(--mo-ease); }
.btn:hover .mo-arrow, .btn:focus-visible .mo-arrow,
a:hover > .mo-arrow, a:focus-visible > .mo-arrow,
.work-card:hover .mo-arrow, .work-card:has(.btn:focus-visible) .mo-arrow { transform: translateX(4px); }
.btn:active .mo-arrow { transform: translateX(6px); }

/* ---------- 5. Botão do menu: hambúrguer vira X ---------- */
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { transition: transform var(--mo-base) var(--mo-ease), background-color var(--mo-fast) ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }
.nav-links.is-open { animation: mo-menu-in var(--mo-base) var(--mo-ease) both; }
@keyframes mo-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) { .nav-links.is-open { animation: none; } }

/* ---------- 6. Campos: foco suave + estado inválido ---------- */
.field input, .field textarea {
  transition: border-color var(--mo-fast) ease, box-shadow var(--mo-base) var(--mo-ease), background-color var(--mo-fast) ease;
}
.field input:hover, .field textarea:hover { border-color: var(--foreground-muted); }
.field input:focus, .field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .28);   /* halo dourado da marca; o outline AAA continua */
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); border-width: 2px; padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); }

/* ---------- 7. Feedback de envio / cópia ---------- */
.btn[disabled] { opacity: 1; background: var(--primary-hover); color: #fff; }
.btn.is-loading::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: mo-spin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes mo-spin { to { transform: rotate(360deg); } }
.form-success, .field-error { animation: none; }
.form-success.mo-pop, .field-error.mo-pop { animation: mo-pop var(--mo-reveal) var(--mo-ease) both; }
@keyframes mo-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.form-success { display: flex; align-items: center; gap: var(--space-2); }
.form-success[hidden] { display: none; }
.mo-check { width: 22px; height: 22px; flex-shrink: 0; }
.mo-check circle { fill: var(--primary); }
.mo-check path { fill: none; stroke: var(--cap-yellow); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18; stroke-dashoffset: 0; }
.mo-pop .mo-check path { animation: mo-draw 360ms 120ms var(--mo-ease) both; }
@keyframes mo-draw { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
.btn.is-copied { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- 8. Revelação suave ao rolar (uma vez) ---------- */
html.mo-js [data-mo-reveal]:not(.is-in) { opacity: 0; translate: 0 14px; }
[data-mo-reveal] { transition: opacity var(--mo-reveal) var(--mo-ease), translate var(--mo-reveal) var(--mo-ease); }
.work-card[data-mo-reveal] { transition: opacity var(--mo-reveal) var(--mo-ease), translate var(--mo-reveal) var(--mo-ease), transform var(--mo-base) var(--mo-ease), box-shadow var(--mo-base) var(--mo-ease); }
.depoimento[data-mo-reveal] { transition: opacity var(--mo-reveal) var(--mo-ease), translate var(--mo-reveal) var(--mo-ease); }
.depoimento[data-mo-reveal]:nth-child(even) { transition-delay: 70ms, 70ms; }

/* ---------- 9. Progresso de leitura (cases) ---------- */
.mo-progress { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 60; pointer-events: none; }
.mo-progress > i { display: block; height: 100%; background: var(--primary); transform: scaleX(0); transform-origin: left center; will-change: transform; border-radius: 0 3px 3px 0; box-shadow: 4px 0 0 var(--cap-yellow); }

/* ---------- 10. Troca de idioma: fade curtinho na chegada ---------- */
html.mo-lang-in main, html.mo-lang-in .rodape { animation: mo-lang-in 240ms ease-out both; }
@keyframes mo-lang-in { from { opacity: .35; } to { opacity: 1; } }

/* ---------- 11. Selo "Protótipo navegável" (home) ----------
   Fica SOBRE a mídia do card, canto superior esquerdo, ~-7°. Nos 3 cards as
   telas começam em ~26% da altura da imagem, então a faixa do topo/esquerda
   está livre: o selo nunca cobre tela nem texto. pointer-events:none => o
   clique atravessa e cai no link esticado do card (não é um 2º link). */
.work-media { position: relative; }
/* media agora é posicionada: o link esticado precisa ficar ACIMA dela para o card inteiro continuar clicável */
.work-card .btn::after { z-index: 1; }
.proto-tag {
  position: absolute;
  top: 8%; left: 5%;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 48%;
  padding: 3px 10px 3px 6px;
  border-radius: var(--radius-pill);
  background: var(--cap-cursor);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 6px 14px -4px rgba(16, 42, 33, .55), 0 2px 0 rgba(16, 42, 33, .25);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: .01em;
  white-space: nowrap;
  transform: rotate(-7deg);
  transform-origin: left center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.proto-tag svg { width: 14px; height: 14px; flex-shrink: 0; display: block; }
@media (min-width: 768px) {
  .proto-tag { top: 5%; font-size: 14px; line-height: 20px; padding: 6px 14px 6px 9px; gap: 6px; }
  .proto-tag svg { width: 18px; height: 18px; }
}
@media (min-width: 1200px) { .proto-tag { font-size: 15px; } }
/* entrada: carimbo único quando o card é revelado (sem loop) */
html.mo-js .work-card[data-mo-reveal]:not(.is-in) .proto-tag { opacity: 0; }
.work-card.is-in .proto-tag { animation: mo-stamp 520ms 380ms var(--mo-ease) both; }
@keyframes mo-stamp {
  0% { opacity: 0; transform: rotate(-14deg) scale(1.35); }
  60% { opacity: 1; transform: rotate(-6deg) scale(.97); }
  100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}

/* Depoimentos não são clicáveis: sem lift no hover (só sombra estática) */
.depoimento, .depoimento:hover, .depoimento[data-mo-reveal]:hover { transform: none; box-shadow: 0 1px 2px rgba(23, 53, 42, .08), 0 4px 12px -6px rgba(23, 53, 42, .12); }

/* ---------- 12. Rodapé escuro com curvas de nível ---------- */
.rodape { position: relative; isolation: isolate; overflow: hidden; }
.rodape-contours {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 62%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 62%);   /* zero no topo */
  transition: opacity .4s ease;
}
.rodape-contours img {
  position: absolute; left: 0; width: 100%;
  top: -24px; height: calc(100% + 48px);          /* folga p/ parallax (±24px) nunca abrir vão */
  object-fit: cover; object-position: 50% 100%;
  max-width: none;
  will-change: transform;
}
.rodape:not([class*="rodape--variacao"]) {
  background: var(--cap-green-deep);
  color: var(--cap-text);
  padding-top: clamp(88px, 12vw, 144px);
  padding-bottom: var(--space-7);
}
.rodape:not([class*="rodape--variacao"]) p { color: var(--cap-text); }
.rodape:not([class*="rodape--variacao"]) .rodape-legal { color: var(--cap-text-muted); }
.rodape:not([class*="rodape--variacao"]) a,
.rodape:not([class*="rodape--variacao"]) .rodape-credit,
.rodape:not([class*="rodape--variacao"]) .wcag-badge { color: var(--cap-text); }
.rodape:not([class*="rodape--variacao"]) a:hover,
.rodape:not([class*="rodape--variacao"]) .rodape-credit:hover,
.rodape:not([class*="rodape--variacao"]) .wcag-badge:hover { color: var(--cap-yellow); }
.rodape :focus-visible { outline-color: var(--cap-yellow); }
.rodape[class*="rodape--variacao"] .rodape-contours { opacity: 0; }   /* "souvenir" do easter egg continua claro */

/* ---------- Reduced motion: tira MOVIMENTO, mantém ESTADO ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .nav-toggle:active, .lang-option:active, .hero-avatar-btn:active, .proto-reset:active { transform: none; }
  .work-card, .work-card:hover, .work-card:has(.btn:focus-visible), .work-card:has(.btn:active) { transform: none; }
  .work-card:hover, .work-card:has(.btn:focus-visible) { box-shadow: 0 0 0 3px var(--cap-yellow), 0 12px 32px rgba(23, 53, 42, .18); }
  .work-card:has(.btn:active) { box-shadow: 0 0 0 3px #fff; }
  .mo-arrow, .btn:hover .mo-arrow, a:hover > .mo-arrow, .work-card:hover .mo-arrow, .btn:active .mo-arrow { transform: none; }
  .nav-links a:not(.lang-option)::after, .depoimentos-cta a::after, .case-next-title::after { transform: scaleX(0); transition: none; }
  .nav-links a:not(.lang-option):hover::after, .nav-links a:not(.lang-option):focus-visible::after,
  .depoimentos-cta a:hover::after, .depoimentos-cta a:focus-visible::after,
  .case-next-title:hover::after, .case-next-title:focus-visible::after { transform: scaleX(1); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before, .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: none; }
  .nav-links.is-open, html.mo-lang-in main, html.mo-lang-in .rodape { animation: none; }
  html.mo-js [data-mo-reveal]:not(.is-in) { opacity: 1; translate: none; }
  [data-mo-reveal] { transition: none; }
  .btn.is-loading::before { animation: none; border-top-color: rgba(255, 255, 255, .35); border-right-color: #fff; }
  .form-success.mo-pop, .field-error.mo-pop, .mo-pop .mo-check path { animation: none; }
  .work-card.is-in .proto-tag { animation: none; opacity: 1; }
  html.mo-js .work-card[data-mo-reveal]:not(.is-in) .proto-tag { opacity: 1; }
  .rodape-contours img { transform: none !important; }
  .mo-progress > i { will-change: auto; }
}