/* ==========================================================================
   PERFEX CRM — NEOBRUTALISM THEME
   Animations & Micro-interactions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Prefer Reduced Motion — respeita acessibilidade
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

/* Entrada de elementos */
@keyframes nb-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nb-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nb-fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nb-fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes nb-fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide de entrada da sidebar */
@keyframes nb-slideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Pulso do accent dot de notificação */
@keyframes nb-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.3);
  }
}

/* Bounce suave para CTAs */
@keyframes nb-bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-8px);
  }
  70% {
    transform: translateY(-4px);
  }
  90% {
    transform: translateY(-2px);
  }
}

/* Shake para erros */
@keyframes nb-shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-4px); }
  30%, 70% { transform: translateX(4px); }
}

/* Spin para loading */
@keyframes nb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Float para hero elements */
@keyframes nb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Contador de números */
@keyframes nb-count-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Destaque piscante */
@keyframes nb-blink-accent {
  0%, 100% { background: var(--nb-accent); }
  50%       { background: var(--nb-text-primary); }
}

/* Desenho de borda */
@keyframes nb-draw-border {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* --------------------------------------------------------------------------
   Classes de Animação (aplicadas via JS ou diretamente no HTML)
   -------------------------------------------------------------------------- */
.nb-anim-fade-in {
  animation: nb-fadeIn 300ms ease forwards;
}

.nb-anim-fade-in-up {
  animation: nb-fadeInUp 350ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nb-anim-fade-in-down {
  animation: nb-fadeInDown 300ms ease forwards;
}

.nb-anim-fade-in-left {
  animation: nb-fadeInLeft 300ms ease forwards;
}

.nb-anim-shake {
  animation: nb-shake 400ms ease;
}

.nb-anim-pulse .nb-notif-dot {
  animation: nb-pulse 2s infinite;
}

.nb-anim-bounce {
  animation: nb-bounce 1s ease;
}

.nb-anim-float {
  animation: nb-float 3s ease-in-out infinite;
}

.nb-anim-spin {
  animation: nb-spin 800ms linear infinite;
}

/* --------------------------------------------------------------------------
   Stagger — Animação em cascata para listas/grids
   -------------------------------------------------------------------------- */
.nb-stagger > * {
  opacity: 0;
  animation: nb-fadeInUp 350ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nb-stagger > *:nth-child(1)  { animation-delay: 50ms; }
.nb-stagger > *:nth-child(2)  { animation-delay: 100ms; }
.nb-stagger > *:nth-child(3)  { animation-delay: 150ms; }
.nb-stagger > *:nth-child(4)  { animation-delay: 200ms; }
.nb-stagger > *:nth-child(5)  { animation-delay: 250ms; }
.nb-stagger > *:nth-child(6)  { animation-delay: 300ms; }
.nb-stagger > *:nth-child(7)  { animation-delay: 350ms; }
.nb-stagger > *:nth-child(8)  { animation-delay: 400ms; }

/* --------------------------------------------------------------------------
   Hover effects extras
   -------------------------------------------------------------------------- */

/* Linha underline animada */
.nb-underline-anim {
  position: relative;
  text-decoration: none;
}

.nb-underline-anim::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--nb-accent);
  transition: width 200ms ease;
}

.nb-underline-anim:hover::after {
  width: 100%;
}

/* Border scan effect (hover nos cards) */
.nb-border-scan {
  position: relative;
  overflow: hidden;
}

.nb-border-scan::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nb-accent), transparent);
  transition: left 400ms ease;
  pointer-events: none;
}

.nb-border-scan:hover::before {
  left: 150%;
}

/* Ripple effect nos botões */
.nb-ripple {
  position: relative;
  overflow: hidden;
}

.nb-ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: nb-ripple-anim 500ms linear;
  pointer-events: none;
}

@keyframes nb-ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Toast / Notificação temporária
   -------------------------------------------------------------------------- */
.nb-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  z-index: 9000;
  pointer-events: none;
}

.nb-toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--nb-surface);
  border: var(--nb-border-width) solid var(--nb-border);
  box-shadow: var(--nb-shadow-lg);
  max-width: 360px;
  pointer-events: all;
  animation: nb-fadeInRight 300ms ease forwards;
  position: relative;
  overflow: hidden;
}

.nb-toast.removing {
  animation: nb-fadeInRight 300ms ease reverse forwards;
}

.nb-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--nb-accent);
}

.nb-toast-success::before { background: var(--nb-success); }
.nb-toast-danger::before  { background: var(--nb-danger); }
.nb-toast-warning::before { background: var(--nb-warning); }

.nb-toast-icon { font-size: 1.1rem; flex-shrink: 0; }
.nb-toast-msg  { flex: 1; font-size: 0.875rem; font-weight: 500; }
.nb-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--nb-text-muted);
  padding: 0;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Page load progress bar
   -------------------------------------------------------------------------- */
.nb-page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--nb-accent);
  z-index: 9999;
  transition: width 300ms ease;
  box-shadow: 0 0 8px var(--nb-accent);
}

/* --------------------------------------------------------------------------
   Scroll reveal — elementos entram ao scroll (controlado via JS)
   -------------------------------------------------------------------------- */
