/* ==========================================================
   dark — Black + Silver Futurist Edition
   High-end diagonal light + animated underline for paragraphs
========================================================== */

@keyframes darkBeam {
  0%   { opacity: 0; transform: translate(-160%, -160%) rotate(25deg); }
  40%  { opacity: 0.35; }
  50%  { opacity: 0.55; }
  70%  { opacity: 0.30; }
  100% { opacity: 0; transform: translate(200%, 200%) rotate(25deg); }
}

@keyframes darkUnderline {
  0%   { width: 0%; }
  50%  { width: 100%; }
  100% { width: 0%; }
}

@keyframes darkFade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* MAIN WRAPPER */
.ulse-dark {
  font-family: "Noto Sans", "Roboto", Arial, sans-serif;
  max-width: 1120px;
  margin: 48px auto;
  padding: 44px 40px;

  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,0.08), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.06), transparent 30%),
    linear-gradient(140deg, #050505 0%, #0a0a0a 45%, #0c0c0c 100%);
  color: #f2f2f2;

  border-radius: 26px;
  position: relative;
  overflow: hidden;

  animation: darkFade 1.2s ease forwards;
  opacity: 0;

  box-shadow:
    0 0 60px rgba(0,0,0,0.65),
    0 0 90px rgba(255,255,255,0.04),
    inset 0 0 38px rgba(255,255,255,0.03);
}

/* DIAGONAL LIGHT BEAM */
.ulse-dark::before {
  content: "";
  position: absolute;

  width: 220%;
  height: 220%;
  top: -60%;
  left: -60%;

  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,0.07) 38%,
    rgba(255,255,255,0.15) 52%,
    rgba(255,255,255,0.07) 65%,
    transparent 100%
  );

  filter: blur(2px);
  animation: darkBeam 9s linear infinite;
  pointer-events: none;
}

.ulse-dark::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 30px;
  background: linear-gradient(120deg, #f6f6f6 0%, #d4d4d4 40%, #a8a8a8 60%, #f6f6f6 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: 4px;
  box-shadow: 0 0 22px rgba(255,255,255,0.12);
  pointer-events: none;
}

/* HEADINGS */
.ulse-dark h2,
.ulse-dark h3,
.ulse-dark h4 {
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 800;

  background: linear-gradient(90deg, #f5f5f5, #dcdcdc, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 0 16px rgba(255,255,255,0.25);
}

.ulse-dark h2 {
  font-size: 34px;
}

.ulse-dark h3 {
  font-size: 26px;
}

/* PARAGRAPHS */
.ulse-dark p {
  font-size: 19px;
  line-height: 1.9;
  margin-bottom: 32px;
  color: #e9edf5;
  position: relative;
  padding: 12px 0;
}

/* Animated underline line under each paragraph */
.ulse-dark p::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;

  height: 2px;
  width: 0%;
  border-radius: 2px;

  background: linear-gradient(90deg, #b5b5b5, #ffffff, #cfcfcf);
  box-shadow: 0 0 8px rgba(255,255,255,0.35);

  animation: darkUnderline 2.8s ease-in-out infinite;
}

/* IMAGES */
.ulse-dark img {
  width: 100%;
  border-radius: 18px;
  margin: 32px 0;

  box-shadow:
    0 0 25px rgba(255,255,255,0.10),
    0 0 65px rgba(0,0,0,0.85);

  transition: transform 0.35s ease;
}

.ulse-dark img:hover {
  transform: scale(1.03);
}

/* LINKS */
.ulse-dark a {
  color: #e2e2e2;
  font-weight: 700;
  text-decoration: none;
  position: relative;
}

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

.ulse-dark a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;

  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #bfbfbf, #ffffff);
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
  transition: width 0.3s ease;
}

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

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

/* FIX long words */
.ulse-dark {
  overflow-wrap: break-word;
  word-break: break-word;
}

.ulse-dark p,
.ulse-dark a {
  overflow-wrap: anywhere;
}

/* CENTER TEXT */
.ulse-dark .center {
  text-align: center;
  font-size: 20px;
  margin-top: 10px;
  color: #dfe9f5;
  text-shadow: 0 0 14px rgba(120,170,255,0.35);
}