/* 
 * Placeholder Variations System
 * 12 different geometric patterns for image fallbacks
 * Usage: Add class "placeholder-variant-1" through "placeholder-variant-12" to any .silo-placeholder
 */

/* Base placeholder structure (shared) - Container relative sizing */
.silo-placeholder { 
  display:flex; align-items:center; justify-content:center; 
  position:relative; overflow:hidden; aspect-ratio: 8.5 / 11;
}
/* SVG-based rendering support */
.silo-placeholder.use-svg { background: transparent; }
.silo-placeholder.use-svg::before,
.silo-placeholder.use-svg::after { content: none !important; }
.silo-placeholder .ph-svg { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
/* Ensure pseudo elements render at same scale across sizes */
.silo-placeholder::before,
.silo-placeholder::after {
  transform-origin: 0 0;
  transform: scale(var(--ph-scale, 1));
}
.placeholder-content { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; }
.placeholder-author { 
  position:absolute; top:4%; left:4%; right:4%; 
  font-size:.45rem; font-weight:700; color: rgba(255,255,255,0.95); 
  text-transform:uppercase; letter-spacing:.2em; text-align:center;
}
.placeholder-title { 
  position:absolute; top:35%; left:8%; right:8%;
  font-size:.9rem; font-weight:900; color: #ffffff; line-height:0.9; 
  text-shadow: 0 2px 4px rgba(0,0,0,0.6); text-transform:uppercase; 
  letter-spacing:.05em; text-align:center;
}
.placeholder-type { 
  position:absolute; bottom:8%; left:8%; right:8%;
  font-size:.5rem; font-weight:700; color: rgba(255,255,255,0.8); 
  text-transform:uppercase; letter-spacing:.15em; text-align:center;
}

/* Large container scaling (featured media, etc.) */
.feature-media.silo-placeholder { --ph-scale: 1; }
.feature-media.silo-placeholder .placeholder-author { font-size:.6rem; }
.feature-media.silo-placeholder .placeholder-title { font-size:1.3rem; }
.feature-media.silo-placeholder .placeholder-type { font-size:.65rem; }

/* Small container scaling (mobile carousel) */
@media (max-width: 720px) {
  .silo-placeholder .placeholder-author { font-size:.45rem; letter-spacing:.2em; }
  .silo-placeholder .placeholder-title { font-size:.9rem; }
  .silo-placeholder .placeholder-type { font-size:.5rem; }
}

/* Variation 1: Blue Circles (Original) - ENHANCED */
.placeholder-variant-1 { 
  background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-700) 60%, var(--primary-600) 100%); 
  border:1px solid var(--primary-600); 
}
.placeholder-variant-1::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px; width: 1px; height: 1px; background: rgba(255,255,255,0.5); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* MASSIVE edge circles - 120px max */
    -40px -25px 0 60px rgba(255,255,255,0.08),
    180px -30px 0 58px rgba(255,255,255,0.06),
    -35px 140px 0 62px rgba(255,255,255,0.05),
    170px 130px 0 55px rgba(255,255,255,0.07),
    /* Large circles scattered - MORE */
    50px 20px 0 25px rgba(255,255,255,0.12),
    120px 80px 0 30px rgba(255,255,255,0.1),
    20px 120px 0 28px rgba(255,255,255,0.09),
    150px 40px 0 26px rgba(255,255,255,0.11),
    80px 50px 0 22px rgba(255,255,255,0.13),
    110px 110px 0 24px rgba(255,255,255,0.1),
    /* Medium circles - MORE DENSITY */
    80px 30px 0 15px rgba(255,255,255,0.18),
    30px 70px 0 18px rgba(255,255,255,0.16),
    140px 90px 0 20px rgba(255,255,255,0.14),
    10px 40px 0 16px rgba(255,255,255,0.17),
    110px 15px 0 19px rgba(255,255,255,0.15),
    70px 100px 0 12px rgba(255,255,255,0.19),
    45px 45px 0 14px rgba(255,255,255,0.16),
    125px 65px 0 17px rgba(255,255,255,0.15),
    /* Small circles - FILL GAPS */
    95px 60px 0 8px rgba(255,255,255,0.25),
    25px 95px 0 10px rgba(255,255,255,0.23),
    130px 25px 0 12px rgba(255,255,255,0.21),
    55px 5px 0 6px rgba(255,255,255,0.27),
    15px 110px 0 8px rgba(255,255,255,0.22),
    165px 70px 0 10px rgba(255,255,255,0.2),
    85px 85px 0 7px rgba(255,255,255,0.24),
    35px 125px 0 9px rgba(255,255,255,0.23),
    /* Tiny dots - EVERYWHERE */
    40px 45px 0 2px rgba(255,255,255,0.35),
    85px 12px 0 1px rgba(255,255,255,0.4),
    125px 105px 0 2px rgba(255,255,255,0.32),
    5px 85px 0 1px rgba(255,255,255,0.38),
    175px 55px 0 2px rgba(255,255,255,0.3),
    35px 130px 0 1px rgba(255,255,255,0.33),
    100px 35px 0 3px rgba(255,255,255,0.28),
    60px 115px 0 2px rgba(255,255,255,0.31),
    145px 5px 0 1px rgba(255,255,255,0.36),
    -5px 25px 0 3px rgba(255,255,255,0.29),
    /* ADDITIONAL LAYER */
    65px 75px 0 5px rgba(255,255,255,0.26),
    105px 90px 0 4px rgba(255,255,255,0.28),
    25px 55px 0 6px rgba(255,255,255,0.24),
    155px 25px 0 3px rgba(255,255,255,0.3);
}
.placeholder-variant-1::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 20px; width: 120px; height: 120px; 
  border: 3px solid rgba(255,255,255,0.15); border-radius: 50%; z-index: 0;
  background: transparent;
  box-shadow: 
    /* Multiple concentric rings */
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.12),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.1),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.08),
    /* Additional circles */
    80px -20px 0 -30px rgba(255,255,255,0.11), /* 90px circle */
    -60px 15px 0 -15px rgba(255,255,255,0.09); /* 105px circle */
}

/* Variation 2: Teal Squares - ENHANCED */
.placeholder-variant-2 { 
  background: linear-gradient(135deg, #134e4a 0%, #0f766e 60%, #14b8a6 100%); 
  border:1px solid #0f766e; 
}
.placeholder-variant-2::before {
  content: '';
  position: absolute;
  top: -25px; right: -25px; width: 3px; height: 3px; background: rgba(255,255,255,0.4); z-index: 0;
  box-shadow: 
    /* MASSIVE edge squares - 120px */
    -50px -30px 0 60px rgba(255,255,255,0.07),
    160px -35px 0 58px rgba(255,255,255,0.06),
    -45px 140px 0 62px rgba(255,255,255,0.05),
    170px 130px 0 55px rgba(255,255,255,0.08),
    /* Large squares - MORE */
    60px 25px 0 25px rgba(255,255,255,0.12),
    110px 75px 0 28px rgba(255,255,255,0.1),
    25px 110px 0 30px rgba(255,255,255,0.09),
    140px 50px 0 26px rgba(255,255,255,0.11),
    80px 100px 0 24px rgba(255,255,255,0.13),
    /* Medium squares - MORE DENSITY */
    90px 40px 0 15px rgba(255,255,255,0.16),
    40px 80px 0 18px rgba(255,255,255,0.14),
    130px 20px 0 12px rgba(255,255,255,0.18),
    15px 50px 0 16px rgba(255,255,255,0.15),
    75px 15px 0 14px rgba(255,255,255,0.17),
    120px 95px 0 13px rgba(255,255,255,0.16),
    35px 125px 0 17px rgba(255,255,255,0.14),
    155px 70px 0 15px rgba(255,255,255,0.15),
    /* Small squares - FILL GAPS */
    75px 65px 0 8px rgba(255,255,255,0.22),
    35px 35px 0 10px rgba(255,255,255,0.2),
    115px 95px 0 6px rgba(255,255,255,0.24),
    55px 85px 0 9px rgba(255,255,255,0.21),
    95px 55px 0 7px rgba(255,255,255,0.23),
    125px 115px 0 8px rgba(255,255,255,0.22),
    /* Tiny squares - EVERYWHERE */
    50px 10px 0 3px rgba(255,255,255,0.3),
    95px 15px 0 2px rgba(255,255,255,0.35),
    20px 130px 0 3px rgba(255,255,255,0.28),
    65px 45px 0 2px rgba(255,255,255,0.32),
    105px 70px 0 4px rgba(255,255,255,0.27),
    30px 60px 0 3px rgba(255,255,255,0.31),
    145px 25px 0 2px rgba(255,255,255,0.34),
    85px 125px 0 3px rgba(255,255,255,0.29);
}
.placeholder-variant-2::after {
  content: '';
  position: absolute;
  bottom: -100px; right: 15px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.12); z-index: 0;
  background: transparent;
  /* Multiple square outlines */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.1),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.08),
    /* Additional squares */
    -70px 10px 0 -20px rgba(255,255,255,0.09),
    80px -15px 0 -25px rgba(255,255,255,0.07);
}

