/* ============ shared closing variant styles ============ */
.v-artboard {
  position: relative;
  width: 1000px;
  height: 1000px;
  background: #0a0a0c;
  overflow: hidden;
  container-type: inline-size;
  font-family: 'Poppins', sans-serif;
  color: var(--paper);
}

.v-text-bottom {
  position: absolute;
  bottom: 6%;
  left: 7%;
  right: 7%;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.v-text-bottom .pull-vi {
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 3cqi;
  color: #FFA85C;
  line-height: 1.2;
  max-width: 62%;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
}
.v-text-bottom .v-mono {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1cqi;
  color: rgba(255,200,160,0.75);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.v-epilogue {
  position: absolute;
  top: 7%;
  left: 7%;
  right: 7%;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4cqi;
  letter-spacing: 0.32em;
  color: rgba(245,245,240,0.65);
}
.v-pagenum {
  position: absolute;
  bottom: 1.8%;
  left: 5%;
  z-index: 10;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9cqi;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* ============ VARIATION A — Galactic Majesty ============ */
.va {
  background:
    radial-gradient(ellipse 80% 50% at 50% 30%, #4a1a55 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 30% 25%, #7a2a4a 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 70% 35%, #c44a2a 0%, transparent 50%),
    radial-gradient(ellipse 100% 80% at 50% 80%, #2a1208 0%, #0a0608 70%),
    linear-gradient(180deg, #0a0612 0%, #1a0a1f 30%, #2a1015 60%, #1a0a08 100%);
}
.va .nebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 15% at 25% 35%, rgba(220,140,200,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 25% 12% at 65% 28%, rgba(255,160,120,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 18% 8% at 78% 45%, rgba(180,120,220,0.22) 0%, transparent 60%);
  filter: blur(2px);
  mix-blend-mode: screen;
}
.va .milky {
  position: absolute;
  left: -10%; right: -10%;
  top: 18%;
  height: 35%;
  background:
    linear-gradient(95deg, transparent 0%, rgba(255,220,200,0.0) 8%, rgba(255,200,180,0.45) 25%, rgba(252,123,38,0.45) 50%, rgba(180,120,200,0.4) 75%, rgba(255,220,200,0.0) 92%, transparent 100%);
  transform: rotate(-12deg);
  filter: blur(3px);
  mix-blend-mode: screen;
  opacity: 0.85;
}
.va .milky-core {
  position: absolute;
  left: -5%; right: -5%;
  top: 28%;
  height: 8%;
  background: linear-gradient(95deg, transparent 10%, rgba(255,240,210,0.85) 50%, transparent 90%);
  transform: rotate(-12deg);
  filter: blur(4px);
  mix-blend-mode: screen;
}
.va .stars-big {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 15%, white, transparent 60%),
    radial-gradient(2.5px 2.5px at 28% 22%, rgba(255,240,200,1), transparent 60%),
    radial-gradient(2px 2px at 42% 12%, white, transparent 60%),
    radial-gradient(3px 3px at 56% 25%, rgba(255,220,180,1), transparent 60%),
    radial-gradient(2px 2px at 72% 18%, white, transparent 60%),
    radial-gradient(2.5px 2.5px at 88% 32%, rgba(255,240,200,1), transparent 60%),
    radial-gradient(1.5px 1.5px at 15% 55%, white, transparent 60%),
    radial-gradient(2px 2px at 38% 62%, rgba(255,220,180,0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 58%, white, transparent 60%),
    radial-gradient(2px 2px at 82% 65%, rgba(255,240,200,0.9), transparent 60%);
}
.va .stars-small {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 5% 8%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 18% 30%, rgba(255,220,180,0.7), transparent 60%),
    radial-gradient(1px 1px at 32% 8%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 48% 35%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 67% 8%, rgba(255,220,180,0.6), transparent 60%),
    radial-gradient(1px 1px at 85% 22%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 22% 70%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 56% 75%, rgba(255,220,180,0.4), transparent 60%);
}
.va .ground {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 28%;
}
.va .ground img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 80%;
  filter: sepia(0.85) saturate(1.3) hue-rotate(-12deg) contrast(1.15) brightness(0.55);
}
.va .ground::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,10,5,0.5) 0%, transparent 40%, rgba(15,8,4,0.85) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(255,168,92,0.4) 0%, transparent 60%);
}
.va .ball {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 38%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.va .ball svg {
  width: 100%; height: 100%;
  filter:
    drop-shadow(0 0 4cqi rgba(252,123,38,0.85))
    drop-shadow(0 0 8cqi rgba(255,168,92,0.5))
    drop-shadow(0 0 16cqi rgba(255,200,140,0.25));
}
.va .ball-glow {
  position: absolute;
  inset: -25%;
  background: radial-gradient(circle, rgba(255,200,140,0.45) 0%, rgba(252,123,38,0.25) 30%, transparent 60%);
  mix-blend-mode: screen;
  filter: blur(2cqi);
  z-index: -1;
}
.va .corona {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255,168,92,0.18) 20%, transparent 40%, rgba(252,123,38,0.20) 60%, transparent 80%, rgba(255,200,140,0.15) 100%);
  filter: blur(0.8cqi);
  z-index: -1;
}

