/* Divisa · animações de scroll. Tema: a estrada tracejada (a "divisa") que avança conforme a página rola. */

/* ---- barra de progresso no topo (celular e telas médias) ---- */
header.top::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;pointer-events:none;
  background:repeating-linear-gradient(to right,var(--yellow) 0 14px,transparent 14px 22px);
  clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}

/* ---- estrada lateral (telas largas) ---- */
.estrada{position:fixed;z-index:5;top:96px;bottom:36px;width:6px;pointer-events:none;
  left:max(14px,calc((100vw - 1120px) / 2 - 56px));display:none}
.estrada .via{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--line) 0 18px,transparent 18px 32px)}
.estrada .via.on{background:repeating-linear-gradient(to bottom,var(--yellow) 0 18px,transparent 18px 32px);
  clip-path:inset(0 0 calc(100% - var(--p,0%)) 0)}
.estrada .carro{position:absolute;left:-9px;top:var(--p,0%);width:24px;height:24px;margin-top:-12px;border-radius:5px;
  background:var(--green);box-shadow:0 0 0 3px var(--paper);display:grid;place-items:center}
.estrada .carro i{display:block;width:4px;height:12px;background:var(--yellow);border-radius:1px}
@media (min-width:1280px){
  .estrada{display:block}
  header.top::after{display:none}
}

/* ---- revelar ao rolar ---- */
/* a transição fica só no estado final (.in), para não piscar quando o JS marca o elemento */
.anim .rv{opacity:0;transform:translateY(26px)}
.anim .rv.in{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--d,0) * 90ms)}

/* títulos de seção: um traço amarelo se desenha embaixo */
.sec-head h2{position:relative;padding-bottom:16px}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:96px;height:5px;
  background:repeating-linear-gradient(to right,var(--yellow) 0 18px,transparent 18px 26px);
  transform-origin:left;transition:transform .8s .25s cubic-bezier(.2,.7,.2,1)}
.anim .sec-head:not(.in) h2::after{transform:scaleX(0)}

/* faixa tracejada entre os passos se desenha */
.anim .steps-line{transform-origin:left;transform:scaleX(0)}
.anim .steps.in .steps-line{transform:none;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}

/* quadro Problema → Solução: linhas entram uma a uma */
.anim .board tbody tr{opacity:0;transform:translateX(-14px)}
.anim .board tbody tr.in{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--d,0) * 110ms)}
.anim .board td.sol{background:linear-gradient(90deg,rgba(242,194,48,.22),transparent) no-repeat;background-size:0% 100%}
.anim .board tbody tr.in td.sol{background-size:100% 100%;
  transition:background-size .9s ease;transition-delay:calc(var(--d,0) * 110ms + 350ms)}

/* números dos passos: um pequeno salto ao aparecer */
.anim .step .n{display:inline-block;transform:scale(.6);transform-origin:left bottom}
.anim .step.in .n{transform:none;
  transition:transform .6s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--d,0) * 90ms + 150ms)}

/* ---- hero: as duas margens se encontram na divisa ---- */
@keyframes lado-esq{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@keyframes lado-dir{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes sobe{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes desenha{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes desenha-h{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes rua{to{background-position:0 44px}}
@keyframes rua-h{to{background-position:44px 0}}
.anim .hero .pt-side{animation:lado-esq .8s cubic-bezier(.2,.7,.2,1) both}
.anim .hero .side-es{animation:lado-dir .8s .1s cubic-bezier(.2,.7,.2,1) both}
.anim .hero .hero-grid .dash-v{animation:desenha .9s .2s ease-out both,rua 1.6s 1.1s linear infinite}
.anim .hero .hero-sub{animation:sobe .8s .45s cubic-bezier(.2,.7,.2,1) both}
@media (max-width:820px){
  .anim .hero .hero-grid .dash-v{animation:desenha-h .9s .2s ease-out both,rua-h 1.6s 1.1s linear infinite}
  .anim .hero .pt-side,.anim .hero .side-es{animation-name:sobe}
}

/* depois de revelado, o cartão volta a responder ao toque sem atraso */
.anim .rv.in.done{transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s}

/* botão e cartões: resposta ao toque */
.btn{transition:transform .18s ease,box-shadow .18s ease}
.btn-primary:hover{box-shadow:0 6px 0 rgba(14,26,20,.18)}
.plan,.deliv-card{transition:transform .25s ease,box-shadow .25s ease}
@media (hover:hover){
  .plan:hover,.deliv-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px -14px rgba(14,26,20,.35)}
}

@media (prefers-reduced-motion:reduce){
  .anim .rv,.anim .board tbody tr,.anim .step .n,.anim .steps-line{opacity:1!important;transform:none!important}
  .anim .hero *{animation:none!important}
}