/* --- VARIAVEIS --- */
:root {
    --st-red: #e71d24;
    --st-glow: #ff4d4d;
    --st-blue: #4db5ff; /* Azul da print para o botão */
    --bg-dark: #141414;
    --card-bg: #1f1f1f;
    --text-main: #e5e5e5;
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    overflow-x: hidden;
    display: flex; flex-direction: column; min-height: 100vh;
}

/* --- AMBIENTE E MONSTRO --- */
.ambient-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.fog { background: radial-gradient(circle at 50% 50%, #290000 0%, #000000 90%); opacity: 0.8; }
.spores { background-image: url('https://raw.githubusercontent.com/s1mpson/css-particle-effect/master/particle.png'); animation: float 60s linear infinite; opacity: 0.3; }
@keyframes float { 0% { background-position: 0 0; } 100% { background-position: 600px 1200px; } }

#mind-flayer {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; z-index: -2;
    transition: opacity 4s ease-in-out;
    filter: brightness(0.4) sepia(1) hue-rotate(-50deg) saturate(5) contrast(1.2);
}

/* --- TIPOGRAFIA --- */
h1, h2, h3 {
    font-family: 'Creepster', display;
    color: var(--st-red);
    text-transform: uppercase;
    text-shadow: 0 0 5px var(--st-red);
    margin-bottom: 1rem; letter-spacing: 2px;
}
.section-title { text-align: center; font-size: 2rem; margin: 60px 0 30px; }
.left-align { text-align: left; }

.flicker-slow { animation: flicker 5s infinite alternate; }
@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; text-shadow: 0 0 5px var(--st-red), 0 0 15px var(--st-glow); }
    20%, 24%, 55% { opacity: 0.8; text-shadow: none; }
}

/* --- NAV & HERO --- */
nav {
    display: flex; justify-content: space-between; align-items: center; padding: 20px 4%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    position: sticky; top: 0; z-index: 100; backdrop-filter: blur(5px);
}
.logo { font-family: 'Creepster'; color: var(--st-red); font-size: 2rem; }
nav ul { display: flex; list-style: none; gap: 20px; }
nav a { color: #fff; text-decoration: none; font-size: 0.9rem; transition: 0.3s; }
nav a:hover { color: var(--st-red); }

.hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 100px 4% 60px; min-height: 70vh; }
.hero-text { flex: 1; min-width: 300px; padding-right: 30px; margin-bottom: 40px; }
.hero-text h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 20px; }

