/* ============================================================
   Movimento e transição.

   PRINCÍPIO
   Um momento orquestrado por tela, e nada mais. Transição entre
   páginas em nível de sistema, revelação uma única vez no scroll,
   e o resto é só mudança de estado. Efeito espalhado é o que faz
   um site parecer gerado.

   Tudo aqui desliga em prefers-reduced-motion.
   ============================================================ */

/* ─────────────────── transição entre páginas ─────────────────── */
/* View Transitions cross-document. Onde não houver suporte, a
   navegação continua normal, sem nada quebrado. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-out .18s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-in .26s cubic-bezier(0, 0, .2, 1) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* Elementos que atravessam a navegação sem piscar. */
.brand { view-transition-name: brand; }
.app-head { view-transition-name: apphead; }
.lang-switch { view-transition-name: langswitch; }

/* O card clicado vira o cabeçalho do detalhe. Definido no clique
   por assets/js/motion.js, em ambos os lados da navegação. */
::view-transition-group(shiftcard) { animation-duration: .34s; }

/* ─────────────────── revelação no scroll ─────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
}
[data-reveal].revealed {
  opacity: 1;
  transform: none;
  transition: opacity .42s cubic-bezier(0, 0, .2, 1),
              transform .42s cubic-bezier(0, 0, .2, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* ─────────────────── estados de interação ─────────────────── */
.btn {
  transition: transform .14s cubic-bezier(.2, 0, 0, 1),
              background-color .14s ease, color .14s ease,
              border-color .14s ease, box-shadow .14s ease;
}
.btn-hi:hover { box-shadow: 0 6px 18px -8px rgba(255, 202, 0, .7); }
.btn:active { transform: translateY(1px) scale(.995); }

.card {
  transition: border-color .16s ease, transform .16s cubic-bezier(.2, 0, 0, 1),
              box-shadow .16s ease, background-color .16s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .7);
}
.card:has(a:focus-visible) { outline: 3px solid var(--hi); outline-offset: 3px; }

.iconbtn, .chip-toggle span, .chips span {
  transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.iconbtn:active { transform: translateY(1px); }

.app-nav a { transition: background-color .14s ease, color .14s ease; }

/* Cabeçalho ganha peso ao sair do topo. */
.app-head { transition: box-shadow .2s ease, border-color .2s ease; }
.app-head.is-scrolled {
  box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .9);
  border-bottom-color: var(--petrol-600);
}

/* Toast entra de baixo. */
.toast { animation: toast-in .28s cubic-bezier(0, 0, .2, 1) both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* Faixa de perigo com movimento lento, só na home. */
.hazard { background-size: 62px 62px; }
.hazard.is-live { animation: hazard-drift 24s linear infinite; }
@keyframes hazard-drift { to { background-position: 62px 0; } }

/* ─────────────────── acessibilidade ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }

  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn:hover, .btn:active, .card:hover, .iconbtn:active { transform: none; }
  .toast { animation: none; }
  .hazard.is-live { animation: none; }
}