/* CASACA: camada de movimento. Só liga com html.mov (motion.js) e sem "reduzir movimento". */
.barra-progresso{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--acao);transform:scaleX(0);transform-origin:0 50%;z-index:40;pointer-events:none}

/* hero */
.mov .hero-img{transform:scale(1.14);transition:transform 2.4s var(--ease);will-change:transform}
.mov .hero.pronto .hero-img{transform:scale(1.02)}
.mov .hero-txt h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.mov .hero-txt h1 .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease)}
.mov .hero.pronto h1 .w>span{transform:none}
.mov .hero-sub,.mov .hero-txt .btn,.mov .hero-txt .seguranca{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.mov .hero.pronto .hero-sub{opacity:1;transform:none;transition-delay:.55s}
.mov .hero.pronto .btn{opacity:1;transform:none;transition-delay:.7s}
.mov .hero.pronto .seguranca{opacity:1;transform:none;transition-delay:.85s}
.rolar-dica{position:absolute;left:50%;bottom:22px;z-index:1;width:2px;height:44px;margin-left:-1px;background:rgba(255,255,255,.25);overflow:hidden}
.rolar-dica::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:#fff;animation:dica 1.8s var(--ease) infinite}
@keyframes dica{to{top:100%}}

/* títulos de seção: palavra por palavra */
.mov .tit-mov .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.mov .tit-mov .w>span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--ease)}
.mov .tit-mov.visto .w>span{transform:none}

/* entrada ao rolar */
.mov .sobe{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.mov .sobe.visto{opacity:1;transform:none}

/* vitrine */
.card-img{isolation:isolate}
.card-ver{position:absolute;left:50%;bottom:14px;z-index:1;transform:translate(-50%,12px);opacity:0;background:var(--card);color:var(--texto);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;border-radius:var(--pilula);transition:opacity .3s var(--ease),transform .3s var(--ease);white-space:nowrap}
.card:hover .card-ver,.card:focus-visible .card-ver{opacity:1;transform:translate(-50%,0)}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease);pointer-events:none}
.card:hover .card-img::after{transform:translateX(120%)}
.mov .card.entra{animation:cardEntra .7s var(--ease) both}
@keyframes cardEntra{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}

/* histórias: o ano se preenche da esquerda para a direita */
.mov .ano-cheio{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--ease) .2s}
.mov .marco.visto .ano-cheio{clip-path:inset(0 0 0 0)}
.mov .marco .marco-txt,.mov .marco .marco-img{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.mov .marco.visto .marco-txt{opacity:1;transform:none;transition-delay:.35s}
.mov .marco.visto .marco-img{opacity:1;transform:none;transition-delay:.5s}

/* numerada: foto que abre */
.mov .num-in img{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ease)}
.mov .num-in.visto img{clip-path:inset(0 0 0 0)}
.num-foto{overflow:hidden;border-radius:var(--raio)}
.num-foto img{will-change:transform}

/* passos */
.mov .passos li .passo-n{transform:scale(0);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.mov .passos li.visto .passo-n{transform:scale(1)}

/* cta final: escudo grande respirando ao fundo */
.cta-final{position:relative;overflow:hidden}
.cta-final .wrap{position:relative;z-index:1}
.escudo-fundo{position:absolute;left:50%;top:50%;width:min(520px,80vw);opacity:.07;transform:translate(-50%,-50%);pointer-events:none;filter:grayscale(1) brightness(3)}
.mov .escudo-fundo{animation:respira 9s ease-in-out infinite}
@keyframes respira{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(-3deg)}50%{transform:translate(-50%,-52%) scale(1.06) rotate(3deg)}}

/* sacola: pulo do contador e peça voando */
.sacola-qtd.pula{animation:pula .5s cubic-bezier(.16,1,.3,1)}
@keyframes pula{40%{transform:scale(1.5)}}
.voando{position:fixed;z-index:60;border-radius:var(--raio);pointer-events:none;object-fit:cover;box-shadow:var(--sombra);transition:transform .75s cubic-bezier(.6,0,.3,1),opacity .75s}

/* motion do topo sem vídeo (hero-fx.js) */
.hero-cam{position:absolute;inset:0;overflow:hidden;animation:camera 26s ease-in-out infinite alternate}
@keyframes camera{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.06) translate(-1.2%,.6%)}100%{transform:scale(1.04) translate(1.2%,-.6%)}}
.hero-fx{position:absolute;inset:0;pointer-events:none}
.feixe{position:absolute;top:-30%;width:42%;height:150%;pointer-events:none;mix-blend-mode:screen;filter:blur(18px);transform-origin:50% 0;opacity:.0}
.feixe.f1{left:48%;background:linear-gradient(180deg,rgba(255,250,235,.6),rgba(255,250,235,0) 70%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);animation:varre1 11s ease-in-out infinite}
.feixe.f2{left:72%;background:linear-gradient(180deg,rgba(235,240,255,.5),rgba(235,240,255,0) 65%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);animation:varre2 14s ease-in-out infinite}
@keyframes varre1{0%,100%{transform:rotate(18deg);opacity:.55}50%{transform:rotate(-14deg);opacity:.95}}
@keyframes varre2{0%,100%{transform:rotate(-20deg);opacity:.45}50%{transform:rotate(10deg);opacity:.85}}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 62% 14%,rgba(255,255,240,.22),transparent 22%),radial-gradient(circle at 96% 30%,rgba(255,255,240,.18),transparent 18%);mix-blend-mode:screen;animation:pisca 4.5s steps(1) infinite}
@keyframes pisca{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.75}50%{opacity:1}83%{opacity:.85}84%{opacity:1}}
.hero::before{z-index:1}
.hero-txt{z-index:2}

@media (prefers-reduced-motion:reduce){
  .mov *,.mov *::before,.mov *::after{animation:none!important;transition:none!important}
  .rolar-dica,.feixe,.hero-fx{display:none}
  .hero-cam,.hero::before{animation:none!important}
}