/* Variation 3: Purple Circles Dense - ENHANCED */
.placeholder-variant-3 { 
  background: linear-gradient(135deg, #581c87 0%, #7c3aed 60%, #a855f7 100%); 
  border:1px solid #7c3aed; 
}
.placeholder-variant-3::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px; width: 1px; height: 1px; background: rgba(255,255,255,0.6); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* Dense circle field - MORE DENSITY */
    20px 10px 0 3px rgba(255,255,255,0.25), 45px 15px 0 2px rgba(255,255,255,0.3),
    70px 25px 0 4px rgba(255,255,255,0.22), 95px 35px 0 3px rgba(255,255,255,0.28),
    120px 45px 0 5px rgba(255,255,255,0.2), 15px 40px 0 4px rgba(255,255,255,0.26),
    40px 55px 0 3px rgba(255,255,255,0.24), 65px 70px 0 6px rgba(255,255,255,0.18),
    90px 85px 0 4px rgba(255,255,255,0.23), 115px 100px 0 5px rgba(255,255,255,0.21),
    10px 75px 0 7px rgba(255,255,255,0.17), 35px 90px 0 3px rgba(255,255,255,0.27),
    60px 105px 0 4px rgba(255,255,255,0.25), 85px 120px 0 6px rgba(255,255,255,0.19),
    /* ADDITIONAL DENSE LAYER */
    25px 30px 0 8px rgba(255,255,255,0.16), 55px 40px 0 9px rgba(255,255,255,0.15),
    80px 50px 0 10px rgba(255,255,255,0.14), 105px 65px 0 8px rgba(255,255,255,0.17),
    130px 75px 0 11px rgba(255,255,255,0.13), 20px 95px 0 9px rgba(255,255,255,0.16),
    50px 110px 0 12px rgba(255,255,255,0.12), 75px 125px 0 10px rgba(255,255,255,0.15),
    100px 135px 0 13px rgba(255,255,255,0.11), 125px 125px 0 9px rgba(255,255,255,0.16),
    /* Large circles - MORE */
    140px 10px 0 20px rgba(255,255,255,0.1), 5px 130px 0 25px rgba(255,255,255,0.08),
    160px 90px 0 22px rgba(255,255,255,0.09), 30px 150px 0 24px rgba(255,255,255,0.07),
    /* MASSIVE circles - 120px */
    -30px -20px 0 60px rgba(255,255,255,0.06), 150px 110px 0 58px rgba(255,255,255,0.05),
    -40px 140px 0 62px rgba(255,255,255,0.04), 170px -15px 0 55px rgba(255,255,255,0.07),
    /* Tiny dots - FILL GAPS */
    12px 18px 0 1px rgba(255,255,255,0.35), 38px 25px 0 1px rgba(255,255,255,0.33),
    63px 35px 0 1px rgba(255,255,255,0.37), 88px 45px 0 1px rgba(255,255,255,0.31),
    113px 55px 0 1px rgba(255,255,255,0.39), 138px 30px 0 1px rgba(255,255,255,0.34);
}
.placeholder-variant-3::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.13); border-radius: 50%; z-index: 0;
  background: transparent;
  /* Multiple concentric rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 19px rgba(255,255,255,0.11),
    0 0 0 30px transparent, 0 0 0 34px rgba(255,255,255,0.09),
    0 0 0 45px transparent, 0 0 0 49px rgba(255,255,255,0.07);
}

/* Variation 4: Dark Green Mixed Shapes - ENHANCED */
.placeholder-variant-4 { 
  background: linear-gradient(135deg, #14532d 0%, #166534 60%, #22c55e 100%); 
  border:1px solid #166534; 
}
.placeholder-variant-4::before {
  content: '';
  position: absolute;
  top: -35px; right: -35px; width: 4px; height: 4px; background: rgba(255,255,255,0.4); z-index: 0;
  box-shadow: 
    /* Mix of circles and squares - MORE VARIETY */
    30px 20px 0 18px rgba(255,255,255,0.15), /* circle */
    80px 10px 0 12px rgba(255,255,255,0.18), /* square */
    120px 50px 0 22px rgba(255,255,255,0.12), /* circle */
    20px 80px 0 15px rgba(255,255,255,0.16), /* square */
    150px 90px 0 20px rgba(255,255,255,0.13), /* circle */
    70px 100px 0 16px rgba(255,255,255,0.14), /* square */
    110px 120px 0 24px rgba(255,255,255,0.11), /* circle */
    40px 130px 0 14px rgba(255,255,255,0.15), /* square */
    /* MASSIVE shapes - 120px */
    -40px 120px 0 60px rgba(255,255,255,0.07), /* circle */
    160px -25px 0 58px rgba(255,255,255,0.06), /* square */
    -30px -20px 0 62px rgba(255,255,255,0.05), /* circle */
    170px 140px 0 55px rgba(255,255,255,0.08), /* square */
    /* Medium mix - MORE DENSITY */
    60px 70px 0 10px rgba(255,255,255,0.2),
    100px 30px 0 12px rgba(255,255,255,0.19),
    40px 110px 0 8px rgba(255,255,255,0.21),
    90px 85px 0 11px rgba(255,255,255,0.18),
    130px 65px 0 9px rgba(255,255,255,0.2),
    50px 45px 0 13px rgba(255,255,255,0.17),
    115px 105px 0 10px rgba(255,255,255,0.19),
    25px 95px 0 14px rgba(255,255,255,0.16),
    /* Small scattered - MORE */
    75px 45px 0 5px rgba(255,255,255,0.25),
    25px 55px 0 6px rgba(255,255,255,0.23),
    135px 75px 0 4px rgba(255,255,255,0.27),
    55px 85px 0 7px rgba(255,255,255,0.22),
    105px 65px 0 5px rgba(255,255,255,0.24),
    85px 125px 0 6px rgba(255,255,255,0.23),
    /* Tiny dots - EVERYWHERE */
    50px 5px 0 2px rgba(255,255,255,0.35),
    95px 115px 0 2px rgba(255,255,255,0.33),
    15px 25px 0 1px rgba(255,255,255,0.4),
    125px 15px 0 2px rgba(255,255,255,0.32),
    35px 65px 0 1px rgba(255,255,255,0.38),
    145px 35px 0 2px rgba(255,255,255,0.34);
}
.placeholder-variant-4::after {
  content: '';
  position: absolute;
  bottom: -100px; right: 30px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.14); z-index: 0; background: transparent;
  /* Mixed shape outlines */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.12),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.1),
    /* Additional mixed shapes */
    -70px 10px 0 -25px rgba(255,255,255,0.11),
    80px -15px 0 -20px rgba(255,255,255,0.09);
}

/* Variation 5: Indigo Circle Storm - ENHANCED */
.placeholder-variant-5 { 
  background: linear-gradient(135deg, #312e81 0%, #4338ca 60%, #6366f1 100%); 
  border:1px solid #4338ca; 
}
.placeholder-variant-5::before {
  content: '';
  position: absolute;
  top: -40px; left: 50%; transform: translateX(-50%); width: 1px; height: 1px; background: rgba(255,255,255,0.5); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* Radial pattern from center - MORE LAYERS */
    -20px -10px 0 12px rgba(255,255,255,0.2), 20px -10px 0 12px rgba(255,255,255,0.2),
    -40px 10px 0 18px rgba(255,255,255,0.15), 40px 10px 0 18px rgba(255,255,255,0.15),
    -60px 40px 0 24px rgba(255,255,255,0.12), 60px 40px 0 24px rgba(255,255,255,0.12),
    -80px 80px 0 30px rgba(255,255,255,0.1), 80px 80px 0 30px rgba(255,255,255,0.1),
    /* ADDITIONAL RADIAL RINGS */
    -25px 25px 0 10px rgba(255,255,255,0.18), 25px 25px 0 10px rgba(255,255,255,0.18),
    -50px 55px 0 15px rgba(255,255,255,0.14), 50px 55px 0 15px rgba(255,255,255,0.14),
    -70px 95px 0 20px rgba(255,255,255,0.11), 70px 95px 0 20px rgba(255,255,255,0.11),
    -90px 125px 0 25px rgba(255,255,255,0.09), 90px 125px 0 25px rgba(255,255,255,0.09),
    /* MASSIVE edge circles - 120px */
    -90px -30px 0 60px rgba(255,255,255,0.06), 90px -30px 0 60px rgba(255,255,255,0.06),
    -70px 150px 0 58px rgba(255,255,255,0.05), 70px 150px 0 58px rgba(255,255,255,0.05),
    /* Center explosion - MORE DENSITY */
    -10px 60px 0 8px rgba(255,255,255,0.25), 10px 60px 0 8px rgba(255,255,255,0.25),
    -30px 90px 0 12px rgba(255,255,255,0.18), 30px 90px 0 12px rgba(255,255,255,0.18),
    -5px 75px 0 6px rgba(255,255,255,0.22), 5px 75px 0 6px rgba(255,255,255,0.22),
    -35px 105px 0 10px rgba(255,255,255,0.16), 35px 105px 0 10px rgba(255,255,255,0.16),
    /* Tiny scattered - MORE */
    -5px 20px 0 3px rgba(255,255,255,0.3), 5px 20px 0 3px rgba(255,255,255,0.3),
    -15px 110px 0 4px rgba(255,255,255,0.28), 15px 110px 0 4px rgba(255,255,255,0.28),
    -45px 5px 0 2px rgba(255,255,255,0.32), 45px 5px 0 2px rgba(255,255,255,0.32),
    -55px 135px 0 3px rgba(255,255,255,0.29), 55px 135px 0 3px rgba(255,255,255,0.29);
}
.placeholder-variant-5::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -20px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.11); border-radius: 50%; z-index: 0; background: transparent;
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.09),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.07),
    120px 0px 0 0px transparent, 120px 0px 0 4px rgba(255,255,255,0.08);
}

/* Variation 6: Cyan Geometric Mix - ENHANCED */
.placeholder-variant-6 { 
  background: linear-gradient(135deg, #155e75 0%, #0891b2 60%, #06b6d4 100%); 
  border:1px solid #0891b2; 
}
.placeholder-variant-6::before {
  content: '';
  position: absolute;
  top: -15px; right: -15px; width: 3px; height: 3px; background: rgba(255,255,255,0.4); z-index: 0;
  box-shadow: 
    /* Large geometric mix - MORE VARIETY */
    -30px 30px 0 28px rgba(255,255,255,0.1), /* circle */
    140px 20px 0 25px rgba(255,255,255,0.11), /* square */
    30px 120px 0 32px rgba(255,255,255,0.09), /* circle */
    100px 100px 0 26px rgba(255,255,255,0.12), /* square */
    60px 140px 0 30px rgba(255,255,255,0.08), /* circle */
    /* MASSIVE edge shapes - 120px */
    -50px -20px 0 60px rgba(255,255,255,0.06), /* square */
    170px 130px 0 58px rgba(255,255,255,0.05), /* circle */
    -40px 150px 0 62px rgba(255,255,255,0.04), /* square */
    180px -10px 0 55px rgba(255,255,255,0.07), /* circle */
    /* Scattered medium - MORE DENSITY */
    70px 50px 0 15px rgba(255,255,255,0.16),
    110px 70px 0 18px rgba(255,255,255,0.14),
    50px 90px 0 12px rgba(255,255,255,0.15),
    90px 25px 0 16px rgba(255,255,255,0.17),
    130px 55px 0 14px rgba(255,255,255,0.16),
    20px 75px 0 13px rgba(255,255,255,0.18),
    80px 115px 0 17px rgba(255,255,255,0.13),
    120px 95px 0 11px rgba(255,255,255,0.19),
    /* Small fill - MORE */
    120px 45px 0 7px rgba(255,255,255,0.22),
    40px 65px 0 8px rgba(255,255,255,0.2),
    80px 105px 0 6px rgba(255,255,255,0.24),
    35px 105px 0 9px rgba(255,255,255,0.21),
    95px 80px 0 5px rgba(255,255,255,0.25),
    125px 125px 0 8px rgba(255,255,255,0.22),
    /* Tiny details - EVERYWHERE */
    25px 15px 0 2px rgba(255,255,255,0.32),
    105px 35px 0 3px rgba(255,255,255,0.28),
    65px 85px 0 2px rgba(255,255,255,0.3),
    135px 100px 0 1px rgba(255,255,255,0.35),
    15px 55px 0 2px rgba(255,255,255,0.33),
    85px 15px 0 3px rgba(255,255,255,0.29),
    155px 75px 0 2px rgba(255,255,255,0.31),
    45px 125px 0 1px rgba(255,255,255,0.36);
}
.placeholder-variant-6::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 40px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.12); z-index: 0; background: transparent;
  /* Mixed geometric outlines */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.1),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.08),
    /* Additional mixed shapes */
    -80px 15px 0 -30px rgba(255,255,255,0.09),
    90px -20px 0 -25px rgba(255,255,255,0.07);
}

/* Variation 7: Deep Purple Square Storm - ENHANCED */
.placeholder-variant-7 { 
  background: linear-gradient(135deg, #4c1d95 0%, #6b21a8 60%, #8b5cf6 100%); 
  border:1px solid #6b21a8; 
}
.placeholder-variant-7::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px; width: 2px; height: 2px; background: rgba(255,255,255,0.5); z-index: 0;
  box-shadow: 
    /* Square grid explosion - MORE DENSITY */
    25px 25px 0 10px rgba(255,255,255,0.2), 55px 25px 0 8px rgba(255,255,255,0.22),
    85px 25px 0 12px rgba(255,255,255,0.18), 115px 25px 0 9px rgba(255,255,255,0.21),
    25px 55px 0 11px rgba(255,255,255,0.19), 55px 55px 0 6px rgba(255,255,255,0.25),
    85px 55px 0 14px rgba(255,255,255,0.17), 115px 55px 0 7px rgba(255,255,255,0.23),
    25px 85px 0 8px rgba(255,255,255,0.21), 55px 85px 0 13px rgba(255,255,255,0.18),
    85px 85px 0 10px rgba(255,255,255,0.2), 115px 85px 0 12px rgba(255,255,255,0.19),
    /* ADDITIONAL GRID LAYERS */
    40px 40px 0 15px rgba(255,255,255,0.16), 70px 40px 0 13px rgba(255,255,255,0.18),
    100px 40px 0 16px rgba(255,255,255,0.15), 130px 40px 0 11px rgba(255,255,255,0.2),
    40px 70px 0 12px rgba(255,255,255,0.19), 70px 70px 0 17px rgba(255,255,255,0.14),
    100px 70px 0 14px rgba(255,255,255,0.17), 130px 70px 0 15px rgba(255,255,255,0.16),
    40px 100px 0 18px rgba(255,255,255,0.13), 70px 100px 0 10px rgba(255,255,255,0.21),
    100px 100px 0 16px rgba(255,255,255,0.15), 130px 100px 0 13px rgba(255,255,255,0.18),
    /* MASSIVE edge squares - 120px */
    -40px -30px 0 60px rgba(255,255,255,0.08), 150px -35px 0 58px rgba(255,255,255,0.07),
    -35px 130px 0 62px rgba(255,255,255,0.06), 145px 140px 0 55px rgba(255,255,255,0.09);
}
.placeholder-variant-7::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 10px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.13); z-index: 0; background: transparent;
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.11),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.09),
    100px 10px 0 0px transparent, 100px 10px 0 4px rgba(255,255,255,0.1);
}

