/* =========================================================================
   BLIPEI FX — camada de acabamento visual (BP-FX-001, 02/09/2026)
   Carrega DEPOIS de blipei.css. Aditiva: não redefine token, cor ou contraste
   (o AAA de BP-A11Y-AAA-001 continua valendo), só acrescenta profundidade,
   movimento e ritmo às classes que o site inteiro já usa.

   Motivo de marca: o BLIP — o pulso que aparece no mapa. Onde o Rally usa a
   bandeira quadriculada, aqui a textura é a MALHA DE RUAS vista de cima e o
   gesto é a ONDA DE RADAR. Mecanismo emprestado do design system v5, sotaque
   próprio do Blipei.

   Acessibilidade: nada aqui muda cor de texto. `prefers-reduced-motion`
   desliga o movimento AUTÔNOMO e preserva as micro-interações de hover/foco
   (matar tudo deixa a interface morta). O modo alto contraste (.bp-contrast)
   anula os efeitos decorativos.
   ========================================================================= */

:root{
  --bp-ease: cubic-bezier(.22, 1, .36, 1);
  --bp-fx-shadow:    0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.07);
  --bp-fx-shadow-lg: 0 24px 60px -18px rgba(15,23,42,.22);
  --bp-fx-ring: rgba(30,64,175,.38);
}
html.bp-dark{
  --bp-fx-shadow:    0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.30);
  --bp-fx-shadow-lg: 0 24px 60px -18px rgba(0,0,0,.55);
  --bp-fx-ring: rgba(124,154,232,.45);
}

/* -------------------------------------------------------------------------
   1. SCROLL REVEAL — o JS marca .bp-reveal e depois .in
   O estado final é o normal: sem JS, nada some (o .bp-reveal só é aplicado
   pelo próprio script, então quem não roda JS vê a página inteira).
   ------------------------------------------------------------------------- */
.bp-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--bp-ease), transform .65s var(--bp-ease);
  transition-delay: var(--bp-d, 0ms);
  will-change: opacity, transform;
}
.bp-reveal.in{ opacity: 1; transform: none; }

/* Onde o navegador entende animação guiada por rolagem, o reveal roda em CSS
   PURO — melhor que o JS: o elemento já visível nasce no estado final (não
   existe piscada) e nada depende de script. Aí o caminho do JS é neutralizado
   para os dois não brigarem. (padrão herdado do Paddock) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .bp-reveal{ opacity: 1; transform: none; transition: none; }

    .bp-section .bp-card,
    .bp-section .bp-section-title,
    .bp-section .bp-section-subtitle,
    .bp-grid > *{
      animation: bpRevelar 1ms linear both;
      animation-timeline: view();
      animation-range: entry 3% entry 44%;
    }
    /* escada por coluna, sem uma linha de JS */
    .bp-grid > :nth-child(3n+2){ animation-range: entry 7%  entry 48%; }
    .bp-grid > :nth-child(3n+3){ animation-range: entry 11% entry 52%; }
  }
}
@keyframes bpRevelar{
  from{ opacity: 0; transform: translate3d(0, 22px, 0); }
  to  { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   2. HERO — aurora + granulado + malha de ruas
   O .bp-hero já é gradiente azul→escuro no blipei.css; aqui ganha volume.
   Todas as camadas são decorativas e ficam ATRÁS do conteúdo (z-index).
   ------------------------------------------------------------------------- */
.bp-hero{ isolation: isolate; }
.bp-hero > *{ position: relative; z-index: 2; }

/* aurora: dois halos que respiram devagar */
.bp-hero::before{
  content: "";
  position: absolute;
  z-index: 0;
  right: -8%; top: -40%;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(96,165,250,.30), transparent 72%);
  filter: blur(70px);
  pointer-events: none;
  animation: bpAurora 22s ease-in-out infinite alternate;
  will-change: transform;
}
/* ⚠️ O blipei.css:710 JÁ define .bp-hero::after (o brilho âmbar no canto
   superior direito). Como esta folha carrega depois, redeclarar o seletor
   APAGARIA aquele brilho — então ele é reescrito aqui como primeira camada,
   e a malha de ruas entra como camadas adicionais do mesmo background. */
.bp-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    /* 1. brilho âmbar — idêntico ao original, preservado */
    radial-gradient(circle at 90% 20%, rgba(245,158,11,.18), transparent 40%),
    /* 2 e 3. malha de ruas vista de cima: o motivo do guia de bairro */
    linear-gradient(to right,  rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: auto, 68px 68px, 68px 68px;
}
@keyframes bpAurora{
  from{ transform: translate3d(0,0,0) scale(1); }
  to  { transform: translate3d(-38px, 26px, 0) scale(1.14); }
}

/* -------------------------------------------------------------------------
   3. CARDS — elevação real, borda que acende, ícone que reage
   ------------------------------------------------------------------------- */
.bp-card{
  box-shadow: var(--bp-fx-shadow);
  transition: transform .28s var(--bp-ease),
              box-shadow .28s var(--bp-ease),
              border-color .28s var(--bp-ease);
}
.bp-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--bp-fx-shadow-lg);
  border-color: var(--bp-fx-ring);
}
.bp-card .bp-card-icon{
  transition: transform .28s var(--bp-ease), box-shadow .28s var(--bp-ease);
}
.bp-card:hover .bp-card-icon{
  transform: scale(1.08) rotate(-5deg);
}
/* foco por teclado recebe o MESMO destaque do hover (não só o anel) */
.bp-card:focus-visible{
  transform: translateY(-5px);
  box-shadow: var(--bp-fx-shadow-lg);
}