/* ============ VARIATION B — Photo Ball Hero ============ */
.vb {
  background:
    radial-gradient(ellipse 70% 40% at 50% 35%, #2a1830 0%, transparent 60%),
    linear-gradient(180deg, #0a0612 0%, #1a0a1a 35%, #2a1810 65%, #0a0604 100%);
}
.vb .milky-pillar {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 28%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(220,180,255,0.25) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(255,200,180,0.18) 30%, rgba(252,123,38,0.25) 55%, rgba(180,120,200,0.18) 80%, transparent 100%);
  filter: blur(2.5cqi);
  mix-blend-mode: screen;
}
.vb .milky-pillar::after {
  content: '';
  position: absolute;
  left: 25%; right: 25%;
  top: 10%; bottom: 10%;
  background: linear-gradient(180deg, transparent, rgba(255,240,220,0.4), transparent);
  filter: blur(1cqi);
}
.vb .stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 8% 14%, white, transparent 60%),
    radial-gradient(1.5px 1.5px at 18% 28%, white, transparent 60%),
    radial-gradient(2.5px 2.5px at 24% 8%, rgba(255,240,200,1), transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 22%, white, transparent 60%),
    radial-gradient(1px 1px at 14% 42%, white, transparent 60%),
    radial-gradient(2px 2px at 72% 14%, white, transparent 60%),
    radial-gradient(2.5px 2.5px at 80% 28%, rgba(255,240,200,1), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 12%, white, transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 38%, white, transparent 60%),
    radial-gradient(1px 1px at 78% 48%, white, transparent 60%);
}
.vb .ground {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 38%;
}
.vb .ground img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 90%;
  filter: sepia(0.7) saturate(1.2) hue-rotate(-8deg) contrast(1.1) brightness(0.62);
}
.vb .ground::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,168,92,0.35) 0%, transparent 25%, rgba(15,8,4,0.7) 100%),
    radial-gradient(ellipse at 50% 5%, rgba(255,200,140,0.55) 0%, transparent 50%);
}
.vb .horizon {
  position: absolute;
  left: 0; right: 0;
  top: 62%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,220,180,1) 50%, transparent);
  filter: blur(0.4cqi);
  box-shadow: 0 0 24px rgba(255,168,92,1);
  z-index: 4;
}
.vb .ball {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.vb .ball svg {
  width: 100%; height: 100%;
  filter:
    drop-shadow(0 6cqi 4cqi rgba(0,0,0,0.7))
    drop-shadow(0 0 6cqi rgba(255,168,92,0.7))
    drop-shadow(0 0 12cqi rgba(252,123,38,0.3));
}
.vb .ball-rim {
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(255,220,180,0) 0%, rgba(255,220,180,0.7) 25%, rgba(255,168,92,0.4) 50%, rgba(255,220,180,0.7) 75%, rgba(255,220,180,0) 100%);
  filter: blur(0.6cqi);
  mix-blend-mode: screen;
  z-index: -1;
}

