/* ══════════════════════════════════════════════════════════════════
   TRANSIÇÕES DE NAVEGAÇÃO
   ══════════════════════════════════════════════════════════════════ */

/* ── Configurações Globais ──────────────────────────────────────── */
:root {
  --transition-speed: 280ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Transições de Entrada/Saída ────────────────────────────────── */

/* Fade In/Out */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Slide da Direita */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Slide da Esquerda */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30%);
  }
}

/* Slide de Baixo */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(30px);
  }
}

/* ── Classes de Transição ───────────────────────────────────────── */

/* Aplicar nas views principais */
.view-transition {
  animation-duration: var(--transition-speed);
  animation-timing-function: var(--transition-easing);
  animation-fill-mode: both;
}

/* Entrada de tela (da direita) */
.view-enter {
  animation-name: slideInRight;
}

/* Saída de tela (para direita) */
.view-exit {
  animation-name: slideOutRight;
}

/* Entrada de lista/conteúdo */
.content-enter {
  animation-name: slideInUp;
  animation-duration: calc(var(--transition-speed) * 0.8);
}

/* Saída de lista/conteúdo */
.content-exit {
  animation-name: slideOutDown;
  animation-duration: calc(var(--transition-speed) * 0.6);
}

/* Fade simples */
.fade-enter {
  animation-name: fadeIn;
  animation-duration: calc(var(--transition-speed) * 0.7);
}

.fade-exit {
  animation-name: fadeOut;
  animation-duration: calc(var(--transition-speed) * 0.5);
}

/* ── Aplicação nas Views Existentes ─────────────────────────────── */

/* Detail View - já existe, apenas ajustar */
#detail-view {
  animation: slideInRight var(--transition-speed) var(--transition-easing);
}

#detail-view.slide-out {
  animation: slideOutRight var(--transition-speed) var(--transition-easing)
    forwards;
}

/* Spotlight - transição suave ao trocar tabs */
#results-wrap {
  animation: slideInUp calc(var(--transition-speed) * 0.8)
    var(--transition-easing);
}

#results-wrap.exiting {
  animation: slideOutDown calc(var(--transition-speed) * 0.6)
    var(--transition-easing) forwards;
}

/* Lista de infrações */
#infraction-list {
  animation: fadeIn calc(var(--transition-speed) * 0.7) var(--transition-easing);
}

/* Modais */
.modal {
  animation: fadeIn calc(var(--transition-speed) * 0.6) ease;
}

.modal.closing {
  animation: fadeOut calc(var(--transition-speed) * 0.4) ease forwards;
}

.modal-content {
  animation: slideInUp var(--transition-speed) var(--transition-easing);
}

.modal.closing .modal-content {
  animation: slideOutDown calc(var(--transition-speed) * 0.6)
    var(--transition-easing) forwards;
}

/* Popups (Crime e Placa) */
.crime-popup,
.placa-popup {
  animation: fadeIn calc(var(--transition-speed) * 0.6) ease;
}

.crime-popup.closing,
.placa-popup.closing {
  animation: fadeOut calc(var(--transition-speed) * 0.4) ease forwards;
}

.crime-popup-content,
.placa-popup-content {
  animation: slideInUp var(--transition-speed) var(--transition-easing);
}

.crime-popup.closing .crime-popup-content,
.placa-popup.closing .placa-popup-content {
  animation: slideOutDown calc(var(--transition-speed) * 0.6)
    var(--transition-easing) forwards;
}

/* ── Transições de Itens de Lista ──────────────────────────────── */

/* Stagger animation para listas */
#infraction-list li {
  animation: slideInUp calc(var(--transition-speed) * 0.5)
    var(--transition-easing);
  animation-fill-mode: both;
}

/* Delay progressivo para efeito cascata */
#infraction-list li:nth-child(1) {
  animation-delay: 0ms;
}
#infraction-list li:nth-child(2) {
  animation-delay: 30ms;
}
#infraction-list li:nth-child(3) {
  animation-delay: 60ms;
}
#infraction-list li:nth-child(4) {
  animation-delay: 90ms;
}
#infraction-list li:nth-child(5) {
  animation-delay: 120ms;
}
#infraction-list li:nth-child(n + 6) {
  animation-delay: 150ms;
}

/* ── Transições de Cards (Extras, Listas, etc) ─────────────────── */

.extras-card,
.list-card,
.placa-card {
  animation: slideInUp calc(var(--transition-speed) * 0.6)
    var(--transition-easing);
  animation-fill-mode: both;
}

/* Stagger para cards */
.extras-card:nth-child(1),
.list-card:nth-child(1) {
  animation-delay: 0ms;
}
.extras-card:nth-child(2),
.list-card:nth-child(2) {
  animation-delay: 50ms;
}
.extras-card:nth-child(3),
.list-card:nth-child(3) {
  animation-delay: 100ms;
}
.extras-card:nth-child(4),
.list-card:nth-child(4) {
  animation-delay: 150ms;
}
.extras-card:nth-child(n + 5),
.list-card:nth-child(n + 5) {
  animation-delay: 200ms;
}

/* ── Transições de Seções (Accordion) ──────────────────────────── */

.section[open] .section-body {
  animation: slideInUp calc(var(--transition-speed) * 0.5) ease;
}

/* ── Modo Reduzido de Movimento ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .view-transition,
  #detail-view,
  #results-wrap,
  #infraction-list,
  .modal,
  .modal-content,
  .crime-popup,
  .placa-popup,
  .extras-card,
  .list-card,
  .placa-card {
    animation: none !important;
  }
}

/* ── Performance ────────────────────────────────────────────────── */

/* Otimizar elementos animados */
.view-transition,
#detail-view,
#results-wrap,
.modal-content,
.crime-popup-content,
.placa-popup-content {
  will-change: transform, opacity;
}

/* Remover will-change após animação */
.view-transition.animation-complete,
#detail-view:not(.slide-out),
.modal:not(.closing),
.crime-popup:not(.closing),
.placa-popup:not(.closing) {
  will-change: auto;
}