/* ============================================================
   EFFECTS.CSS — Camada visual premium
   Carregado por último, aplica-se sobre o sistema base.
   ============================================================ */


/* ------------------------------------------------------------
   1. GRAIN TEXTURE — dark sections
   ------------------------------------------------------------ */
.section--dark,
.section--darker {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  background-blend-mode: soft-light;
}


/* ------------------------------------------------------------
   2. HERO — glow radial + dot grid
   ------------------------------------------------------------ */
.hero, .page-hero {
  overflow: hidden;
}

/* Glow roxo atrás do conteúdo */
.hero::before, .page-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  padding-bottom: 90%;
  background: radial-gradient(
    ellipse at center,
    rgba(145, 70, 255, .55) 0%,
    rgba(145, 70, 255, .22) 38%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

/* Dot grid sutil */
.hero::after, .page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(145, 70, 255, .18) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Container acima dos pseudo-elements */
.hero > .container,
.page-hero > .container {
  position: relative;
  z-index: 1;
}


/* ------------------------------------------------------------
   3. HERO ENTRANCE — animação no carregamento
   ------------------------------------------------------------ */
@keyframes heroEntry {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero .eyebrow,
.page-hero .eyebrow {
  animation: heroEntry .7s cubic-bezier(.22, 1, .36, 1) .05s both;
}

.hero h1,
.page-hero h1 {
  animation: heroEntry .8s cubic-bezier(.22, 1, .36, 1) .18s both;
}

.hero h2,
.page-hero h2 {
  animation: heroEntry .7s cubic-bezier(.22, 1, .36, 1) .27s both;
}

.hero .hero__lead,
.page-hero .page-hero__lead {
  animation: heroEntry .7s cubic-bezier(.22, 1, .36, 1) .38s both;
}

.hero .hero__actions {
  animation: heroEntry .7s cubic-bezier(.22, 1, .36, 1) .48s both;
}


/* ------------------------------------------------------------
   4. TIPOGRAFIA — headline maior, gradient no H1 escuro
   ------------------------------------------------------------ */
.hero h1, .page-hero h1 {
  font-size: clamp(1.85rem, 3.8vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -.03em;
}

/* Subheadline no hero (H2 dentro de .hero ou .page-hero) */
.hero h2, .page-hero h2 {
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
  max-width: 52ch;
  margin-top: 0;
  margin-bottom: var(--space-lg);
  letter-spacing: -.01em;
}

/* Gradient de Porcelana → Pervinca nos H1 de fundo escuro */
.section--dark h1,
.section--darker h1 {
  background: linear-gradient(155deg, var(--w) 35%, rgba(204, 193, 255, .85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--w); /* fallback */
  display: inline-block; /* necessário para background-clip: text funcionar */
  max-width: 100%; /* garante quebra de linha correta */
}

/* H2 em dark: mais leve, sem gradient para não competir com H1 */
.section--dark h2,
.section--darker h2 {
  letter-spacing: -.025em;
}

/* Eyebrow com gradient roxo → pervinca */
.eyebrow {
  background: linear-gradient(90deg, var(--roxo) 0%, var(--pervinca) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--roxo); /* fallback */
}

/* Nav: item ativo */
.site-nav a[aria-current="page"] {
  color: var(--w);
  font-weight: 600;
}


/* ------------------------------------------------------------
   5. HEADER — glass com blur
   ------------------------------------------------------------ */
.site-header {
  background-color: rgba(20, 17, 16, .8);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: padding-block .25s ease, background-color .25s ease, border-color .25s ease;
}

.site-header.is-scrolled {
  padding-block: .65rem;
  background-color: rgba(20, 17, 16, .92);
  border-bottom-color: rgba(145, 70, 255, .4);
}


/* ------------------------------------------------------------
   6. BOTÕES — glow e elevação
   ------------------------------------------------------------ */
.btn--primary {
  box-shadow: 0 2px 16px rgba(145, 70, 255, .3);
  transition: opacity var(--ease), box-shadow var(--ease), transform var(--ease), background-color var(--ease);
}

.btn--primary:hover {
  opacity: 1;
  box-shadow: 0 6px 28px rgba(145, 70, 255, .55), 0 2px 8px rgba(145, 70, 255, .3);
  transform: translateY(-2px);
}

.btn--ghost:hover {
  box-shadow: 0 4px 20px rgba(145, 70, 255, .25);
}

.btn--ghost-light:hover {
  box-shadow: 0 4px 20px rgba(255, 255, 255, .08);
}

.site-nav__cta {
  transition: opacity var(--ease), box-shadow var(--ease) !important;
}

.site-nav__cta:hover {
  opacity: 1 !important;
  box-shadow: 0 4px 16px rgba(145, 70, 255, .4) !important;
}


/* ------------------------------------------------------------
   7. CARDS — glow hover, gradient border em dark
   ------------------------------------------------------------ */

/* Cards em seções claras */
.frente-card:hover,
.routing-card:hover {
  box-shadow: 0 12px 40px rgba(145, 70, 255, .12), 0 4px 12px rgba(0, 0, 0, .06);
}

/* Cards em seções escuras */
.case-card {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.case-card:hover {
  border-color: rgba(145, 70, 255, .5);
  box-shadow:
    0 0 0 1px rgba(145, 70, 255, .2),
    0 8px 32px rgba(0, 0, 0, .4),
    0 0 40px rgba(145, 70, 255, .1);
  transform: translateY(-2px);
}

/* Gradient border sutil nos cards de prova ao vivo */
.live-panel,
.chat-mock,
.report-card {
  position: relative;
}

.live-panel::before,
.chat-mock::before,
.report-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(145, 70, 255, .5) 0%,
    rgba(145, 70, 255, .08) 50%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Plano em destaque */
.plan-card--featured {
  position: relative;
}

.plan-card--featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(145, 70, 255, .7) 0%, rgba(204, 193, 255, .2) 60%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}


/* ------------------------------------------------------------
   8. WHATSAPP — pulse suave
   ------------------------------------------------------------ */
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, .35); }
  50%       { box-shadow: 0 4px 20px rgba(0, 0, 0, .35), 0 0 0 10px rgba(145, 70, 255, .08); }
}

#wa-float__btn {
  animation: wa-pulse 3.5s ease-in-out 8s infinite;
}