.card-glow { border: 1px solid var(--st-red); box-shadow: 0 0 20px rgba(231, 29, 36, 0.2); background: rgba(20, 20, 20, 0.8); }
.hero-card { padding: 30px; border-radius: 8px; max-width: 400px; width: 100%; }
.hero-stats { display: flex; justify-content: space-between; margin-top: 20px; border-top: 1px solid #333; padding-top: 15px; }
.hero-stats strong { font-size: 1.5rem; color: #fff; }

.cta-buttons .btn {
    padding: 10px 20px; border: 1px solid var(--st-red); color: #fff; text-decoration: none;
    margin-right: 10px; display: inline-block; transition: 0.3s; background: rgba(231,29,36,0.1); margin-bottom: 10px;
}
.cta-buttons .btn:hover { background: var(--st-red); color: #000; box-shadow: 0 0 15px var(--st-red); }

/* --- SOBRE MIM --- */
.about-section { padding: 60px 4%; background: rgba(0,0,0,0.3); }
.about-container { display: flex; align-items: center; gap: 50px; max-width: 1000px; margin: 0 auto; }
.profile-img-container {
    flex-shrink: 0; width: 250px; height: 250px;
    border-radius: 50%; overflow: hidden;
    border: 3px solid var(--st-red);
    box-shadow: 0 0 30px rgba(231, 29, 36, 0.5);
}
.profile-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%); }
.about-text { flex: 1; }

/* --- CARROSSEL NETFLIX (COM DRAG) --- */
.netflix-section { padding: 40px 4%; overflow: hidden; margin-bottom: 40px; }
.netflix-title { font-size: 1.5rem; margin-bottom: 15px; color: #e5e5e5; font-family: 'Roboto Mono'; border-left: 3px solid var(--st-red); padding-left: 10px; text-shadow: none; }

.netflix-row { 
    overflow-x: auto; 
    overflow-y: hidden; 
    padding: 20px 0; 
    scrollbar-width: none; 
    cursor: grab; /* Mãozinha para indicar arraste */
}
.netflix-row:active { cursor: grabbing; } /* Mão fechada ao arrastar */
.netflix-row::-webkit-scrollbar { display: none; }
.netflix-track { display: flex; gap: 15px; transition: transform 450ms; pointer-events: none; } /* pointer-events no track para nao atrapalhar o drag do pai */
.netflix-track > * { pointer-events: auto; } /* Reativa clicks nos filhos */

.poster {
    flex-shrink: 0; background: #1a1a1a; border-radius: 4px;
    transition: transform 450ms; border: 1px solid #333;
    position: relative; overflow: hidden; text-decoration: none; user-select: none; /* Evita selecionar texto ao arrastar */
}
.poster:hover { transform: scale(1.08); border-color: var(--st-red); box-shadow: 0 0 25px rgba(0,0,0,0.9); z-index: 10; background: #222; }

.skill-poster { width: 130px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.skill-poster i { font-size: 3.5rem; margin-bottom: 15px; }
.skill-poster .white { color: #fff; }
.skill-poster span { color: #fff; }

.project-poster {
    width: 280px; height: 250px;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 0; border-top: none;
}
.project-thumb { width: 100%; height: 120px; object-fit: cover; border-bottom: 2px solid var(--st-red); opacity: 0.8; transition: 0.3s; }
.project-poster:hover .project-thumb { opacity: 1; }
.project-content { padding: 10px 15px; flex-grow: 1; }
.project-content h3 { font-size: 1.1rem; font-family: 'Roboto Mono'; text-shadow: none; color: #fff; margin-bottom: 5px; }
.project-content p { font-size: 0.75rem; color: #aaa; margin: 0; }
.project-tags { display: flex; gap: 5px; padding: 0 15px 15px; }
.project-tags span { font-size: 0.65rem; background: #330000; padding: 2px 6px; color: #ff9999; border: 1px solid var(--st-red); }

/* --- BOTÃO TODOS OS PROJETOS (Estilo Print) --- */
.all-projects-btn-container { text-align: center; margin-top: 40px; }
.btn-all-projects {
    display: inline-block;
    padding: 15px 40px;
    background-color: transparent;
    border: 2px solid var(--st-blue); /* Azul da print */
    border-radius: 12px;
    color: var(--st-blue);
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Roboto Mono', sans-serif;
    box-shadow: 0 0 10px rgba(77, 181, 255, 0.1);
}
.btn-all-projects i { margin-right: 10px; font-size: 1.4rem; }
.btn-all-projects:hover {
    background-color: rgba(77, 181, 255, 0.1);
    box-shadow: 0 0 20px rgba(77, 181, 255, 0.4);
    transform: translateY(-3px);
}

/* --- IDIOMAS & CONTATO --- */
.languages-section { padding: 50px 4%; text-align: center; background: rgba(0,0,0,0.2); }
.lang-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 900px; margin: 0 auto; }
.lang-card { width: 200px; text-align: left; }
.lang-card h3 { font-size: 1rem; color: #fff; margin-bottom: 8px; font-family: 'Roboto Mono'; text-shadow: none; }
.lang-card small { color: var(--st-red); }
.progress-bar { width: 100%; height: 6px; background: #333; border-radius: 4px; overflow: hidden; }
.fill { height: 100%; background: var(--st-red); box-shadow: 0 0 10px var(--st-red); }

.contact-section { text-align: center; padding: 60px 20px; margin-top: auto; }
.contact-icons { display: flex; justify-content: center; gap: 30px; margin-top: 20px; }
.contact-icons a { color: #fff; font-size: 2.5rem; transition: 0.3s; }
.contact-icons a:hover { color: var(--st-red); transform: scale(1.2); text-shadow: 0 0 15px var(--st-red); }

footer { text-align: center; padding: 30px 20px; background-color: #000; border-top: 2px solid var(--st-red); color: #888; font-size: 0.9rem; margin-top: 20px; }

/* --- RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 768px) {
    .hero-text h1 { font-size: 2.5rem; text-align: center; }
    .hero-text p { text-align: center; }
    .hero { flex-direction: column; justify-content: center; text-align: center; padding-top: 40px; }
    .hero-text { padding-right: 0; margin-bottom: 30px; }
    .cta-buttons { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .cta-buttons .btn { width: 100%; max-width: 250px; margin-right: 0; }
    
    .about-container { flex-direction: column; text-align: center; }
    .about-text h2.left-align { text-align: center !important; }
    
    nav { flex-direction: column; gap: 15px; }
    nav ul { gap: 15px; font-size: 0.8rem; }
    
    .lang-grid { gap: 20px; }
    .lang-card { width: 100%; max-width: 300px; }
    
    .btn-all-projects { font-size: 1rem; padding: 12px 20px; width: 90%; }
}