/* Variation 8: Slate Blue Organic - ENHANCED */
.placeholder-variant-8 { 
  background: linear-gradient(135deg, #1e293b 0%, #334155 60%, #64748b 100%); 
  border:1px solid #334155; 
}
.placeholder-variant-8::before {
  content: '';
  position: absolute;
  top: -25px; left: -25px; width: 2px; height: 2px; background: rgba(255,255,255,0.4); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* Organic scattered pattern - MORE NATURAL */
    35px 15px 0 18px rgba(255,255,255,0.15), 80px 35px 0 12px rgba(255,255,255,0.18),
    125px 60px 0 22px rgba(255,255,255,0.12), 20px 85px 0 15px rgba(255,255,255,0.16),
    65px 110px 0 24px rgba(255,255,255,0.11), 110px 25px 0 10px rgba(255,255,255,0.2),
    95px 75px 0 20px rgba(255,255,255,0.13), 45px 45px 0 16px rgba(255,255,255,0.17),
    135px 105px 0 26px rgba(255,255,255,0.1), 15px 55px 0 14px rgba(255,255,255,0.18),
    /* MASSIVE organic shapes - 120px */
    -45px 40px 0 60px rgba(255,255,255,0.07), 160px 80px 0 58px rgba(255,255,255,0.06),
    50px 150px 0 62px rgba(255,255,255,0.05), -20px -15px 0 55px rgba(255,255,255,0.08),
    /* Medium organic - MORE FLOWING */
    90px 15px 0 12px rgba(255,255,255,0.17), 40px 50px 0 14px rgba(255,255,255,0.15),
    130px 95px 0 13px rgba(255,255,255,0.16), 15px 120px 0 17px rgba(255,255,255,0.13),
    75px 90px 0 11px rgba(255,255,255,0.19), 105px 50px 0 15px rgba(255,255,255,0.14),
    30px 100px 0 16px rgba(255,255,255,0.15), 120px 130px 0 10px rgba(255,255,255,0.2),
    /* Small organic - MORE NATURAL FLOW */
    70px 75px 0 7px rgba(255,255,255,0.23), 25px 25px 0 8px rgba(255,255,255,0.21),
    115px 40px 0 6px rgba(255,255,255,0.25), 55px 130px 0 9px rgba(255,255,255,0.22),
    85px 105px 0 5px rgba(255,255,255,0.26), 35px 70px 0 8px rgba(255,255,255,0.23),
    145px 85px 0 7px rgba(255,255,255,0.24), 5px 95px 0 6px rgba(255,255,255,0.25),
    /* Tiny organic dots */
    60px 30px 0 2px rgba(255,255,255,0.32), 100px 65px 0 3px rgba(255,255,255,0.29),
    140px 115px 0 2px rgba(255,255,255,0.34), 10px 40px 0 3px rgba(255,255,255,0.31);
}
.placeholder-variant-8::after {
  content: '';
  position: absolute;
  bottom: -100px; right: 20px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.1); border-radius: 50%; z-index: 0; background: transparent;
  /* Multiple organic rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.08),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.06),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.05);
}

/* Continue with 4 more variations... */
/* Variation 9: Emerald Circles - ENHANCED */
.placeholder-variant-9 { 
  background: linear-gradient(135deg, #064e3b 0%, #047857 60%, #10b981 100%); 
  border:1px solid #047857; 
}
.placeholder-variant-9::before {
  content: '';
  position: absolute;
  top: -30px; left: -30px; width: 2px; height: 2px; background: rgba(255,255,255,0.5); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* Spiral pattern - MORE DRAMATIC */
    30px 30px 0 12px rgba(255,255,255,0.18), 60px 20px 0 10px rgba(255,255,255,0.2),
    90px 40px 0 15px rgba(255,255,255,0.16), 110px 70px 0 18px rgba(255,255,255,0.14),
    120px 100px 0 22px rgba(255,255,255,0.12), 100px 130px 0 24px rgba(255,255,255,0.1),
    70px 140px 0 26px rgba(255,255,255,0.09), 40px 130px 0 20px rgba(255,255,255,0.11),
    20px 100px 0 18px rgba(255,255,255,0.13), 10px 70px 0 16px rgba(255,255,255,0.15),
    15px 40px 0 14px rgba(255,255,255,0.17), 25px 10px 0 12px rgba(255,255,255,0.19),
    /* ADDITIONAL SPIRAL LAYERS */
    45px 25px 0 8px rgba(255,255,255,0.21), 75px 30px 0 11px rgba(255,255,255,0.18),
    105px 55px 0 13px rgba(255,255,255,0.16), 115px 85px 0 15px rgba(255,255,255,0.14),
    110px 115px 0 17px rgba(255,255,255,0.12), 85px 135px 0 19px rgba(255,255,255,0.1),
    55px 145px 0 21px rgba(255,255,255,0.09), 25px 115px 0 14px rgba(255,255,255,0.13),
    /* MASSIVE edge circles - 120px */
    -50px -25px 0 60px rgba(255,255,255,0.06), 170px 120px 0 58px rgba(255,255,255,0.05),
    -40px 160px 0 62px rgba(255,255,255,0.04), 180px -15px 0 55px rgba(255,255,255,0.07),
    /* Fill dots - MORE */
    50px 60px 0 5px rgba(255,255,255,0.25), 80px 90px 0 4px rgba(255,255,255,0.28),
    35px 85px 0 6px rgba(255,255,255,0.23), 105px 55px 0 5px rgba(255,255,255,0.26),
    65px 45px 0 3px rgba(255,255,255,0.3), 95px 105px 0 4px rgba(255,255,255,0.27),
    125px 75px 0 7px rgba(255,255,255,0.24), 15px 125px 0 5px rgba(255,255,255,0.25);
}
.placeholder-variant-9::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 25px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.12); border-radius: 50%; z-index: 0; background: transparent;
  /* Spiral concentric rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.1),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.08),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.06);
}

/* Variation 10: Steel Blue Squares - ENHANCED */
.placeholder-variant-10 { 
  background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 60%, #0284c7 100%); 
  border:1px solid #0369a1; 
}
.placeholder-variant-10::before {
  content: '';
  position: absolute;
  top: -25px; right: -25px; width: 3px; height: 3px; background: rgba(255,255,255,0.4); z-index: 0;
  box-shadow: 
    /* Square constellation - MORE DENSITY */
    40px 15px 0 15px rgba(255,255,255,0.16), 80px 30px 0 12px rgba(255,255,255,0.18),
    120px 50px 0 18px rgba(255,255,255,0.14), 20px 70px 0 14px rgba(255,255,255,0.17),
    60px 90px 0 16px rgba(255,255,255,0.15), 100px 110px 0 11px rgba(255,255,255,0.19),
    140px 20px 0 10px rgba(255,255,255,0.2), 30px 120px 0 20px rgba(255,255,255,0.13),
    /* ADDITIONAL CONSTELLATION LAYERS */
    55px 35px 0 13px rgba(255,255,255,0.17), 95px 55px 0 15px rgba(255,255,255,0.15),
    135px 75px 0 12px rgba(255,255,255,0.18), 15px 95px 0 17px rgba(255,255,255,0.14),
    75px 115px 0 14px rgba(255,255,255,0.16), 115px 135px 0 19px rgba(255,255,255,0.12),
    45px 5px 0 8px rgba(255,255,255,0.21), 85px 125px 0 16px rgba(255,255,255,0.13),
    125px 105px 0 13px rgba(255,255,255,0.17), 5px 45px 0 11px rgba(255,255,255,0.19),
    /* MASSIVE squares - 120px */
    -40px -20px 0 60px rgba(255,255,255,0.07), 150px 140px 0 58px rgba(255,255,255,0.06),
    -30px 160px 0 62px rgba(255,255,255,0.05), 160px -30px 0 55px rgba(255,255,255,0.08),
    /* Medium squares - MORE */
    70px 40px 0 8px rgba(255,255,255,0.22), 110px 80px 0 7px rgba(255,255,255,0.24),
    50px 130px 0 10px rgba(255,255,255,0.21), 90px 10px 0 6px rgba(255,255,255,0.26),
    35px 60px 0 9px rgba(255,255,255,0.23), 115px 45px 0 8px rgba(255,255,255,0.22),
    65px 85px 0 11px rgba(255,255,255,0.2), 105px 25px 0 7px rgba(255,255,255,0.25),
    /* Small details - MORE */
    25px 45px 0 4px rgba(255,255,255,0.3), 105px 65px 0 3px rgba(255,255,255,0.32),
    75px 25px 0 5px rgba(255,255,255,0.29), 35px 100px 0 4px rgba(255,255,255,0.27),
    125px 85px 0 3px rgba(255,255,255,0.31), 15px 115px 0 5px rgba(255,255,255,0.28),
    85px 145px 0 4px rgba(255,255,255,0.3), 145px 125px 0 3px rgba(255,255,255,0.33);
}
.placeholder-variant-10::after {
  content: '';
  position: absolute;
  bottom: -100px; right: 10px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.1); z-index: 0; background: transparent;
  /* Square constellation rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.08),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.06),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.05);
}

/* Variation 11: Violet Circle Cascade - ENHANCED */
.placeholder-variant-11 { 
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 60%, #a78bfa 100%); 
  border:1px solid #7c3aed; 
}
.placeholder-variant-11::before {
  content: '';
  position: absolute;
  top: -35px; left: -35px; width: 1px; height: 1px; background: rgba(255,255,255,0.6); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* Cascading circles - MORE DRAMATIC */
    20px 20px 0 8px rgba(255,255,255,0.25), 45px 45px 0 12px rgba(255,255,255,0.22),
    70px 70px 0 16px rgba(255,255,255,0.19), 95px 95px 0 20px rgba(255,255,255,0.16),
    120px 120px 0 24px rgba(255,255,255,0.13), 145px 145px 0 28px rgba(255,255,255,0.1),
    /* ADDITIONAL CASCADE STEPS */
    32px 32px 0 6px rgba(255,255,255,0.27), 57px 57px 0 10px rgba(255,255,255,0.24),
    82px 82px 0 14px rgba(255,255,255,0.21), 107px 107px 0 18px rgba(255,255,255,0.18),
    132px 132px 0 22px rgba(255,255,255,0.15), 157px 157px 0 26px rgba(255,255,255,0.12),
    /* Counter-cascade - MORE DENSITY */
    160px 10px 0 10px rgba(255,255,255,0.23), 140px 35px 0 14px rgba(255,255,255,0.2),
    115px 60px 0 18px rgba(255,255,255,0.17), 90px 85px 0 22px rgba(255,255,255,0.14),
    65px 110px 0 26px rgba(255,255,255,0.11), 40px 135px 0 30px rgba(255,255,255,0.08),
    /* ADDITIONAL COUNTER-CASCADE */
    150px 25px 0 8px rgba(255,255,255,0.25), 125px 50px 0 12px rgba(255,255,255,0.22),
    100px 75px 0 16px rgba(255,255,255,0.19), 75px 100px 0 20px rgba(255,255,255,0.16),
    50px 125px 0 24px rgba(255,255,255,0.13), 25px 150px 0 28px rgba(255,255,255,0.1),
    /* MASSIVE edge circles - 120px */
    -40px 50px 0 60px rgba(255,255,255,0.06), 180px -20px 0 58px rgba(255,255,255,0.05),
    -30px 170px 0 62px rgba(255,255,255,0.04), 190px 40px 0 55px rgba(255,255,255,0.07),
    /* Fill patterns - MORE */
    55px 25px 0 5px rgba(255,255,255,0.27), 85px 50px 0 4px rgba(255,255,255,0.3),
    35px 80px 0 6px rgba(255,255,255,0.24), 125px 75px 0 5px rgba(255,255,255,0.26),
    105px 40px 0 3px rgba(255,255,255,0.32), 15px 105px 0 7px rgba(255,255,255,0.23);
}
.placeholder-variant-11::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.11); border-radius: 50%; z-index: 0; background: transparent;
  /* Cascade concentric rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.09),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.07),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.06);
}

/* Variation 12: Dark Teal Mixed Finale - ENHANCED */
.placeholder-variant-12 { 
  background: linear-gradient(135deg, #0f2027 0%, #203a43 60%, #2c5364 100%); 
  border:1px solid #203a43; 
}
.placeholder-variant-12::before {
  content: '';
  position: absolute;
  top: -40px; left: -40px; width: 3px; height: 3px; background: rgba(255,255,255,0.5); z-index: 0;
  box-shadow: 
    /* Ultimate chaos mix - MORE CHAOS */
    30px 15px 0 20px rgba(255,255,255,0.12), /* large circle */
    80px 25px 0 14px rgba(255,255,255,0.18), /* med square */
    130px 40px 0 26px rgba(255,255,255,0.1), /* large circle */
    25px 70px 0 18px rgba(255,255,255,0.14), /* med square */
    75px 85px 0 24px rgba(255,255,255,0.11), /* large circle */
    125px 100px 0 16px rgba(255,255,255,0.15), /* med square */
    /* ADDITIONAL CHAOS LAYER */
    55px 35px 0 22px rgba(255,255,255,0.13), /* circle */
    105px 55px 0 12px rgba(255,255,255,0.17), /* square */
    45px 105px 0 28px rgba(255,255,255,0.09), /* circle */
    95px 115px 0 10px rgba(255,255,255,0.19), /* square */
    135px 75px 0 30px rgba(255,255,255,0.08), /* circle */
    15px 125px 0 20px rgba(255,255,255,0.12), /* square */
    /* MASSIVE mixed shapes - 120px */
    -50px -25px 0 60px rgba(255,255,255,0.06), /* circle */
    170px 130px 0 58px rgba(255,255,255,0.05), /* square */
    -30px 150px 0 62px rgba(255,255,255,0.04), /* circle */
    180px -15px 0 55px rgba(255,255,255,0.07), /* square */
    /* Scattered fill - MORE */
    50px 50px 0 8px rgba(255,255,255,0.21), 95px 65px 0 7px rgba(255,255,255,0.23),
    40px 110px 0 10px rgba(255,255,255,0.19), 110px 15px 0 6px rgba(255,255,255,0.25),
    70px 125px 0 9px rgba(255,255,255,0.2), 120px 80px 0 8px rgba(255,255,255,0.22),
    /* Tiny details - MORE CHAOS */
    65px 35px 0 3px rgba(255,255,255,0.28), 35px 95px 0 2px rgba(255,255,255,0.32),
    105px 80px 0 4px rgba(255,255,255,0.27), 15px 55px 0 2px rgba(255,255,255,0.3),
    85px 10px 0 3px rgba(255,255,255,0.29), 145px 95px 0 2px rgba(255,255,255,0.31),
    25px 135px 0 4px rgba(255,255,255,0.26), 115px 45px 0 3px rgba(255,255,255,0.28);
}
.placeholder-variant-12::after {
  content: '';
  position: absolute;
  bottom: -100px; right: 35px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.09); z-index: 0; background: transparent;
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.07),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.06),
    -90px 5px 0 0px transparent, -90px 5px 0 4px rgba(255,255,255,0.08);
}

