/* doce — a seção escura cereja-vinho: o doce fica, comido devagar */
.do{padding-top:0}
/* palco: o café em cima, a renda embaixo, a frase entre os dois (e sobre a renda) */
.do-palco{position:relative;min-height:clamp(760px,118vh,1180px);display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(200px,24vw,340px) clamp(150px,16vw,260px)}
.do-cafe,.do-renda{margin:0;position:absolute;left:0;right:0;overflow:hidden;z-index:-1;pointer-events:none}
.do-cafe{top:0;height:clamp(300px,36vw,560px);-webkit-mask:linear-gradient(#000 30%, transparent 98%);mask:linear-gradient(#000 30%, transparent 98%)}
.do-renda{bottom:0;height:clamp(260px,30vw,460px);-webkit-mask:linear-gradient(transparent 0%, #000 55%, #000 80%, transparent 100%);mask:linear-gradient(transparent 0%, #000 55%, #000 80%, transparent 100%)}
.do-cafe img,.do-renda img{width:100%;height:100%;object-fit:cover}
.do-cafe img{object-position:40% 50%;filter:saturate(.7) brightness(.8) contrast(1.05)}
.do-renda img{object-position:50% 62%;filter:saturate(.55) brightness(.62) contrast(1.1)}
/* véu de vinho por cima das fotos: a seção inteira fica no mesmo tom */
.do-cafe::after,.do-renda::after{content:"";position:absolute;inset:0;background:#8f1a2c;mix-blend-mode:multiply;opacity:.55}

.do-frase{position:relative;z-index:2}
.do-titulo{margin:0;font-weight:400}
.do-antes{display:block;font-family:var(--serifa);font-size:var(--t-voz);line-height:1.22;max-width:22em;text-wrap:balance;color:rgb(var(--tinta-rgb) / .94);
  text-shadow:0 2px 30px rgb(36 7 13 / .6)}
.do-gig{display:block;font-family:var(--serifa);font-size:clamp(3.3rem,1rem + 9.2vw,11rem);line-height:.94;letter-spacing:-.028em;margin-top:.32em;max-width:10em;
  text-shadow:0 4px 50px rgb(36 7 13 / .55)}
.do-pto{display:inline-block;width:.15em;height:.15em;border-radius:50%;background:var(--acento);margin-left:.04em;vertical-align:baseline;
  box-shadow:0 0 .25em .04em color-mix(in oklab, var(--luz) 80%, transparent), 0 0 1.3em .35em color-mix(in oklab, var(--luz) 35%, transparent)}
.do-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.do-quem{margin:1.8em 0 0;font-size:var(--t-rot);letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--suave-rgb))}

/* as manias */
.do-manias{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(36px,6vw,110px);margin-top:clamp(70px,10vh,130px)}
.do-manias-titulo{font-family:var(--serifa);font-weight:400;font-size:var(--t-sec);line-height:1.05;margin:.35em 0 0;text-wrap:balance}
.do-manias-titulo span{display:block;color:rgb(var(--suave-rgb));font-size:.55em;margin-top:.4em}
/* as manias em texto corrido, como ela escreve na legenda: uma depois da outra */
.do-manias{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
.do-corrido{margin:0;font-family:var(--serifa);font-size:clamp(1.45rem,1rem + 1.25vw,2.35rem);line-height:1.38;color:rgb(var(--tinta-rgb));text-wrap:pretty}
.do-m{display:inline}
.do-m small{font-family:var(--sans);font-size:max(.95rem,.5em);letter-spacing:.01em;color:rgb(var(--suave-rgb));white-space:nowrap}
.do-m small::before{content:"(";}
.do-m small::after{content:")"}
.do-m + .do-m::before{content:"";display:inline-block;width:.2em;height:.2em;border-radius:50%;border:1px solid rgb(var(--tinta-rgb) / .55);
  margin:0 .55em;vertical-align:.22em}
/* comer fora */
.do-fora{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:center;margin-top:clamp(80px,12vh,150px)}
.do-sushi{aspect-ratio:1100/1037;width:min(100%,560px);justify-self:end;background:#24070d}
.do-sushi img{filter:saturate(.82) brightness(.9)}
.do-voz{margin:.5em 0 1em}
.do-voz p{margin:0}
.do-botao{margin-top:.6em}

/* gesto: a frase chega devagar, palavra por palavra, conforme a rolagem */
.do-antes .do-p{transition:opacity .9s var(--ease)}
.js .do-antes .do-p{opacity:.16}
.js .do-antes .do-p.on{opacity:1}
.js .do-gig{opacity:0;translate:0 14px;transition:opacity 1.6s var(--ease), translate 1.6s var(--ease)}
.js .do-gig.on{opacity:1;translate:none}
.js .do-pto{scale:0;transition:scale 1.2s var(--ease) 1.2s}
.js .do-gig.on .do-pto{scale:1;animation:do-brilha 4.5s ease-in-out 2.6s infinite alternate}
@keyframes do-brilha{to{box-shadow:0 0 .35em .08em color-mix(in oklab, var(--luz) 90%, transparent), 0 0 2em .6em color-mix(in oklab, var(--luz) 45%, transparent)}}

@media (max-width:760px){
  .do-palco{min-height:0;padding-block:66vw 46vw}
  .do-cafe{height:96vw;-webkit-mask:linear-gradient(#000 45%, transparent 98%);mask:linear-gradient(#000 45%, transparent 98%)}
  .do-cafe img{object-position:68% 50%;filter:saturate(.75) brightness(.95)}
  .do-cafe::after{opacity:.4}
  .do-m small{white-space:normal}
  .do-renda{height:66vw}
  .do-manias,.do-fora{grid-template-columns:1fr}
  .do-sushi{justify-self:center;width:88%}
}
@media (prefers-reduced-motion:reduce){
  .js .do-antes .do-p,.js .do-gig,.js .do-pto{opacity:1;translate:none;scale:1;transition:none;animation:none}
}