/* ==========================================================
   BLACK SPLIT
   - Monochrome dark cards per paragraph
   - Metallic beam + subtle glow
========================================================== */

@keyframes blackSplitBeam {
  0%   { opacity: 0; transform: translate(-140%, -140%) rotate(24deg); }
  40%  { opacity: 0.35; }
  55%  { opacity: 0.55; }
  70%  { opacity: 0.3; }
  100% { opacity: 0; transform: translate(170%, 170%) rotate(24deg); }
}

.ulse-black-split {
  font-family: "Noto Sans", "Roboto", Arial, sans-serif;
  width: 100%;
  margin: 0 auto 32px;
  color: #f1f1f1;
}

.ulse-black-split article {
  display: grid;
  gap: 18px;
}

.ulse-black-split h2,
.ulse-black-split h3,
.ulse-black-split h4 {
  margin: 12px 0 8px;
  font-weight: 800;
  background: linear-gradient(90deg, #ffffff, #cfcfcf, #f8f8f8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(255,255,255,0.25);
}

.ulse-black-split h2 { font-size: 32px; }
.ulse-black-split h3 { font-size: 24px; }

.ulse-black-split .ulse-para {
  position: relative;
  padding: 20px 22px 22px;
  border-radius: 18px;
  background: linear-gradient(145deg, #0b0b0b, #141414, #0c0c0c);
  border: 1px solid rgba(200,200,200,0.2);
  box-shadow:
    0 0 28px rgba(255,255,255,0.07),
    inset 0 0 26px rgba(255,255,255,0.03);
  overflow: hidden;
}

.ulse-black-split .ulse-para::before,
.ulse-black-split .ulse-para::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  pointer-events: none;
}

.ulse-black-split .ulse-para::before {
  background: linear-gradient(115deg, #fdfdfd 0%, #d6d6d6 40%, #9f9f9f 60%, #fdfdfd 100%);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 3px;
  box-shadow:
    0 0 16px rgba(255,255,255,0.16),
    0 0 26px rgba(255,255,255,0.08);
}

.ulse-black-split .ulse-para::after {
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,0.08) 36%,
    rgba(255,255,255,0.16) 52%,
    rgba(255,255,255,0.08) 66%,
    transparent 100%
  );
  filter: blur(1.2px);
  animation: blackSplitBeam 7s linear infinite;
}

.ulse-black-split .ulse-para.para-first {
  border-color: rgba(220,220,220,0.32);
  box-shadow:
    0 0 32px rgba(255,255,255,0.12),
    inset 0 0 22px rgba(255,255,255,0.04);
}

.ulse-black-split .ulse-para p {
  margin: 0;
  color: #e6e6e6;
  line-height: 1.9;
}

.ulse-black-split strong,
.ulse-black-split b {
  font-weight: 800;
  background: linear-gradient(90deg, #ffffff, #cfcfcf, #f5f5f5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(255,255,255,0.25);
}

.ulse-black-split a {
  color: #f7f7f7;
  font-weight: 700;
  text-decoration: none;
  position: relative;
}

.ulse-black-split a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #cfcfcf, #ffffff);
  box-shadow: 0 0 8px rgba(255,255,255,0.35);
  transition: width 0.3s ease;
}

.ulse-black-split a:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255,255,255,0.45);
}

.ulse-black-split a:hover::after {
  width: 100%;
}

@media (max-width: 640px) {
  .ulse-black-split .ulse-para {
    padding: 18px 16px 20px;
  }
}