/* Tudo aqui depende do html.anima, que o <head> só põe quando o sistema não pede
   menos movimento. Sem ele vale o estado final, parado e inteiro. */
:root{
  --mov-saida:cubic-bezier(.16,1,.3,1);
  --mov-mao:cubic-bezier(.45,.05,.35,1);
  --mov-manso:cubic-bezier(.33,1,.68,1);
}

html.anima .sobe{opacity:0;transform:translateY(15px);transition:opacity .7s ease,transform .7s ease}
html.anima .sobe.vis{opacity:1;transform:none}
@media (max-width:640px){
  html.anima .sobe{transition-duration:.45s}
}

/* o --t de cada passo e o --mov-linha são calculados no movimento.js */
@media (min-width:1081px){
  html.anima .metodo__passos::before{left:calc(50% - 50vw);right:auto;width:100vw;
    clip-path:inset(0 100% 0 0)}
  html.anima .metodo__passos.mov-feito::before{clip-path:inset(0 0 0 0);
    transition:clip-path var(--mov-linha,1.6s) linear}
}
html.anima .metodo__ponto{opacity:0;
  transform:translateY(-12px) rotate(calc(var(--giro,0deg) * 3)) scale(1.06);
  box-shadow:0 1px 0 rgba(46,42,50,.04),0 16px 24px rgba(46,42,50,.20)}
html.anima :is(.metodo__passos.mov-feito,.metodo__passo.mov-feito) .metodo__ponto{
  opacity:1;transform:translateY(0) rotate(var(--giro,0deg)) scale(1);
  box-shadow:0 1px 0 rgba(46,42,50,.10),0 6px 14px rgba(46,42,50,.28);
  transition:opacity .2s linear var(--t,0s),
             transform .6s var(--mov-saida) var(--t,0s),
             box-shadow .6s var(--mov-saida) var(--t,0s)}
html.anima .metodo__passo :is(.metodo__nome,p){opacity:0;translate:0 8px}
html.anima :is(.metodo__passos.mov-feito,.metodo__passo.mov-feito) :is(.metodo__nome,p){
  opacity:1;translate:0 0;
  transition:opacity .5s ease calc(var(--t,0s) + .18s),
             translate .7s var(--mov-saida) calc(var(--t,0s) + .18s)}
@media (max-width:1080px){
  html.anima .metodo__passo:not(:last-child)::before{clip-path:inset(0 0 100% 0)}
  html.anima .metodo__passo.mov-feito:not(:last-child)::before{clip-path:inset(0 0 0 0);
    transition:clip-path .5s linear calc(var(--t,0s) + .3s)}
}
/* no celular, a metade do tempo; o intervalo entre passos (450ms) está no movimento.js */
@media (max-width:640px){
  html.anima .metodo__passo.mov-feito .metodo__ponto{
    transition:opacity .12s linear var(--t,0s),transform .3s var(--mov-saida) var(--t,0s),
               box-shadow .3s var(--mov-saida) var(--t,0s)}
  html.anima .metodo__passo.mov-feito :is(.metodo__nome,p){
    transition:opacity .3s ease calc(var(--t,0s) + .1s),translate .35s var(--mov-saida) calc(var(--t,0s) + .1s)}
  html.anima .metodo__passo.mov-feito:not(:last-child)::before{
    transition:clip-path .25s linear calc(var(--t,0s) + .15s)}
}

html.anima .mrc{background-size:0% 100%;background-repeat:no-repeat;
  background-position:0 50%}
html.anima .mrc.mov-feito{background-size:100% 100%;
  transition:background-size 1.6s var(--mov-mao) var(--t-mrc,.3s)}
html.anima #agenda .mrc{color:var(--papel)}
html.anima #agenda .mrc.mov-feito{color:var(--tinta);
  transition:background-size 1.6s var(--mov-mao) var(--t-mrc,.3s),
             color .3s ease calc(var(--t-mrc,.3s) + 1.35s)}
/* a cor da letra anda junto com a ponta do grifo. Grifo e letra em duas peças (::before e
   o elemento): as duas camadas no mesmo elemento o Firefox pinta como um bloco chapado */
