/**
 * Visual Upgrade de Elite — App
 * Dark luxe (#0a0a0b), glassmorphism, tipografia Inter, botões magnéticos, animação de entrada.
 */

/* ——— Dark Mode de Luxo: fundo quase preto + gradiente radial que se move lentamente ——— */
body {
  background: #0a0a0b !important;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: -1;
  background: 
    radial-gradient(ellipse 100% 80% at 20% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 80% 100% at 80% 80%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(30, 58, 138, 0.03) 0%, transparent 60%);
  animation: elite-gradient-drift 25s ease-in-out infinite;
  pointer-events: none;
}

@keyframes elite-gradient-drift {
  0%, 100% { opacity: 1; transform: scale(1) translate(0, 0) rotate(0deg); }
  33% { opacity: 0.9; transform: scale(1.05) translate(2%, 1%) rotate(1deg); }
  66% { opacity: 0.95; transform: scale(0.98) translate(-1%, 2%) rotate(-0.5deg); }
}

/* ——— Glassmorphism: cards, barras laterais, menus ——— */
:root {
  --glass-bg: rgba(18, 18, 20, 0.65);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 12px;
}

.topbar,
.shell-topbar,
.panel-left,
.panel-right,
.card,
.login-card,
.wizard-content,
.modal-content,
.product-dashboard-ready .project-dashboard-brandkit .brandkit-summary,
.sidebar-section,
.panel-left .sidebar-section,
.product-dashboard-footer,
.dashboard-footer,
.project-dashboard-drafts,
.brandkit-summary,
.product-hub .hub-mode-card,
.product-project-dashboard .project-dashboard-ready,
.ai-loader-content {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

/* Topbar específico */
.topbar,
.shell-topbar {
  background: rgba(10, 10, 11, 0.75) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

/* ——— Tipografia moderna: Inter, line-height e letter-spacing ——— */
body,
#app-root {
  font-family: 'Inter', var(--font-family-body), system-ui, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.hero-headline,
.section-title,
.feature-title,
.mode-title,
.hub-mode-title {
  font-family: 'Inter', var(--font-family-heading), system-ui, sans-serif !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em;
}

h1, .hero-headline { letter-spacing: -0.03em; }
h2, .section-title { letter-spacing: -0.025em; }
p, .section-description, .feature-description, .text-secondary {
  line-height: 1.65 !important;
  letter-spacing: 0.01em;
}

/* ——— Botões magnéticos: brilho interno + transição líquida 0.6s ——— */
button,
a.btn,
.btn,
input[type="submit"],
input[type="button"],
[role="button"],
.btn-primary,
.btn-secondary,
.btn-google,
.mode-btn,
.topbar .btn-topbar,
.btn-gerar-agora,
.btn-large,
.btn-small {
  transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn-primary,
button.btn-primary,
.primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
              0 2px 12px rgba(59, 130, 246, 0.25);
}

.btn-primary:hover,
button.btn-primary:hover,
.primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
              0 4px 20px rgba(59, 130, 246, 0.4);
}

button:hover,
a.btn:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.mode-btn:hover,
.topbar .btn-topbar:hover {
  transform: translateY(-2px);
}

/* ——— Animação de entrada: Dashboard — elementos sobem 10px + fade-in em cascata ——— */
.product-dashboard .dashboard-header,
.product-dashboard .dashboard-empty,
.product-dashboard .dashboard-list,
.product-dashboard .project-card,
.product-dashboard .dashboard-footer,
.product-project-dashboard .project-dashboard-ready > *,
.product-hub .hub-header,
.product-hub .hub-mode-card,
.product-hub .hub-secondary-actions {
  opacity: 0;
  animation: elite-entrance 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.product-dashboard .dashboard-header { animation-delay: 0.05s; }
.product-dashboard .dashboard-empty { animation-delay: 0.1s; }
.product-dashboard .dashboard-list { animation-delay: 0.15s; }
.product-dashboard .project-card:nth-child(1) { animation-delay: 0.2s; }
.product-dashboard .project-card:nth-child(2) { animation-delay: 0.25s; }
.product-dashboard .project-card:nth-child(3) { animation-delay: 0.3s; }
.product-dashboard .project-card:nth-child(4) { animation-delay: 0.35s; }
.product-dashboard .project-card:nth-child(5) { animation-delay: 0.4s; }
.product-dashboard .project-card:nth-child(n+6) { animation-delay: 0.45s; }
.product-dashboard .dashboard-footer { animation-delay: 0.5s; }

.product-project-dashboard #project-dashboard-content { animation-delay: 0.05s; }
.product-project-dashboard .project-dashboard-actions { animation-delay: 0.15s; }
.product-project-dashboard .dashboard-footer { animation-delay: 0.2s; }

.product-hub .hub-header { animation-delay: 0.05s; }
.product-hub .hub-mode-card:nth-child(1) { animation-delay: 0.1s; }
.product-hub .hub-mode-card:nth-child(2) { animation-delay: 0.15s; }
.product-hub .hub-mode-card:nth-child(3) { animation-delay: 0.2s; }
.product-hub .hub-secondary-actions { animation-delay: 0.25s; }

@keyframes elite-entrance {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Login / auth: glass + entrada */
.product-login-page .login-card,
.product-dashboard .dashboard-empty {
  animation: elite-entrance 0.6s 0.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Lista de projetos: itens em cascata */
.dashboard-projects-list .project-card {
  opacity: 0;
  animation: elite-entrance 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.dashboard-projects-list .project-card:nth-child(1) { animation-delay: 0.1s; }
.dashboard-projects-list .project-card:nth-child(2) { animation-delay: 0.15s; }
.dashboard-projects-list .project-card:nth-child(3) { animation-delay: 0.2s; }
.dashboard-projects-list .project-card:nth-child(4) { animation-delay: 0.25s; }
.dashboard-projects-list .project-card:nth-child(5) { animation-delay: 0.3s; }
.dashboard-projects-list .project-card:nth-child(n+6) { animation-delay: 0.35s; }