/* ─────────────────────────────────────────────────────────────
   landing.css — hero cinemático + utilities reusáveis (v15)
   Carrega DEPOIS de tokens.css.
   ─────────────────────────────────────────────────────────────
   Estrutura:
   · Bloco 1: utilities genéricas (.bp-tech-grid, .bp-fx-orbs,
     .bp-fx-particles, .bp-fx-grain) — reusáveis em qualquer
     contexto (Detail fallback, Curador "nova conversa", etc.)
   · Bloco 2: classes específicas da landing (.bp-landing-*)
   ───────────────────────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════════════
   UTILITIES GENÉRICAS — reusáveis fora do contexto landing
   ═════════════════════════════════════════════════════════════ */

/* Grid tecnológico mascarado — usar como background absoluto */
.bp-tech-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* Orbs flutuantes — luz, não círculos sólidos */
.bp-fx-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bp-fx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px) saturate(140%);
  will-change: transform, opacity;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Partículas subindo */
.bp-fx-particles {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
}
.bp-fx-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--bp-blue-hi);
  box-shadow: 0 0 6px var(--bp-blue);
  opacity: 0;
  animation: bpParticleRise linear infinite;
  will-change: transform, opacity;
}

/* Grain SVG noise overlay */
.bp-fx-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

@keyframes bpParticleRise {
  0%   { transform: translateY(0)      scale(1);   opacity: 0; }
  10%  {                                          opacity: 0.7; }
  90%  {                                          opacity: 0.7; }
  100% { transform: translateY(-820px) scale(0.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-fx-orb, .bp-fx-particle { animation: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   LANDING (escopado) — hero + secção de projetos
   ═════════════════════════════════════════════════════════════
   Decisões:
   · Orbs grandes radial (não círculos sólidos) — luz, não bola.
     blur 120px + opacidade ≤ .55 pra não competir com o título.
   · 3 orbs com keyframes diferentes pra evitar batida visual.
   · Partículas: 30 elementos absolutos com translateY + opacity.
     Render no React via useMemo (estáveis entre re-renders).
   · Grid mascarado por radial-gradient pra não invadir o título.
   · Logo "respira" só 1.0 → 1.025 (não exagerar).
   ───────────────────────────────────────────────────────────── */

/* ── Container ─────────────────────────────────────────────── */
.bp-landing-hero {
  position: relative;
  min-height: clamp(640px, 86vh, 920px);
  background: #050505;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  isolation: isolate;       /* contain blends/blurs pro hero */
}

/* ── Camada 1 — grid mascarado ─────────────────────────────── */
.bp-landing-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 40%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 60% at 30% 40%, #000 30%, transparent 80%);
  opacity: 0.6;
  z-index: 0;
}

/* ── Camada 2 — orbs flutuando ─────────────────────────────── */
.bp-landing-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bp-landing-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px) saturate(140%);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.bp-landing-orb-1 {
  width: 520px; height: 520px;
  left: -120px; top: -180px;
  background: radial-gradient(closest-side, var(--bp-blue) 0%, transparent 70%);
  opacity: 0.55;
  animation: bpFloat1 18s ease-in-out infinite;
}
.bp-landing-orb-2 {
  width: 420px; height: 420px;
  right: -80px; top: 20%;
  background: radial-gradient(closest-side, #5566ff 0%, transparent 70%);
  opacity: 0.40;
  animation: bpFloat2 24s ease-in-out infinite;
}
.bp-landing-orb-3 {
  width: 360px; height: 360px;
  left: 35%; bottom: -120px;
  background: radial-gradient(closest-side, var(--bp-blue-hi) 0%, transparent 70%);
  opacity: 0.30;
  animation: bpFloat3 22s ease-in-out infinite;
}
@keyframes bpFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, 30px) scale(1.06); }
}
@keyframes bpFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, 60px) scale(0.95); }
}
@keyframes bpFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -40px) scale(1.05); }
}

/* ── Camada 3 — partículas subindo ─────────────────────────── */
.bp-particles {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
}
.bp-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--bp-blue-hi);
  box-shadow: 0 0 6px var(--bp-blue);
  opacity: 0;
  animation: bpParticleRise linear infinite;
  will-change: transform, opacity;
}
@keyframes bpParticleRise {
  0%   { transform: translateY(0)      scale(1);   opacity: 0; }
  10%  {                                          opacity: 0.7; }
  90%  {                                          opacity: 0.7; }
  100% { transform: translateY(-820px) scale(0.4); opacity: 0; }
}

/* ── Camada 4 — grain overlay ──────────────────────────────── */
.bp-landing-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

