/* =========================================================
   Black Pro · intro de abertura (overlay sobre a página)
   Markup: #bpIntro em index.html · lógica: js/intro.js
   Mesma animação de intro.html, com classes prefixadas bpi-
   ========================================================= */
.bpi {
  --bpi-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bpi-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  position: fixed; inset: 0; z-index: 10000;
  display: flex; place-items: center;
  background: #1A1C1C;
  overflow: hidden;
  cursor: pointer;
  transition: opacity .6s var(--bpi-ease-io), visibility 0s linear .6s;
}
html.bpi-run .bpi { display: grid; }
html.bpi-on { overflow: hidden; }

/* atmosfera */
.bpi-spot, .bpi-vignette, .bpi-grain { position: absolute; inset: 0; pointer-events: none; }
.bpi-spot {
  background:
    radial-gradient(60% 45% at 50% 46%, rgba(244, 243, 238, .07), transparent 70%),
    radial-gradient(30% 22% at 62% 46%, rgba(224, 251, 172, .06), transparent 70%);
  opacity: 0;
  animation: bpi-fade 1.4s ease .1s forwards;
}
.bpi-vignette { background: radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(26, 28, 28, .9) 100%); }
.bpi-grain {
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bpi-stage {
  position: relative; width: min(74vw, 780px);
  transition: transform .6s var(--bpi-ease-io), filter .6s var(--bpi-ease-io);
}
.bpi-wrap { -webkit-box-reflect: below 10px linear-gradient(transparent 52%, rgba(255, 255, 255, .16)); }
.bpi-logo { display: block; width: 100%; height: auto; overflow: visible; }

/* letras: desfoque → nítido, fade, esquerda → direita */
.bpi-l, .bpi-p {
  opacity: 0;
  transform: translateX(-28px);
  filter: blur(10px);
  animation: bpi-enter .8s var(--bpi-ease) forwards;
}
.bpi-l { animation-delay: calc(.1s + var(--i) * .06s); }
.bpi-p { animation-delay: calc(.5s + var(--i) * .06s); animation-duration: .7s; }
@keyframes bpi-enter {
  0%   { opacity: 0; transform: translateX(-28px); filter: blur(10px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* caixa do PRO abre da esquerda */
.bpi-box {
  clip-path: inset(0 100% 0 0 round 10px);
  animation: bpi-unveil .7s var(--bpi-ease-io) .35s forwards;
}
@keyframes bpi-unveil { to { clip-path: inset(0 0 0 0 round 10px); } }

.bpi-edge { opacity: 0; animation: bpi-fade .6s ease .8s forwards; }
@keyframes bpi-fade { to { opacity: 1; } }

/* reflexo (uma passada) */
.bpi-sheen {
  mix-blend-mode: screen;
  transform: translateX(-400px) skewX(-20deg);
  animation: bpi-sheen .9s var(--bpi-ease-io) 1s forwards;
}
@keyframes bpi-sheen { to { transform: translateX(380px) skewX(-20deg); } }

.bpi-glint {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
  animation: bpi-glint .45s ease-out 1.65s forwards;
}
@keyframes bpi-glint {
  0%   { transform: scale(0) rotate(0deg);  opacity: 0; }
  35%  { transform: scale(1) rotate(45deg); opacity: 1; }
  100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

.bpi-pro-glow {
  filter: drop-shadow(0 0 6px rgba(224, 251, 172, .10));
  animation: bpi-glow 1.1s ease-in-out 1s forwards;
}
@keyframes bpi-glow {
  0%   { filter: drop-shadow(0 0 6px rgba(224, 251, 172, .10)); }
  55%  { filter: drop-shadow(0 0 28px rgba(224, 251, 172, .32)); }
  100% { filter: drop-shadow(0 0 10px rgba(224, 251, 172, .14)); }
}

/* saída: a logo se aproxima e desfoca enquanto a cortina some */
.bpi.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.bpi.is-out .bpi-stage { transform: scale(1.06); filter: blur(6px); }
.bpi.is-skip { transition-duration: .35s, 0s; transition-delay: 0s, .35s; }
.bpi.is-skip .bpi-stage { transition-duration: .35s; }

@media (prefers-reduced-motion: reduce) {
  .bpi { display: none; }
  html.bpi-on { overflow: auto; }
}