/* ═══════════════════════════════════════════════════════════════
   VARIABLES — Variáveis CSS globais e keyframes partilhados
   Para alterar cores, fontes ou espaçamentos do site todo,
   basta editar aqui — aplica-se automaticamente a todos os ficheiros.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Cores principais ─────────────────────────────────────────── */
  --color-bg:               #F5F4F0; /* fundo claro — páginas de conteúdo */
  --color-bg-alt:           #ECEAE4; /* fundo ligeiramente mais escuro — secções alternadas */
  --color-dark:             #0D0D0D; /* fundo escuro — hero, footer */
  --color-dark-2:           #1A1A1A; /* fundo escuro secundário — cards, blocos de valores */
  --color-accent:           #E87722; /* laranja C|Side — cor principal da marca */
  --color-accent-2:         #006EFF; /* azul secundário — glows, gradientes, links de código */
  --color-text:             #1A1A1A; /* cor do texto principal */
  --color-text-muted:       #6B6860; /* texto secundário e legendas */
  --color-text-muted-light: rgba(255,255,255,0.6); /* texto secundário em fundos escuros */
  --color-white:            #FFFFFF; /* branco puro */
  --color-border:           rgba(0,0,0,0.1);        /* borda subtil em fundos claros */
  --color-border-light:     rgba(255,255,255,0.12); /* borda subtil em fundos escuros */

  /* ── Tipografia ───────────────────────────────────────────────── */
  /* carregadas via Google Fonts no _Layout.cshtml */
  --font-display: 'Syne', sans-serif;    /* títulos, números grandes, navegação */
  --font-body:    'DM Sans', sans-serif; /* texto corrido, parágrafos, labels */

  /* ── Espaçamentos ─────────────────────────────────────────────── */
  /* escala fluida — usar sempre var(--space-*) em vez de valores rem soltos */
  --space-xs:  0.5rem;  /*  8px */
  --space-sm:  1rem;    /* 16px */
  --space-md:  1.5rem;  /* 24px */
  --space-lg:  2.5rem;  /* 40px */
  --space-xl:  4rem;    /* 64px */
  --space-2xl: 6rem;    /* 96px */
  --space-3xl: 9rem;    /* 144px */

  /* ── Border Radius ────────────────────────────────────────────── */
  --radius-sm:   0.5rem;  /*  8px — inputs, tags pequenas */
  --radius-md:   1rem;    /* 16px — cards pequenos, dropdowns */
  --radius-lg:   1.5rem;  /* 24px — cards médios */
  --radius-xl:   2rem;    /* 32px — cards grandes, formulários */
  --radius-full: 9999px;  /* pill — botões CTA, badges, avatares */

  /* ── Sombras ──────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);    /* elevação mínima */
  --shadow-md:   0 4px 24px rgba(0,0,0,0.1);    /* elevação média — cards ao hover */
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.14);  /* elevação alta — modais, cookie banner */
  --shadow-glow: 0 0 40px rgba(232,119,34,0.25); /* brilho laranja — efeito halo */

  /* ── Easing / transições ──────────────────────────────────────── */
  --ease:            cubic-bezier(0.25, 0.46, 0.45, 0.94); /* suave e natural */
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);    /* ultrapassa ligeiramente o alvo */
  --transition:      0.3s var(--ease);       /* duração padrão — hover, focus */
  --transition-slow: 0.6s var(--ease);       /* duração lenta — imagens, overlays */

  /* ── Layout ───────────────────────────────────────────────────── */
  --container-max: 1280px; /* largura máxima do conteúdo centrado */
  --nav-height:    80px;   /* altura da barra de navegação — usada em padding-top dos heróis */
}


/* ─── KEYFRAMES GLOBAIS ────────────────────────────────────────── */
/* Usados em múltiplos ficheiros CSS — definidos aqui para não repetir */

/* pulsação do indicador de scroll no hero da homepage */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); } /* linha fina e semi-transparente */
  50%       { opacity: 1;   transform: scaleY(1); }   /* linha cheia e opaca */
}

/* pulsação dos pontos activos no mapa SVG (components.css) */
@keyframes mapPulse {
  0%, 100% { opacity: 0.7; } /* semi-transparente */
  50%       { opacity: 1; }  /* totalmente opaco */
}

/* flutuação suave dos value cards na página About */
@keyframes floatCard {
  0%   { transform: translate3d(0, 0px, 0); }    /* posição de repouso */
  50%  { transform: translate3d(0, -10px, 0); }  /* sobe 10px — translate3d activa GPU */
  100% { transform: translate3d(0, 0px, 0); }    /* volta à posição de repouso */
}

/* orb 1 na página Applications — deriva para a esquerda com scale orgânico */
@keyframes appOrbFloat {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.9; }
  25%  { transform: translate3d(-20vw, 60px, 0) scale(1.1); opacity: 1; }
  50%  { transform: translate3d(-35vw, -40px, 0) scale(0.92); opacity: 0.75; }
  75%  { transform: translate3d(-15vw, 80px, 0) scale(1.08); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.9; }
}
/* orb 2 na página Applications — deriva para a direita (sentido oposto ao orb 1) */
@keyframes appOrbFloat2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  30%  { transform: translate3d(25vw, -50px, 0) scale(1.12); opacity: 1; }
  55%  { transform: translate3d(45vw, 30px, 0) scale(0.9); opacity: 0.7; }
  80%  { transform: translate3d(20vw, -70px, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
}
/* fade + subida do título e desc no hero de Applications */
@keyframes appFadeUp {
  from { opacity: 0; transform: translateY(24px); } /* começa invisível e deslocado para baixo */
  to   { opacity: 1; transform: translateY(0); }    /* termina visível na posição correcta */
}
/* a linha laranja→azul cresce da esquerda para a direita */
@keyframes appLineGrow {
  from { transform: scaleX(0); transform-origin: left; } /* comprimento zero */
  to   { transform: scaleX(1); transform-origin: left; } /* comprimento total */
}