/* ============ VARIATION C — Cosmic Portal ============ */
.vc {
  background:
    radial-gradient(ellipse 100% 50% at 50% 45%, #2a1238 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 75%, #3a1f12 0%, transparent 70%),
    linear-gradient(180deg, #08040d 0%, #1a0e22 50%, #1a0a08 100%);
}
.vc .swirl {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    conic-gradient(from 30deg at 50% 50%,
      transparent 0%,
      rgba(180,120,220,0.25) 10%,
      rgba(252,123,38,0.35) 25%,
      rgba(255,200,140,0.25) 40%,
      transparent 50%,
      rgba(180,120,220,0.2) 65%,
      rgba(252,123,38,0.25) 80%,
      transparent 100%);
  filter: blur(3.5cqi);
  mix-blend-mode: screen;
  opacity: 0.9;
}
.vc .swirl::after {
  content: '';
  position: absolute;
  inset: 15%;
  background:
    conic-gradient(from -60deg at 50% 50%,
      transparent 0%,
      rgba(255,240,200,0.5) 15%,
      transparent 30%,
      rgba(255,168,92,0.5) 55%,
      transparent 70%,
      rgba(255,220,180,0.4) 95%);
  filter: blur(2cqi);
  border-radius: 50%;
}
.vc .stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 18%, white, transparent 60%),
    radial-gradient(1.5px 1.5px at 24% 8%, rgba(255,240,200,1), transparent 60%),
    radial-gradient(2.5px 2.5px at 38% 18%, white, transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 8%, white, transparent 60%),
    radial-gradient(2px 2px at 68% 14%, rgba(255,240,200,1), transparent 60%),
    radial-gradient(2.5px 2.5px at 82% 22%, white, transparent 60%),
    radial-gradient(1px 1px at 92% 8%, white, transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 45%, rgba(255,220,180,0.8), transparent 60%),
    radial-gradient(1px 1px at 92% 40%, white, transparent 60%);
}
.vc .ground {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 25%;
}
.vc .ground img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 90%;
  filter: sepia(0.9) saturate(1.3) hue-rotate(-15deg) contrast(1.15) brightness(0.55);
}
.vc .ground::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,10,5,0.7) 0%, transparent 50%, rgba(10,6,4,0.9) 100%);
}
.vc .ball {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.vc .ball svg {
  width: 100%; height: 100%;
  filter:
    drop-shadow(0 0 3cqi rgba(255,200,140,0.95))
    drop-shadow(0 0 8cqi rgba(252,123,38,0.7))
    drop-shadow(0 0 20cqi rgba(180,120,220,0.4));
}
.vc .light-rays {
  position: absolute;
  inset: -50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, transparent 12deg,
      rgba(255,220,180,0.2) 14deg, transparent 16deg,
      transparent 30deg, rgba(255,220,180,0.15) 32deg, transparent 34deg,
      transparent 55deg, rgba(255,220,180,0.18) 57deg, transparent 59deg,
      transparent 85deg, rgba(255,220,180,0.12) 87deg, transparent 89deg,
      transparent 110deg, rgba(255,220,180,0.2) 112deg, transparent 114deg,
      transparent 145deg, rgba(255,220,180,0.15) 147deg, transparent 149deg,
      transparent 180deg, rgba(255,220,180,0.18) 182deg, transparent 184deg,
      transparent 215deg, rgba(255,220,180,0.12) 217deg, transparent 219deg,
      transparent 245deg, rgba(255,220,180,0.2) 247deg, transparent 249deg,
      transparent 275deg, rgba(255,220,180,0.15) 277deg, transparent 279deg,
      transparent 310deg, rgba(255,220,180,0.18) 312deg, transparent 314deg,
      transparent 340deg, rgba(255,220,180,0.12) 342deg, transparent 344deg,
      transparent 360deg);
  filter: blur(0.4cqi);
  mix-blend-mode: screen;
  z-index: -1;
}