/* Variation 13: Red Circles Storm - ENHANCED DENSITY */
.placeholder-variant-13 { 
  background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 60%, #f87171 100%); 
  border:1px solid #dc2626; 
}
.placeholder-variant-13::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px; width: 1px; height: 1px; background: rgba(255,255,255,0.6); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* Dense circle storm - MORE SHAPES */
    25px 15px 0 3px rgba(255,255,255,0.25), 50px 25px 0 2px rgba(255,255,255,0.28),
    75px 35px 0 4px rgba(255,255,255,0.22), 100px 45px 0 3px rgba(255,255,255,0.26),
    125px 55px 0 5px rgba(255,255,255,0.2), 20px 70px 0 4px rgba(255,255,255,0.24),
    45px 85px 0 3px rgba(255,255,255,0.27), 70px 100px 0 6px rgba(255,255,255,0.18),
    95px 115px 0 4px rgba(255,255,255,0.23), 120px 130px 0 5px rgba(255,255,255,0.21),
    /* ADDITIONAL LAYER - More medium circles */
    40px 50px 0 8px rgba(255,255,255,0.16), 65px 65px 0 7px rgba(255,255,255,0.18),
    90px 50px 0 9px rgba(255,255,255,0.15), 115px 75px 0 6px rgba(255,255,255,0.19),
    35px 90px 0 10px rgba(255,255,255,0.14), 80px 120px 0 8px rgba(255,255,255,0.17),
    105px 95px 0 7px rgba(255,255,255,0.18), 130px 110px 0 9px rgba(255,255,255,0.16),
    /* MASSIVE edge circles - BIGGER (120px) */
    -35px -15px 0 60px rgba(255,255,255,0.08), 155px 140px 0 58px rgba(255,255,255,0.06),
    -20px 120px 0 55px rgba(255,255,255,0.07), 140px -10px 0 62px rgba(255,255,255,0.05),
    /* Medium scattered - MORE */
    60px 60px 0 7px rgba(255,255,255,0.17), 30px 40px 0 8px rgba(255,255,255,0.16),
    90px 80px 0 6px rgba(255,255,255,0.19), 110px 20px 0 9px rgba(255,255,255,0.15),
    15px 50px 0 5px rgba(255,255,255,0.21), 140px 30px 0 6px rgba(255,255,255,0.2),
    /* Tiny sparkle dots - MORE */
    15px 25px 0 0.5px rgba(255,255,255,0.4), 85px 35px 0 0.5px rgba(255,255,255,0.38),
    135px 75px 0 0.5px rgba(255,255,255,0.42), 35px 105px 0 0.5px rgba(255,255,255,0.36),
    55px 15px 0 0.5px rgba(255,255,255,0.44), 105px 25px 0 0.5px rgba(255,255,255,0.4),
    25px 125px 0 0.5px rgba(255,255,255,0.38), 115px 135px 0 0.5px rgba(255,255,255,0.42);
}
.placeholder-variant-13::after {
  content: '';
  position: absolute;
  bottom: -100px; right: 15px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.12); border-radius: 50%; z-index: 0; background: transparent;
  /* Multiple concentric rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 19px rgba(255,255,255,0.08),
    0 0 0 30px transparent, 0 0 0 34px rgba(255,255,255,0.06),
    0 0 0 45px transparent, 0 0 0 49px rgba(255,255,255,0.05);
}

/* Variation 14: HOLLOW RING CONSTELLATION - ENHANCED DENSITY */
.placeholder-variant-14 { 
  background: linear-gradient(135deg, #92400e 0%, #f59e0b 60%, #fbbf24 100%); 
  border:1px solid #f59e0b; 
}
.placeholder-variant-14::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px; width: 0px; height: 0px; background: transparent; z-index: 0;
  /* HOLLOW RINGS ONLY - MORE SHAPES */
  border: 8px solid rgba(255,255,255,0.2); border-radius: 50%;
  box-shadow: 
    /* Small hollow rings scattered - MORE */
    40px 25px 0 0px transparent, 40px 25px 0 3px rgba(255,255,255,0.25),
    90px 15px 0 0px transparent, 90px 15px 0 5px rgba(255,255,255,0.22),
    130px 50px 0 0px transparent, 130px 50px 0 8px rgba(255,255,255,0.18),
    20px 80px 0 0px transparent, 20px 80px 0 4px rgba(255,255,255,0.24),
    70px 95px 0 0px transparent, 70px 95px 0 12px rgba(255,255,255,0.15),
    115px 110px 0 0px transparent, 115px 110px 0 6px rgba(255,255,255,0.2),
    /* ADDITIONAL RINGS - More variety */
    55px 40px 0 0px transparent, 55px 40px 0 7px rgba(255,255,255,0.19),
    105px 35px 0 0px transparent, 105px 35px 0 9px rgba(255,255,255,0.17),
    35px 60px 0 0px transparent, 35px 60px 0 5px rgba(255,255,255,0.23),
    85px 70px 0 0px transparent, 85px 70px 0 10px rgba(255,255,255,0.16),
    125px 85px 0 0px transparent, 125px 85px 0 8px rgba(255,255,255,0.18),
    45px 120px 0 0px transparent, 45px 120px 0 6px rgba(255,255,255,0.21),
    95px 130px 0 0px transparent, 95px 130px 0 11px rgba(255,255,255,0.14),
    /* MASSIVE hollow rings - BIGGER (120px) */
    -20px -10px 0 0px transparent, -20px -10px 0 60px rgba(255,255,255,0.08),
    150px 140px 0 0px transparent, 150px 140px 0 58px rgba(255,255,255,0.06),
    -30px 130px 0 0px transparent, -30px 130px 0 55px rgba(255,255,255,0.07),
    160px -5px 0 0px transparent, 160px -5px 0 62px rgba(255,255,255,0.05);
}
.placeholder-variant-14::after {
  content: '';
  position: absolute;
  bottom: -95px; left: 20px; width: 120px; height: 120px; 
  border: 8px solid rgba(255,255,255,0.12); border-radius: 50%; z-index: 0; background: transparent;
  /* Multiple nested concentric hollow rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 19px rgba(255,255,255,0.1),
    0 0 0 30px transparent, 0 0 0 34px rgba(255,255,255,0.08),
    0 0 0 45px transparent, 0 0 0 49px rgba(255,255,255,0.06),
    0 0 0 60px transparent, 0 0 0 64px rgba(255,255,255,0.05);
}

/* Variation 15: Lime Diagonal Lines - ENHANCED */
.placeholder-variant-15 { 
  background: linear-gradient(135deg, #365314 0%, #84cc16 60%, #a3e635 100%); 
  border:1px solid #84cc16; 
}
.placeholder-variant-15::before {
  content: '';
  position: absolute;
  top: -25px; left: -25px; width: 2px; height: 2px; background: rgba(255,255,255,0.5); z-index: 0;
  box-shadow: 
    /* Diagonal cascade - MORE DRAMATIC */
    20px 20px 0 8px rgba(255,255,255,0.24), 40px 40px 0 12px rgba(255,255,255,0.21),
    60px 60px 0 16px rgba(255,255,255,0.18), 80px 80px 0 20px rgba(255,255,255,0.15),
    100px 100px 0 24px rgba(255,255,255,0.12), 120px 120px 0 28px rgba(255,255,255,0.1),
    /* ADDITIONAL DIAGONAL STEPS */
    30px 30px 0 6px rgba(255,255,255,0.26), 50px 50px 0 10px rgba(255,255,255,0.23),
    70px 70px 0 14px rgba(255,255,255,0.2), 90px 90px 0 18px rgba(255,255,255,0.17),
    110px 110px 0 22px rgba(255,255,255,0.14), 130px 130px 0 26px rgba(255,255,255,0.11),
    /* Counter diagonal - MORE DENSITY */
    140px 20px 0 10px rgba(255,255,255,0.22), 120px 40px 0 14px rgba(255,255,255,0.19),
    100px 60px 0 18px rgba(255,255,255,0.16), 80px 80px 0 22px rgba(255,255,255,0.13),
    60px 100px 0 26px rgba(255,255,255,0.1), 40px 120px 0 30px rgba(255,255,255,0.08),
    /* ADDITIONAL COUNTER DIAGONAL */
    130px 30px 0 8px rgba(255,255,255,0.24), 110px 50px 0 12px rgba(255,255,255,0.21),
    90px 70px 0 16px rgba(255,255,255,0.18), 70px 90px 0 20px rgba(255,255,255,0.15),
    50px 110px 0 24px rgba(255,255,255,0.12), 30px 130px 0 28px rgba(255,255,255,0.09),
    /* MASSIVE edge shapes - 120px */
    -30px 140px 0 60px rgba(255,255,255,0.08), 150px -20px 0 58px rgba(255,255,255,0.06),
    -40px -30px 0 62px rgba(255,255,255,0.05), 160px 150px 0 55px rgba(255,255,255,0.07),
    /* Fill diagonal gaps */
    25px 45px 0 5px rgba(255,255,255,0.28), 65px 85px 0 6px rgba(255,255,255,0.25),
    105px 125px 0 7px rgba(255,255,255,0.23), 145px 45px 0 4px rgba(255,255,255,0.3);
}
.placeholder-variant-15::after {
  content: '';
  position: absolute;
  bottom: -100px; right: 25px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.13); z-index: 0; background: transparent;
  /* Diagonal concentric rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.11),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.09),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.07);
}

/* Variation 16: Pink Mixed Chaos */
.placeholder-variant-16 { 
  background: linear-gradient(135deg, #831843 0%, #ec4899 60%, #f472b6 100%); 
  border:1px solid #ec4899; 
}
.placeholder-variant-16::before {
  content: '';
  position: absolute;
  top: -35px; right: -35px; width: 3px; height: 3px; background: rgba(255,255,255,0.4); z-index: 0;
  box-shadow: 
    /* Chaotic mix */
    35px 20px 0 14px rgba(255,255,255,0.14), /* circle */
    80px 15px 0 9px rgba(255,255,255,0.18), /* square */
    125px 35px 0 17px rgba(255,255,255,0.11), /* circle */
    25px 65px 0 11px rgba(255,255,255,0.16), /* square */
    70px 80px 0 19px rgba(255,255,255,0.1), /* circle */
    115px 95px 0 8px rgba(255,255,255,0.19), /* square */
    /* MASSIVE chaos */
    -45px 110px 0 32px rgba(255,255,255,0.06), /* circle */
    160px -20px 0 29px rgba(255,255,255,0.07), /* square */
    /* Medium fill */
    55px 50px 0 6px rgba(255,255,255,0.21), 95px 70px 0 7px rgba(255,255,255,0.2),
    /* NEW: Scattered triangular shapes using border-radius tricks */
    40px 40px 0 3px rgba(255,255,255,0.25), 100px 60px 0 2px rgba(255,255,255,0.3),
    75px 25px 0 4px rgba(255,255,255,0.22), 20px 90px 0 3px rgba(255,255,255,0.28);
}
.placeholder-variant-16::after {
  content: '';
  position: absolute;
  bottom: -70px; left: 35px; width: 140px; height: 140px; 
  border: 4px solid rgba(255,255,255,0.12); z-index: 0; background: transparent;
  /* NEW: Cross pattern overlay */
  box-shadow: 
    0 -70px 0 -67px rgba(255,255,255,0.1), /* vertical line */
    -70px 0 0 -67px rgba(255,255,255,0.1); /* horizontal line */
}

/* Variation 17: Stone Ring Pattern - ENHANCED */
.placeholder-variant-17 { 
  background: linear-gradient(135deg, #44403c 0%, #78716c 60%, #a8a29e 100%); 
  border:1px solid #78716c; 
}
.placeholder-variant-17::before {
  content: '';
  position: absolute;
  top: -40px; left: 50%; transform: translateX(-50%); width: 1px; height: 1px; background: rgba(255,255,255,0.5); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* Concentric rings - MORE LAYERS */
    -25px 25px 0 15px rgba(255,255,255,0.16), 25px 25px 0 15px rgba(255,255,255,0.16),
    -45px 55px 0 22px rgba(255,255,255,0.12), 45px 55px 0 22px rgba(255,255,255,0.12),
    -65px 85px 0 30px rgba(255,255,255,0.09), 65px 85px 0 30px rgba(255,255,255,0.09),
    -85px 115px 0 38px rgba(255,255,255,0.07), 85px 115px 0 38px rgba(255,255,255,0.07),
    /* ADDITIONAL RING LAYERS */
    -15px 15px 0 8px rgba(255,255,255,0.2), 15px 15px 0 8px rgba(255,255,255,0.2),
    -35px 40px 0 12px rgba(255,255,255,0.18), 35px 40px 0 12px rgba(255,255,255,0.18),
    -55px 70px 0 18px rgba(255,255,255,0.14), 55px 70px 0 18px rgba(255,255,255,0.14),
    -75px 100px 0 25px rgba(255,255,255,0.11), 75px 100px 0 25px rgba(255,255,255,0.11),
    -95px 130px 0 32px rgba(255,255,255,0.08), 95px 130px 0 32px rgba(255,255,255,0.08),
    /* Center explosion - MORE DENSITY */
    -10px 70px 0 10px rgba(255,255,255,0.22), 10px 70px 0 10px rgba(255,255,255,0.22),
    -5px 60px 0 6px rgba(255,255,255,0.26), 5px 60px 0 6px rgba(255,255,255,0.26),
    -15px 80px 0 8px rgba(255,255,255,0.24), 15px 80px 0 8px rgba(255,255,255,0.24),
    /* MASSIVE edge rings - 120px */
    -90px -25px 0 60px rgba(255,255,255,0.05), 90px -25px 0 60px rgba(255,255,255,0.05),
    -100px 145px 0 58px rgba(255,255,255,0.04), 100px 145px 0 58px rgba(255,255,255,0.04);
}
.placeholder-variant-17::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -15px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.1); border-radius: 50%; z-index: 0; background: transparent;
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.08),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.06),
    110px 0px 0 0px transparent, 110px 0px 0 4px rgba(255,255,255,0.08);
}

