/* ============================================================
   NEUREN — MOTION ONLY (animações sem alterar o visual)
   Nada de cores, fontes, tamanhos ou espaçamentos: apenas
   transform/opacity aplicados em hover, press e scroll.
   ============================================================ */

/* === Micro-interação universal em botões (hover/press) === */
button,
[role="button"],
[data-action],
[data-go],
a.btn,
.btn,
.icon-btn,
.node-btn,
.feed-go {
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1.1),
              opacity 0.2s ease;
  will-change: transform;
}

button:hover,
[role="button"]:hover,
[data-action]:hover,
[data-go]:hover,
a.btn:hover,
.btn:hover,
.icon-btn:hover,
.node-btn:hover,
.feed-go:hover {
  transform: translateY(-2px);
}

button:active,
[role="button"]:active,
[data-action]:active,
[data-go]:active,
a.btn:active,
.btn:active,
.icon-btn:active,
.node-btn:active,
.feed-go:active {
  transform: translateY(0) scale(0.96);
}

/* === Entrada suave de blocos ao rolar (revelação) === */
.nr-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(.16,1,.3,1),
              transform 0.6s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--nr-i, 0) * 60ms);
  will-change: opacity, transform;
}

.nr-reveal.nr-in {
  opacity: 1;
  transform: none;
}

/* === Hover sutil em cards/listas (painéis) === */
.card,
.panel,
.grid-item,
.list-item,
.lesson,
.mini,
.aud {
  transition: transform 0.25s cubic-bezier(.2,.7,.3,1.1);
}

.card:hover,
.panel:hover,
.grid-item:hover,
.list-item:hover,
.lesson:hover,
.mini:hover,
.aud:hover {
  transform: translateY(-3px);
}

/* === Sidebar / navegação: indicador suave === */
.sidebar a,
.nav a,
.sb-item {
  transition: transform 0.2s ease;
}

.sidebar a:hover,
.nav a:hover,
.sb-item:hover {
  transform: translateX(3px);
}

/* === Fade-in da página ao carregar === */
body > .app,
main.view,
.app {
  animation: nr-appIn 0.45s ease both;
}

@keyframes nr-appIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === LOGO: img da marca dentro do tile/mark/avatar ===
   (brand.css nao e carregado nas paginas; estas regras
   aplicam o mesmo dimensionamento que o SVG tinha) */
.nrn-logo__tile img.nrn-symbol-img {
  width: 78%;
  height: auto;
  max-height: 90%;
  display: block;
  margin: auto;
  object-fit: contain;
}

.nrn-logo__mark img.nrn-symbol-img {
  width: 34px;
  height: auto;
  max-height: 90%;
  display: block;
  margin: auto;
  object-fit: contain;
}

.nrn-avatar img.nrn-symbol-img {
  width: 68%;
  height: auto;
  display: block;
  margin: auto;
  object-fit: contain;
}

/* === Respeita preferência de movimento reduzido === */
@media (prefers-reduced-motion: reduce) {
  .nr-reveal,
  button,
  .btn,
  .card,
  .panel,
  .sidebar a {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}