/* ==========================================================================
   [fix art] Animações web-art espalhadas pelo site
   Lista de conversas (hover/press), notas (vocabulário, usuários, viewer)
   e entradas suaves de painéis (rankings, admin, login).
   Cores: somente branco/preto/transparente (RULES.md).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  @keyframes sciArtIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes sciCardIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  /* ==================================================================
     Lista de conversas — hover/press moderno
     (sem overflow:hidden — o menu ⋯ é posicionado fora do item)
     ================================================================== */
  .msgs-conv-item {
    position: relative;
    transition: background 0.25s ease, transform 0.18s ease,
                box-shadow 0.25s ease, padding-left 0.25s ease;
  }
  /* Linha de acento que cresce na esquerda */
  .msgs-conv-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 0 3px 3px 0;
    background: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.65);
    transform: translateY(-50%);
    opacity: 0;
    transition: height 0.25s ease, opacity 0.2s ease;
    pointer-events: none;
  }
  .msgs-conv-item:hover {
    background: rgba(255,255,255,0.05);
    transform: translateX(4px);
  }
  .msgs-conv-item:hover::before {
    height: 58%;
    opacity: 1;
  }
  .msgs-conv-item:active {
    transform: translateX(4px) scale(0.98);
  }
  .msgs-conv-item.active {
    background: rgba(255,255,255,0.08);
    box-shadow: inset 3px 0 0 #fff;
  }
  /* Avatar ganha um anel de luz no hover */
  .msgs-conv-item .msgs-conv-avatar {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .msgs-conv-item:hover .msgs-conv-avatar {
    transform: scale(1.07);
    box-shadow: 0 0 14px rgba(255,255,255,0.16);
  }

  /* ==================================================================
     Header do chat (perfil do parceiro no topo) — hover/press
     ================================================================== */
  .msgs-chat-partner {
    position: relative;
    transition: background 0.25s ease, transform 0.18s ease;
  }
  .msgs-chat-partner:hover {
    background: rgba(255,255,255,0.045);
    transform: translateX(3px);
  }
  .msgs-chat-partner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 0 3px 3px 0;
    background: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.6);
    transform: translateY(-50%);
    opacity: 0;
    transition: height 0.25s ease, opacity 0.2s ease;
    pointer-events: none;
  }
  .msgs-chat-partner:hover::before { height: 62%; opacity: 1; }
  .msgs-chat-partner:active { transform: translateX(3px) scale(0.99); }
  .msgs-chat-partner .msgs-partner-avatar {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .msgs-chat-partner:hover .msgs-partner-avatar {
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(255,255,255,0.18);
  }

  /* ==================================================================
     Carrossel de usuários (comunidade, topo da página de conversas)
     ================================================================== */
  .msgs-user-card {
    position: relative;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .msgs-user-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 0 16px rgba(255,255,255,0.12);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
  .msgs-user-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.26);
    box-shadow: 0 10px 22px rgba(0,0,0,0.35);
  }
  .msgs-user-card:hover::before { opacity: 1; }
  .msgs-user-card:active { transform: translateY(-2px) scale(0.96); }
  .msgs-user-card .msgs-user-card-avatar {
    transition: transform 0.25s ease;
  }
  .msgs-user-card:hover .msgs-user-card-avatar {
    transform: scale(1.1);
  }

  /* ==================================================================
     Notas — cards de vocabulário
     ================================================================== */
  .notes-vocab-item {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, background 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
    animation: sciCardIn 0.35s ease both;
  }
  .notes-vocab-item:nth-child(3n+2) { animation-delay: 0.05s; }
  .notes-vocab-item:nth-child(3n+3) { animation-delay: 0.1s; }
  .notes-vocab-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,0.6);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }
  .notes-vocab-item:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3), 0 0 12px rgba(255,255,255,0.04);
  }
  .notes-vocab-item:hover::before { opacity: 1; }
  .notes-vocab-item:active { transform: translateY(0) scale(0.98); }

  /* ==================================================================
     Notas — cards de usuários (grid)
     ================================================================== */
  .notes-user-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    animation: sciCardIn 0.4s ease both;
  }
  .notes-user-card:nth-child(2n) { animation-delay: 0.05s; }
  .notes-user-card:nth-child(3n) { animation-delay: 0.1s; }
  /* Anel de luz ao redor no hover */
  .notes-user-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 0 18px rgba(255,255,255,0.12);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
  .notes-user-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.26);
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  }
  .notes-user-card:hover::before { opacity: 1; }
  .notes-user-card:active { transform: translateY(-2px) scale(0.96); }
  .notes-user-card .notes-avatar {
    transition: transform 0.25s ease, border-color 0.25s ease;
  }
  .notes-user-card:hover .notes-avatar {
    transform: scale(1.08);
    border-color: rgba(255,255,255,0.5);
  }

  /* ==================================================================
     Notas — leitor: entrada suave do conteúdo
     ================================================================== */
  .notes-viewer-title,
  .notes-viewer-content,
  .notes-viewer-meta {
    animation: sciArtIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .notes-viewer-content { animation-delay: 0.05s; }
  .notes-viewer-meta    { animation-delay: 0.1s; }

  /* ==================================================================
     Rankings (perfil) — hover com elevação (sem atrapalhar o drag)
     ================================================================== */
  .rnk-item {
    transition: transform 0.2s ease, border-color 0.25s ease,
                background 0.25s ease, box-shadow 0.25s ease;
  }
  .rnk-item:not(.rnk-dragging):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  }
  .rnk-item:not(.rnk-dragging):active {
    transform: translateY(0) scale(0.99);
  }

  /* ==================================================================
     Admin — painéis entram com suavidade ao trocar de aba
     ================================================================== */
  .admin-panel > * { animation: sciArtIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }

  /* ==================================================================
     Login (index) — caixa entra com suavidade
     ================================================================== */
  .gate,
  .reg-modal {
    animation: sciArtIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}