/* ============================================================
   TEMA ESCURO GLOBAL + FUNDO COM VIDEO
   ============================================================ */

/* ---------------------------------------------------------
   0. VIDEO DE FUNDO (carrossel)
   --------------------------------------------------------- */
.dc-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: #050b18;
}
/* sem filtro CSS: filter em video fullscreen obriga o compositor a
   repintar o frame inteiro a cada quadro. O escurecimento e feito
   pelas camadas de tinta abaixo, que sao estaticas. */
.dc-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateZ(0);
    opacity: 0;
    transition: opacity 0.6s ease;
}
.dc-video.ready { opacity: 1; }
/*Fallback: sem JS/sem play, o poster cobre o espaco */
.dc-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #0a1120 url('hero-poster.jpg') center / cover no-repeat;
}
/* tinta escura: garante legibilidade do texto sobre o video */
.dc-video-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 40%, rgba(2, 12, 6, 0.55), transparent 62%),
        linear-gradient(180deg, rgba(3, 10, 6, 0.85) 0%, rgba(2, 7, 4, 0.76) 50%, rgba(2, 6, 3, 0.88) 100%);
}
/* vinheta: escurece as bordas */
.dc-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse 74% 84% at 50% 50%, transparent 48%, rgba(2, 6, 4, 0.80) 100%);
}

/* ---------------------------------------------------------
   1. ICONES PULSANTES
   --------------------------------------------------------- */
@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(71,195,255,0.42), 0 0 0 0 rgba(53,160,245,0.28);
    }
    50% {
        transform: scale(1.07);
        box-shadow: 0 0 0 10px rgba(71,195,255,0.00), 0 0 0 20px rgba(53,160,245,0.00);
    }
}
@keyframes iconGlow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(71,195,255,0.55)); }
    50% { filter: drop-shadow(0 0 12px rgba(71,195,255,1)); }
}

body.hero-dark .social {
    background: rgba(12,26,48,0.82) !important;
    border: 1px solid rgba(71,195,255,0.38) !important;
    color: #5cc0ff !important;
    animation: iconPulse 2.6s ease-in-out infinite, iconGlow 2.6s ease-in-out infinite;
}
body.hero-dark .social:nth-child(2) { animation-delay: 0.45s; }
body.hero-dark .social:nth-child(3) { animation-delay: 0.9s; }

body.hero-dark .hero-dark-skills i {
    animation: iconGlow 2.8s ease-in-out infinite;
    display: inline-block;
    will-change: filter;
}
body.hero-dark .hero-dark-skills li:nth-child(2) i { animation-delay: 0.35s; }
body.hero-dark .hero-dark-skills li:nth-child(3) i { animation-delay: 0.7s; }
body.hero-dark .hero-dark-skills li:nth-child(4) i { animation-delay: 1.05s; }
body.hero-dark .hero-dark-skills li:nth-child(5) i { animation-delay: 1.4s; }

body.hero-dark .skill-icon,
body.hero-dark .about-card h3 i,
body.hero-dark .highlight-item i {
    animation: iconGlow 3s ease-in-out infinite;
    display: inline-block;
    will-change: filter;
}
body.hero-dark .about-card:nth-of-type(2) h3 i { animation-delay: 0.4s; }
body.hero-dark .about-card:nth-of-type(3) h3 i { animation-delay: 0.8s; }
body.hero-dark .highlight-item:nth-child(2) i { animation-delay: 0.35s; }
body.hero-dark .highlight-item:nth-child(3) i { animation-delay: 0.7s; }
body.hero-dark .highlight-item:nth-child(4) i { animation-delay: 1.05s; }

/* ---------------------------------------------------------
   3. TEMA ESCURO GLOBAL
   --------------------------------------------------------- */
body.hero-dark {
    background: #050b18 !important;
    color: #dbe7f5 !important;
}

body.hero-dark section,
body.hero-dark footer { position: relative; z-index: 1; }

