/* ==========================================================================
   Base — BarberSy
   Estilos globais aplicados a toda a página: body, tipografia e utilitários.
   ========================================================================== */

body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  color: var(--color-brand);
  background-color: var(--color-surface);
  letter-spacing: var(--letter-spacing-base);

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Layout principal da página */
main {
  width: 100%;
}

/* ── Utilitários de cabeçalho de seção ───────────────────────────────────────
   Compartilhados entre: Sobre, Funções, Planos, FAQ.
   Evita repetição de código e garante consistência visual.
   ─────────────────────────────────────────────────────────────────────────── */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-12);
}

.section-label {
  display: inline-block;
  font-size: var(--section-label-size);
  font-weight: var(--font-medium);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: var(--section-title-size);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--color-brand);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--section-subtitle-size);
  font-weight: var(--font-light);
  color: var(--color-muted);
  line-height: 1.7;
}

/* ── Skip link (acessibilidade) ──────────────────────────────────────────────
   Permite que usuários de teclado pulem diretamente para o conteúdo principal.
   ─────────────────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;

  background-color: var(--color-brand);
  color: var(--color-on-brand);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);

  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ── Animações de Scroll Reveal ──────────────────────────────────────────────
   Controladas via IntersectionObserver em scripts/animations.js.
   Os elementos que devem animar recebem a classe [data-reveal].
   O JS adiciona [data-reveal="visible"] quando o elemento entra na viewport.
   ─────────────────────────────────────────────────────────────────────────── */

/* Estado inicial: oculto e deslocado */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
  /* will-change apenas quando necessário — adicionado via JS antes da animação */
}

/* Estado final: visível */
[data-reveal="visible"] {
  opacity: 1;
  transform: translateY(0);
}

/* Variante: slide da esquerda */
[data-reveal="from-left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
}

[data-reveal="from-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Atraso escalonado por índice (até 8 itens) */
[data-reveal-delay="1"] { transition-delay: calc(var(--reveal-stagger) * 1); }
[data-reveal-delay="2"] { transition-delay: calc(var(--reveal-stagger) * 2); }
[data-reveal-delay="3"] { transition-delay: calc(var(--reveal-stagger) * 3); }
[data-reveal-delay="4"] { transition-delay: calc(var(--reveal-stagger) * 4); }
[data-reveal-delay="5"] { transition-delay: calc(var(--reveal-stagger) * 5); }
[data-reveal-delay="6"] { transition-delay: calc(var(--reveal-stagger) * 6); }
[data-reveal-delay="7"] { transition-delay: calc(var(--reveal-stagger) * 7); }
[data-reveal-delay="8"] { transition-delay: calc(var(--reveal-stagger) * 8); }

/* Classe utilitária para esconder elementos de forma limpa e acessível */
.is-hidden {
  display: none !important;
}