.nb-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nb-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   AUTH (LOGIN) — MICROANIMAÇÕES PREMIUM
   ========================================================================== */

/* Cursor piscando na tagline (vibe terminal) */
.nb-c2side__tag::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 0.95em;
  background: var(--nb-accent);
  margin-left: 5px;
  vertical-align: -1px;
}

/* Entrada dos elementos (aplicada via JS: classe .nb-fx-in + delay inline).
   Sem opacity:0 permanente — o keyframe (from{opacity:0}) + fill both escondem
   só durante a animação, garantindo que o conteúdo nunca fique invisível. */

@keyframes nb-fx-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nb-fx-card {
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nb-blink { 0%, 55% { opacity: 1; } 55.01%, 100% { opacity: 0; } }
@keyframes nb-breathe { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
@keyframes nb-float { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-10px) scale(1.04); } }
@keyframes nb-pulse-accent {
  0%, 100% { text-shadow: 1.5px 0 rgba(0,229,255,.4), -1.5px 0 rgba(255,61,20,.5); }
  50%      { text-shadow: 2.5px 0 rgba(0,229,255,.55), -2.5px 0 rgba(255,61,20,.7); }
}
@keyframes nb-shine { from { left: -60%; } to { left: 140%; } }

@media all {
  .nb-card2 { animation: nb-fx-card 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

  /* stagger da coluna de copy */
  .nb-c2side__in > * { animation: nb-fx-up 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .nb-c2side__in > *:nth-child(1) { animation-delay: 0.15s; }
  .nb-c2side__in > *:nth-child(2) { animation-delay: 0.24s; }
  .nb-c2side__in > *:nth-child(3) { animation-delay: 0.33s; }

  /* itens do formulário entram via JS (.nb-fx-in) */
  .nb-fx-in { animation: nb-fx-up 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

  /* caret piscando */
  .nb-c2side__tag::after { animation: nb-blink 1.1s steps(1) infinite; }

  /* glow respirando + headline pulsando */
  .nb-c2side__glow { animation: nb-breathe 7s ease-in-out infinite; }
  .nb-c2side__h { animation: nb-pulse-accent 5s ease-in-out infinite; }

  /* formas (círculos) flutuando — translate fica livre p/ o parallax do mouse */
  .nb-card2 .shp.ci { animation: nb-float 9s ease-in-out infinite alternate; }
  .nb-card2 .shp.cf { animation: nb-float 6s ease-in-out infinite alternate; }
  .nb-card2 .shp.dots { animation: nb-breathe 5s ease-in-out infinite; }
}

/* parallax do mouse (JS seta a propriedade translate — independe do transform) */
.nb-card2 .shp { transition: translate 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* microinteração de foco nos inputs */
.nb-card2 .nb-ic .form-control { transition: border-color 0.18s ease, box-shadow 0.25s ease; }
.nb-card2 .nb-ic .form-control:focus { box-shadow: 3px 3px 0 var(--nb-border), 0 0 0 3px rgba(255, 61, 20, 0.16) !important; }
.nb-card2 .nb-ic:has(.form-control:focus) .i { color: var(--nb-accent); }

/* brilho varrendo no botão primário */
.nb-card2 .nb-btn-primary { position: relative; overflow: hidden; }
.nb-card2 .nb-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 38%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media all {
  .nb-card2 .nb-btn-primary:hover::after { animation: nb-shine 0.7s ease; }
}

/* ==========================================================================
   AUTH — CAMADA "TURBO": aurora, neon, digitação
   ========================================================================== */

/* Aurora animada no painel de marca (atrás da grade) */
.nb-c2side::before {
  content: '';
  position: absolute;
  inset: -45%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 28% 30%, rgba(255, 61, 20, 0.40), transparent 60%),
    radial-gradient(34% 34% at 72% 38%, rgba(0, 229, 255, 0.30), transparent 60%),
    radial-gradient(44% 44% at 52% 76%, rgba(124, 58, 237, 0.34), transparent 62%);
  filter: blur(40px);
  opacity: 0.55;
}

/* Neon mais forte: card, headline, botão */
.nb-card2 { box-shadow: 9px 9px 0 var(--nb-shadow), 0 0 46px -12px rgba(255, 61, 20, 0.30); }
.nb-c2side__h em { filter: drop-shadow(0 0 11px rgba(255, 61, 20, 0.55)); }
.nb-card2 .nb-btn-primary { box-shadow: 0 0 0 2px var(--nb-border), 0 0 16px -3px var(--nb-accent); }

/* Caret do efeito de digitação */
.nb-tw-caret { color: var(--nb-accent); font-weight: 900; }

@keyframes nb-aurora {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(6%, -4%) rotate(8deg) scale(1.12); }
  100% { transform: translate(-5%, 5%) rotate(-7deg) scale(1.06); }
}

@media all {
  .nb-c2side::before { animation: nb-aurora 18s ease-in-out infinite alternate; }
  .nb-card2 .nb-btn-primary:hover {
    box-shadow: 0 0 0 2px var(--nb-border), 0 10px 24px -6px var(--nb-accent), 0 0 38px -4px var(--nb-accent) !important;
    transform: translateY(-2px) !important;
  }
  .nb-tw-caret { animation: nb-blink 1s steps(1) infinite; }
}