/* ============ VARIATION D — Burning Comet ============ */
.vd {
  background:
    radial-gradient(ellipse 60% 30% at 50% 25%, #5a1a45 0%, transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 75%, #4a1f08 0%, transparent 70%),
    linear-gradient(180deg, #0a0612 0%, #1a0a18 25%, #2a1208 65%, #0a0604 100%);
}
.vd .milky {
  position: absolute;
  left: -5%; right: -5%;
  top: 12%;
  height: 32%;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(252,123,38,0.45) 0%, transparent 70%),
    radial-gradient(ellipse 30% 40% at 30% 50%, rgba(220,140,200,0.30) 0%, transparent 70%),
    radial-gradient(ellipse 30% 40% at 70% 50%, rgba(255,200,140,0.40) 0%, transparent 70%);
  filter: blur(4cqi);
  mix-blend-mode: screen;
}
.vd .stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 8% 12%, white, transparent 60%),
    radial-gradient(2.5px 2.5px at 22% 22%, rgba(255,240,200,1), transparent 60%),
    radial-gradient(1.5px 1.5px at 36% 8%, white, transparent 60%),
    radial-gradient(2px 2px at 52% 18%, white, transparent 60%),
    radial-gradient(2.5px 2.5px at 68% 14%, rgba(255,240,200,1), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 24%, white, transparent 60%),
    radial-gradient(1px 1px at 14% 38%, rgba(255,220,180,0.7), transparent 60%),
    radial-gradient(1px 1px at 76% 42%, rgba(255,220,180,0.7), transparent 60%);
}
.vd .ground {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 32%;
}
.vd .ground img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 85%;
  filter: sepia(0.7) saturate(1.4) hue-rotate(-5deg) contrast(1.2) brightness(0.7);
}
.vd .ground::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,200,140,0.7) 0%, transparent 50%),
    linear-gradient(180deg, transparent 30%, rgba(15,8,4,0.85) 100%);
}
.vd .ball-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.vd .ball-wrap svg {
  width: 100%; height: 100%;
  filter:
    drop-shadow(0 0 4cqi rgba(255,200,140,1))
    drop-shadow(0 0 10cqi rgba(252,123,38,0.85))
    drop-shadow(0 0 20cqi rgba(255,80,20,0.5));
}
.vd .fire-trail {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 65%;
  height: 20%;
  transform: translate(-100%, -50%);
  background:
    radial-gradient(ellipse at 100% 50%, rgba(255,220,180,0.85) 0%, rgba(252,123,38,0.6) 25%, rgba(180,40,20,0.3) 55%, transparent 80%);
  filter: blur(1.5cqi);
  mix-blend-mode: screen;
  z-index: 4;
}
.vd .sparks {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 30% 48%, rgba(255,220,180,0.95), transparent 60%),
    radial-gradient(1px 1px at 35% 52%, rgba(255,168,92,0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 25% 45%, rgba(255,200,140,0.8), transparent 60%),
    radial-gradient(1px 1px at 20% 55%, rgba(252,123,38,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 60%, rgba(255,220,180,0.9), transparent 60%),
    radial-gradient(1px 1px at 28% 38%, rgba(255,200,140,0.7), transparent 60%);
  pointer-events: none;
  z-index: 6;
  mix-blend-mode: screen;
}

/* ============ VARIATION E — A+C COMBO (final, with artistic blend) ============ */
.ve {
  background:
    radial-gradient(ellipse 90% 60% at 50% 30%, #4a1a55 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 28% 22%, #7a2a4a 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 72% 32%, #c44a2a 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 95%, #5a2810 0%, #1a0a04 70%),
    linear-gradient(180deg, #0a0612 0%, #1a0a1f 25%, #2a1218 50%, #3a1c10 75%, #1a0d06 100%);
}
/* nebula clouds blanketing the cosmos */
.ve .nebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 35% 18% at 22% 30%, rgba(220,140,200,0.42) 0%, transparent 65%),
    radial-gradient(ellipse 28% 14% at 65% 24%, rgba(255,160,120,0.38) 0%, transparent 65%),
    radial-gradient(ellipse 20% 10% at 80% 42%, rgba(180,120,220,0.30) 0%, transparent 65%),
    radial-gradient(ellipse 22% 12% at 12% 50%, rgba(252,123,38,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 28% 14% at 88% 58%, rgba(200,140,180,0.22) 0%, transparent 65%);
  filter: blur(3px);
  mix-blend-mode: screen;
  z-index: 1;
}
/* tilted milky-way streak */
.ve .milky {
  position: absolute;
  left: -15%; right: -15%;
  top: 15%;
  height: 40%;
  background:
    linear-gradient(96deg,
      transparent 0%,
      rgba(255,220,200,0) 8%,
      rgba(255,200,180,0.55) 22%,
      rgba(252,123,38,0.55) 48%,
      rgba(180,120,200,0.5) 72%,
      rgba(255,220,200,0) 92%,
      transparent 100%);
  transform: rotate(-14deg);
  filter: blur(3.5px);
  mix-blend-mode: screen;
  opacity: 0.9;
  z-index: 1;
}
.ve .milky-core {
  position: absolute;
  left: -8%; right: -8%;
  top: 28%;
  height: 7%;
  background: linear-gradient(96deg, transparent 8%, rgba(255,240,210,0.95) 50%, transparent 92%);
  transform: rotate(-14deg);
  filter: blur(3.5px);
  mix-blend-mode: screen;
  z-index: 2;
}
/* stars layered */
.ve .stars-big {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 8% 12%, white, transparent 60%),
    radial-gradient(2.5px 2.5px at 24% 20%, rgba(255,240,200,1), transparent 60%),
    radial-gradient(2px 2px at 38% 10%, white, transparent 60%),
    radial-gradient(3px 3px at 52% 22%, rgba(255,220,180,1), transparent 60%),
    radial-gradient(2px 2px at 68% 14%, white, transparent 60%),
    radial-gradient(2.5px 2.5px at 84% 28%, rgba(255,240,200,1), transparent 60%),
    radial-gradient(2px 2px at 92% 12%, white, transparent 60%),
    radial-gradient(1.8px 1.8px at 14% 42%, rgba(255,220,180,0.9), transparent 60%),
    radial-gradient(2px 2px at 36% 50%, white, transparent 60%),
    radial-gradient(1.8px 1.8px at 62% 46%, rgba(255,220,180,0.9), transparent 60%),
    radial-gradient(2px 2px at 80% 52%, white, transparent 60%);
  z-index: 2;
}
.ve .stars-small {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 4% 8%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 18% 26%, rgba(255,220,180,0.75), transparent 60%),
    radial-gradient(1px 1px at 32% 8%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 48% 32%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1px 1px at 67% 6%, rgba(255,220,180,0.65), transparent 60%),
    radial-gradient(1px 1px at 85% 18%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 22% 70%, rgba(255,200,140,0.35), transparent 60%),
    radial-gradient(1px 1px at 56% 78%, rgba(255,220,180,0.35), transparent 60%);
  z-index: 2;
}

