@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary: #6c5ce7;
    --secondary: #00cec9;
    --dark: #2d3436;
    --light: #f5f6fa;
}

/* Variáveis e paleta para o Modo Escuro */
html.dark {
    --primary: #a29bfe;
    --secondary: #81ecec;
    --dark: #f8fafc;
    --light: #0f172a; 
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--light);
    color: var(--dark);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.gradient-bg {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.blob {
    filter: blur(40px);
    opacity: 0.7;
    animation: blob-animate 15s infinite alternate;
}

@keyframes blob-animate {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

/* Estilos específicos dos Cards (index.html e páginas do Blog) */
.card {
    transition: all 0.3s ease;
    transform-style: preserve-3d;
}

.card:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}

.skill-bar {
    height: 8px;
    border-radius: 4px;
    background: #dfe6e9;
    overflow: hidden;
}

html.dark .skill-bar {
    background: #334155;
}

.skill-progress {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 1.5s ease;
}

.project-card {
    perspective: 1000px;
}

.project-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.project-card:hover .project-inner {
    transform: rotateY(180deg);
}

.project-front, .project-back {
    backface-visibility: hidden;
}

.project-back {
    transform: rotateY(180deg);
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.typing {
    overflow: hidden;
    border-right: 3px solid var(--primary);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--primary) } }

.scroll-down { animation: bounce 2s infinite; }
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* Overrides globais mágicos (Evita modificar dezenas de classes do Tailwind manualmente no HTML) */
html.dark .bg-white { background-color: #1e293b !important; border-color: #334155; }
html.dark .bg-gray-100 { background-color: #0f172a !important; }
html.dark .text-gray-800, html.dark .text-gray-900 { color: #f1f5f9 !important; }
html.dark .text-gray-600, html.dark .text-gray-700 { color: #cbd5e1 !important; }
html.dark .border-gray-200, html.dark .border-gray-300 { border-color: #475569 !important; }
html.dark input, html.dark textarea { background-color: #334155 !important; color: #f8fafc !important; }
html.dark nav { background-color: rgba(30, 41, 59, 0.9) !important; }

.orion-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.82));
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.22);
}

.orion-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(34, 211, 238, 0.08), transparent 40%, rgba(250, 204, 21, 0.08));
    pointer-events: none;
}

.orion-grid {
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
}

.orion-badge {
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(15, 23, 42, 0.75);
    color: #e2e8f0;
}

html.dark .orion-panel {
    border-color: rgba(71, 85, 105, 0.6);
    box-shadow: 0 25px 60px rgba(2, 6, 23, 0.45);
}