/* ==========================================================================
   DCC SYSTEM — animações e transições
   IMPORTANTE: as regras de mostrar/esconder (opacity, pointer-events,
   display) ficam SEMPRE ativas, sem depender de media query nenhuma — um
   elemento escondido tem que continuar escondido em qualquer navegador ou
   configuração de acessibilidade. Só a VELOCIDADE da transição respeita
   "prefers-reduced-motion" (ver bloco no fim do arquivo), nunca o estado
   final de visível/invisível. Essa distinção é o que quebrou antes: tudo
   estava dentro de "no-preference", então quem usa "reduzir movimento"
   via de tudo sobreposto e clicável, travando o site inteiro.
   ========================================================================== */

/* -------- Conteúdo principal: fade + leve deslocamento ao trocar página -------- */
.content{ transition: opacity .16s ease, transform .16s ease; }
.content.content-out{ opacity:0; transform:translateY(8px); }
.content.content-in{ opacity:0; transform:translateY(-4px); animation:contentIn .22s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes contentIn{ to{ opacity:1; transform:translateY(0); } }

/* -------- Sidebar (mobile) + backdrop -------- */
.sidebar{ transition: transform .32s cubic-bezier(.22,1,.36,1); }
.sidebar-backdrop{
  position:fixed; inset:0; background:rgba(3,7,14,.6); backdrop-filter:blur(2px);
  z-index:65; opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.sidebar-backdrop.show{ opacity:1; pointer-events:auto; }
@media (min-width:981px){ .sidebar-backdrop{ display:none; } }

/* -------- Modal: fade + scale-in, sem depender de display:none -------- */
#modal{
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
#modal.show{ opacity:1; pointer-events:auto; }
#modal .modal-card{
  transform:scale(.94) translateY(14px); opacity:0;
  transition:transform .26s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
#modal.show .modal-card{ transform:scale(1) translateY(0); opacity:1; }

/* -------- Drawer (notificações): slide da direita -------- */
#drawer{
  transform:translateX(100%); pointer-events:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
#drawer.show{ transform:translateX(0); pointer-events:auto; }

/* -------- Toast: sobe e desvanece -------- */
#toast{
  opacity:0; transform:translate(-50%,16px); pointer-events:none;
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
#toast.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }

/* -------- Tela de carregamento inicial (login → dashboard) -------- */
.boot-overlay{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  opacity:1; transition:opacity .3s ease;
}
.boot-overlay.hidden{ opacity:0; pointer-events:none; }
.boot-spinner{
  width:38px; height:38px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--blue-2);
  animation:spin .8s linear infinite;
}
.boot-overlay p{ color:var(--muted); font-size:12.5px; letter-spacing:.02em }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* -------- Micro-interações gerais -------- */
.btn{ transition:filter .15s ease, transform .08s ease, box-shadow .18s ease; }
.btn:hover{ filter:brightness(1.1); box-shadow:0 8px 20px -8px rgba(37,99,235,.45); }
.btn:active{ transform:translateY(1px) scale(.98); }
.btn.ghost:hover{ border-color:var(--blue-dim); box-shadow:none; }
.btn.danger:hover{ box-shadow:0 8px 20px -8px rgba(239,68,68,.5); }

.icon-btn{ transition:color .15s ease, border-color .15s ease, transform .12s ease; }
.icon-btn:active{ transform:scale(.92); }

.card, .tool-card, .medal-frame, .req-letter, .req-type-card, .news-card, .shop-item, .stat{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.req-type-card:hover, .tool-card:hover, .shop-item:hover{
  transform:translateY(-2px); border-color:var(--blue-dim); box-shadow:var(--shadow-sm);
}
[data-member]:hover{ transform:translateY(-2px); border-color:var(--blue-dim); box-shadow:var(--shadow-sm); cursor:pointer; }

.nav-item{ transition:background .16s ease, color .16s ease, padding-left .16s ease; }
.nav-item:hover{ padding-left:14px; }

.tab{ transition:color .15s ease, border-color .2s cubic-bezier(.22,1,.36,1); }

.theme-swatch{ transition:border-color .18s ease, transform .15s ease; }
.theme-swatch:hover{ transform:translateY(-2px); }

.switch::after{ transition:left .18s cubic-bezier(.22,1,.36,1), background .18s ease; }
.switch{ transition:background .18s ease, border-color .18s ease; cursor:pointer; }

.search-results{ transform-origin:top; animation:dropIn .16s cubic-bezier(.22,1,.36,1); }
@keyframes dropIn{ from{ opacity:0; transform:scaleY(.92) translateY(-4px); } to{ opacity:1; transform:scaleY(1) translateY(0); } }

.avatar, .avatar.lg, .avatar.xl, .face{ transition:transform .15s ease; }
.card:hover .avatar.lg{ transform:scale(1.05); }

.carousel-slide{ transition:opacity .3s ease; }
.carousel-nav{ transition:background .15s ease, transform .12s ease; }
.carousel-nav:hover{ transform:translateY(-50%) scale(1.08); }

.badge{ transition:background .15s ease; }

/* ==========================================================================
   Acessibilidade: quem pede "reduzir movimento" continua vendo tudo
   aparecer/sumir corretamente — só sem a suavidade, quase instantâneo.
   Isso é ADITIVO (só encurta duração), nunca remove opacity/pointer-events.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}