/*
 * ══════════════════════════════════════════════
 *  GLOBAL.CSS — Estilos Base e Utilitários
 * ══════════════════════════════════════════════
 *
 *  Propósito : Estilos de corpo, tipografia global e classes
 *              utilitárias reutilizáveis em todo o site.
 *  Dependências : tokens.css (usa custom properties).
 *  NÃO COLOCAR AQUI : Estilos de componentes ou seções específicas.
 */

/* ── Body ─────────────────────────────────────── */
body {
    background-color: var(--color-black);
    color: var(--color-white);
    overflow-x: hidden;
    font-family: var(--font-body);
}

/* ── Texto Gradiente (utilitário) ─────────────── */
.text-gradient {
    background: linear-gradient(to right, var(--color-primary-light), var(--color-primary-deep));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Container de Perspectiva 3D ──────────────── */
.perspective-container {
    perspective: 1000px;
}

/* ── GSAP — Estados Iniciais (previne flash) ──── */
.gsap-reveal {
    opacity: 0;
    visibility: hidden;
}

/* ── Cursor de Digitação (terminal mockup) ────── */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: var(--color-primary-light);
    margin-left: 2px;
    vertical-align: middle;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ── Override global do @keyframes ping ────────── *
 *    Tailwind usa scale(2); o design system        *
 *    define scale(2.5) para maior impacto visual.  *
 * ─────────────────────────────────────────────── */
@keyframes ping {
    75%, 100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ── Sparkles & Gradient Color Tokens (Identidade Visual CapCode) ── */
:root {
    --gradient-color: #0ea5e9;
    --sparkles-color: #0ea5e9;
}

.dark {
    --gradient-color: #0ea5e9;
    --sparkles-color: #ffffff;
}