/* ============================================================
   premium.css — camada cinematográfica (estilo Tranquil/Linear)
   Hero animado, glass, reveals com stagger, micro-interações.
   Tema claro minimal. Carregado por último junto do premium.js.
   ============================================================ */

/* ─── HERO: fundo cinematográfico ──────────────────────────── */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(15,23,42,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 25%, transparent 78%);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.hero-blob-1 {
  width: 520px; height: 520px;
  background: rgba(37,99,235,0.13);
  top: -140px; left: -120px;
  animation: blobDrift 20s ease-in-out infinite alternate;
}
.hero-blob-2 {
  width: 440px; height: 440px;
  background: rgba(14,165,233,0.11);
  bottom: -100px; right: -90px;
  animation: blobDrift 26s ease-in-out infinite alternate-reverse;
}
@keyframes blobDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(70px, 50px) scale(1.18); }
}

/* ─── HERO: entrada em cascata ─────────────────────────────── */
.hero-badge        { animation: fadeUp .7s cubic-bezier(.22,.9,.3,1) both; }
.hero-title        { animation: fadeUp .7s cubic-bezier(.22,.9,.3,1) .08s both; }
.hero-subtitle     { animation: fadeUp .7s cubic-bezier(.22,.9,.3,1) .16s both; }
.hero-actions      { animation: fadeUp .7s cubic-bezier(.22,.9,.3,1) .24s both; }
.hero-stats        { animation: fadeUp .7s cubic-bezier(.22,.9,.3,1) .32s both; }
.hero-social-proof { animation: fadeUp .7s cubic-bezier(.22,.9,.3,1) .40s both; }
.hero-mockup-wrapper { animation: fadeUp 1s cubic-bezier(.22,.9,.3,1) .35s both; }

/* ─── HERO: cards glass flutuando ao redor do mockup ───────── */
.hero-mockup-wrapper { position: relative; }
.hero-float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 12px 32px rgba(15,23,42,0.10);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: left;
  pointer-events: none;
  animation: floatY 6s ease-in-out infinite;
}
.hfc-1 { top: 6%;    left: -84px;  animation-delay: 0s; }
.hfc-2 { top: 44%;   right: -92px; animation-delay: 1.8s; }
.hfc-3 { bottom: -20px; left: -48px; animation-delay: 3.2s; }
.hfc-icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.hfc-icon.green { background: linear-gradient(135deg, #10B981, #34D399); }
.hfc-icon.blue  { background: linear-gradient(135deg, #2563EB, #38BDF8); }
.hfc-icon.ink   { background: #0F172A; }
.hfc-sub { display: block; font-size: 11px; color: var(--text-muted); font-weight: 500; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}
@media (max-width: 1120px) { .hero-float-card { display: none; } }

/* Tilt controlado pelo mouse (js/premium.js) */
.hero-mockup.tilting {
  animation: none;
  transition: none;              /* segue o cursor instantâneo, sem lag */
  will-change: transform;
}
.hero-mockup.resetting {
  animation: none;
  transition: transform .55s cubic-bezier(.22,.9,.3,1);   /* só a volta é suave */
}

/* ─── NAVBAR: glass refinado ao rolar ──────────────────────── */
.navbar.scrolled {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-color: var(--border-subtle);
  box-shadow: 0 8px 24px rgba(15,23,42,0.05);
}

/* ─── SCROLL: reveal com stagger nos filhos dos grids ──────── */
.section-reveal .stagger > * {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1);
}
.section-reveal.revealed .stagger > * { opacity: 1; transform: none; }
.section-reveal.revealed .stagger > *:nth-child(1) { transition-delay: .05s; }
.section-reveal.revealed .stagger > *:nth-child(2) { transition-delay: .12s; }
.section-reveal.revealed .stagger > *:nth-child(3) { transition-delay: .19s; }
.section-reveal.revealed .stagger > *:nth-child(4) { transition-delay: .26s; }
.section-reveal.revealed .stagger > *:nth-child(5) { transition-delay: .33s; }
.section-reveal.revealed .stagger > *:nth-child(6) { transition-delay: .40s; }
.section-reveal.revealed .stagger > *:nth-child(7) { transition-delay: .47s; }
.section-reveal.revealed .stagger > *:nth-child(8) { transition-delay: .54s; }
.section-reveal.revealed .stagger > *:nth-child(n+9) { transition-delay: .60s; }

/* ─── BOTÕES: ripple + glow + scale ────────────────────────── */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transform: scale(0);
  animation: rippleGrow .55s ease-out forwards;
  pointer-events: none;
}
.btn-outline .ripple,
.btn-ghost .ripple { background: rgba(15,23,42,0.10); }
@keyframes rippleGrow {
  to { transform: scale(3.2); opacity: 0; }
}
.btn-lg:hover { transform: translateY(-1px) scale(1.02); }
.btn-primary.btn-lg:hover { box-shadow: 0 14px 34px rgba(15,23,42,0.24); }

/* ─── CARDS da landing: hover premium ──────────────────────── */
.bento-card,
.module-card,
.demo-step-card,
.audience-card {
  transition: transform .25s cubic-bezier(.22,.9,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.bento-card:hover,
.module-card:hover,
.audience-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-card);
  box-shadow: 0 18px 44px rgba(15,23,42,0.09);
}

/* ═══ PAINEL: entrada animada e micro-interações ═══════════── */

/* Troca de aba: painel entra suave (reanima a cada exibição) */
.dashboard-layout .tab-panel:not([hidden]) {
  animation: fadeUp .32s cubic-bezier(.22,.9,.3,1) both;
}

/* KPIs entram em cascata a cada troca de aba */
.dashboard-layout .tab-panel:not([hidden]) .kpi-card:nth-child(1) { animation: fadeUp .45s ease .05s both; }
.dashboard-layout .tab-panel:not([hidden]) .kpi-card:nth-child(2) { animation: fadeUp .45s ease .12s both; }
.dashboard-layout .tab-panel:not([hidden]) .kpi-card:nth-child(3) { animation: fadeUp .45s ease .19s both; }
.dashboard-layout .tab-panel:not([hidden]) .kpi-card:nth-child(4) { animation: fadeUp .45s ease .26s both; }

/* Mini-stats do overview também */
.dashboard-layout .tab-panel:not([hidden]) .ov-stat:nth-child(1) { animation: fadeUp .45s ease .08s both; }
.dashboard-layout .tab-panel:not([hidden]) .ov-stat:nth-child(2) { animation: fadeUp .45s ease .15s both; }
.dashboard-layout .tab-panel:not([hidden]) .ov-stat:nth-child(3) { animation: fadeUp .45s ease .22s both; }
.dashboard-layout .tab-panel:not([hidden]) .ov-stat:nth-child(4) { animation: fadeUp .45s ease .29s both; }

/* Linhas de tabela ganham hover com leve deslocamento */
.dashboard-layout .charges-table tbody tr,
.dashboard-layout .data-table tbody tr {
  transition: background .15s ease, transform .15s ease;
}

/* ─── Acessibilidade: reduz tudo se o usuário pedir ────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-blob-1, .hero-blob-2, .hero-float-card { animation: none; }
  .hero-badge, .hero-title, .hero-subtitle, .hero-actions,
  .hero-stats, .hero-social-proof, .hero-mockup-wrapper { animation: none; opacity: 1; }
  .section-reveal .stagger > * { opacity: 1; transform: none; transition: none; }
  .dashboard-layout .tab-panel:not([hidden]),
  .dashboard-layout .tab-panel:not([hidden]) .kpi-card,
  .dashboard-layout .tab-panel:not([hidden]) .ov-stat { animation: none; }
}