/* Variation 18: MASSIVE DOT CLOUD - EXTREME DENSITY */
.placeholder-variant-18 { 
  background: linear-gradient(135deg, #0f1419 0%, #1f2937 60%, #374151 100%); 
  border:1px solid #1f2937; 
}
.placeholder-variant-18::before {
  content: '';
  position: absolute;
  top: -15px; right: -15px; width: 0.5px; height: 0.5px; background: rgba(255,255,255,0.6); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* MASSIVE CLOUD OF TINY DOTS - EVERYWHERE */
    15px 12px 0 0.5px rgba(255,255,255,0.4), 28px 8px 0 0.5px rgba(255,255,255,0.38),
    42px 18px 0 0.5px rgba(255,255,255,0.42), 55px 5px 0 0.5px rgba(255,255,255,0.36),
    68px 22px 0 0.5px rgba(255,255,255,0.44), 82px 14px 0 0.5px rgba(255,255,255,0.4),
    95px 28px 0 0.5px rgba(255,255,255,0.38), 108px 9px 0 0.5px rgba(255,255,255,0.46),
    122px 19px 0 0.5px rgba(255,255,255,0.42), 135px 25px 0 0.5px rgba(255,255,255,0.4),
    12px 35px 0 0.5px rgba(255,255,255,0.44), 25px 42px 0 0.5px rgba(255,255,255,0.38),
    39px 38px 0 0.5px rgba(255,255,255,0.46), 52px 45px 0 0.5px rgba(255,255,255,0.4),
    66px 52px 0 0.5px rgba(255,255,255,0.42), 79px 48px 0 0.5px rgba(255,255,255,0.36),
    93px 55px 0 0.5px rgba(255,255,255,0.44), 106px 42px 0 0.5px rgba(255,255,255,0.38),
    120px 58px 0 0.5px rgba(255,255,255,0.4), 133px 49px 0 0.5px rgba(255,255,255,0.42),
    18px 65px 0 0.5px rgba(255,255,255,0.46), 31px 72px 0 0.5px rgba(255,255,255,0.4),
    45px 68px 0 0.5px rgba(255,255,255,0.38), 58px 75px 0 0.5px rgba(255,255,255,0.44),
    72px 82px 0 0.5px rgba(255,255,255,0.42), 85px 78px 0 0.5px rgba(255,255,255,0.36),
    99px 85px 0 0.5px rgba(255,255,255,0.4), 112px 72px 0 0.5px rgba(255,255,255,0.38),
    126px 88px 0 0.5px rgba(255,255,255,0.46), 139px 79px 0 0.5px rgba(255,255,255,0.42),
    /* EVEN MORE DOTS - FILL EVERY GAP */
    8px 25px 0 0.5px rgba(255,255,255,0.45), 21px 15px 0 0.5px rgba(255,255,255,0.39),
    34px 30px 0 0.5px rgba(255,255,255,0.43), 47px 12px 0 0.5px rgba(255,255,255,0.37),
    61px 35px 0 0.5px rgba(255,255,255,0.41), 74px 8px 0 0.5px rgba(255,255,255,0.45),
    88px 32px 0 0.5px rgba(255,255,255,0.39), 101px 18px 0 0.5px rgba(255,255,255,0.43),
    115px 38px 0 0.5px rgba(255,255,255,0.37), 128px 12px 0 0.5px rgba(255,255,255,0.41),
    142px 35px 0 0.5px rgba(255,255,255,0.45), 155px 22px 0 0.5px rgba(255,255,255,0.39),
    /* Lower area - DENSE */
    22px 95px 0 0.5px rgba(255,255,255,0.44), 35px 102px 0 0.5px rgba(255,255,255,0.4),
    49px 98px 0 0.5px rgba(255,255,255,0.38), 62px 105px 0 0.5px rgba(255,255,255,0.46),
    76px 112px 0 0.5px rgba(255,255,255,0.42), 89px 108px 0 0.5px rgba(255,255,255,0.36),
    103px 115px 0 0.5px rgba(255,255,255,0.44), 116px 102px 0 0.5px rgba(255,255,255,0.4),
    130px 118px 0 0.5px rgba(255,255,255,0.38), 143px 109px 0 0.5px rgba(255,255,255,0.42),
    /* FILL THE BOTTOM */
    10px 125px 0 0.5px rgba(255,255,255,0.43), 24px 132px 0 0.5px rgba(255,255,255,0.37),
    38px 128px 0 0.5px rgba(255,255,255,0.45), 51px 135px 0 0.5px rgba(255,255,255,0.39),
    65px 142px 0 0.5px rgba(255,255,255,0.41), 78px 138px 0 0.5px rgba(255,255,255,0.43),
    92px 145px 0 0.5px rgba(255,255,255,0.37), 105px 132px 0 0.5px rgba(255,255,255,0.45),
    119px 148px 0 0.5px rgba(255,255,255,0.39), 132px 142px 0 0.5px rgba(255,255,255,0.41),
    146px 138px 0 0.5px rgba(255,255,255,0.43), 159px 145px 0 0.5px rgba(255,255,255,0.37);
}
.placeholder-variant-18::after {
  content: '';
  position: absolute;
  bottom: -120px; right: 10px; width: 120px; height: 120px; 
  background: rgba(255,255,255,0.05); border-radius: 50%; z-index: 0;
  /* ONE MASSIVE CIRCLE - contrast to tiny dots */
  box-shadow: 
    -60px 10px 0 -40px rgba(255,255,255,0.08), /* 80px circle */
    60px -15px 0 -20px rgba(255,255,255,0.06),  /* 100px circle */
    -120px -5px 0 -10px rgba(255,255,255,0.04); /* 110px circle */
}

/* Variation 19: Deep Red Circle Swirl - ENHANCED */
.placeholder-variant-19 { 
  background: linear-gradient(135deg, #450a0a 0%, #991b1b 60%, #dc2626 100%); 
  border:1px solid #991b1b; 
}
.placeholder-variant-19::before {
  content: '';
  position: absolute;
  top: -25px; left: -25px; width: 2px; height: 2px; background: rgba(255,255,255,0.4); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* Swirl pattern - MORE DRAMATIC SPIRAL */
    40px 30px 0 12px rgba(255,255,255,0.18), 75px 25px 0 10px rgba(255,255,255,0.2),
    105px 45px 0 15px rgba(255,255,255,0.16), 125px 75px 0 18px rgba(255,255,255,0.14),
    130px 110px 0 22px rgba(255,255,255,0.12), 110px 140px 0 24px rgba(255,255,255,0.1),
    80px 150px 0 26px rgba(255,255,255,0.09), 50px 140px 0 20px rgba(255,255,255,0.11),
    25px 110px 0 18px rgba(255,255,255,0.13), 15px 80px 0 16px rgba(255,255,255,0.15),
    20px 50px 0 14px rgba(255,255,255,0.17), 30px 20px 0 12px rgba(255,255,255,0.19),
    /* ADDITIONAL SPIRAL ARMS */
    52px 38px 0 8px rgba(255,255,255,0.21), 85px 35px 0 11px rgba(255,255,255,0.18),
    115px 60px 0 13px rgba(255,255,255,0.16), 135px 95px 0 16px rgba(255,255,255,0.14),
    125px 125px 0 19px rgba(255,255,255,0.12), 95px 145px 0 21px rgba(255,255,255,0.1),
    65px 155px 0 23px rgba(255,255,255,0.09), 35px 145px 0 17px rgba(255,255,255,0.13),
    /* MASSIVE edge circles - 120px */
    -45px -20px 0 60px rgba(255,255,255,0.06), 165px 130px 0 58px rgba(255,255,255,0.05),
    -35px 170px 0 62px rgba(255,255,255,0.04), 175px -10px 0 55px rgba(255,255,255,0.07),
    /* Swirl fill dots */
    60px 50px 0 4px rgba(255,255,255,0.25), 90px 70px 0 5px rgba(255,255,255,0.23),
    45px 90px 0 6px rgba(255,255,255,0.22), 115px 105px 0 4px rgba(255,255,255,0.26);
}
.placeholder-variant-19::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 30px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.11); border-radius: 50%; z-index: 0; background: transparent;
  /* Swirl concentric rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.09),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.07),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.06);
}

/* Variation 20: Amber Square Constellation - ENHANCED */
.placeholder-variant-20 { 
  background: linear-gradient(135deg, #431407 0%, #a16207 60%, #d97706 100%); 
  border:1px solid #a16207; 
}
.placeholder-variant-20::before {
  content: '';
  position: absolute;
  top: -25px; right: -25px; width: 3px; height: 3px; background: rgba(255,255,255,0.4); z-index: 0;
  box-shadow: 
    /* Constellation pattern - MORE STARS */
    45px 20px 0 15px rgba(255,255,255,0.16), 85px 35px 0 12px rgba(255,255,255,0.18),
    125px 55px 0 18px rgba(255,255,255,0.14), 25px 75px 0 14px rgba(255,255,255,0.17),
    65px 95px 0 16px rgba(255,255,255,0.15), 105px 115px 0 11px rgba(255,255,255,0.19),
    145px 25px 0 10px rgba(255,255,255,0.2), 35px 125px 0 20px rgba(255,255,255,0.13),
    /* ADDITIONAL CONSTELLATION LAYER */
    60px 40px 0 13px rgba(255,255,255,0.17), 100px 60px 0 15px rgba(255,255,255,0.15),
    140px 80px 0 12px rgba(255,255,255,0.18), 20px 100px 0 17px rgba(255,255,255,0.14),
    80px 120px 0 14px rgba(255,255,255,0.16), 120px 140px 0 19px rgba(255,255,255,0.12),
    50px 10px 0 8px rgba(255,255,255,0.21), 90px 130px 0 16px rgba(255,255,255,0.13),
    /* MASSIVE squares - 120px */
    -35px -15px 0 60px rgba(255,255,255,0.08), 155px 145px 0 58px rgba(255,255,255,0.07),
    -25px 160px 0 62px rgba(255,255,255,0.06), 165px -25px 0 55px rgba(255,255,255,0.09),
    /* Medium squares - MORE */
    75px 45px 0 8px rgba(255,255,255,0.22), 115px 85px 0 7px rgba(255,255,255,0.24),
    55px 135px 0 10px rgba(255,255,255,0.21), 95px 15px 0 6px rgba(255,255,255,0.26),
    40px 80px 0 9px rgba(255,255,255,0.23), 130px 105px 0 8px rgba(255,255,255,0.22),
    /* Tiny constellation dots */
    30px 50px 0 2px rgba(255,255,255,0.32), 110px 70px 0 3px rgba(255,255,255,0.29),
    70px 110px 0 2px rgba(255,255,255,0.34), 150px 50px 0 3px rgba(255,255,255,0.31);
}
.placeholder-variant-20::after {
  content: '';
  position: absolute;
  bottom: -100px; right: 5px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.1); z-index: 0; background: transparent;
  /* Constellation rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.08),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.06),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.05);
}

/* Variation 21: Forest Green Mixed Flow - ENHANCED */
.placeholder-variant-21 { 
  background: linear-gradient(135deg, #052e16 0%, #15803d 60%, #22c55e 100%); 
  border:1px solid #15803d; 
}
.placeholder-variant-21::before {
  content: '';
  position: absolute;
  top: -30px; left: -30px; width: 2px; height: 2px; background: rgba(255,255,255,0.5); z-index: 0;
  box-shadow: 
    /* Flowing mix - MORE ORGANIC FLOW */
    30px 25px 0 18px rgba(255,255,255,0.15), /* circle */
    70px 20px 0 12px rgba(255,255,255,0.18), /* square */
    110px 40px 0 22px rgba(255,255,255,0.12), /* circle */
    20px 70px 0 15px rgba(255,255,255,0.16), /* square */
    60px 90px 0 24px rgba(255,255,255,0.11), /* circle */
    100px 110px 0 14px rgba(255,255,255,0.17), /* square */
    140px 30px 0 16px rgba(255,255,255,0.15), /* circle */
    25px 130px 0 20px rgba(255,255,255,0.13), /* square */
    /* ADDITIONAL FLOWING LAYER */
    50px 45px 0 26px rgba(255,255,255,0.09), /* circle */
    90px 65px 0 11px rgba(255,255,255,0.19), /* square */
    130px 85px 0 28px rgba(255,255,255,0.08), /* circle */
    40px 105px 0 13px rgba(255,255,255,0.16), /* square */
    80px 125px 0 30px rgba(255,255,255,0.07), /* circle */
    120px 145px 0 17px rgba(255,255,255,0.14), /* square */
    /* MASSIVE mixed - 120px */
    -40px 50px 0 60px rgba(255,255,255,0.07), 160px 90px 0 58px rgba(255,255,255,0.06),
    -30px 160px 0 62px rgba(255,255,255,0.05), 170px -20px 0 55px rgba(255,255,255,0.08),
    /* Flow fill */
    45px 75px 0 6px rgba(255,255,255,0.23), 85px 95px 0 7px rgba(255,255,255,0.21),
    125px 115px 0 5px rgba(255,255,255,0.25), 15px 95px 0 8px rgba(255,255,255,0.2);
}
.placeholder-variant-21::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 25px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.12); z-index: 0; background: transparent;
  /* Flow concentric rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.1),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.08),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.06);
}

/* Variation 22: CLUSTERED CORNER GROUPS - Distinct clustering approach */
.placeholder-variant-22 { 
  background: linear-gradient(135deg, #500724 0%, #be185d 60%, #ec4899 100%); 
  border:1px solid #be185d; 
}
.placeholder-variant-22::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px; width: 4px; height: 4px; background: rgba(255,255,255,0.5); z-index: 0;
  box-shadow: 
    /* TOP-LEFT CLUSTER - tight grouping */
    15px 12px 0 8px rgba(255,255,255,0.2), 25px 8px 0 6px rgba(255,255,255,0.22),
    35px 18px 0 10px rgba(255,255,255,0.18), 18px 25px 0 7px rgba(255,255,255,0.21),
    28px 22px 0 5px rgba(255,255,255,0.24), 38px 32px 0 9px rgba(255,255,255,0.19),
    /* TOP-RIGHT CLUSTER */
    110px 5px 0 12px rgba(255,255,255,0.16), 125px 12px 0 8px rgba(255,255,255,0.2),
    135px 22px 0 10px rgba(255,255,255,0.18), 118px 18px 0 6px rgba(255,255,255,0.23),
    128px 28px 0 11px rgba(255,255,255,0.17), 142px 8px 0 7px rgba(255,255,255,0.21),
    /* BOTTOM-LEFT CLUSTER */
    8px 95px 0 14px rgba(255,255,255,0.15), 22px 105px 0 9px rgba(255,255,255,0.19),
    32px 115px 0 11px rgba(255,255,255,0.17), 15px 108px 0 7px rgba(255,255,255,0.22),
    25px 125px 0 13px rgba(255,255,255,0.16), 38px 102px 0 8px rgba(255,255,255,0.2),
    /* BOTTOM-RIGHT CLUSTER */
    115px 110px 0 16px rgba(255,255,255,0.14), 130px 118px 0 10px rgba(255,255,255,0.18),
    140px 128px 0 12px rgba(255,255,255,0.16), 122px 125px 0 8px rgba(255,255,255,0.21),
    132px 135px 0 14px rgba(255,255,255,0.15), 145px 115px 0 9px rgba(255,255,255,0.19);
}
.placeholder-variant-22::after {
  content: '';
  position: absolute;
  bottom: -70px; right: 20px; width: 60px; height: 60px; 
  background: rgba(255,255,255,0.1); border-radius: 50%; z-index: 0;
  /* CENTER CLUSTER - single large filled circle with smaller satellites */
  box-shadow: 
    -40px -10px 0 -20px rgba(255,255,255,0.12), /* smaller satellite */
    20px -15px 0 -25px rgba(255,255,255,0.14),  /* smaller satellite */
    -10px 25px 0 -30px rgba(255,255,255,0.11),  /* smaller satellite */
    30px 20px 0 -22px rgba(255,255,255,0.13);   /* smaller satellite */
}

/* Variation 23: Warm Stone Rings - ENHANCED */
.placeholder-variant-23 { 
  background: linear-gradient(135deg, #292524 0%, #57534e 60%, #78716c 100%); 
  border:1px solid #57534e; 
}
.placeholder-variant-23::before {
  content: '';
  position: absolute;
  top: -35px; left: 50%; transform: translateX(-50%); width: 1px; height: 1px; background: rgba(255,255,255,0.6); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* Warm ring pattern - MORE RINGS */
    -20px 20px 0 12px rgba(255,255,255,0.18), 20px 20px 0 12px rgba(255,255,255,0.18),
    -40px 50px 0 18px rgba(255,255,255,0.14), 40px 50px 0 18px rgba(255,255,255,0.14),
    -60px 80px 0 24px rgba(255,255,255,0.11), 60px 80px 0 24px rgba(255,255,255,0.11),
    -80px 110px 0 30px rgba(255,255,255,0.09), 80px 110px 0 30px rgba(255,255,255,0.09),
    /* ADDITIONAL WARM RINGS */
    -30px 35px 0 10px rgba(255,255,255,0.2), 30px 35px 0 10px rgba(255,255,255,0.2),
    -50px 65px 0 15px rgba(255,255,255,0.16), 50px 65px 0 15px rgba(255,255,255,0.16),
    -70px 95px 0 20px rgba(255,255,255,0.13), 70px 95px 0 20px rgba(255,255,255,0.13),
    -90px 125px 0 26px rgba(255,255,255,0.1), 90px 125px 0 26px rgba(255,255,255,0.1),
    /* Center burst - MORE DENSITY */
    -10px 65px 0 8px rgba(255,255,255,0.24), 10px 65px 0 8px rgba(255,255,255,0.24),
    -5px 55px 0 4px rgba(255,255,255,0.28), 5px 55px 0 4px rgba(255,255,255,0.28),
    -15px 75px 0 6px rgba(255,255,255,0.26), 15px 75px 0 6px rgba(255,255,255,0.26),
    /* MASSIVE edge rings - 120px */
    -85px -20px 0 60px rgba(255,255,255,0.06), 85px -20px 0 60px rgba(255,255,255,0.06),
    -95px 140px 0 58px rgba(255,255,255,0.05), 95px 140px 0 58px rgba(255,255,255,0.05);
}
.placeholder-variant-23::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.1); border-radius: 50%; z-index: 0; background: transparent;
  /* Warm stone concentric rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.08),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.06),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.05);
}

/* Variation 24: Zinc Hex Matrix - ENHANCED */
.placeholder-variant-24 { 
  background: linear-gradient(135deg, #18181b 0%, #3f3f46 60%, #71717a 100%); 
  border:1px solid #3f3f46; 
}
.placeholder-variant-24::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px; width: 4px; height: 4px; background: rgba(255,255,255,0.4); z-index: 0;
  box-shadow: 
    /* Matrix hex pattern - MORE COMPLEX */
    -30px 30px 0 20px rgba(255,255,255,0.14), 140px 20px 0 18px rgba(255,255,255,0.16),
    40px 120px 0 24px rgba(255,255,255,0.12), -45px -10px 0 26px rgba(255,255,255,0.11),
    165px 130px 0 30px rgba(255,255,255,0.1), 70px 50px 0 14px rgba(255,255,255,0.18),
    105px 85px 0 16px rgba(255,255,255,0.17), 30px 90px 0 20px rgba(255,255,255,0.15),
    125px 30px 0 12px rgba(255,255,255,0.19), 50px 145px 0 22px rgba(255,255,255,0.13),
    /* ADDITIONAL HEX MATRIX LAYERS */
    -15px 50px 0 28px rgba(255,255,255,0.09), 155px 40px 0 25px rgba(255,255,255,0.12),
    55px 140px 0 32px rgba(255,255,255,0.08), -60px 10px 0 34px rgba(255,255,255,0.07),
    180px 150px 0 36px rgba(255,255,255,0.06), 85px 70px 0 15px rgba(255,255,255,0.16),
    120px 110px 0 17px rgba(255,255,255,0.15), 45px 115px 0 21px rgba(255,255,255,0.13),
    150px 55px 0 13px rgba(255,255,255,0.17), 65px 175px 0 23px rgba(255,255,255,0.11),
    /* MASSIVE hex matrix - 120px */
    -55px 150px 0 60px rgba(255,255,255,0.07), 180px -30px 0 58px rgba(255,255,255,0.08),
    -65px -40px 0 62px rgba(255,255,255,0.06), 190px 160px 0 55px rgba(255,255,255,0.09),
    /* Small matrix fill - MORE */
    85px 105px 0 6px rgba(255,255,255,0.22), 40px 60px 0 8px rgba(255,255,255,0.21),
    115px 75px 0 7px rgba(255,255,255,0.23), 25px 125px 0 5px rgba(255,255,255,0.25),
    145px 95px 0 9px rgba(255,255,255,0.2), 75px 25px 0 4px rgba(255,255,255,0.27);
}
.placeholder-variant-24::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 15px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.09); z-index: 0; background: transparent;
  /* Hex matrix rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.07),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.06),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.05);
}

/* Variation 25: Orange Square Storm - ENHANCED */
.placeholder-variant-25 { 
  background: linear-gradient(135deg, #7c2d12 0%, #ea580c 60%, #fb923c 100%); 
  border:1px solid #ea580c; 
}
.placeholder-variant-25::before {
  content: '';
  position: absolute;
  top: -25px; left: -25px; width: 3px; height: 3px; background: rgba(255,255,255,0.5); z-index: 0;
  box-shadow: 
    /* Square storm explosion - MORE INTENSE */
    30px 20px 0 12px rgba(255,255,255,0.18), 65px 25px 0 10px rgba(255,255,255,0.2),
    100px 35px 0 15px rgba(255,255,255,0.16), 135px 45px 0 11px rgba(255,255,255,0.19),
    25px 60px 0 14px rgba(255,255,255,0.17), 60px 70px 0 8px rgba(255,255,255,0.22),
    95px 80px 0 16px rgba(255,255,255,0.15), 130px 90px 0 12px rgba(255,255,255,0.18),
    20px 105px 0 18px rgba(255,255,255,0.14), 55px 115px 0 7px rgba(255,255,255,0.24),
    90px 125px 0 14px rgba(255,255,255,0.17), 125px 135px 0 10px rgba(255,255,255,0.21),
    /* ADDITIONAL STORM LAYERS */
    45px 40px 0 20px rgba(255,255,255,0.13), 80px 50px 0 17px rgba(255,255,255,0.16),
    115px 65px 0 22px rgba(255,255,255,0.12), 150px 75px 0 13px rgba(255,255,255,0.18),
    40px 95px 0 19px rgba(255,255,255,0.14), 75px 105px 0 15px rgba(255,255,255,0.17),
    110px 120px 0 24px rgba(255,255,255,0.11), 145px 130px 0 16px rgba(255,255,255,0.15),
    /* MASSIVE storm squares - 120px */
    -40px -20px 0 60px rgba(255,255,255,0.08), 160px 140px 0 58px rgba(255,255,255,0.07),
    -30px 170px 0 62px rgba(255,255,255,0.06), 170px -30px 0 55px rgba(255,255,255,0.09),
    /* Storm fill squares */
    50px 55px 0 5px rgba(255,255,255,0.25), 85px 85px 0 6px rgba(255,255,255,0.23),
    120px 100px 0 4px rgba(255,255,255,0.27), 35px 120px 0 7px rgba(255,255,255,0.22);
}
.placeholder-variant-25::after {
  content: '';
  position: absolute;
  bottom: -100px; right: 25px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.11); z-index: 0; background: transparent;
  /* Storm square rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.09),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.07),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.06);
}

/* Variation 26: Yellow Circle Galaxy - ENHANCED */
.placeholder-variant-26 { 
  background: linear-gradient(135deg, #713f12 0%, #d97706 60%, #fbbf24 100%); 
  border:1px solid #d97706; 
}
.placeholder-variant-26::before {
  content: '';
  position: absolute;
  top: -30px; left: 50%; transform: translateX(-50%); width: 1px; height: 1px; background: rgba(255,255,255,0.6); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* Galaxy spiral - MORE GALACTIC */
    -15px 15px 0 8px rgba(255,255,255,0.25), 15px 15px 0 8px rgba(255,255,255,0.25),
    -30px 35px 0 12px rgba(255,255,255,0.2), 30px 35px 0 12px rgba(255,255,255,0.2),
    -45px 60px 0 16px rgba(255,255,255,0.16), 45px 60px 0 16px rgba(255,255,255,0.16),
    -60px 90px 0 20px rgba(255,255,255,0.13), 60px 90px 0 20px rgba(255,255,255,0.13),
    -70px 125px 0 24px rgba(255,255,255,0.11), 70px 125px 0 24px rgba(255,255,255,0.11),
    /* ADDITIONAL GALAXY ARMS */
    -25px 25px 0 6px rgba(255,255,255,0.27), 25px 25px 0 6px rgba(255,255,255,0.27),
    -40px 50px 0 10px rgba(255,255,255,0.22), 40px 50px 0 10px rgba(255,255,255,0.22),
    -55px 75px 0 14px rgba(255,255,255,0.18), 55px 75px 0 14px rgba(255,255,255,0.18),
    -65px 105px 0 18px rgba(255,255,255,0.15), 65px 105px 0 18px rgba(255,255,255,0.15),
    -75px 140px 0 22px rgba(255,255,255,0.12), 75px 140px 0 22px rgba(255,255,255,0.12),
    /* Center core - MORE DENSITY */
    -5px 70px 0 12px rgba(255,255,255,0.18), 5px 70px 0 12px rgba(255,255,255,0.18),
    -10px 60px 0 6px rgba(255,255,255,0.24), 10px 60px 0 6px rgba(255,255,255,0.24),
    -10px 80px 0 8px rgba(255,255,255,0.22), 10px 80px 0 8px rgba(255,255,255,0.22),
    /* MASSIVE galaxy arms - 120px */
    -80px -15px 0 60px rgba(255,255,255,0.08), 80px -15px 0 60px rgba(255,255,255,0.08),
    -85px 155px 0 58px rgba(255,255,255,0.06), 85px 155px 0 58px rgba(255,255,255,0.06);
}
.placeholder-variant-26::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.12); border-radius: 50%; z-index: 0; background: transparent;
  /* Galaxy concentric rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.1),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.08),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.07);
}

/* Variation 27: Lime Diagonal Web - ENHANCED */
.placeholder-variant-27 { 
  background: linear-gradient(135deg, #1a2e05 0%, #65a30d 60%, #84cc16 100%); 
  border:1px solid #65a30d; 
}
.placeholder-variant-27::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px; width: 2px; height: 2px; background: rgba(255,255,255,0.5); z-index: 0;
  box-shadow: 
    /* Web diagonal pattern - MORE COMPLEX WEB */
    25px 25px 0 8px rgba(255,255,255,0.22), 50px 50px 0 12px rgba(255,255,255,0.19),
    75px 75px 0 16px rgba(255,255,255,0.17), 100px 100px 0 20px rgba(255,255,255,0.15),
    125px 125px 0 24px rgba(255,255,255,0.13), 150px 150px 0 28px rgba(255,255,255,0.11),
    /* ADDITIONAL WEB STRANDS */
    37px 37px 0 6px rgba(255,255,255,0.24), 62px 62px 0 10px rgba(255,255,255,0.21),
    87px 87px 0 14px rgba(255,255,255,0.18), 112px 112px 0 18px rgba(255,255,255,0.16),
    137px 137px 0 22px rgba(255,255,255,0.14), 162px 162px 0 26px rgba(255,255,255,0.12),
    /* Cross web - MORE DENSITY */
    135px 25px 0 10px rgba(255,255,255,0.21), 110px 50px 0 14px rgba(255,255,255,0.18),
    85px 75px 0 18px rgba(255,255,255,0.16), 60px 100px 0 22px rgba(255,255,255,0.14),
    35px 125px 0 26px rgba(255,255,255,0.12), 10px 150px 0 30px rgba(255,255,255,0.1),
    /* ADDITIONAL CROSS WEB */
    125px 37px 0 8px rgba(255,255,255,0.23), 100px 62px 0 12px rgba(255,255,255,0.2),
    75px 87px 0 16px rgba(255,255,255,0.17), 50px 112px 0 20px rgba(255,255,255,0.15),
    25px 137px 0 24px rgba(255,255,255,0.13), 0px 162px 0 28px rgba(255,255,255,0.11),
    /* MASSIVE web corners - 120px */
    -35px 140px 0 60px rgba(255,255,255,0.08), 155px -15px 0 58px rgba(255,255,255,0.09),
    -45px -25px 0 62px rgba(255,255,255,0.07), 165px 165px 0 55px rgba(255,255,255,0.1);
}
.placeholder-variant-27::after {
  content: '';
  position: absolute;
  bottom: -100px; right: 30px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.13); z-index: 0; background: transparent;
  /* Web concentric rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.11),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.09),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.08);
}

/* Variation 28: Fuchsia Mixed Explosion */
.placeholder-variant-28 { 
  background: linear-gradient(135deg, #701a75 0%, #c026d3 60%, #d946ef 100%); 
  border:1px solid #c026d3; 
}
.placeholder-variant-28::before {
  content: '';
  position: absolute;
  top: -35px; right: -35px; width: 3px; height: 3px; background: rgba(255,255,255,0.4); z-index: 0;
  box-shadow: 
    /* Explosive mix */
    40px 25px 0 16px rgba(255,255,255,0.12), /* circle */
    85px 20px 0 10px rgba(255,255,255,0.17), /* square */
    130px 40px 0 18px rgba(255,255,255,0.1), /* circle */
    30px 70px 0 12px rgba(255,255,255,0.15), /* square */
    75px 85px 0 20px rgba(255,255,255,0.09), /* circle */
    120px 100px 0 11px rgba(255,255,255,0.16), /* square */
    25px 120px 0 22px rgba(255,255,255,0.08), /* circle */
    70px 135px 0 9px rgba(255,255,255,0.18), /* square */
    /* MASSIVE explosion */
    -50px -20px 0 34px rgba(255,255,255,0.06), 170px 130px 0 32px rgba(255,255,255,0.05),
    /* Medium explosion fill */
    60px 55px 0 7px rgba(255,255,255,0.2), 100px 75px 0 8px rgba(255,255,255,0.19),
    /* NEW: Starburst effect - small radiating points */
    50px 30px 0 1px rgba(255,255,255,0.35), 90px 45px 0 1px rgba(255,255,255,0.33),
    110px 25px 0 1px rgba(255,255,255,0.37), 45px 95px 0 1px rgba(255,255,255,0.34),
    125px 80px 0 1px rgba(255,255,255,0.36), 35px 50px 0 1px rgba(255,255,255,0.32);
}
.placeholder-variant-28::after {
  content: '';
  position: absolute;
  bottom: -70px; left: 40px; width: 140px; height: 140px; 
  border: 4px solid rgba(255,255,255,0.11); z-index: 0; background: transparent;
  /* NEW: Explosion rays */
  box-shadow: 
    -35px -35px 0 -37px rgba(255,255,255,0.12), /* diagonal ray */
    35px -35px 0 -37px rgba(255,255,255,0.1),   /* diagonal ray */
    -35px 35px 0 -37px rgba(255,255,255,0.11),  /* diagonal ray */
    35px 35px 0 -37px rgba(255,255,255,0.09);   /* diagonal ray */
}

/* Variation 29: Deep Stone Rings - ENHANCED */
.placeholder-variant-29 { 
  background: linear-gradient(135deg, #0c0a09 0%, #1c1917 60%, #292524 100%); 
  border:1px solid #1c1917; 
}
.placeholder-variant-29::before {
  content: '';
  position: absolute;
  top: -40px; left: 50%; transform: translateX(-50%); width: 1px; height: 1px; background: rgba(255,255,255,0.6); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* Deep concentric rings - MORE LAYERS */
    -25px 25px 0 15px rgba(255,255,255,0.16), 25px 25px 0 15px rgba(255,255,255,0.16),
    -45px 55px 0 22px rgba(255,255,255,0.12), 45px 55px 0 22px rgba(255,255,255,0.12),
    -65px 85px 0 30px rgba(255,255,255,0.09), 65px 85px 0 30px rgba(255,255,255,0.09),
    -85px 115px 0 38px rgba(255,255,255,0.07), 85px 115px 0 38px rgba(255,255,255,0.07),
    -100px 145px 0 45px rgba(255,255,255,0.05), 100px 145px 0 45px rgba(255,255,255,0.05),
    /* ADDITIONAL DEEP RINGS */
    -15px 15px 0 8px rgba(255,255,255,0.2), 15px 15px 0 8px rgba(255,255,255,0.2),
    -35px 40px 0 12px rgba(255,255,255,0.18), 35px 40px 0 12px rgba(255,255,255,0.18),
    -55px 70px 0 18px rgba(255,255,255,0.14), 55px 70px 0 18px rgba(255,255,255,0.14),
    -75px 100px 0 25px rgba(255,255,255,0.11), 75px 100px 0 25px rgba(255,255,255,0.11),
    -90px 130px 0 32px rgba(255,255,255,0.08), 90px 130px 0 32px rgba(255,255,255,0.08),
    /* Deep center - MORE DENSITY */
    -10px 70px 0 10px rgba(255,255,255,0.22), 10px 70px 0 10px rgba(255,255,255,0.22),
    -5px 60px 0 6px rgba(255,255,255,0.26), 5px 60px 0 6px rgba(255,255,255,0.26),
    -5px 80px 0 8px rgba(255,255,255,0.24), 5px 80px 0 8px rgba(255,255,255,0.24),
    /* MASSIVE deep rings - 120px */
    -95px -25px 0 60px rgba(255,255,255,0.04), 95px -25px 0 60px rgba(255,255,255,0.04),
    -105px 160px 0 58px rgba(255,255,255,0.03), 105px 160px 0 58px rgba(255,255,255,0.03);
}
.placeholder-variant-29::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -20px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.08); border-radius: 50%; z-index: 0; background: transparent;
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.06),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.05),
    120px 0px 0 0px transparent, 120px 0px 0 4px rgba(255,255,255,0.06);
}

