/* ============================================================
   PAGE BASE
   ============================================================ */
body {
  margin: 0;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #fff;
}


/* ============================================================
   HERO CONTAINER
   ============================================================ */
.bjj-hero {
  position: relative;
  width: 60vmin;
  height: 60vmin;
  z-index: 1;
}


/* ============================================================
   SPOTLIGHT IMAGE (your blurred silhouette)
   ============================================================ */
.hero-spotlight {
  background-image: url("/images/bjj_coming_soon_spotlight.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1; /* bottom */
}


/* ============================================================
   "COMING SOON" TEXT (locked to bottom center)
   ============================================================ */
.coming-text {
  position: absolute;
  bottom: 6vmin;
  width: 100%;
  text-align: center;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  font-size: 1.6vmin;
  color: rgba(255, 255, 255, 0.85);
  z-index: 4; /* above particles */
}


/* ============================================================
   PARTICLES OVERLAY (animated floating dust/snow)
   ============================================================ */
.particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

/* each particle */
.particles span {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  filter: blur(1px);
  animation: drift 12s linear infinite;
}

/* manually scatter particles */
.particles span:nth-child(1)  { top: 10%; left: 20%; animation-duration: 14s; }
.particles span:nth-child(2)  { top: 25%; left: 60%; animation-duration: 17s; }
.particles span:nth-child(3)  { top: 40%; left: 10%; animation-duration: 19s; }
.particles span:nth-child(4)  { top: 55%; left: 45%; animation-duration: 16s; }
.particles span:nth-child(5)  { top: 35%; left: 80%; animation-duration: 20s; }
.particles span:nth-child(6)  { top: 70%; left: 25%; animation-duration: 13s; }
.particles span:nth-child(7)  { top: 15%; left: 75%; animation-duration: 18s; }
.particles span:nth-child(8)  { top: 85%; left: 50%; animation-duration: 22s; }
.particles span:nth-child(9)  { top: 65%; left: 10%; animation-duration: 15s; }
.particles span:nth-child(10) { top: 50%; left: 90%; animation-duration: 21s; }

/* CORE PARTICLE STYLE (two layers, each with many shadows) */
.particles::before,
.particles::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  filter: blur(1px);
  animation: drift 14s linear infinite;
}

* layer 1 – dots scattered across LEFT + CENTER + RIGHT */
.particles::before {
  box-shadow:
    /* top arc */
    -24vmin -18vmin 4px rgba(255,255,255,0.35),
     -10vmin -20vmin 4px rgba(255,255,255,0.30),
       0vmin -19vmin 4px rgba(255,255,255,0.32),
      12vmin -18vmin 4px rgba(255,255,255,0.30),
      24vmin -16vmin 4px rgba(255,255,255,0.34),

    /* mid band */
    -22vmin  -4vmin 4px rgba(255,255,255,0.30),
    -10vmin   0vmin 4px rgba(255,255,255,0.32),
      5vmin   2vmin 4px rgba(255,255,255,0.30),
     18vmin  -2vmin 4px rgba(255,255,255,0.32),

    /* lower band */
    -16vmin  12vmin 4px rgba(255,255,255,0.32),
     -4vmin  16vmin 4px rgba(255,255,255,0.34),
     10vmin  18vmin 4px rgba(255,255,255,0.30),
     22vmin  14vmin 4px rgba(255,255,255,0.30);
}

/* layer 2 – second cloud, offset + slower + reversed */
.particles::after {
  box-shadow:
    /* top arc */
    -20vmin -16vmin 4px rgba(255,255,255,0.32),
     -6vmin -18vmin 4px rgba(255,255,255,0.30),
      8vmin -17vmin 4px rgba(255,255,255,0.33),
     20vmin -15vmin 4px rgba(255,255,255,0.30),

    /* mid band */
    -18vmin -2vmin 4px rgba(255,255,255,0.30),
     -2vmin  1vmin 4px rgba(255,255,255,0.34),
     14vmin  0vmin 4px rgba(255,255,255,0.32),

    /* lower band */
    -10vmin 14vmin 4px rgba(255,255,255,0.30),
      4vmin 16vmin 4px rgba(255,255,255,0.33),
     18vmin 12vmin 4px rgba(255,255,255,0.30);

  animation-duration: 22s;
  animation-direction: reverse;
}


/* ============================================================
   PARTICLE DRIFT ANIMATION (the FIXED version)
   ============================================================ */
@keyframes drift {
  /* 40vmin creates large visible motion (your original working version) */
  0%   { transform: translate3d(0, 0, 0); opacity: 0.25; }
  50%  { transform: translate3d(0, 40vmin, 0); opacity: 0.45; }
  100% { transform: translate3d(0, -40vmin, 0); opacity: 0.25; }
}