/**
 * Efeitos de fundo do header (área abaixo da foto de perfil)
 * Aplicados em .profile-header-bg com classe .header-effect-{nome}
 * Carregado após o CSS do template para ter prioridade.
 */

.profile-page .profile-header-bg {
    border-radius: 0 0 2rem 2rem;
    overflow: hidden;
}

/* Em TODOS os templates: mostrar área de efeito quando um efeito estiver ativo (não "nenhum").
   Especificidade igual ou maior à dos templates que usam display:none no .profile-header-bg. */
.profile-page.template-2 .profile-header-bg:not(.header-effect-none),
.profile-page.template-5 .profile-header-bg:not(.header-effect-none),
.profile-page.template-6 .profile-header-bg:not(.header-effect-none),
.profile-page.template-7 .profile-header-bg:not(.header-effect-none),
.profile-page.template-8 .profile-header-bg:not(.header-effect-none),
.profile-page.template-9 .profile-header-bg:not(.header-effect-none),
.profile-page.template-10 .profile-header-bg:not(.header-effect-none),
.profile-page.template-11 .profile-header-bg:not(.header-effect-none),
.profile-page.template-12 .profile-header-bg:not(.header-effect-none),
.profile-page.template-13 .profile-header-bg:not(.header-effect-none),
.profile-page.template-14 .profile-header-bg:not(.header-effect-none),
.profile-page.template-15 .profile-header-bg:not(.header-effect-none) {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
}

/* Regra geral para templates que não escondem o bg (ex.: 1, 3, 4) */
.profile-page .profile-header-bg:not(.header-effect-none) {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* Garantir que o header tenha posição relativa para o absolute do bg funcionar */
.profile-page .profile-header {
    position: relative !important;
}

/* Quando há efeito ativo, deixar o fundo do header transparente para o efeito aparecer (todos os templates) */
.profile-page .profile-header:has(.profile-header-bg:not(.header-effect-none)) {
    background: transparent !important;
}

/* Conteúdo do header sempre acima do efeito */
.profile-page .profile-header .profile-info {
    position: relative;
    z-index: 1;
}

/* Template 2 (Cartão): mostrar área de efeito atrás do header quando efeito não for "nenhum" */
.profile-page.template-2 .profile-header {
    position: relative !important;
}
.profile-page.template-2 .profile-header-bg:not(.header-effect-none) {
    display: block !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    border-radius: 20px !important;
    overflow: hidden;
}
/* Deixar fundo do header transparente quando há efeito para o efeito aparecer */
.profile-page.template-2 .profile-header:has(.profile-header-bg:not(.header-effect-none)) {
    background: transparent !important;
}
.profile-page.template-2 .profile-info {
    position: relative;
    z-index: 1;
}

/* Template 4 (Escuro): forçar efeitos a vencerem o background: transparent !important do template */
.profile-page.template-4 .profile-header-bg.header-effect-none {
    background: transparent !important;
}

/* Nenhum: transparente/sólido suave */
.profile-page .profile-header-bg.header-effect-none {
    background: transparent !important;
}

/* Gradiente com brilho animado */
.profile-page .profile-header-bg.header-effect-gradient-shine {
    background: linear-gradient(
        135deg,
        rgba(var(--primary-color-rgb, 220, 20, 60), 0.08) 0%,
        rgba(var(--primary-color-rgb, 220, 20, 60), 0.03) 50%,
        transparent 100%
    ) !important;
    animation: gradientShine 8s ease-in-out infinite;
}

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

/* Malha suave (grid de gradientes) */
.profile-page .profile-header-bg.header-effect-mesh {
    background: 
        radial-gradient(at 40% 20%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.12) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.08) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.06) 0px, transparent 50%) !important;
    background-color: transparent !important;
}

/* Pontos animados */
.profile-page .profile-header-bg.header-effect-dots {
    background-image: radial-gradient(circle at 20% 30%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.25) 2px, transparent 2px),
                      radial-gradient(circle at 60% 70%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.2) 2px, transparent 2px),
                      radial-gradient(circle at 80% 20%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.15) 2px, transparent 2px) !important;
    background-size: 40px 40px, 60px 60px, 50px 50px;
    animation: dotsMove 20s linear infinite;
}

@keyframes dotsMove {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 40px 0, 60px 0, 50px 0; }
}

