/*
 * ============================================================
 * ACIC Cacoal — Design System: "The Executive Portfolio"
 * CSS compartilhado para todas as páginas do site
 *
 * Uso:
 *   Páginas raiz (ex: home.html, contato.html):
 *     <link rel="stylesheet" href="assets/css/design-system.css">
 *
 *   Páginas em subdiretório (ex: acic/quem-somos.html):
 *     <link rel="stylesheet" href="../assets/css/design-system.css">
 * ============================================================
 */


/* ── Configuração global ─────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ── Material Symbols — configuração padrão ─────────────── */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  /* Evita deslocamento de layout ao carregar o ícone */
  font-display: optional;
}

/* Variante filled (para estrelas de rating, etc.) */
.material-symbols-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


/* ── Executive Glass — nav e overlays flutuantes ────────── */
/*
 * Regra do Design System: nunca usar bordas 1px para seccionar.
 * O header se distingue do conteúdo apenas pela transparência + blur.
 */
.executive-glass {
  background: rgba(248, 249, 250, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


/* ── Signature Gradient — hero e CTAs primários ─────────── */
/*
 * Cria textura de veludo no lugar de bloco digital plano.
 * Uso: seção hero, faixa CTA final, banners institucionais.
 */
.signature-gradient {
  background: linear-gradient(135deg, #1a4231 0%, #274e3c 100%);
}

/* Variante mais escura para seções de alto contraste */
.signature-gradient-deep {
  background: linear-gradient(135deg, #002c1c 0%, #1a4231 100%);
}


/* ── Ghost Border — borda de acessibilidade (15% opacidade) */
/*
 * Regra: nunca usar border com 100% de opacidade para separação.
 * Usar apenas quando âncora visual for necessária para acessibilidade.
 */
.ghost-border {
  border: 1px solid rgba(193, 200, 194, 0.15); /* outline-variant/15 */
}


/* ── Scrollbar discreta ─────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f8f9fa; /* surface */
}

::-webkit-scrollbar-thumb {
  background: #1a4231; /* primary-container */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #002c1c; /* primary */
}


/* ── Alpine.js: esconder antes de inicializar ───────────── */
/*
 * Evita flash de conteúdo não inicializado (FOUC do Alpine).
 * O Alpine remove [x-cloak] automaticamente após inicializar.
 */
[x-cloak] {
  display: none !important;
}


/* ── Seleção de texto com cor da marca ──────────────────── */

::selection {
  background-color: #fed488; /* secondary-container */
  color: #261900;            /* on-secondary-fixed */
}


/* ── Foco acessível — substitui o outline padrão ────────── */
/*
 * Mantém navegação por teclado visível mas elegante.
 * Usa secondary (#775a19) como cor de foco.
 */
:focus-visible {
  outline: 2px solid #775a19; /* secondary */
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove outline padrão para cliques com mouse */
:focus:not(:focus-visible) {
  outline: none;
}


/* ── Phase 5: Scroll Animations & Micro-interactions ────── */

/*
 * Sistema de animações de scroll — ACIC Cacoal
 *
 * Como funciona:
 *   1. JS (animations.js) adiciona [data-animate] via DOM e via HTML estático
 *   2. JS define opacity/transform iniciais via el.style (não CSS attr selector)
 *      → evita FOUC em elementos acima do fold
 *   3. IntersectionObserver adiciona classe .animated quando elemento entra na viewport
 *   4. CSS define o estado final (animated) e as stagger delays
 */

/* Estado final quando o elemento entra no viewport */
[data-animate].animated {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger delays — usados com data-delay="1..8" */
[data-delay="1"].animated { transition-delay: 0.07s !important; }
[data-delay="2"].animated { transition-delay: 0.14s !important; }
[data-delay="3"].animated { transition-delay: 0.21s !important; }
[data-delay="4"].animated { transition-delay: 0.28s !important; }
[data-delay="5"].animated { transition-delay: 0.35s !important; }
[data-delay="6"].animated { transition-delay: 0.42s !important; }
[data-delay="7"].animated { transition-delay: 0.49s !important; }
[data-delay="8"].animated { transition-delay: 0.56s !important; }

/* Entrada da página — fade suave do <main> */
@media (prefers-reduced-motion: no-preference) {
  main {
    animation: acic-page-entry 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes acic-page-entry {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Sem animações para quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].animated {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ── Card Lift — hover com elevação suave ────────────────── */
/*
 * Adicionar classe .card-lift a qualquer card clicável para obter
 * um efeito de levitação elegante ao passar o mouse.
 * Usa !important para sobrepor transições inline do Tailwind.
 */
.card-lift {
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease !important;
}

.card-lift:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 40px rgba(0, 44, 28, 0.11) !important;
}


/* ── Button Ripple — efeito de onda ao clicar ───────────── */
/*
 * JS adiciona ._ripple span dinamicamente no pointerdown.
 * O botão precisa ter position: relative (JS garante isso).
 */
._ripple {
  position: absolute;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin: -4px;
  background: rgba(255, 255, 255, 0.28);
  pointer-events: none;
  animation: _ripple-burst 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 0;
}

@keyframes _ripple-burst {
  from { transform: scale(0);  opacity: 1; }
  to   { transform: scale(38); opacity: 0; }
}


/* ── Utilitários de animação (legado) ───────────────────── */

/* Fade in suave ao entrar no viewport (para usar com IntersectionObserver) */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ── WhatsApp botão flutuante — z-index garantido ────────── */

.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
}


/* ── Tipografia — classes auxiliares ────────────────────── */

.font-headline {
  font-family: 'Sora', sans-serif;
}

.font-body {
  font-family: 'DM Sans', sans-serif;
}


/* ── Print: esconder elementos de UI ────────────────────── */

@media print {
  header,
  .whatsapp-float,
  .executive-glass {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
}