/* Camada de movimento da Portlink Wash Go Barão (rodada 4).
   Só vale com html.mo-on, que o movimento.js liga quando o aparelho NÃO pede "reduzir movimento".
   Usa as propriedades translate/scale (separadas de transform) para não brigar com as animações do design. */

html.mo-on .mo-up{opacity:0;translate:0 28px;transition:opacity .75s cubic-bezier(.2,.8,.2,1) var(--mo-d,0s),translate .85s cubic-bezier(.2,.8,.2,1) var(--mo-d,0s)}
html.mo-on .mo-up.mo-in{opacity:1;translate:0 0}

html.mo-on .mo-pop{opacity:0;scale:.82;transition:opacity .55s ease var(--mo-d,0s),scale .7s cubic-bezier(.34,1.56,.64,1) var(--mo-d,0s)}
html.mo-on .mo-pop.mo-in{opacity:1;scale:1}

html.mo-on .mo-side{opacity:0;translate:-26px 0;transition:opacity .7s ease var(--mo-d,0s),translate .85s cubic-bezier(.2,.8,.2,1) var(--mo-d,0s)}
html.mo-on .mo-side.mo-in{opacity:1;translate:0 0}

/* foto em moldura: abre de dentro para fora, com zoom recuando */
html.mo-on .mo-frame{clip-path:inset(14% 12% 14% 12% round 22px);scale:1.14;filter:saturate(.75) brightness(1.06);transition:clip-path 1.1s cubic-bezier(.65,0,.15,1) var(--mo-d,0s),scale 1.5s cubic-bezier(.2,.8,.2,1) var(--mo-d,0s),filter 1.2s ease var(--mo-d,0s)}
html.mo-on .mo-frame.mo-in{clip-path:inset(0 0 0 0 round 0);scale:1;filter:none}

/* parallax: a foto fica um pouco maior que a moldura e desliza com a rolagem (translate vem do JS) */
html.mo-on .mo-par{scale:1.12;will-change:translate}
html.mo-on .mo-frame.mo-par.mo-in{scale:1.12}

/* faixa de brilho que passa uma vez sobre cards grandes ao entrarem */
html.mo-on .mo-shine{position:relative;overflow:hidden}
html.mo-on .mo-shine::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);translate:-120% 0;z-index:2}
html.mo-on .mo-shine.mo-in::after{animation:moShine 1.25s cubic-bezier(.4,0,.2,1) calc(var(--mo-d,0s) + .35s) 1 both}
@keyframes moShine{to{translate:120% 0}}

@media (prefers-reduced-motion:reduce){
  html.mo-on .mo-up,html.mo-on .mo-pop,html.mo-on .mo-side,html.mo-on .mo-frame,html.mo-on .mo-par{opacity:1!important;translate:none!important;scale:none!important;clip-path:none!important;filter:none!important;transition:none!important}
  html.mo-on .mo-shine::after{display:none}
}