/* Seção: a outra metade da cirurgia (o pós-operatório, nas palavras dela)
   A frase dela é partida em duas: a oração da cirurgia fica apagada, a do pós-operatório acende.
   A fita de LED é a prateleira das duas; na metade dela, a toalha bordada pende da fita. */
.metade{position:relative;z-index:3;isolation:isolate;overflow:hidden;background:var(--basalto);color:var(--creme-escuro);
  margin-top:-2.4rem;border-radius:2.4rem 2.4rem 0 0;padding:calc(var(--respiro) * .9) var(--margem) calc(var(--respiro) + 2.4rem)}
.mt-luz{position:absolute;inset:0;z-index:-2;background:radial-gradient(48% 60% at 74% 52% in oklch,rgba(247,207,145,.3),transparent 72%);transition:opacity 1.8s .3s}
.mt-dentro{max-width:var(--largura);margin:0 auto}
.metade .olho{color:var(--ambar)}
.mt-palco{margin-top:clamp(2rem,5vw,3.6rem);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto auto 1fr}
.mt-frase{display:contents;font-family:var(--display)}
.mt-f1,.mt-f2{display:block;align-self:end;padding-bottom:clamp(1rem,2.4vw,1.8rem);text-wrap:balance}
.mt-f1{grid-column:1;grid-row:1;padding-right:2.2rem;font-size:clamp(1.6rem,2.7vw,2.6rem);line-height:1.08;letter-spacing:-.012em;color:rgba(243,228,209,.5)}
.mt-f2{grid-column:2;grid-row:1;font-size:clamp(2.8rem,6.9vw,6.8rem);line-height:.95;letter-spacing:-.025em;color:var(--led);text-shadow:0 0 70px rgba(247,207,145,.4);transition:color 1.6s .5s,text-shadow 1.6s .5s}
.mt-fita{display:block;grid-row:2;height:5px;border-radius:5px;background:rgba(243,228,209,.14)}
.mt-fita.acesa{background:var(--led);box-shadow:0 0 22px 8px rgba(255,210,140,.8),0 0 80px 28px rgba(247,190,110,.4);transition:background 1.2s .3s,box-shadow 1.6s .3s}
.mt-lado{grid-row:3;padding-top:clamp(1.4rem,2.6vw,2.1rem)}
.mt-lado h3{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mt-lado p{margin-top:.8rem;font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.6}
.mt-antes{grid-column:1;padding-right:2.2rem;display:flex;flex-direction:column;color:rgba(243,228,209,.58)}
.mt-antes p{max-width:28ch}
.mt-antes .mt-pre{margin-top:auto;padding-top:2.2rem;color:#e6d3bf}
.mt-antes .mt-pre b{display:block;font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.2;color:var(--ambar);margin-bottom:.35rem}
.mt-antes .mt-de{margin-top:1.3rem;padding-top:1rem;border-top:1px solid rgba(243,228,209,.14);font-size:.82rem;line-height:1.5;color:rgba(243,228,209,.64)}
.mt-depois{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) clamp(13rem,24vw,21rem);column-gap:clamp(1.6rem,4vw,4rem)}
.mt-depois h3{color:var(--ambar)}
.mt-depois p{max-width:38ch;color:#eedccb}
.mt-acao{margin-top:clamp(1.6rem,3vw,2.3rem)}
.metade .btn{background:var(--creme);color:var(--basalto)}
.metade .btn:hover{background:var(--pink);color:#fff}
/* a toalha pendurada na fita acesa: dobra no alto, e um balanço só, quando a luz acende */
.mt-toalha{position:relative;margin:calc(-1 * clamp(1.4rem,2.6vw,2.1rem) - 3px) 0 0;transform-origin:50% 0;transform:rotate(1.4deg)}
.mt-toalha::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5rem;z-index:1;background:linear-gradient(180deg,rgba(40,24,14,.5),rgba(40,24,14,0));pointer-events:none}
.mt-toalha img{display:block;width:100%;height:auto;border-radius:0 0 1.4rem 1.4rem;box-shadow:0 36px 60px -26px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.12)}
.mt-toalha figcaption{margin-top:1rem;font-size:.84rem;line-height:1.45;color:#d2b79f}
.js .mt-palco.visto .mt-toalha{animation:balanca 3.4s .5s cubic-bezier(.3,.6,.4,1) both}
@keyframes balanca{0%{transform:rotate(-5deg)}22%{transform:rotate(4.6deg)}44%{transform:rotate(-1.6deg)}66%{transform:rotate(2.6deg)}84%{transform:rotate(.9deg)}100%{transform:rotate(1.4deg)}}
/* antes de entrar na tela, a metade dela está apagada como a outra */
.js .mt-palco[data-r]{opacity:1;transform:none}
.js .mt-palco:not(.visto) .mt-f2{color:rgba(243,228,209,.5);text-shadow:none}
.js .mt-palco:not(.visto) .mt-fita.acesa{background:rgba(243,228,209,.14);box-shadow:none}
.js .metade:has(.mt-palco:not(.visto)) .mt-luz{opacity:0}
@media (max-width:860px){
  .metade{border-radius:1.6rem 1.6rem 0 0;margin-top:-1.6rem}
  .mt-palco{display:flex;flex-direction:column;margin-top:1.6rem}
  .mt-f1{order:1;padding:0 0 1rem;font-size:clamp(1.45rem,6.2vw,2rem)}
  .mt-fita{order:2;flex:none;width:100%}
  .mt-antes{order:3;padding-right:0}
  .mt-antes p{max-width:none}
  .mt-antes .mt-pre{padding-top:1.4rem}
  .mt-f2{order:4;padding:3.2rem 0 1.1rem;font-size:clamp(2.9rem,13.4vw,4.2rem)}
  .mt-fita.acesa{order:5}
  .mt-depois{order:6;display:block}
  .mt-lado{padding-top:1.2rem}
  .mt-toalha{width:66%;margin:2.6rem 0 0 auto}
  .mt-toalha::before{display:none}
  .mt-toalha img{border-radius:1.2rem}
  .mt-luz{background:radial-gradient(100% 34% at 60% 56% in oklch,rgba(247,207,145,.26),transparent 72%)}
}
@media (min-width:600px) and (max-width:860px){
  .mt-toalha{width:44%}
}
