/* Movimento da Senhora Cestas Finas (base, vale para toda página).
   Referência: HTMLmentor (JavaScript próprio, animação ligada à rolagem, faixa que corre).
   Regras: só transform, opacity e clip-path. Curvas de saída fortes. Nada anima em ação frequente
   (menu, botões) além do retorno de toque. Tudo desligado com prefers-reduced-motion. */

:root{--mv-ease:cubic-bezier(.16,1,.3,1)}

/* progresso de leitura: fio dourado logo abaixo do cabeçalho */
.progresso{position:fixed;left:0;right:0;top:calc(var(--cab-h) + env(safe-area-inset-top,0px));height:2px;z-index:49;pointer-events:none}
.progresso i{display:block;height:100%;background:var(--ouro);transform:scaleX(var(--rolagem,0));transform-origin:left}
.cab{transition:box-shadow 240ms var(--ease)}
.cab[data-rolou="true"]{box-shadow:0 10px 28px rgba(43,24,20,.22)}

/* palavras que sobem numa máscara (o título é escrito já dividido no HTML, sem depender de script) */
.pl{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.pl>span{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .pl>span{animation:mv-palavra 900ms var(--mv-ease) backwards;animation-delay:calc(60ms + var(--i,0) * 60ms)}
  @keyframes mv-palavra{from{transform:translate3d(0,112%,0)}}
  /* entrada do topo, só com CSS e só com transform: o texto já está visível no primeiro quadro (não parte de opacidade 0,
     o que atrasaria o LCP) e a animação só desloca */
  .mv-carga{animation:mv-carga 800ms var(--mv-ease) backwards;animation-delay:calc(60ms + var(--i,0) * 70ms)}
  @keyframes mv-carga{from{transform:translate3d(0,20px,0)}}
  .mv-foto-carga{animation:mv-foto-carga 1300ms var(--mv-ease) backwards;animation-delay:calc(300ms + var(--i,0) * 130ms)}
  @keyframes mv-foto-carga{from{clip-path:inset(100% 0 0 0 round var(--r-img))}to{clip-path:inset(0 round var(--r-img))}}

  /* entradas por rolagem: o script marca os alvos com data-mv e adiciona .mv-in ao aparecerem */
  html.js [data-mv]{transition:opacity 800ms var(--mv-ease) calc(var(--i,0) * 80ms),transform 900ms var(--mv-ease) calc(var(--i,0) * 80ms),clip-path 1200ms var(--mv-ease) calc(var(--i,0) * 80ms)}
  html.js [data-mv="up"]{opacity:0;transform:translate3d(0,36px,0)}
  html.js [data-mv="foto"]{opacity:0;clip-path:inset(12% 8% 12% 8% round var(--r-img));transform:scale(.97)}
  html.js [data-mv="linha"]{transform:scaleX(0);transform-origin:left}
  /* subida suave e lenta (Infantis e Dia das Crianças) */
  html.js [data-mv="suave"]{opacity:0;transform:translate3d(0,18px,0);transition:opacity 900ms var(--mv-ease) calc(var(--i,0) * 90ms),transform 1000ms var(--mv-ease) calc(var(--i,0) * 90ms)}
  html.js [data-mv].mv-in{opacity:1;transform:none}
  html.js [data-mv="foto"].mv-in{clip-path:inset(0 round var(--r-img))}
}

/* paralaxe: usa a propriedade translate, que não briga com transform */
[data-paralaxe]{translate:0 var(--py,0px)}
@media(prefers-reduced-motion:reduce){[data-paralaxe]{translate:none}}

/* faixa que corre (como a do HTMLmentor). Pausa ao passar o mouse e quando sai da tela. */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__faixa{display:flex;width:max-content;gap:var(--s3);animation:mv-marquee 55s linear infinite}
.marquee__faixa>*{flex:none}
.marquee.is-idle .marquee__faixa{animation-play-state:paused}
@media(hover:hover){.marquee:hover .marquee__faixa{animation-play-state:paused}}
@keyframes mv-marquee{to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__faixa{animation:none;width:auto;flex-wrap:wrap}
  .marquee__faixa [aria-hidden="true"]{display:none}
}

/* celular (90% do público): a faixa não corre. Fica parada, sem a cópia escondida, e a que tem itens largos vira uma fileira que se arrasta com o dedo. */
@media(max-width:899px){
  .marquee{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
  .marquee::-webkit-scrollbar{display:none}
  .marquee__faixa{animation:none}
  .marquee__faixa [aria-hidden="true"]{display:none}
}

/* abrir e fechar do +: altura animada onde o navegador já sabe (Chrome recente). Nos outros, abre sem animação. */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  @media(prefers-reduced-motion:no-preference){
    details::details-content{block-size:0;overflow:clip;transition:block-size 320ms var(--ease),content-visibility 320ms allow-discrete}
    details[open]::details-content{block-size:auto}
  }
}