/* an · "Antes da sessão" — a noite do site. Gesto: a luz da mesa acende quando a seção entra. */
.an-secao{background:linear-gradient(180deg in oklab,#191d26 0%,var(--noite) 22%,var(--noite) 100%)}
.an-luz{position:absolute;z-index:-2;right:-10vw;top:4%;width:min(84vw,76rem);aspect-ratio:1.15;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side in oklab,rgb(39 49 79 / .55),rgb(39 49 79 / 0))}
.an-grade{position:relative}
.an-cabeca{position:relative;z-index:2}
.an-titulo{font-size:clamp(2.6rem,5.7vw,5.25rem);line-height:.96}
.an-corpo{position:relative;z-index:2;width:min(33rem,42vw);margin-top:clamp(3rem,6vw,5.5rem)}

/* a foto: grande, à direita, encostada no fim da seção; dissolve na noite em cima e dos lados.
   Embaixo não há máscara: a frente da mesa na foto já é a cor da noite, e a borda do tampo fica inteira. */
.an-cena{position:absolute;z-index:-1;right:calc(-1 * var(--margem) - max(0px,(100vw - 76rem - 2 * var(--margem)) / 2));bottom:calc(-1 * var(--sec));width:min(72vw,70rem);margin:0}
.an-foto{position:relative;display:block;width:100%;height:auto;aspect-ratio:1186/1068;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 88%,transparent 100%)}
/* a cortina da foto continua para cima (a primeira linha de pixels, esticada) e some na noite atrás do título */
.an-cortina{position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:62%;pointer-events:none;background:url("../img/an-cortina.webp") 0 0/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 88%,transparent 100%),linear-gradient(0deg,#000 0%,rgb(0 0 0 / .45) 45%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 88%,transparent 100%),linear-gradient(0deg,#000 0%,rgb(0 0 0 / .45) 45%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* o tampo continua para a esquerda, por baixo do texto, até sumir */
.an-mesa{position:absolute;right:68%;width:100vw;top:80%;height:14.1%;pointer-events:none;
  background:linear-gradient(180deg in oklab,rgb(44 50 66 / 0) 0%,rgb(44 50 66 / .72) 100%);
  border-bottom:1px solid rgb(201 204 217 / .2);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,#000 70%)}
/* gesto: a luz acende (sem deslocar) */
.wf-js .an-cena[data-entra]{opacity:.12;transform:none;filter:brightness(.5) saturate(.5);transition:opacity 2.8s var(--lento),filter 3.2s var(--lento)}
.wf-js .an-cena[data-entra].wf-visto{opacity:1;filter:none}

.an-dele{font-size:clamp(1.75rem,3.3vw,3.1rem);line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
.an-frase{margin:0}
.an-texto{margin-top:clamp(2rem,3.4vw,3rem)}
/* os quatro verbos da frase dele, no fio com um ponto cada (o fio do hero) */
.an-passos{margin:1.5rem 0 0;font-size:var(--t-texto);line-height:1.45;color:var(--tinta-suave)}
.an-passos p{position:relative;padding-left:1.7rem}
.an-passos p::before{content:"";position:absolute;left:3px;top:1.35rem;bottom:1.9rem;width:1px;background:var(--fio)}
.an-passo{display:block;position:relative;padding:.55rem 0}
.an-passo::before{content:"";position:absolute;left:-1.7rem;top:1.28rem;width:7px;height:7px;border-radius:50%;background:var(--vinho-claro)}
.an-passo strong{font-family:var(--serifa);font-weight:400;font-size:1.5em;line-height:1.1;letter-spacing:-.005em;color:var(--tinta);margin-right:.1em}
.an-e{font-family:var(--sans);font-size:.6667em;letter-spacing:0;color:var(--tinta-suave)}
.an-q{quotes:"“" "”";color:var(--tinta)}
.an-fecho{margin-top:clamp(2rem,3.4vw,3rem);font-family:var(--serifa);font-style:italic;font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.2;color:var(--tinta)}
.an-fecho q{quotes:"“" "”"}

@media (max-width:899px){
  .an-br{display:none}
  .an-secao{padding-bottom:clamp(4rem,12vw,6rem)}
  .an-corpo{width:auto;max-width:36rem;margin-top:0}
  .an-cena{position:relative;z-index:0;right:auto;bottom:auto;width:auto;max-width:36rem;margin:1.25rem calc(-1 * var(--margem)) 0}
  .an-mesa{display:none}
  .an-cortina{height:34%;background-image:url("../img/an-cortina-vertical.webp");
    -webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 100%);mask-image:linear-gradient(0deg,#000 0%,transparent 100%)}
  .an-passo{padding:.6rem 0}
  .an-passo strong{display:block;margin:0 0 .15rem}
  .an-passo::before{top:1.2rem}
  .an-foto{aspect-ratio:790/1010;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 100%)}
  .an-frase{margin-top:-2rem}
  .an-luz{right:-30vw;top:14%;width:150vw}
}
@media (min-width:600px) and (max-width:899px){
  .an-foto{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 100%),linear-gradient(90deg,#000 0%,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 100%),linear-gradient(90deg,#000 0%,#000 74%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
  .an-cortina{-webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 100%),linear-gradient(90deg,#000 0%,#000 74%,transparent 100%);mask-image:linear-gradient(0deg,#000 0%,transparent 100%),linear-gradient(90deg,#000 0%,#000 74%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
}