/* ==========================================================================
   Troca de página, como em travalyst.org

   Sem a transição entre páginas do navegador (View Transitions): ela tira uma foto de cada página antes de
   animar, e isso custava meio segundo parado e um logo apagando no meio da troca. A página simplesmente
   troca, como um carregamento normal, e como logo, menu e dock estão no mesmo lugar em todas as páginas eles
   ficam parados; a pílula verde do menu desliza do item da página anterior até o desta (js/nav-pill.js).

   A única animação é a do clique num card da home, que acontece na própria home (js/card-open.js): o céu
   do card cresce até a moldura da página (tela inteira no mobile; 8px das bordas no desktop), já com o logo claro da página, e então a página troca. Como o céu é o
   mesmo, a troca não aparece; só o conteúdo da página entra, aqui (html[data-arrive="card"], marcado em
   js/transitions.js). Nada entra esmaecendo por cima de algo de outra cor (o fundo apareceria através):
   o texto aparece com fade sobre o céu; o celular e o CTA acima do menu entram opacos; a figura (homem, médico)
   já chega no lugar, porque cresceu até ele na home.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html[data-arrive="card"] :is(.score__exclusive, .score__copy, .score__app-cta, .score__qr, .score__dock-cta > *) {
    animation: arrive-fade 400ms ease-out both;
  }

  /* CTA do app acima do menu (mobile): abre para cima a partir do menu, que já estava lá. O recorte passa das
     bordas para não cortar a sombra */
  html[data-arrive="card"] .score__dock-cta {
    animation: arrive-dock 450ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  /* Celular (no mobile): sobe de baixo da tela. No desktop ele já tem a própria entrada (css/pages.css) */
  @media (max-width: 1023px) {
    html[data-arrive="card"] .score__phone {
      animation: arrive-rise 650ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
    }
  }
}

@keyframes arrive-fade {
  from {
    opacity: 0;
  }
}

@keyframes arrive-rise {
  from {
    translate: 0 100lvh;
  }
}

@keyframes arrive-dock {
  from {
    clip-path: inset(60px 0 -60px 0 round 16px 16px 0 0);
  }
  to {
    clip-path: inset(-60px -40px -60px -40px round 0);
  }
}