/* Ondas suaves */
.profile-page .profile-header-bg.header-effect-waves {
    background: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23dc143c' fill-opacity='0.06' d='M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,138.7C672,128,768,160,864,165.3C960,171,1056,149,1152,138.7C1248,128,1344,128,1392,128L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom center,
        transparent !important;
    background-size: cover;
    opacity: 0.9;
}

/* Grid sutil */
.profile-page .profile-header-bg.header-effect-grid {
    background-image: 
        linear-gradient(rgba(var(--primary-color-rgb, 220, 20, 60), 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-color-rgb, 220, 20, 60), 0.06) 1px, transparent 1px) !important;
    background-size: 24px 24px;
}

/* Aurora (gradiente animado) */
.profile-page .profile-header-bg.header-effect-aurora {
    background: linear-gradient(
        125deg,
        rgba(var(--primary-color-rgb, 220, 20, 60), 0.1) 0%,
        transparent 25%,
        rgba(var(--primary-color-rgb, 220, 20, 60), 0.05) 50%,
        transparent 75%,
        rgba(var(--primary-color-rgb, 220, 20, 60), 0.08) 100%
    ) !important;
    background-size: 200% 200%;
    animation: aurora 12s ease infinite;
}

@keyframes aurora {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Radial suave */
.profile-page .profile-header-bg.header-effect-radial {
    background: radial-gradient(
        ellipse 120% 100% at 50% 0%,
        rgba(var(--primary-color-rgb, 220, 20, 60), 0.12) 0%,
        rgba(var(--primary-color-rgb, 220, 20, 60), 0.04) 40%,
        transparent 70%
    ) !important;
}

/* Textura noise (simulada com padrão) */
.profile-page .profile-header-bg.header-effect-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E") !important;
    background-color: transparent !important;
}

/* Template 4 (Escuro): repetir cada efeito com seletor mais específico para vencer o template */
.profile-page.template-4 .profile-header-bg.header-effect-gradient-shine { background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 220, 20, 60), 0.12) 0%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.05) 50%, transparent 100%) !important; }
.profile-page.template-4 .profile-header-bg.header-effect-mesh { background: radial-gradient(at 40% 20%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.15) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.1) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.08) 0px, transparent 50%) !important; background-color: transparent !important; }
.profile-page.template-4 .profile-header-bg.header-effect-dots { background-image: radial-gradient(circle at 20% 30%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.3) 2px, transparent 2px), radial-gradient(circle at 60% 70%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.25) 2px, transparent 2px), radial-gradient(circle at 80% 20%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.2) 2px, transparent 2px) !important; background-size: 40px 40px, 60px 60px, 50px 50px; }
.profile-page.template-4 .profile-header-bg.header-effect-waves { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23dc143c' fill-opacity='0.08' d='M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,138.7C672,128,768,160,864,165.3C960,171,1056,149,1152,138.7C1248,128,1344,128,1392,128L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom center, transparent !important; background-size: cover; }
.profile-page.template-4 .profile-header-bg.header-effect-grid { background-image: linear-gradient(rgba(var(--primary-color-rgb, 220, 20, 60), 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--primary-color-rgb, 220, 20, 60), 0.08) 1px, transparent 1px) !important; background-size: 24px 24px; }
.profile-page.template-4 .profile-header-bg.header-effect-aurora { background: linear-gradient(125deg, rgba(var(--primary-color-rgb, 220, 20, 60), 0.12) 0%, transparent 25%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.06) 50%, transparent 75%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.1) 100%) !important; background-size: 200% 200%; animation: aurora 12s ease infinite; }
.profile-page.template-4 .profile-header-bg.header-effect-radial { background: radial-gradient(ellipse 120% 100% at 50% 0%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.15) 0%, rgba(var(--primary-color-rgb, 220, 20, 60), 0.06) 40%, transparent 70%) !important; }
.profile-page.template-4 .profile-header-bg.header-effect-noise { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E") !important; background-color: transparent !important; }

/* Dark mode: suavizar opacidades */
.dark-mode .profile-page .profile-header-bg.header-effect-gradient-shine,
.dark-mode .profile-page .profile-header-bg.header-effect-mesh,
.dark-mode .profile-page .profile-header-bg.header-effect-dots,
.dark-mode .profile-page .profile-header-bg.header-effect-waves,
.dark-mode .profile-page .profile-header-bg.header-effect-grid,
.dark-mode .profile-page .profile-header-bg.header-effect-aurora,
.dark-mode .profile-page .profile-header-bg.header-effect-radial {
    opacity: 0.85;
}