/* ============================================================
   interactions.css — fase 1 micro-interações
   carrega DEPOIS de polish.css. só ADICIONA, não substitui.
   tudo respeita prefers-reduced-motion.
   ============================================================ */

/* ============================================================
   FOCUS STATES ACESSÍVEIS
   visíveis no teclado, invisíveis no mouse
   ============================================================ */
:where(a, button, input, select, textarea, [tabindex]):focus {
  outline: none;
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 1.5px solid rgba(18, 21, 28,0.65);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-color 180ms ease;
}
.btn:focus-visible,
.link-btn:focus-visible {
  outline-offset: 4px;
}
.fb-audit-form input:focus-visible,
.fb-audit-form textarea:focus-visible,
.fb-audit-form select:focus-visible {
  outline: none;
}

/* ============================================================
   MICRO-INTERAÇÕES — cards e links
   ============================================================ */

/* card hover refinado — translateY mínimo + tint sutil no fundo */
.card,
.post-card,
.case-card,
.mini-case {
  transition:
    transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 360ms ease;
  will-change: transform;
}

.post-card:hover {
  transform: translateY(-2px);
}

/* link inline com underline animado da esquerda pra direita */
.single-post-content p a:not(.btn):not(.link-btn),
.single-post-content li a:not(.btn):not(.link-btn) {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 0.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-size 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.single-post-content p a:not(.btn):not(.link-btn):hover {
  background-size: 100% 0.5px;
}

/* botão primary com lift sutil no hover, sem afetar o que já existe */
.btn--primary,
.btn--outline {
  transition:
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 280ms ease,
    color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}

/* ============================================================
   SKELETON LOADER — placeholder enquanto imagem não chega
   ============================================================ */

.post-card__thumb,
.case-card,
.related-card__img,
.mini-case {
  position: relative;
  overflow: hidden;
}

.post-card__thumb::before,
.related-card__img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(18, 21, 28,0.02) 0%,
    rgba(18, 21, 28,0.05) 50%,
    rgba(18, 21, 28,0.02) 100%
  );
  background-size: 200% 100%;
  animation: fb-shimmer 1.8s infinite linear;
  pointer-events: none;
  opacity: 1;
  transition: opacity 360ms ease;
}

/* imagem carregada → para o shimmer */
.post-card__thumb.fb-loaded::before,
.related-card__img.fb-loaded::before {
  opacity: 0;
  animation: none;
}

@keyframes fb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   FADE-UP NO SCROLL
   classes opcionais aplicadas via JS apenas em seções marcadas
   ============================================================ */

.fb-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.fb-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger pra filhos quando o pai recebe is-visible */
.fb-reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 640ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 640ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fb-reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.fb-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.fb-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.fb-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.fb-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.fb-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.fb-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }
.fb-reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 420ms; }
.fb-reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 490ms; }

/* ============================================================
   SCROLL — comportamento suave + cor de seleção
   ============================================================ */

html { scroll-behavior: smooth; }

::selection {
  background: rgba(18, 21, 28,0.18);
  color: var(--color-text, #12151c);
}

/* ============================================================
   FORM — focus mais elegante no campo do form de avaliação
   ============================================================ */
.fb-audit-form input,
.fb-audit-form textarea,
.fb-audit-form select {
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.fb-audit-form input:focus,
.fb-audit-form textarea:focus,
.fb-audit-form select:focus {
  border-bottom-color: #12151c;
  box-shadow: 0 1px 0 0 rgba(18, 21, 28,0.4);
}

/* ============================================================
   REDUCED MOTION — respeita preferência do usuário
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fb-reveal,
  .fb-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}