/* Cor base do hero — teal escuro da marca */
:root {
    --veil-base: #122b32;
    --veil-base-rgb: 18, 43, 50;
    --veil-glow: rgba(28, 68, 78, 0.22);
    --veil-glow-strong: rgba(34, 82, 92, 0.32);
}

.darkveil-canvas {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 2;
    opacity: 0.42;
    /* Neutraliza o verde-limão do shader → teal escuro da marca */
    filter: saturate(0.22) hue-rotate(-32deg) brightness(0.72) contrast(1.05);
}

.hero-veil {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: var(--veil-base);
}

/* Brilho estático no canto (reforça o mesh do shader) */
.hero-veil::before {
    content: '';
    position: absolute;
    right: -8%;
    bottom: -15%;
    width: min(72vw, 720px);
    height: min(85vh, 640px);
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        ellipse at 55% 55%,
        var(--veil-glow-strong) 0%,
        var(--veil-glow) 28%,
        transparent 68%
    );
}

/* Legibilidade à esquerda; direita deixa o DarkVeil aparecer */
.hero-veil-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            100deg,
            rgba(var(--veil-base-rgb), 0.88) 0%,
            rgba(var(--veil-base-rgb), 0.62) 40%,
            rgba(var(--veil-base-rgb), 0.38) 62%,
            rgba(var(--veil-base-rgb), 0.18) 82%
        ),
        linear-gradient(to top, rgba(var(--veil-base-rgb), 0.55) 0%, transparent 32%);
}

.hero-section--no-veil .hero-veil::before {
    opacity: 0.6;
}

/* Vídeos verticais 9:16 nas laterais do hero (gutters) — só em telas grandes */
.hero-side-video {
    display: none;
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: clamp(240px, calc((100vw - 980px) / 2), 480px);
    aspect-ratio: 9 / 16;
    object-fit: cover;
    pointer-events: none;
    opacity: 0.92;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.hero-side-video--left {
    left: 0;
    -webkit-mask-image:
        linear-gradient(to top, transparent 0%, #000 14%, #000 86%, transparent 100%),
        linear-gradient(to right, #000 55%, transparent 100%);
    mask-image:
        linear-gradient(to top, transparent 0%, #000 14%, #000 86%, transparent 100%),
        linear-gradient(to right, #000 55%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.hero-side-video--right {
    right: 0;
    -webkit-mask-image:
        linear-gradient(to top, transparent 0%, #000 14%, #000 86%, transparent 100%),
        linear-gradient(to left, #000 55%, transparent 100%);
    mask-image:
        linear-gradient(to top, transparent 0%, #000 14%, #000 86%, transparent 100%),
        linear-gradient(to left, #000 55%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* Vídeo único central — só na faixa do notebook (disfarçado no fundo) */
.hero-center-video {
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: clamp(240px, 26vw, 380px);
    aspect-ratio: 9 / 16;
    object-fit: cover;
    pointer-events: none;
    opacity: 0.32;
    /* Funde os tons do vídeo com o teal do fundo */
    mix-blend-mode: luminosity;
    filter: blur(0.4px);
    /* Máscara radial: dissolve em todas as bordas, virando textura sutil */
    -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 52%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 72% 78% at 50% 52%, #000 30%, transparent 78%);
}

/* Notebook (1025–1499px): um vídeo central */
@media (min-width: 1025px) and (max-width: 1499px) {
    .hero-center-video {
        display: block;
    }
}

/* Telas grandes (≥1500px): dois vídeos laterais */
@media (min-width: 1500px) {
    .hero-side-video {
        display: block;
    }
}

/* Mobile: overlay mais uniforme para legibilidade do título e formulário */
@media (max-width: 768px) {
    .hero-veil-overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(var(--veil-base-rgb), 0.92) 0%,
                rgba(var(--veil-base-rgb), 0.78) 45%,
                rgba(var(--veil-base-rgb), 0.85) 100%
            );
    }

    .hero-veil::before {
        width: 100%;
        height: 50%;
        right: 0;
        bottom: 0;
        opacity: 0.5;
    }
}