/* Variation 30: GROWING GRADIENT SIZES - ENHANCED PROGRESSION */
.placeholder-variant-30 { 
  background: linear-gradient(135deg, #09090b 0%, #27272a 60%, #3f3f46 100%); 
  border:1px solid #27272a; 
}
.placeholder-variant-30::before {
  content: '';
  position: absolute;
  top: -15px; right: -15px; width: 1px; height: 1px; background: rgba(255,255,255,0.4); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* TOP AREA - Tiny dots (1-2px) - MORE DOTS */
    20px 8px 0 1px rgba(255,255,255,0.3), 45px 12px 0 1px rgba(255,255,255,0.32),
    70px 6px 0 1px rgba(255,255,255,0.28), 95px 15px 0 1px rgba(255,255,255,0.34),
    120px 10px 0 1px rgba(255,255,255,0.3), 145px 18px 0 1px rgba(255,255,255,0.31),
    35px 5px 0 1px rgba(255,255,255,0.33), 60px 18px 0 1px rgba(255,255,255,0.29),
    85px 8px 0 1px rgba(255,255,255,0.35), 110px 22px 0 1px rgba(255,255,255,0.27),
    135px 4px 0 1px rgba(255,255,255,0.36), 25px 20px 0 1px rgba(255,255,255,0.3),
    /* MIDDLE AREA - Small circles (3-6px) - MORE */
    15px 35px 0 3px rgba(255,255,255,0.24), 42px 40px 0 4px rgba(255,255,255,0.22),
    68px 45px 0 5px rgba(255,255,255,0.2), 94px 38px 0 4px rgba(255,255,255,0.23),
    120px 42px 0 6px rgba(255,255,255,0.19), 146px 48px 0 5px rgba(255,255,255,0.21),
    30px 50px 0 3px rgba(255,255,255,0.25), 55px 32px 0 4px rgba(255,255,255,0.23),
    80px 55px 0 5px rgba(255,255,255,0.21), 105px 50px 0 6px rgba(255,255,255,0.2),
    130px 35px 0 4px rgba(255,255,255,0.24), 155px 40px 0 3px rgba(255,255,255,0.26),
    /* MIDDLE-LOWER - Medium circles (8-15px) - MORE */
    25px 65px 0 8px rgba(255,255,255,0.18), 55px 70px 0 10px rgba(255,255,255,0.16),
    85px 75px 0 12px rgba(255,255,255,0.14), 115px 68px 0 9px rgba(255,255,255,0.17),
    145px 72px 0 11px rgba(255,255,255,0.15), 35px 78px 0 13px rgba(255,255,255,0.13),
    65px 85px 0 15px rgba(255,255,255,0.12), 95px 82px 0 14px rgba(255,255,255,0.14),
    125px 88px 0 10px rgba(255,255,255,0.16), 155px 80px 0 12px rgba(255,255,255,0.15),
    /* LOWER AREA - Large circles (18-30px) - MORE */
    35px 95px 0 18px rgba(255,255,255,0.12), 70px 105px 0 25px rgba(255,255,255,0.1),
    105px 100px 0 22px rgba(255,255,255,0.11), 140px 110px 0 28px rgba(255,255,255,0.09),
    20px 115px 0 20px rgba(255,255,255,0.11), 50px 125px 0 24px rgba(255,255,255,0.1),
    80px 120px 0 26px rgba(255,255,255,0.09), 110px 130px 0 30px rgba(255,255,255,0.08);
}
.placeholder-variant-30::after {
  content: '';
  position: absolute;
  bottom: -100px; right: 5px; width: 50px; height: 50px; 
  background: rgba(255,255,255,0.08); border-radius: 50%; z-index: 0;
  /* BOTTOM - MASSIVE circle progression (40-120px) */
  box-shadow: 
    -70px 0 0 -10px rgba(255,255,255,0.06),  /* 40px circle */
    -140px 10px 0 -5px rgba(255,255,255,0.05), /* 45px circle */
    70px -5px 0 15px rgba(255,255,255,0.07),   /* 80px circle */
    140px 15px 0 35px rgba(255,255,255,0.04),  /* 120px circle */
    -200px -10px 0 25px rgba(255,255,255,0.04), /* 100px circle */
    200px -20px 0 30px rgba(255,255,255,0.03);  /* 110px circle */
}

/* Variation 31: Warm Stone Circle Flow - ENHANCED */
.placeholder-variant-31 { 
  background: linear-gradient(135deg, #1c1917 0%, #44403c 60%, #57534e 100%); 
  border:1px solid #44403c; 
}
.placeholder-variant-31::before {
  content: '';
  position: absolute;
  top: -25px; left: -25px; width: 2px; height: 2px; background: rgba(255,255,255,0.4); border-radius: 50%; z-index: 0;
  box-shadow: 
    /* Flowing circle pattern - MORE ORGANIC FLOW */
    35px 20px 0 18px rgba(255,255,255,0.15), 80px 40px 0 12px rgba(255,255,255,0.18),
    125px 65px 0 22px rgba(255,255,255,0.12), 25px 90px 0 15px rgba(255,255,255,0.16),
    70px 115px 0 24px rgba(255,255,255,0.11), 115px 25px 0 10px rgba(255,255,255,0.2),
    15px 45px 0 14px rgba(255,255,255,0.17), 60px 70px 0 16px rgba(255,255,255,0.15),
    105px 95px 0 20px rgba(255,255,255,0.13), 140px 120px 0 26px rgba(255,255,255,0.12),
    /* ADDITIONAL FLOWING LAYERS */
    50px 35px 0 28px rgba(255,255,255,0.09), 95px 55px 0 11px rgba(255,255,255,0.19),
    140px 80px 0 30px rgba(255,255,255,0.08), 30px 105px 0 13px rgba(255,255,255,0.16),
    75px 130px 0 32px rgba(255,255,255,0.07), 120px 40px 0 17px rgba(255,255,255,0.14),
    10px 60px 0 34px rgba(255,255,255,0.06), 85px 85px 0 19px rgba(255,255,255,0.13),
    130px 105px 0 36px rgba(255,255,255,0.05), 155px 135px 0 21px rgba(255,255,255,0.12),
    /* MASSIVE flow circles - 120px */
    -40px -15px 0 60px rgba(255,255,255,0.08), 160px 140px 0 58px rgba(255,255,255,0.07),
    -30px 170px 0 62px rgba(255,255,255,0.06), 170px -25px 0 55px rgba(255,255,255,0.09),
    /* Small flow fill - MORE */
    50px 50px 0 6px rgba(255,255,255,0.23), 90px 80px 0 8px rgba(255,255,255,0.22),
    40px 110px 0 7px rgba(255,255,255,0.24), 110px 50px 0 5px rgba(255,255,255,0.26);
}
.placeholder-variant-31::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 25px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.1); border-radius: 50%; z-index: 0; background: transparent;
  /* Flow concentric rings */
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.08),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.06),
    0 0 0 45px transparent, 0 0 0 48px rgba(255,255,255,0.05);
}