body.hero-dark .sec-title { color: #eef4fc; }
body.hero-dark .sec-desc { color: rgba(226,236,248,0.92) !important; }
/* label da secao: azul solido. Sem background, sem background-clip:text
   (o gradiente com clip vira barra cheia no fundo escuro) e sem ::after. */
body.hero-dark .sec-label {
    color: #5cc0ff;
    background: none;
    -webkit-text-fill-color: #5cc0ff;
}

/* protecao de texto sobre o video de fundo: como a tinta foi reduzida para
   deixar o video mais visivel, o texto que nao tem card precisa de sombra
   propria para manter o contraste sem escurecer o fundo. */
body.hero-dark .sec-label,
body.hero-dark .sec-title,
body.hero-dark .sec-desc,
body.hero-dark .hero-dark-eyebrow,
body.hero-dark .hero-dark-lead,
body.hero-dark .hero-dark-skills li {
    text-shadow: 0 2px 14px rgba(2, 8, 4, 0.88), 0 1px 3px rgba(2, 8, 4, 0.72);
}

/* Cartoes: fundo solido em vez de backdrop-filter.
   backdrop-filter sobre video animado obriga o navegador a refazer o
   blur da area a cada quadro do video, em varias camadas sobrepostas —
   era o maior custo de GPU da pagina. As camadas de tinta do video ja
   escurecem o fundo, entao um alpha maior nao perde o efeito visual. */
body.hero-dark .about-card,
body.hero-dark .project-card,
body.hero-dark .highlight-item,
body.hero-dark .skill-item,
body.hero-dark .proj3-grid > div {
    background: rgba(11, 23, 42, 0.93) !important;
    border: 1px solid rgba(90,170,255,0.16) !important;
    box-shadow: 0 10px 34px rgba(0,0,0,0.42) !important;
}
body.hero-dark .about-card:hover,
body.hero-dark .project-card:hover,
body.hero-dark .skill-item:hover {
    border-color: rgba(71,195,255,0.42) !important;
    box-shadow: 0 14px 44px rgba(0,0,0,0.55) !important;
}

body.hero-dark .about-card h3,
body.hero-dark .highlight-item h3,
body.hero-dark .highlight-item h4,
body.hero-dark .skill-item h4,
body.hero-dark .proj3-grid h4 { color: #eaf2fb !important; }
body.hero-dark .about-card p,
body.hero-dark .highlight-item p,
body.hero-dark .skill-item p,
body.hero-dark .proj3-grid p { color: rgba(226,236,248,0.92) !important; }
body.hero-dark .about-card li,
body.hero-dark .highlight-item li { color: rgba(226,236,248,0.92) !important; }
body.hero-dark .about-card li::marker,
body.hero-dark .highlight-item li::marker { color: #35a0f5; }

body.hero-dark .project-thumbs,
body.hero-dark .proj3-imgs {
    background: rgba(10,20,38,0.7) !important;
    border-color: rgba(90,170,255,0.14) !important;
}

body.hero-dark .btn-secondary {
    background: rgba(255,255,255,0.04) !important;
    border: 1.5px solid #35a0f5 !important;
    color: #eaf2fb !important;
}
body.hero-dark .btn-secondary:hover { background: rgba(53,160,255,0.14) !important; }

body.hero-dark .profile-wrap::after { background: #071124; }
body.hero-dark .profile-wrap { box-shadow: 0 0 0 2px rgba(71,195,255,0.25); }

body.hero-dark footer {
    background: rgba(8,18,34,0.95) !important;
}
body.hero-dark footer p { color: rgba(226,236,248,0.92) !important; }
body.hero-dark footer p:first-child { color: #eef4fc !important; }

body.hero-dark #projetos p[style*="rgba(50,49,48"] { color: rgba(226,236,248,0.92) !important; }
body.hero-dark footer p[style*="#201f1e"] { color: #eef4fc !important; }
body.hero-dark footer p[style*="rgba(50,49,48"] { color: rgba(226,236,248,0.92) !important; }

/* ---------- PROJETOS (cards + listas) ---------- */
body.hero-dark .project-info h3 {
    /* ATENCAO: usar background-image (nao o shorthand "background"),
       senao o background-clip:text e resetado e o titulo vira barra. */
    background-image: linear-gradient(135deg, #8fd8ff 0%, #2f86e0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #4aa9ff;
}
body.hero-dark .project-info p {
    /* tom azul-acinzentado: legivel sem ofuscar */
    color: rgba(226,236,248,0.92) !important;
}
body.hero-dark .project-info ul li {
    background: rgba(53,160,245,0.14) !important;
    border: 1px solid rgba(71,195,255,0.28) !important;
    color: rgba(232,241,252,0.92) !important;
}
/* <strong> inline nos <li>: vira titulo em linha propria */
body.hero-dark .project-info ul li strong,
body.hero-dark .project-info strong {
    display: block;
    color: #6cc6ff !important;
    margin-bottom: 2px;
}
/* conteudo dos chips que nao tem strong */
body.hero-dark .project-info ul li { color: rgba(226,236,248,0.92) !important; }

/* divisor entre projetos: visivel no tema escuro, com folga acima e abaixo
   para separar o Projeto 1 do Projeto 2 */
body.hero-dark .project-divider {
    display: block !important;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(71,195,255,0.30), rgba(53,160,245,0.22), transparent);
    margin: 4rem 0 4.5rem;
}

/* area da imagem / zoom */
body.hero-dark .project-visual {
    background: rgba(10,20,38,0.75) !important;
    border: 1px solid rgba(90,170,255,0.16) !important;
}
body.hero-dark .project-visual .zoom {
    background: rgba(5,11,24,0.85) !important;
    color: #5cc0ff !important;
}

/* proj3 (grid de projetos) */
body.hero-dark .proj3-grid h4 { color: #eaf2fb !important; }
body.hero-dark .proj3-grid p { color: rgba(226,236,248,0.92) !important; }
body.hero-dark .proj3-imgs { background: rgba(10,20,38,0.7) !important; }

/* modal */
body.hero-dark .modal { background: rgba(3,8,18,0.94) !important; }
body.hero-dark .modal .close { color: #dbe7f5 !important; }

body.hero-dark ::-webkit-scrollbar-track { background: #071124; }
body.hero-dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #35a0f5, #1f6fc4);
    border-radius: 9999px;
    border: 2px solid #071124;
}
body.hero-dark ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #5cc0ff, #2f86e0);
}

body.hero-dark.modal-open { overflow: hidden; }

/* ---------------------------------------------------------
   4. MOVIMENTO REDUZIDO / ECONOMIA DE RECURSOS
   Quem pede menos movimento (ou economiza dados) nao recebe
   video nem animacoes infinitas — o layout continua identico.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .dc-video { display: none; }
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
    .slide-card { opacity: 1 !important; transform: none !important; transition: none !important; }
    body.hero-dark .social,
    body.hero-dark .hero-dark-skills i,
    body.hero-dark .skill-icon,
    body.hero-dark .about-card h3 i,
    body.hero-dark .highlight-item i,
    .profile-wrap::before,
    .hero-dark-title .accent,
    .globe-link { animation: none !important; }
}