/* Celular: animações ligadas à rolagem (CSS scroll-driven), rodam no compositor — lisas no iPhone.
   Fica FORA do build de propósito: o minificador junta animation-timeline no atalho `animation:` e o
   Safari descarta a regra inteira. Só longhands aqui. Sem suporte, tudo fica estático e visível. */
@supports (animation-timeline: view()) {
  /* a revelação por IntersectionObserver dá lugar às animações por rolagem */
  html.js:not(.no-anim) [data-rv] { opacity: 1; transform: none; transition: none; }
  html.js:not(.no-anim) [data-split] .tl > span { transform: none; transition: none; }

  @keyframes m-rise { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }
  @keyframes m-up { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes m-drive { from { transform: translateX(26%) scale(0.96); } to { transform: none; } }
  @keyframes m-ghost { from { transform: translateX(14%); } to { transform: translateX(-10%); } }
  @keyframes m-left { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
  @keyframes m-zoom { from { transform: scale(1.22); } to { transform: scale(1); } }
  @keyframes m-tilt { from { transform: rotate(-9deg) translateY(60px); } to { transform: rotate(-3deg) translateY(0); } }
  @keyframes m-away { from { transform: translateX(-50%); opacity: 1; } to { transform: translateX(-90%); opacity: 0.25; } }

  html.js:not(.no-anim) .fcard,
  html.js:not(.no-anim) .vs,
  html.js:not(.no-anim) .qa,
  html.js:not(.no-anim) .omap__group,
  html.js:not(.no-anim) .cp-block,
  html.js:not(.no-anim) .van__inset {
    animation-name: m-rise; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range: entry 0% entry 70%;
    view-timeline-inset: 0px;
  }
  /* o carro "entra dirigindo" no card conforme rola */
  html.js:not(.no-anim) .fcard__img img {
    animation-name: m-drive; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range: entry 10% cover 45%;
  }
  html.js:not(.no-anim) .fcard__ghost {
    animation-name: m-ghost; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range: entry 0% exit 100%;
  }
  html.js:not(.no-anim) .h2 .tl > span,
  html.js:not(.no-anim) .cta__title .tl > span {
    animation-name: m-up; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range: entry 10% entry 90%;
  }
  html.js:not(.no-anim) .why__item,
  html.js:not(.no-anim) .how__step,
  html.js:not(.no-anim) .van__feats li,
  html.js:not(.no-anim) .dest {
    animation-name: m-left; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range: entry 0% entry 80%;
  }
  html.js:not(.no-anim) .van__bg img {
    animation-name: m-zoom; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range: entry 0% cover 60%;
  }
  html.js:not(.no-anim) .phone {
    animation-name: m-tilt; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range: entry 0% cover 50%;
  }
  /* ao sair do topo, o carro do palco "vai embora" para a esquerda */
  html.js:not(.no-anim) .stage__cars {
    animation-name: m-away; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --stage; animation-range: exit 10% exit 90%;
  }
  .stage { view-timeline-name: --stage; view-timeline-inset: 0px; }
  /* traço vermelho da nota da frota entra deslizando */
  html.js:not(.no-anim) .fleet__note .slash {
    animation-name: m-left; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range: entry 0% entry 100%;
  }
}