@supports (background-clip:text) or (-webkit-background-clip:text){
  html.anima #agenda .mrc{position:relative;color:transparent;
    background:linear-gradient(90deg,var(--tinta) 0 50%,var(--papel) 50% 100%)
               100% 0 / 200% 100% no-repeat;
    -webkit-background-clip:text;background-clip:text}
  html.anima #agenda .mrc::before{content:'';position:absolute;inset:0;z-index:-1;
    border-radius:inherit;pointer-events:none;
    background:linear-gradient(101deg,rgba(150,160,133,0) .3%,var(--salvia) 1.8%,
                               var(--salvia) 98.2%,rgba(150,160,133,0) 99.7%)
               0 50% / 0% 100% no-repeat}
  html.anima #agenda .mrc.mov-feito{background-position:0% 0;
    transition:background-position 1.6s var(--mov-mao) var(--t-mrc,.3s),
               color .01s linear calc(var(--t-mrc,.3s) + 1.65s)}
  html.anima #agenda .mrc.mov-feito::before{background-size:100% 100%;
    transition:background-size 1.6s var(--mov-mao) var(--t-mrc,.3s)}
}
@media (max-width:640px){
  html.anima #agenda .mrc.mov-feito{
    transition:background-size 1.2s var(--mov-mao) .15s,color .3s ease 1.3s}
  @supports (background-clip:text) or (-webkit-background-clip:text){
    html.anima #agenda .mrc.mov-feito{
      transition:background-position 1.2s var(--mov-mao) .15s,color .01s linear 1.4s}
    html.anima #agenda .mrc.mov-feito::before{transition:background-size 1.2s var(--mov-mao) .15s}
  }
}

html.anima .escuta__sub{position:relative;background-image:none}
html.anima .escuta__sub::after{content:'';position:absolute;left:0;right:0;bottom:0;
  height:11px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.4C34 3.1 62 10.6 96 6.2c30-3.9 62 2.4 102 1.1' fill='none' stroke='%237D688F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 11px no-repeat;
  clip-path:inset(0 100% 0 0)}
html.anima .escuta__sub.mov-feito::after{clip-path:inset(0 0 0 0);
  transition:clip-path 2.2s var(--mov-mao) var(--t-sub,.15s)}
@media (max-width:640px){
  html.anima .mrc.mov-feito{transition:background-size 1.2s var(--mov-mao) .15s}
  html.anima .escuta__sub.mov-feito::after{transition:clip-path 1.6s var(--mov-mao) .1s}
}

html.anima .cal__d,
html.anima .cal__h{transition:background-color .16s ease,color .16s ease,transform .12s ease}
html.anima button.cal__d:active,
html.anima .cal__h:active{transform:scale(.95)}
html.anima .cal__passo:not([hidden]){animation:mov-passo .3s var(--mov-saida) both}
html.anima .cal[data-mov-dir="volta"] .cal__passo:not([hidden]){animation-name:mov-passo-volta}
html.anima #calFeito:not([hidden]){animation:mov-recibo .5s var(--mov-saida) both}
@keyframes mov-passo{from{opacity:0;translate:16px 0}}
@keyframes mov-passo-volta{from{opacity:0;translate:-16px 0}}
@keyframes mov-recibo{from{opacity:0;translate:0 10px}}
html.anima .agenda__espera[data-estado="carregando"] p::before{content:'';display:block;
  width:117px;height:1.5px;margin:0 auto 16px;
  background:repeating-linear-gradient(90deg,rgba(46,42,50,.5) 0 7px,transparent 7px 13px);
  animation:mov-costurando 2.4s steps(9,end) infinite}
@keyframes mov-costurando{0%{clip-path:inset(0 100% 0 0)}75%,100%{clip-path:inset(0 0 0 0)}}

html.anima .menu a,
html.anima .pe a{position:relative;transition:color .2s ease}
html.anima .menu a::after,
html.anima .pe a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px);
  clip-path:inset(0 100% 0 0);transition:clip-path .35s var(--mov-saida)}
html.anima :is(.menu,.pe) a:focus-visible::after{clip-path:inset(0 0 0 0)}
@media (max-width:1080px){
  html.anima .pe a::after{bottom:9px}
}
@media (hover:hover){
  html.anima :is(.menu,.pe) a:hover::after{clip-path:inset(0 0 0 0)}
}