/* Variation 32: Cool Gray Square Matrix - ENHANCED */
.placeholder-variant-32 { 
  background: linear-gradient(135deg, #27272a 0%, #52525b 60%, #71717a 100%); 
  border:1px solid #52525b; 
}
.placeholder-variant-32::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px; width: 4px; height: 4px; background: rgba(255,255,255,0.4); z-index: 0;
  box-shadow: 
    /* Matrix square pattern - MORE COMPLEX MATRIX */
    40px 25px 0 18px rgba(255,255,255,0.15), 80px 30px 0 15px rgba(255,255,255,0.17),
    120px 40px 0 22px rgba(255,255,255,0.13), 160px 50px 0 12px rgba(255,255,255,0.19),
    35px 70px 0 16px rgba(255,255,255,0.16), 75px 80px 0 14px rgba(255,255,255,0.18),
    115px 90px 0 20px rgba(255,255,255,0.14), 155px 100px 0 11px rgba(255,255,255,0.2),
    30px 115px 0 24px rgba(255,255,255,0.12), 70px 125px 0 10px rgba(255,255,255,0.21),
    110px 135px 0 18px rgba(255,255,255,0.15), 150px 145px 0 15px rgba(255,255,255,0.17),
    /* ADDITIONAL MATRIX ROWS */
    55px 45px 0 26px rgba(255,255,255,0.11), 95px 55px 0 13px rgba(255,255,255,0.18),
    135px 65px 0 28px rgba(255,255,255,0.1), 175px 75px 0 17px rgba(255,255,255,0.16),
    50px 95px 0 30px rgba(255,255,255,0.09), 90px 105px 0 19px rgba(255,255,255,0.14),
    130px 115px 0 32px rgba(255,255,255,0.08), 170px 125px 0 21px rgba(255,255,255,0.13),
    /* MASSIVE matrix squares - 120px */
    -45px -20px 0 60px rgba(255,255,255,0.07), 170px 150px 0 58px rgba(255,255,255,0.08),
    -35px 180px 0 62px rgba(255,255,255,0.06), 180px -30px 0 55px rgba(255,255,255,0.09),
    /* Small matrix fill - MORE DENSITY */
    60px 55px 0 6px rgba(255,255,255,0.24), 100px 75px 0 8px rgba(255,255,255,0.23),
    140px 25px 0 5px rgba(255,255,255,0.26), 25px 95px 0 9px rgba(255,255,255,0.22),
    85px 15px 0 4px rgba(255,255,255,0.28), 125px 85px 0 7px rgba(255,255,255,0.25),
    165px 110px 0 6px rgba(255,255,255,0.24), 45px 130px 0 8px rgba(255,255,255,0.23);
}
.placeholder-variant-32::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 10px; width: 120px; height: 120px; 
  border: 4px solid rgba(255,255,255,0.09); z-index: 0; background: transparent;
  box-shadow: 
    0 0 0 15px transparent, 0 0 0 18px rgba(255,255,255,0.07),
    0 0 0 30px transparent, 0 0 0 33px rgba(255,255,255,0.06),
    -90px 5px 0 0px transparent, -90px 5px 0 4px rgba(255,255,255,0.07);
}

/* All variations now scale automatically with clamp() - no mobile overrides needed */