/* Privacidad: hero 3D full-bleed. O SVG (.legal-hero-art) e a 1a pintura; o canvas entra por cima com crossfade.
   Mascara so LINEAR (esquerda para o texto, base para o rodape). Nao depende de editar page-legal.css. */
.hero-3d {
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: min(52rem, calc(100svh - var(--nav-height)));
    background: linear-gradient(160deg, #17120b, var(--night) 66%);
}
.hero-3d .page-hero__grid,
.hero-3d .page-hero__grid:has(.legal-hero-art) { grid-template-columns: minmax(0, 1fr); }
.hero-3d .page-hero__copy { position: relative; }
.hero-3d .legal-hero-art { position: absolute; inset: 0; z-index: -2; margin: 0; padding: 0; min-height: 0; }
.hero-3d .legal-hero-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1);
}
.hero-3d .hero3d-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1);
    -webkit-mask-image:
        linear-gradient(90deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .2) 22%, rgb(0 0 0 / .62) 42%, #000 60%),
        linear-gradient(180deg, #000 0, #000 calc(100% - 150px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .2) 22%, rgb(0 0 0 / .62) 42%, #000 60%),
        linear-gradient(180deg, #000 0, #000 calc(100% - 150px), transparent 100%);
    mask-composite: intersect;
}
.hero-3d.is-hero3d-ready .hero3d-canvas { opacity: 1; }
.hero-3d.is-hero3d-ready .legal-hero-art img { opacity: 0; }
@media (max-width: 768px) {
    .hero-3d { min-height: min(52rem, calc(100svh - var(--nav-height))); }
    .hero-3d .legal-hero-art { z-index: 0; }
    .hero-3d .hero3d-canvas { z-index: 1; }
    .hero-3d .page-hero__copy { z-index: 2; }
    .hero-3d .page-hero__copy::before {
        content: ''; position: absolute; inset: -1rem -1rem; z-index: -1; pointer-events: none;
        background: linear-gradient(180deg, transparent 0%, transparent 58%, rgb(16 13 9 / .3) 78%, var(--night) 100%);
    }
    .hero-3d .legal-hero-art img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; }
    .hero-3d .hero3d-canvas {
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
        -webkit-mask-composite: source-over;
        mask-composite: add;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-3d .hero3d-canvas { display: none; }
    .hero-3d.is-hero3d-ready .legal-hero-art img { opacity: 1; }
}
@media (max-width: 768px) { .hero-3d .legal-hero-art img { filter: brightness(1.25) saturate(1.05); } }