/* --haste: o ponto de giro, medido no canal alfa de cada arquivo. Trocou a imagem, mede de novo */
.fb-b1{--haste:97.5% 99.9%;--vento:2.4s;--fase:-1.4s}
.fb-b2{--haste:39.3% 99.9%;--vento:3s;--fase:-3.9s}
.fb-b3{--haste:68.4% 99.2%;--vento:2.7s;--fase:-.6s}
.abre__rosa{--haste:68.4% 99.2%;--vento:3.6s;--fase:-2.2s;--giro-vento:3deg}
.fe-b1{--haste:58.5% 99.2%;--vento:2.8s;--fase:-.9s}
.fe-b2{--haste:36.9% 99.6%;--vento:2.5s;--fase:-2.7s}
.fe-b3{--haste:36.4% 99.6%;--vento:3.1s;--fase:-1.8s}
html.anima :is(.fb-b1,.fb-b2,.fb-b3) img,
html.anima .abre__rosa img,
html.anima :is(.fe-b1,.fe-b2,.fe-b3) img{transform-origin:var(--haste);
  animation:mov-vento var(--vento) ease-in-out var(--fase) infinite alternate}
/* depois da regra de cima: o atalho `animation` zera o play-state */
html.anima :is(.bot,.abre__rosa).mov-quieta img{animation-play-state:paused}
@keyframes mov-vento{
  from{rotate:calc(var(--giro-vento,4deg) * -1)}
  to{rotate:var(--giro-vento,4deg)}}

/* a foto dela aparece em fade quando termina de carregar (o movimento.js marca .carregada) */
html.anima .abre__fundo>img{opacity:0}
html.anima .abre__fundo>img.carregada{opacity:1;animation:mov-surge .7s ease}
@keyframes mov-surge{from{opacity:0}}

html.anima .colcha .ret{opacity:0;translate:0 30px;rotate:var(--entra,3deg);scale:.94}
html.anima .colcha.mov-feito .ret{opacity:1;translate:0 0;rotate:0deg;scale:1;
  transition:opacity .8s ease var(--t,0s),translate 1.5s var(--mov-manso) var(--t,0s),
             rotate 1.5s var(--mov-manso) var(--t,0s),scale 1.5s var(--mov-manso) var(--t,0s)}
.colcha .ret:nth-child(1){--t:.15s;--entra:-4deg}
.colcha .ret:nth-child(2){--t:.33s;--entra:3deg}
.colcha .ret:nth-child(3){--t:.51s;--entra:-3deg}
.colcha .ret:nth-child(4){--t:.69s;--entra:4deg}
.colcha .ret:nth-child(5){--t:.87s;--entra:-2deg}
.colcha .ret:nth-child(6){--t:1.05s;--entra:3deg}
html.anima .colcha .costura{clip-path:inset(0 100% 0 0)}
html.anima .colcha.mov-feito .costura{clip-path:inset(0 0 0 0);transition:clip-path 1.3s linear 1.7s}
@media (max-width:640px){
  html.anima .colcha.mov-feito .ret{transition-duration:.4s,.75s,.75s,.75s}
  .colcha .ret:nth-child(1){--t:.08s}
  .colcha .ret:nth-child(2){--t:.17s}
  .colcha .ret:nth-child(3){--t:.26s}
  .colcha .ret:nth-child(4){--t:.35s}
  .colcha .ret:nth-child(5){--t:.44s}
  .colcha .ret:nth-child(6){--t:.53s}
  html.anima .colcha.mov-feito .costura{transition:clip-path .65s linear .85s}
}

html.anima .fe-esq{translate:10% 0}
html.anima .fe-dir{translate:-10% 0}
html.anima .leituras.mov-feito :is(.fe-esq,.fe-dir){translate:0 0;
  transition:translate 2.4s var(--mov-manso) .1s}
html.anima .leituras__livro{opacity:0;translate:0 16px}
html.anima .leituras.mov-feito .leituras__livro{opacity:1;translate:0 0;
  transition:opacity .7s ease var(--t-livro,1.5s),
             translate .9s var(--mov-saida) var(--t-livro,1.5s)}
/* os livros saem quando a cortina já fez ~94% do caminho (curva mansa, 2,4s) */
.leituras__livro:nth-child(2){--t-livro:1.65s}
.leituras__livro:nth-child(3){--t-livro:1.8s}
.leituras__livro:nth-child(4){--t-livro:1.95s}
/* no celular: a cortina abre quando o título aparece, e cada livro entra sozinho quando chega
   na tela (o movimento.js marca um por um) */
@media (max-width:640px){
  html.anima .leituras.mov-feito :is(.fe-esq,.fe-dir){transition-duration:1.6s}
  html.anima .leituras.mov-feito .leituras__livro:not(.mov-feito){opacity:0;translate:0 16px}
  html.anima .leituras__livro.mov-feito,
  html.anima .leituras.mov-feito .leituras__livro.mov-feito{opacity:1;translate:0 0;
    transition:opacity .35s ease,translate .45s var(--mov-saida)}
}