/* dust ground with SOFT MASK fading up into the cosmos */
.ve .ground {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 70%;
  z-index: 3;
  -webkit-mask-image: linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,0.05) 8%,
      rgba(0,0,0,0.2) 18%,
      rgba(0,0,0,0.5) 32%,
      rgba(0,0,0,0.85) 50%,
      black 70%);
  mask-image: linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,0.05) 8%,
      rgba(0,0,0,0.2) 18%,
      rgba(0,0,0,0.5) 32%,
      rgba(0,0,0,0.85) 50%,
      black 70%);
}
.ve .ground img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 85%;
  filter: sepia(0.85) saturate(1.3) hue-rotate(-12deg) contrast(1.15) brightness(0.65);
}
.ve .ground::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(252,123,38,0.55) 0%, transparent 50%),
    linear-gradient(180deg, transparent 30%, rgba(15,8,4,0.55) 100%);
}

/* dust particles rising up through the blend zone */
.ve .rising-dust {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 56%, rgba(255,200,140,0.6), transparent 65%),
    radial-gradient(1px 1px at 22% 48%, rgba(255,220,180,0.5), transparent 65%),
    radial-gradient(1.5px 1.5px at 34% 60%, rgba(255,200,140,0.55), transparent 65%),
    radial-gradient(1px 1px at 42% 44%, rgba(255,220,180,0.4), transparent 65%),
    radial-gradient(1.5px 1.5px at 58% 52%, rgba(255,200,140,0.55), transparent 65%),
    radial-gradient(1px 1px at 68% 40%, rgba(255,220,180,0.4), transparent 65%),
    radial-gradient(1.5px 1.5px at 78% 58%, rgba(255,200,140,0.5), transparent 65%),
    radial-gradient(1px 1px at 88% 50%, rgba(255,220,180,0.4), transparent 65%),
    radial-gradient(1px 1px at 8% 38%, rgba(255,200,140,0.3), transparent 65%),
    radial-gradient(1px 1px at 92% 36%, rgba(255,200,140,0.3), transparent 65%);
  filter: blur(0.3px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 5;
}

/* warm diffuse glow at the bleed line (not a hard horizon) */
.ve .horizon-glow {
  position: absolute;
  left: -10%; right: -10%;
  top: 42%;
  height: 18%;
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(255,168,92,0.55) 0%, rgba(252,123,38,0.25) 40%, transparent 75%);
  filter: blur(3cqi);
  mix-blend-mode: screen;
  z-index: 4;
}