/* ── Topbar transparente ───────────────────────────────────── */
.bp-landing-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex; align-items: center;
  padding: 0 32px; gap: 24px;
  z-index: 5;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(5,5,5,0.55) 0%, transparent 100%);
}
.bp-landing-topbar-nav {
  display: flex; gap: 20px; flex: 1; justify-content: flex-end;
}
.bp-landing-topbar-nav a {
  font-size: 13px; font-weight: 500;
  color: var(--bp-ink-dim);
  transition: color var(--bp-dur) var(--bp-ease);
}
.bp-landing-topbar-nav a:hover { color: var(--bp-blue-hi); }
.bp-landing-topbar-login { padding: 8px 18px !important; font-size: 13px !important; }

/* ── Bloco de conteúdo central ─────────────────────────────── */
.bp-landing-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 32px 80px;
  text-align: center;
}

/* logo "respirando" */
.bp-landing-logo {
  width: 72px; height: auto;
  display: block;
  margin: 0 auto 28px;
  filter: drop-shadow(0 0 24px var(--bp-blue-soft));
  animation: bpBreath 4.5s ease-in-out infinite;
}
@keyframes bpBreath {
  0%, 100% { transform: scale(1);     filter: drop-shadow(0 0 24px var(--bp-blue-soft)); }
  50%      { transform: scale(1.025); filter: drop-shadow(0 0 36px var(--bp-blue-soft)); }
}

/* eyebrow com hairline */
.bp-landing-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--bp-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bp-blue);
  margin-bottom: 24px;
  opacity: 0;
  animation: bpFadeUp 600ms var(--bp-ease) 100ms forwards;
}
.bp-landing-eyebrow-line {
  width: 32px; height: 1px;
  background: var(--bp-blue);
  display: inline-block;
  box-shadow: 0 0 8px var(--bp-blue-soft);
}

/* título — Inter 800 + <em> Fraunces italic */
.bp-landing-title {
  font-family: var(--bp-sans);
  font-weight: 800;
  font-size: 76px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--bp-ink);
  text-wrap: balance;
  margin: 0 0 24px;
  opacity: 0;
  animation: bpRise 700ms var(--bp-ease) 200ms forwards;
}
.bp-landing-title em {
  font-family: var(--bp-poster);
  font-style: italic;
  font-weight: 600;
  /* sutil, não chamativo */
  background: linear-gradient(180deg, var(--bp-ink) 0%, #d6e9ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* subtítulo */
.bp-landing-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--bp-ink-dim);
  max-width: 560px;
  margin: 0 auto 36px;
  opacity: 0;
  animation: bpRise 700ms var(--bp-ease) 320ms forwards;
}

/* CTAs */
.bp-landing-ctas {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 40px;
  opacity: 0;
  animation: bpRise 700ms var(--bp-ease) 440ms forwards;
}
.bp-landing-cta-primary { padding: 14px 28px !important; font-size: 14px !important; }
.bp-landing-cta-ghost   { padding: 14px 22px !important; font-size: 14px !important; }

/* meta info inline */
.bp-landing-meta {
  display: inline-flex; align-items: center; gap: 14px;
  flex-wrap: wrap; justify-content: center;
  font-size: 12px;
  color: var(--bp-ink-mute);
  letter-spacing: 0.04em;
  opacity: 0;
  animation: bpRise 700ms var(--bp-ease) 560ms forwards;
}
.bp-landing-meta-sep { color: var(--bp-line-strong); }

/* ── Reduzir motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bp-landing-orb,
  .bp-particle,
  .bp-landing-logo {
    animation: none !important;
  }
  .bp-landing-eyebrow,
  .bp-landing-title,
  .bp-landing-sub,
  .bp-landing-ctas,
  .bp-landing-meta { opacity: 1; animation: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   .bp-section-projects — orbs/partículas/grid no fundo da seção
   "Projetos que começaram com uma ideia da comunidade"
   ═════════════════════════════════════════════════════════════
   Reusa keyframes bpFloat1/2/3 e bpParticleRise.
   Posições dos orbs ajustadas pra esta seção (não idênticas ao hero). */

/* Container já tem position:relative+overflow:hidden via inline.
   Estes orbs entram como background absolutos. */
.bp-section-projects .bp-tech-grid {
  /* override do mask pra cobrir mais da seção (vs o hero que era off-center) */
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 30%, transparent 80%);
  opacity: 0.45;
}

.bp-projects-orb-1 {
  width: 540px; height: 540px;
  left: -140px; top: -100px;
  background: radial-gradient(closest-side, var(--bp-blue) 0%, transparent 70%);
  opacity: 0.42;
  animation: bpFloat1 18s ease-in-out infinite;
}
.bp-projects-orb-2 {
  width: 460px; height: 460px;
  right: -120px; bottom: -160px;
  background: radial-gradient(closest-side, #5566ff 0%, transparent 70%);
  opacity: 0.32;
  animation: bpFloat2 24s ease-in-out infinite;
}
.bp-projects-orb-3 {
  width: 320px; height: 320px;
  left: 55%; top: 30%;
  background: radial-gradient(closest-side, var(--bp-blue-hi) 0%, transparent 70%);
  opacity: 0.22;
  animation: bpFloat3 22s ease-in-out infinite;
}

/* Hover lift no card de projeto da comunidade — hover via .bp-card-interactive */
.bp-section-projects .bp-community-card:hover {
  border-color: var(--bp-line-strong);
  border-top-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04) !important;
  transform: translateY(-3px);
  box-shadow: var(--bp-shadow-card-hover);
}

