/*--------------------------------------------------------------
# PROFUNDIDADE.CSS — Camada de textura e relevo · CoudFy
# Carregar SEMPRE por último (depois de mobile.css).
#
# Este arquivo não muda estrutura nem paleta: só tira o preto chapado.
# Três recursos, todos em azul de baixíssima opacidade:
#   01 — Grão de filme global (textura)
#   02 — Vinhetas de seção (luz ambiente)
#   03 — Elevação de superfícies (brilho de topo + sombra)
#
# Para voltar ao preto liso, basta remover o <link> do index.php.
--------------------------------------------------------------*/


/* ========================================
   01 — GRÃO DE FILME
   Ruído SVG fixo sobre a página inteira. Mata a
   sensação de "vazio digital" do preto puro sem
   introduzir nenhuma cor.
   ======================================== */
body::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.038;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.9'/></svg>");
    background-size: 160px 160px;
}

/* Respeita quem pediu menos movimento/efeito */
@media (prefers-reduced-motion: reduce) {
    body::after { opacity: 0.02; }
}


/* ========================================
   02 — LUZ DE TOPO CONTÍNUA
   O fundo do topo da página é pintado no BODY, não
   em cada seção. Assim navbar, hero e o carrossel
   "Nossos Projetos" ficam sob a mesma luz — sem
   faixa preta chapada e sem corte visível entre eles.
   ======================================== */
/* html com cor própria: impede o body de "vazar" o fundo para o
   canvas do navegador e garante que a luz fique ancorada no topo. */
html { background-color: var(--color-black); }

body {
    background-color: transparent;
    background-image:
        radial-gradient(ellipse 75% 100% at 50% 0%,
            rgba(37,99,235,0.098) 0%,
            rgba(37,99,235,0.034) 45%,
            transparent 78%);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 100% 1600px;
}

/* Navbar sem fundo próprio — a pill flutua sobre a luz do topo */
.navbar-desktop { background: transparent; }

/* Hero e carrossel de projetos ficam transparentes:
   quem pinta é o body, então não existe emenda. */
.hero-section {
    background-color: transparent;
    background-image: none;
}


/* ========================================
   03 — VINHETAS DE SEÇÃO
   Cada seção ganha uma fonte de luz própria, em
   posição diferente, para o olho perceber que
   trocou de bloco ao rolar a página.
   Todas com fundo TRANSPARENTE — nenhuma seção
   pinta preto por cima da luz da anterior.
   ======================================== */
.bio-section,
.imgs-section,
.skills-section,
.reel-section,
.mobile-app-section,
.footer {
    background-color: transparent;
}

/* Bio — luz pela esquerda */
.bio-section {
    border-top: 1px solid rgba(37,99,235,0.104);
    background-image:
        radial-gradient(ellipse 55% 60% at 8% 30%,  rgba(37,99,235,0.049) 0%, transparent 65%),
        radial-gradient(ellipse 45% 50% at 95% 90%, rgba(37,99,235,0.029) 0%, transparent 70%);
}

/* Galeria de imagens — luz pela direita */
.imgs-section {
    background-image:
        radial-gradient(ellipse 55% 55% at 92% 25%, rgba(37,99,235,0.049) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 5% 85%,  rgba(37,99,235,0.027) 0%, transparent 70%);
}

/* Soluções — duas fontes opostas, seção mais longa */
.skills-section {
    border-top: 1px solid rgba(37,99,235,0.104);
    background-image:
        radial-gradient(ellipse 50% 35% at 12% 12%, rgba(37,99,235,0.049) 0%, transparent 65%),
        radial-gradient(ellipse 50% 35% at 88% 62%, rgba(37,99,235,0.041) 0%, transparent 65%);
}

/* Reels — luz baixa, para os vídeos ficarem em destaque */
.reel-section {
    background-image:
        radial-gradient(ellipse 70% 45% at 50% 8%, rgba(37,99,235,0.044) 0%, transparent 70%);
}

