/* ================================================================
   SAVON — AMBIENTE DA PÁGINA.
   Um único fundo para a home inteira, não um por seção. É por isso
   que não existe mais "corte entre blocos": não há duas superfícies
   para desalinhar — há uma só, e as seções são transparentes por
   cima dela.

   A camada é `absolute` sobre o BODY (não `fixed`): assim ela tem a
   altura do documento e os halos podem morar em porcentagens da
   PÁGINA, sem uma linha de JS e sem custo por quadro. Sem JS o
   ambiente continua exatamente igual.

   Prefixo --sv- / .sv-page. Escopo body.savon.
   ================================================================ */
:root {
    /* ---- território SAVON claro: a paleta que a S02 já usava,
            promovida a token de PÁGINA para a S03 herdar a mesma
            luz em vez de reinventá-la ---- */
    --sv-ivory:      #FBF7F0;
    --sv-cream:      #F7F0E4;
    --sv-pearl:      #FAF4F1;
    --sv-champagne:  #F0E3C4;
    --sv-blush:      #F7E8EE;

    /* tinta editorial sobre claro (contraste medido sobre --sv-ivory:
       ink ≈ 14:1 · body ≈ 7.5:1 · gold-ink ≈ 5.1:1 · rose-ink ≈ 5.5:1) */
    --sv-ink:        #241A12;
    --sv-body:       #57493C;
    --sv-gold-ink:   #7E5B1F;
    --sv-rose-ink:   #A83D66;
    --sv-hair:       rgba(36, 26, 18, 0.16);
    --sv-hair-soft:  rgba(36, 26, 18, 0.09);
}

/* a camada precisa de um contêiner: o próprio body */
body.savon { position: relative; }

.sv-page {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}

/* ---------- base: a temperatura do branco muda ao longo da queda,
     nunca em degraus. O primeiro trecho fica CHAPADO no marfim até
     depois do Hero — é nele que a dissolução de saída do Hero
     entrega, e qualquer deriva ali reapareceria como emenda. ---- */
.sv-page__base {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        var(--sv-ivory)      0px,
        var(--sv-ivory)      calc(100vh + 140px),
        #FAF3E7              34%,
        #FAF5EC              44%,
        var(--sv-pearl)      58%,
        #FAF4EE              76%,
        var(--sv-cream)      92%,
        #F5EADB              100%);
}

/* ---------- halos: profundidade, não marcação. São largos e de
     opacidade baixa de propósito — devem ser sentidos como ambiente,
     não lidos como manchas. O quente cai na altura em que a
     Mademoiselle domina a cena; o rosé, na da Butterfly. ---- */
.sv-page__warm {
    position: absolute; left: -14%; right: 34%;
    /* a página cresceu (Duo, uso, FAQ, fecho): as alturas em % foram
       remedidas para o quente continuar caindo na cena da Mademoiselle
       e o rosé na da Butterfly / entrada do Duo */
    top: 28%; height: 24%;
    background: radial-gradient(closest-side ellipse at 50% 50%,
        rgba(226, 186, 116, 0.12) 0%,
        rgba(230, 196, 132, 0.05) 46%,
        rgba(230, 196, 132, 0) 78%);
}
.sv-page__rose {
    position: absolute; left: 30%; right: -14%;
    top: 44%; height: 24%;
    background: radial-gradient(closest-side ellipse at 50% 50%,
        rgba(226, 150, 178, 0.1) 0%,
        rgba(232, 168, 190, 0.04) 46%,
        rgba(232, 168, 190, 0) 78%);
}
/* respiro de luz no alto do território claro: o olho chega do Hero
   escuro e precisa de um centro luminoso para pousar */
.sv-page__glow {
    position: absolute; left: 0; right: 0;
    top: calc(100vh - 40px); height: 62vh;
    background: radial-gradient(58% 62% at 50% 30%,
        rgba(255, 253, 249, 0.92) 0%, rgba(255, 253, 249, 0) 70%);
}

/* ---------- grão: dose mínima, só para matar o banding dos
     gradientes. `multiply` porque sobre branco `overlay` morre. ---- */
.sv-page__grain {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: 0.026; mix-blend-mode: multiply;
}

/* as seções vivem SOBRE o ambiente */
/* EMPILHAMENTO DA CORTINA — o Hero fica pinado no topo e a S02 sobe
   POR CIMA dele. Para isso ela precisa estar acima na pilha; o header
   (z 50) e a camada do match cut (z 40) continuam acima das duas. */
.sv-hero  { position: relative; z-index: 1; }
.sv-moment { position: relative; z-index: 2; }
.sv-offer  { position: relative; z-index: 3; }

@media (max-width: 900px) {
    /* na vertical os halos precisam ser mais altos e menos largos,
       senão viram duas faixas horizontais atravessando a tela */
    .sv-page__warm { left: -30%; right: 8%;  top: 24%; height: 20%; }
    .sv-page__rose { left: 8%;   right: -30%; top: 40%; height: 20%; }
    .sv-page__glow { height: 46vh; }
    .sv-page__grain { opacity: 0.022; }
}