/* Em viewport pequeno, reduz qtd de partículas via opacity (CSS-only ajuste) */
@media (max-width: 640px) {
  .bp-section-projects .bp-fx-particle:nth-child(odd) { display: none; }
  .bp-projects-orb-1, .bp-projects-orb-2, .bp-projects-orb-3 {
    filter: blur(80px) saturate(140%);  /* reduz blur pra performance */
  }
}

@media (prefers-reduced-motion: reduce) {
  .bp-projects-orb-1, .bp-projects-orb-2, .bp-projects-orb-3 { animation: none; }
}

/* ═════════════════════════════════════════════════════════════
   Section logo — usado no eyebrowLogo do _SectionHead.
   Logo BP grande no topo de seções, com glow azul e hover
   (lift + scale + glow mais forte).
   ═════════════════════════════════════════════════════════════ */
.bp-section-logo-img {
  height: 220px;
  width:  auto;
  display: block;
  filter: drop-shadow(0 14px 56px rgba(0, 153, 255, 0.42))
          drop-shadow(0 0 24px rgba(0, 153, 255, 0.24));
  transition: transform 400ms var(--bp-ease),
              filter    400ms var(--bp-ease);
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
}
.bp-section-logo-img:hover {
  transform: translateY(-6px) scale(1.05);
  filter: drop-shadow(0 22px 72px rgba(0, 153, 255, 0.65))
          drop-shadow(0 0 36px rgba(0, 153, 255, 0.5));
}

@media (max-width: 1100px) {
  .bp-section-logo-img { height: 180px; }
}
@media (max-width: 900px) {
  .bp-section-logo-img { height: 150px; }
}
@media (max-width: 640px) {
  .bp-section-logo-img { height: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-section-logo-img { transition: none; }
  .bp-section-logo-img:hover { transform: none; }
}


/* ═════════════════════════════════════════════════════════════
   MOBILE — landing pública sem scroll lateral
   ═════════════════════════════════════════════════════════════
   `!important` em vários lugares pra sobrepor inline styles do JSX
   (que vencem CSS classes por especificidade). Estratégia:
   1. Stack todos os grids → 1 coluna
   2. Reduzir paddings verticais drásticos
   3. Cortar paddings laterais duplicados (pai .bp-section-pad já
      cuida via mobile.css, inner container não precisa de mais 32px)
   4. Esconder o <br> da CTA strip pra deixar quebra automática.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero — content block padding mais enxuto + max-width livre */
  .bp-landing-hero-content {
    padding: 96px 16px 56px !important;
    max-width: 100% !important;
  }
  .bp-landing-hero-content > div {
    max-width: 100% !important;
  }

  /* Hero h1 escala fluido (em vez do clamp 42-84 que ficava grande
     pra título de 7 palavras em mobile) */
  .bp-landing-hero-content h1 {
    font-size: clamp(34px, 8vw, 48px) !important;
    line-height: 1.05 !important;
  }
  .bp-landing-hero-content p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Seções da landing — paddings verticais */
  .bp-landing-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .bp-cta-strip.bp-landing-section {
    padding: 80px 16px !important;
  }

  /* Inner containers das seções — JSX manda padding: 0 32px inline.
     Em mobile o pai (.bp-section-pad) já dá 16px lateral, basta
     zerar o duplicado aqui. */
  .bp-landing-section .bp-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Stack grids: 3 cols / 2 cols → 1 col */
  .bp-how-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 40px !important;
  }
  .bp-community-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 40px !important;
  }

  /* Cards do how-it-works enxutos */
  .bp-step-card {
    padding: 24px 22px 26px !important;
  }
  .bp-step-card h3 {
    font-size: 19px !important;
  }

  /* Cards de community projects: corpo enxuto + título escala */
  .bp-community-card-body {
    padding: 22px 20px 24px !important;
  }
  .bp-community-card-body h3 {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.05 !important;
  }

  /* CTA strip — h2 sem <br> forçado em mobile (deixa quebra natural) */
  .bp-cta-br { display: none; }
  .bp-cta-strip h2 {
    font-size: clamp(28px, 7vw, 40px) !important;
  }

  /* Section logo (logo BP grande no eyebrow) — reduz mais ainda */
  .bp-landing-section .bp-section-logo {
    margin-bottom: 56px !important;
  }
  .bp-landing-section .bp-section-logo-img {
    height: 96px !important;
  }
}

/* Telas muito apertadas (≤390 — iPhone 13 Pro vertical) */
@media (max-width: 400px) {
  .bp-landing-hero-content {
    padding: 88px 14px 48px !important;
  }
  .bp-cta-strip.bp-landing-section {
    padding: 64px 14px !important;
  }
}