/* Mentoria / planos — halo central */
.mentoria-section {
    border-top: 1px solid rgba(37,99,235,0.104);
    background-image:
        radial-gradient(ellipse 65% 45% at 50% 0%,   rgba(37,99,235,0.054) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 15% 100%, rgba(37,99,235,0.029) 0%, transparent 70%);
}

/* App mobile — reforça o glow que já existia */
.mobile-app-section {
    background-image:
        radial-gradient(ellipse 55% 55% at 20% 25%, rgba(37,99,235,0.058) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 85% 75%, rgba(37,99,235,0.039) 0%, transparent 65%);
}

/* Footer — clareia levemente na base, fecha a página */
.footer {
    background-image:
        radial-gradient(ellipse 70% 90% at 50% 100%, rgba(37,99,235,0.049) 0%, transparent 70%);
}


/* Faixa "Nossos Projetos" — fica entre o hero e a galeria.
   Sem fundo próprio ela caía num preto morto no meio de duas
   áreas iluminadas. Recebe a continuação da luz do hero,
   decaindo de cima para baixo até encontrar a galeria. */
.projetos-strip {
    padding: 40px 0 0;
    position: relative;
    background-image:
        linear-gradient(180deg,
            rgba(37,99,235,0.044) 0%,
            rgba(37,99,235,0.021) 45%,
            rgba(37,99,235,0.008) 80%,
            transparent 100%),
        radial-gradient(ellipse 60% 90% at 50% 0%, rgba(37,99,235,0.034) 0%, transparent 70%);
}


/* ========================================
   03b — CARROSSEL INFINITO — BORDAS
   As laterais eram cobertas por um degradê preto
   sólido, que denunciava o corte sobre um fundo com
   luz. Trocado por máscara: some de verdade, seja
   qual for o fundo atrás.
   ======================================== */
.infinite-carousel-wrapper {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
}

.infinite-carousel-wrapper::before,
.infinite-carousel-wrapper::after { display: none; }


/* ========================================
   03 — ELEVAÇÃO DE SUPERFÍCIES
   Cards deixam de ser retângulos chapados: ganham
   um fio de luz no topo (como se a luz da seção
   batesse na borda) e sombra embaixo.
   ======================================== */
.cf-plan-card,
.mobile-app-feature,
.benefit-item,
.faq-item,
.skill-visual-card,
.contact-form-wrapper,
.eco-flow-card {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0.008) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 18px 42px rgba(0,0,0,0.7);
}

/* O card em destaque dos planos fica um degrau acima */
.cf-plan-featured {
    background-image: linear-gradient(180deg, rgba(37,99,235,0.065) 0%, rgba(255,255,255,0.015) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 24px 60px rgba(0,0,0,0.8);
}

/* Inputs afundados — o oposto do card, reforça a hierarquia */
.cf-input,
.pm-field input,
.pm-field textarea {
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}

/* Modais flutuando bem acima do fundo */
.pm-modal {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.045),
        0 40px 100px rgba(0,0,0,0.85);
}


/* ========================================
   04 — MOBILE
   No celular a tela é menor: menos grão e vinhetas
   mais concentradas, senão vira mancha cinza.
   ======================================== */
@media (max-width: 768px) {
    body::after { opacity: 0.03; }

    /* Luz de topo mais curta — a tela é menor */
    body { background-size: 100% 900px; }

    .hero-section { background-image: none; }

    .projetos-strip {
        padding: 30px 0 0;
        background-image: linear-gradient(180deg, rgba(37,99,235,0.034) 0%, transparent 100%);
    }

    .bio-section,
    .imgs-section,
    .skills-section,
    .reel-section,
    .mentoria-section,
    .mobile-app-section {
        background-image: radial-gradient(ellipse 120% 40% at 50% 0%, rgba(37,99,235,0.044) 0%, transparent 70%);
    }

    .cf-plan-card,
    .mobile-app-feature,
    .benefit-item,
    .faq-item,
    .skill-visual-card,
    .contact-form-wrapper,
    .eco-flow-card {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.045),
            0 12px 28px rgba(0,0,0,0.65);
    }
}