/* ===== BALL with C-style swirl + light rays ===== */
.ve .ball-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
}
/* outer conic swirl (C-style) extended */
.ve .ball-stage .swirl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 30deg at 50% 50%,
    transparent 0%,
    rgba(180,120,220,0.30) 10%,
    rgba(252,123,38,0.45) 25%,
    rgba(255,200,140,0.30) 40%,
    transparent 50%,
    rgba(180,120,220,0.25) 65%,
    rgba(252,123,38,0.32) 80%,
    transparent 100%);
  filter: blur(3.5cqi);
  mix-blend-mode: screen;
  opacity: 0.95;
  animation: ve-spin 40s linear infinite;
}
/* inner conic counter-rotating */
.ve .ball-stage .swirl-inner {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: conic-gradient(from -60deg at 50% 50%,
    transparent 0%,
    rgba(255,240,200,0.55) 15%,
    transparent 30%,
    rgba(255,168,92,0.55) 55%,
    transparent 70%,
    rgba(255,220,180,0.45) 95%);
  filter: blur(2cqi);
  mix-blend-mode: screen;
  animation: ve-spin-rev 28s linear infinite;
}
@keyframes ve-spin     { to { transform: rotate(360deg); } }
@keyframes ve-spin-rev { to { transform: rotate(-360deg); } }

/* 16 light rays radial (more than C's 12) */
.ve .ball-stage .rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 8deg,
    rgba(255,220,180,0.28) 10deg, transparent 13deg,
    transparent 28deg, rgba(255,220,180,0.22) 30deg, transparent 33deg,
    transparent 50deg, rgba(255,220,180,0.30) 52deg, transparent 55deg,
    transparent 75deg, rgba(255,220,180,0.20) 77deg, transparent 80deg,
    transparent 100deg, rgba(255,220,180,0.28) 102deg, transparent 105deg,
    transparent 122deg, rgba(255,220,180,0.22) 124deg, transparent 127deg,
    transparent 148deg, rgba(255,220,180,0.30) 150deg, transparent 153deg,
    transparent 170deg, rgba(255,220,180,0.20) 172deg, transparent 175deg,
    transparent 190deg, rgba(255,220,180,0.28) 192deg, transparent 195deg,
    transparent 212deg, rgba(255,220,180,0.22) 214deg, transparent 217deg,
    transparent 240deg, rgba(255,220,180,0.30) 242deg, transparent 245deg,
    transparent 262deg, rgba(255,220,180,0.20) 264deg, transparent 267deg,
    transparent 282deg, rgba(255,220,180,0.28) 284deg, transparent 287deg,
    transparent 305deg, rgba(255,220,180,0.22) 307deg, transparent 310deg,
    transparent 330deg, rgba(255,220,180,0.30) 332deg, transparent 335deg,
    transparent 352deg, rgba(255,220,180,0.20) 354deg, transparent 357deg,
    transparent 360deg);
  filter: blur(0.5cqi);
  mix-blend-mode: screen;
  animation: ve-spin 80s linear infinite reverse;
}

/* A-style corona around ball */
.ve .ball-stage .corona {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0%, rgba(255,168,92,0.30) 18%, transparent 38%,
    rgba(252,123,38,0.30) 58%, transparent 78%,
    rgba(255,200,140,0.25) 100%);
  filter: blur(1.2cqi);
  mix-blend-mode: screen;
  animation: ve-spin 60s linear infinite;
}

.ve .ball-stage .ball-glow {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,140,0.55) 0%, rgba(252,123,38,0.30) 35%, transparent 70%);
  filter: blur(2cqi);
  mix-blend-mode: screen;
}

.ve .ball-stage .ball {
  position: absolute;
  inset: 35%;
}
.ve .ball-stage .ball svg {
  width: 100%; height: 100%;
  filter:
    drop-shadow(0 0 3cqi rgba(255,200,140,1))
    drop-shadow(0 0 8cqi rgba(252,123,38,0.85))
    drop-shadow(0 0 18cqi rgba(180,120,220,0.45));
}

/* shared grain on each variant */
.v-artboard .grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.4;
  z-index: 11;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.85 0 0 0 0 0.6 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
}