/* Cookies: hero full-bleed (jarra de vidro). O poster SVG (assets/ill/legal-cookies-hero.svg) e sempre o primeiro
   paint; o canvas Three.js (js/cookies-hero.js) entra por cima com crossfade. Sem circulos nem retangulos duros:
   so gradientes lineares (esquerda escura para o texto, base fundindo com a proxima secao).
   Carrega DEPOIS de page-legal.css (nao editado): aqui se substitui a coluna .legal-hero-art pelo fundo. */
.page-hero--cookies {
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: min(52rem, calc(100svh - var(--nav-height)));
}
.page-hero--cookies .page-hero__grid {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr);
}
.page-hero--cookies .page-hero__copy { max-width: min(34rem, 100%); }

/* Poster: a antiga coluna da arte vira o fundo do hero inteiro. */
.page-hero--cookies .cookies-hero__poster {
    position: absolute;
    inset: 0;
    z-index: -2;
    order: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    pointer-events: none;
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1);
}
.page-hero--cookies .cookies-hero__poster img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
    transform: none;
}
.page-hero--cookies .cookies-hero__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);
}
.page-hero--cookies.is-cookies-ready .cookies-hero__canvas { opacity: 1; }
.page-hero--cookies.is-cookies-ready .cookies-hero__poster { opacity: 0; }

/* Mascara LINEAR (a mesma no poster e no canvas, sem circulo): a cena esmaece para o fundo escuro onde fica
   o texto (esquerda) e na base, onde o hero encontra a proxima secao. */
.page-hero--cookies .cookies-hero__poster,
.page-hero--cookies .cookies-hero__canvas {
    -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;
}
.page-hero--cookies::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent calc(100% - 120px), var(--night)),
        linear-gradient(90deg, rgb(16 13 9 / .96) 0%, rgb(16 13 9 / .82) 26%, transparent 56%);
}

@media (max-width: 768px) {
    .page-hero--cookies {
        min-height: min(52rem, calc(100svh - var(--nav-height)));
        align-items: end;
    }
    .page-hero--cookies .cookies-hero__poster { z-index: 0; }
    .page-hero--cookies .cookies-hero__canvas { z-index: 1; }
    .page-hero--cookies::after { z-index: 2; }
    .page-hero--cookies .page-hero__grid { z-index: 3; }
    .page-hero--cookies .cookies-hero__poster img { inset: 0; width: 100%; height: 100%; object-position: center; transform: none; }
    .page-hero--cookies .cookies-hero__poster,
    .page-hero--cookies .cookies-hero__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;
    }
    .page-hero--cookies::after {
        background: linear-gradient(180deg, rgb(16 13 9 / .12) 0%, rgb(16 13 9 / .22) 70%, var(--night) 100%);
    }
}

/* Sem WebGL, sem JS ou movimento reduzido: fica so o poster SVG estatico. */
@media (prefers-reduced-motion: reduce) {
    .page-hero--cookies .cookies-hero__canvas { display: none; }
    .page-hero--cookies.is-cookies-ready .cookies-hero__poster { opacity: 1; }
}