/* Fio de luz no topo do card. Fica afastado 8% das bordas para não brigar com
   o border-radius — assim dispensa overflow:hidden, que decapitaria badges
   posicionados fora do card (o "MAIS ESCOLHIDO" do /tv, por exemplo). */
.bp-section .bp-card{ position: relative; }
.bp-section .bp-card::before{
  content: "";
  position: absolute;
  top: -1px; left: 8%; right: 8%;
  height: 2px;
  pointer-events: none;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--bp-fx-ring), transparent);
  opacity: 0;
  transition: opacity .28s var(--bp-ease);
}
.bp-section .bp-card:hover::before,
.bp-section .bp-card:focus-within::before{ opacity: 1; }
/* o anel de foco precisa aparecer POR CIMA do fio e da sombra */
.bp-card :focus-visible{ position: relative; z-index: 2; }

/* -------------------------------------------------------------------------
   4. BOTÕES — a onda de radar corre pela base no hover
   ------------------------------------------------------------------------- */
.bp-btn, .bp-cta{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s var(--bp-ease), box-shadow .2s var(--bp-ease), background .2s;
}
.bp-btn-primary:hover, .bp-btn-cta:hover, .bp-cta:hover{
  transform: translateY(-2px);
}
/* resposta tátil ao clique — o botão "afunda" */
.bp-btn:active, .bp-cta:active{ transform: translateY(0) scale(.985); }
.bp-btn-primary{ box-shadow: 0 6px 18px rgba(30,64,175,.24); }
.bp-btn-primary:hover{ box-shadow: 0 12px 28px rgba(30,64,175,.34); }
.bp-btn-cta, .bp-cta{ box-shadow: 0 6px 18px rgba(245,158,11,.28); }
.bp-btn-cta:hover, .bp-cta:hover{ box-shadow: 0 12px 28px rgba(245,158,11,.38); }

.bp-btn-primary::after, .bp-btn-cta::after, .bp-cta::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  pointer-events: none;
  transform: translateX(-101%);
  transition: transform .55s var(--bp-ease);
  background: linear-gradient(90deg,
              rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
}
.bp-btn-cta::after, .bp-cta::after{
  background: linear-gradient(90deg,
              rgba(15,23,42,0), rgba(15,23,42,.55), rgba(15,23,42,0));
}
.bp-btn-primary:hover::after, .bp-btn-primary:focus-visible::after,
.bp-btn-cta:hover::after,     .bp-btn-cta:focus-visible::after,
.bp-cta:hover::after,         .bp-cta:focus-visible::after{
  transform: translateX(0);
}

/* -------------------------------------------------------------------------
   5. HEADER — sombra só depois que descola do topo
   ------------------------------------------------------------------------- */
.bp-header{
  transition: box-shadow .3s var(--bp-ease), border-color .3s var(--bp-ease);
}
.bp-header.bp-stuck{
  box-shadow: 0 6px 24px rgba(15,23,42,.10);
}
html.bp-dark .bp-header.bp-stuck{ box-shadow: 0 6px 24px rgba(0,0,0,.45); }