/* ------------------------------------------------------------
   9. SCROLL REVEAL — JS adiciona .will-reveal e .is-visible
   ------------------------------------------------------------ */
.will-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}

.will-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger automático para filhos de grid */
.will-reveal:nth-child(2) { transition-delay: .08s; }
.will-reveal:nth-child(3) { transition-delay: .16s; }
.will-reveal:nth-child(4) { transition-delay: .24s; }
.will-reveal:nth-child(5) { transition-delay: .32s; }


/* ------------------------------------------------------------
   10. ESTATÍSTICAS — reveal com scale
   ------------------------------------------------------------ */
.stat-strip__value,
.case-card__result,
.metric__value {
  display: inline-block;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

.will-reveal .stat-strip__value,
.will-reveal .case-card__result,
.will-reveal .metric__value {
  transform: scale(.92);
}

.will-reveal.is-visible .stat-strip__value,
.will-reveal.is-visible .case-card__result,
.will-reveal.is-visible .metric__value {
  transform: scale(1);
}


/* ------------------------------------------------------------
   11. LOGO — wordmark refinado
   ------------------------------------------------------------ */
.site-header__logo {
  background: linear-gradient(90deg, var(--w) 60%, rgba(255,255,255,.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--w);
  font-size: var(--fs-xl);
  letter-spacing: -.04em;
}

.site-header__logo span {
  -webkit-text-fill-color: var(--roxo);
  background: none;
}

/* Logo no footer */
.site-footer__brand {
  font-size: var(--fs-xl);
  letter-spacing: -.04em;
}


/* ------------------------------------------------------------
   12. SEÇÃO MID — borda sutil no topo/base
   ------------------------------------------------------------ */
.section--mid {
  border-top: 1px solid rgba(0, 0, 0, .06);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}


/* ------------------------------------------------------------
   13. MOBILE — desligar efeitos pesados em telas pequenas
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .hero::before, .page-hero::before {
    width: 200%;
    padding-bottom: 150%;
    opacity: .7;
  }

  /* Grain menos intensa */
  .section--dark, .section--darker {
    background-size: 160px 160px;
  }

  /* Gradiente no H1 mobile pode "quebrar" se display:inline-block truncar — usar block */
  .section--dark h1, .section--darker h1 {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .will-reveal,
  .hero .eyebrow, .hero h1, .hero h2, .hero .hero__lead, .hero .hero__actions,
  .page-hero .eyebrow, .page-hero h1, .page-hero h2, .page-hero .page-hero__lead {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  #wa-float__btn {
    animation: none;
  }
}