/*
 * Motor de rolagem — estados visuais das classes rv/rv-e/rv-d/rv-z/rv-clip/rv-par/rv-zoom/rv-g/tg-arco
 * e da estrada (#estrada, #caminhao, #rastro, .parada, .pino).
 * Copiado literalmente do bloco <style> de design/canvas/Catalogo.dc.html (revelação) e
 * design/canvas/QuemSomos.dc.html (estrada), com os ids/classes da estrada renomeados:
 * #tg-caminhao -> #caminhao, #tg-rastro -> #rastro, .rv-marco -> .parada, .rv-pino -> .pino,
 * .tg-pino-luz -> .pino-luz. As linhas .tg-sent e os keyframes tg-boia/tg-respira (não usados) foram excluídos.
 * Sem JS ou com prefers-reduced-motion:reduce, nenhum elemento recebe a classe js-rv e tudo
 * fica visível através do fallback var(--p,1).
 */
@media (prefers-reduced-motion: no-preference) {
  .rv-clip{clip-path:inset(0 0 0 0 round 30px)}
  .js-rv .rv,.js-rv .rv-e,.js-rv .rv-d,.js-rv .rv-z,.js-rv .rv-clip,.js-rv .rv-par,.js-rv .rv-zoom,.js-rv .rv-g>*{transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1),translate .6s cubic-bezier(.2,.7,.3,1),rotate .6s cubic-bezier(.2,.7,.3,1),scale .6s cubic-bezier(.2,.7,.3,1),filter .45s ease-out,clip-path .45s cubic-bezier(.2,.7,.3,1)}
  .js-rv .rv{opacity:var(--p,1);transform:translateY(calc((1 - var(--p,1)) * 70px)) scale(calc(.96 + .04 * var(--p,1)));filter:blur(calc((1 - var(--p,1)) * 6px))}
  .js-rv .rv-g>*{opacity:var(--p,1);transform:translateY(calc((1 - var(--p,1)) * 56px));filter:blur(calc((1 - var(--p,1)) * 5px))}
  .js-rv .rv-e{opacity:var(--p,1);transform:translateX(calc((1 - var(--p,1)) * -110px))}
  .js-rv .rv-d{opacity:var(--p,1);transform:translateX(calc((1 - var(--p,1)) * 110px))}
  .js-rv .rv-z{opacity:var(--p,1);transform:scale(calc(.82 + .18 * var(--p,1)))}
  .js-rv .rv-clip{opacity:calc(.25 + .75 * var(--p,1));clip-path:inset(calc((1 - var(--p,1)) * 14%) calc((1 - var(--p,1)) * 10%) round 30px)}
  .js-rv .rv-par{opacity:var(--p,1);translate:0 calc((1 - var(--p,1)) * 60px)}
  .js-rv .rv-zoom{scale:calc(1.28 - .28 * var(--p,1))}
  .js-rv .tg-arco path{stroke-dasharray:300;stroke-dashoffset:calc(300 * (1 - clamp(0, calc((var(--p,1) - .2) / .8), 1)))}

  .js-rv .parada .tg-foto{opacity:clamp(0, calc(var(--p,1) * 1.6), 1);transform:translateY(calc((1 - var(--p,1)) * 40px)) scale(calc(.9 + .1 * var(--p,1)))}
  .js-rv .parada .tg-foto img{filter:brightness(calc(1 + (1 - var(--p,1)) * 1.6)) saturate(var(--p,1)) contrast(calc(.7 + .3 * var(--p,1)))}
  .js-rv .parada .tg-texto{opacity:clamp(0, calc((var(--p,1) - .25) * 1.6), 1);transform:translateX(calc((1 - var(--p,1)) * var(--vem,0px)))}
  .js-rv .parada .tg-foto,.js-rv .parada .tg-foto img,.js-rv .parada .tg-texto{transition:opacity .45s ease-out,transform .5s cubic-bezier(.2,.7,.3,1),filter .5s ease-out}
  .js-rv .pino .pino-luz{opacity:var(--p,1);transform:scale(calc(.4 + .6 * var(--p,1)))}
  .pino-luz{transition:opacity .35s,transform .35s}
  #caminhao{transform:translate(var(--cx,720px),var(--cy,0px)) translate(-50%,-50%) rotate(var(--ca,0deg));transition:transform .28s linear}
  #rastro{transition:stroke-dashoffset .28s linear}
}