/* nav: sublinhado que cresce do centro */
.bp-nav > a{ position: relative; }
.bp-nav > a::after{
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 4px;
  height: 2px; border-radius: 2px;
  background: var(--bp-amber-500);
  transition: left .25s var(--bp-ease), right .25s var(--bp-ease);
}
.bp-nav > a:hover::after,
.bp-nav > a[aria-current="page"]::after{ left: 12px; right: 12px; }

/* -------------------------------------------------------------------------
   6. DETAILS / FAQ — chevron que gira (19 páginas usam <details>)
   Só nos details "soltos"; o menu Mais do header tem marcador próprio.
   ------------------------------------------------------------------------- */
details.bp-card > summary{
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 34px;
  transition: color .18s;
}
details.bp-card > summary::-webkit-details-marker{ display: none; }
details.bp-card > summary::after{
  content: "";
  position: absolute;
  right: 8px; top: .45em;
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--bp-blue-700);
  border-bottom: 2.5px solid var(--bp-blue-700);
  transform: rotate(45deg);
  transition: transform .25s var(--bp-ease), top .25s var(--bp-ease);
}
details.bp-card[open] > summary::after{ transform: rotate(-135deg); top: .75em; }

/* -------------------------------------------------------------------------
   7. O BLIP — pulso de radar. Motivo da marca, usado com parcimônia:
   no marcador de região da topbar. <span class="bp-blip"></span>
   ------------------------------------------------------------------------- */
.bp-blip{
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bp-amber-500);
  flex: none;
}
.bp-blip::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--bp-amber-500);
  animation: bpPing 2.8s var(--bp-ease) infinite;
}
@keyframes bpPing{
  0%       { transform: scale(1);   opacity: .85; }
  70%,100% { transform: scale(3.2); opacity: 0; }
}

/* -------------------------------------------------------------------------
   8. NÚMEROS — alinhamento tabular para os contadores animados
   ------------------------------------------------------------------------- */
[data-bp-count]{ font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   9. SEÇÕES — respiro e alternância suave
   ------------------------------------------------------------------------- */
.bp-section-title{ text-wrap: balance; }
.bp-section-subtitle{ text-wrap: pretty; }

/* -------------------------------------------------------------------------
   10. ACESSIBILIDADE
   ------------------------------------------------------------------------- */

/* Alto contraste: efeito decorativo atrapalha a leitura — desliga tudo. */
html.bp-contrast .bp-hero::before,
html.bp-contrast .bp-hero::after,
html.bp-contrast .bp-blip::after,
html.bp-contrast .bp-btn-primary::after,
html.bp-contrast .bp-btn-cta::after,
html.bp-contrast .bp-cta::after{ display: none !important; }
html.bp-contrast .bp-card{ box-shadow: none !important; }

/* Movimento reduzido: mata o movimento AUTÔNOMO (aurora, ping, reveal),
   mantém hover/foco — que é resposta a uma ação do usuário, não distração.
   O `animation:none` precisa ser explícito: animação guiada por rolagem não
   tem duração real, então a regra global de transition-duration não a alcança. */
@media (prefers-reduced-motion: reduce){
  .bp-reveal{ opacity: 1 !important; transform: none !important; transition: none; }
  .bp-section .bp-card,
  .bp-section .bp-section-title,
  .bp-section .bp-section-subtitle,
  .bp-grid > *{ animation: none !important; opacity: 1 !important; transform: none !important; }
  .bp-hero::before{ animation: none; }
  .bp-blip::after{ animation: none; opacity: .35; }
}

/* Impressão não tem rolagem: sem isto, um reveal parado em opacity:0 sairia
   como página em branco no papel/PDF. */
@media print{
  .bp-reveal,
  .bp-section .bp-card,
  .bp-section .bp-section-title,
  .bp-section .bp-section-subtitle,
  .bp-grid > *{ animation: none !important; opacity: 1 !important; transform: none !important; }
  .bp-hero::before, .bp-hero::after, .bp-blip::after{ display: none !important; }
  .bp-card{ box-shadow: none !important; }
}
html.bp-no-motion .bp-reveal{ opacity: 1 !important; transform: none !important; transition: none; }
html.bp-no-motion .bp-hero::before,
html.bp-no-motion .bp-blip::after{ animation: none; }