/* ── RUSSIAN SCENERY BACKGROUNDS ── */
/* Each scene uses body::before (sky) and body::after (silhouettes) */

/* Base rule for body::after (silhouette layer) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 1.5s ease-in-out;
}

/* Transition helper: fades out silhouettes during scene swap */
body.scene-transitioning::before,
body.scene-transitioning::after {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* ════════════════════════════════════════
   Scene 1: St. Basil's Cathedral - Sunset
   ════════════════════════════════════════ */
body.scene-1::before {
  background:
    /* Stars */
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 25% 8%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 85% 12%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 5%, rgba(255,255,255,0.3), transparent),
    /* Sky gradient */
    linear-gradient(180deg,
      #1a0533 0%,
      #3d1447 20%,
      #8b2252 40%,
      #c0392b 55%,
      #e67e22 70%,
      #f39c12 85%,
      #f1c40f 100%
    );
}

body.scene-1::after {
  background:
    /* Central large dome */
    radial-gradient(ellipse 35px 50px at 50% calc(100% - 120px), #0a0a0a 69%, transparent 70%),
    /* Dome spire */
    linear-gradient(180deg, #0a0a0a 0%, #0a0a0a 100%) no-repeat 50% calc(100% - 170px) / 4px 30px,
    /* Left dome 1 */
    radial-gradient(ellipse 25px 38px at 38% calc(100% - 105px), #0a0a0a 69%, transparent 70%),
    /* Left dome 2 */
    radial-gradient(ellipse 20px 30px at 28% calc(100% - 95px), #0a0a0a 69%, transparent 70%),
    /* Right dome 1 */
    radial-gradient(ellipse 25px 38px at 62% calc(100% - 105px), #0a0a0a 69%, transparent 70%),
    /* Right dome 2 */
    radial-gradient(ellipse 20px 30px at 72% calc(100% - 95px), #0a0a0a 69%, transparent 70%),
    /* Spires for side domes */
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 38% calc(100% - 143px) / 3px 22px,
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 62% calc(100% - 143px) / 3px 22px,
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 28% calc(100% - 125px) / 3px 18px,
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 72% calc(100% - 125px) / 3px 18px,
    /* Building base */
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 50% 100% / 60% 70px;
}

/* ════════════════════════════════════════
   Scene 2: Red Square at Night
   ════════════════════════════════════════ */
body.scene-2::before {
  background:
    /* Moon */
    radial-gradient(circle 30px at 80% 15%, rgba(240,230,200,0.9), rgba(240,230,200,0.1) 70%, transparent 71%),
    /* Stars */
    radial-gradient(1px 1px at 15% 10%, #fff, transparent),
    radial-gradient(1px 1px at 30% 20%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 55% 8%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 90% 25%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 45% 15%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 5% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 65% 18%, rgba(255,255,255,0.5), transparent),
    /* Sky */
    linear-gradient(180deg,
      #050520 0%,
      #0a0a3a 30%,
      #141452 60%,
      #1e1e5a 80%,
      #2d1b4e 100%
    );
}

body.scene-2::after {
  background:
    /* Spasskaya tower spire */
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 40% calc(100% - 200px) / 3px 40px,
    /* Red star atop tower */
    radial-gradient(circle 5px at 40% calc(100% - 200px), #c0392b 60%, transparent 61%),
    /* Tower top (pyramid) */
    linear-gradient(175deg, #0a0a0a 49%, transparent 50%) no-repeat calc(40% - 15px) calc(100% - 175px) / 16px 25px,
    linear-gradient(185deg, transparent 49%, #0a0a0a 50%) no-repeat calc(40% + 0px) calc(100% - 175px) / 16px 25px,
    /* Tower body */
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat calc(40% - 12px) calc(100% - 150px) / 25px 80px,
    /* Kremlin wall */
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 50% 100% / 85% 70px,
    /* Wall crenellations */
    repeating-linear-gradient(90deg,
      #0a0a0a 0px, #0a0a0a 18px,
      transparent 18px, transparent 24px
    ) no-repeat 10% calc(100% - 80px) / 80% 12px;
}

/* ════════════════════════════════════════
   Scene 3: Winter Palace / Aurora Borealis
   ════════════════════════════════════════ */
body.scene-3::before {
  background:
    /* Aurora bands */
    radial-gradient(ellipse 60% 15% at 30% 25%, rgba(46,204,113,0.2), transparent),
    radial-gradient(ellipse 50% 10% at 60% 20%, rgba(46,204,113,0.15), transparent),
    radial-gradient(ellipse 40% 12% at 45% 30%, rgba(142,68,173,0.15), transparent),
    radial-gradient(ellipse 55% 8% at 70% 15%, rgba(46,204,113,0.12), transparent),
    /* Stars */
    radial-gradient(1px 1px at 20% 10%, #fff, transparent),
    radial-gradient(1px 1px at 50% 5%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 75% 12%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 35% 18%, rgba(255,255,255,0.6), transparent),
    /* Sky */
    linear-gradient(180deg,
      #050515 0%,
      #0a1628 30%,
      #0d1f35 60%,
      #162845 100%
    );
}

body.scene-3::after {
  background:
    /* Palace dome */
    radial-gradient(ellipse 30px 25px at 50% calc(100% - 120px), #0a0a0a 69%, transparent 70%),
    /* Dome spire */
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 50% calc(100% - 145px) / 3px 18px,
    /* Columns (repeating pattern) */
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 12px,
      #0a0a0a 12px, #0a0a0a 16px
    ) no-repeat 25% calc(100% - 95px) / 50% 30px,
    /* Palace pediment (triangle) */
    linear-gradient(170deg, #0a0a0a 49%, transparent 50%) no-repeat calc(50% - 40px) calc(100% - 95px) / 42px 18px,
    linear-gradient(190deg, transparent 49%, #0a0a0a 50%) no-repeat calc(50% - 0px) calc(100% - 95px) / 42px 18px,
    /* Palace body */
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 50% 100% / 70% 70px,
    /* Wings */
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 18% 100% / 15% 55px,
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 82% 100% / 15% 55px;
}

/* ════════════════════════════════════════
   Scene 4: Siberian Taiga
   ════════════════════════════════════════ */
body.scene-4::before {
  background:
    /* Aurora streaks */
    radial-gradient(ellipse 70% 8% at 40% 20%, rgba(46,204,113,0.15), transparent),
    radial-gradient(ellipse 50% 6% at 60% 28%, rgba(46,204,113,0.1), transparent),
    radial-gradient(ellipse 40% 5% at 30% 35%, rgba(52,152,219,0.08), transparent),
    /* Stars */
    radial-gradient(1px 1px at 10% 10%, #fff, transparent),
    radial-gradient(1px 1px at 30% 5%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 60% 15%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 85% 8%, rgba(255,255,255,0.7), transparent),
    /* Sky */
    linear-gradient(180deg,
      #0a1520 0%,
      #0d2030 30%,
      #122838 60%,
      #1a3545 80%,
      #dde8f0 96%,
      #f0f4f7 100%
    );
}

body.scene-4::after {
  background:
    /* Trees - front row (larger) */
    conic-gradient(from 0deg at 15% calc(100% - 60px), #0a1a0a 0deg, #0a1a0a 15deg, transparent 15deg, transparent 345deg, #0a1a0a 345deg) no-repeat,
    conic-gradient(from 0deg at 30% calc(100% - 70px), #0a1a0a 0deg, #0a1a0a 14deg, transparent 14deg, transparent 346deg, #0a1a0a 346deg) no-repeat,
    conic-gradient(from 0deg at 45% calc(100% - 55px), #0a1a0a 0deg, #0a1a0a 16deg, transparent 16deg, transparent 344deg, #0a1a0a 344deg) no-repeat,
    conic-gradient(from 0deg at 60% calc(100% - 65px), #0a1a0a 0deg, #0a1a0a 15deg, transparent 15deg, transparent 345deg, #0a1a0a 345deg) no-repeat,
    conic-gradient(from 0deg at 75% calc(100% - 60px), #0a1a0a 0deg, #0a1a0a 14deg, transparent 14deg, transparent 346deg, #0a1a0a 346deg) no-repeat,
    conic-gradient(from 0deg at 90% calc(100% - 50px), #0a1a0a 0deg, #0a1a0a 15deg, transparent 15deg, transparent 345deg, #0a1a0a 345deg) no-repeat,
    /* Back row trees (smaller, lighter) */
    conic-gradient(from 0deg at 22% calc(100% - 75px), #0c200c 0deg, #0c200c 12deg, transparent 12deg, transparent 348deg, #0c200c 348deg) no-repeat,
    conic-gradient(from 0deg at 52% calc(100% - 80px), #0c200c 0deg, #0c200c 11deg, transparent 11deg, transparent 349deg, #0c200c 349deg) no-repeat,
    conic-gradient(from 0deg at 82% calc(100% - 72px), #0c200c 0deg, #0c200c 12deg, transparent 12deg, transparent 348deg, #0c200c 348deg) no-repeat,
    /* Snow ground */
    linear-gradient(180deg, transparent 95%, rgba(220,230,240,0.6) 95.5%, rgba(240,245,250,0.8) 100%);
}

/* ════════════════════════════════════════
   Scene 5: Lake Baikal
   ════════════════════════════════════════ */
body.scene-5::before {
  background:
    /* Stars */
    radial-gradient(1px 1px at 12% 8%, #fff, transparent),
    radial-gradient(1px 1px at 35% 12%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 58% 5%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 78% 10%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 92% 18%, rgba(255,255,255,0.4), transparent),
    /* Sky + frozen lake reflection */
    linear-gradient(180deg,
      #0a0e2a 0%,
      #0f1640 25%,
      #1a2555 45%,
      #3a6080 55%,
      #5a8aaa 62%,
      #8ab5cc 70%,
      #b0d4e0 80%,
      #c8e0ea 90%,
      #daeaf2 100%
    );
}

body.scene-5::after {
  background:
    /* Mountain range - left peak */
    linear-gradient(160deg, #0c1528 49%, transparent 50%) no-repeat 0% calc(100% - 140px) / 25% 100px,
    linear-gradient(200deg, transparent 49%, #0c1528 50%) no-repeat 15% calc(100% - 140px) / 20% 100px,
    /* Central peak (tallest) */
    linear-gradient(165deg, #0a1225 49%, transparent 50%) no-repeat 30% calc(100% - 180px) / 22% 140px,
    linear-gradient(195deg, transparent 49%, #0a1225 50%) no-repeat 42% calc(100% - 180px) / 22% 140px,
    /* Right peaks */
    linear-gradient(162deg, #0e1830 49%, transparent 50%) no-repeat 55% calc(100% - 150px) / 20% 110px,
    linear-gradient(198deg, transparent 49%, #0e1830 50%) no-repeat 67% calc(100% - 150px) / 20% 110px,
    linear-gradient(160deg, #101c35 49%, transparent 50%) no-repeat 78% calc(100% - 120px) / 18% 80px,
    linear-gradient(200deg, transparent 49%, #101c35 50%) no-repeat 88% calc(100% - 120px) / 18% 80px,
    /* Snow caps */
    radial-gradient(ellipse 12px 6px at 37% calc(100% - 180px), rgba(255,255,255,0.4), transparent),
    radial-gradient(ellipse 8px 4px at 12% calc(100% - 140px), rgba(255,255,255,0.3), transparent);
}

/* ════════════════════════════════════════
   Scene 6: Trans-Siberian Railway
   ════════════════════════════════════════ */
body.scene-6::before {
  background:
    /* Stars (sparse, dusk) */
    radial-gradient(1px 1px at 20% 10%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 50% 8%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 80% 15%, rgba(255,255,255,0.3), transparent),
    /* Dusk sky */
    linear-gradient(180deg,
      #1a0533 0%,
      #2d1654 20%,
      #4a2c6e 35%,
      #8b4a6e 50%,
      #c07040 65%,
      #e67e22 78%,
      #f39c12 88%,
      #d4a050 100%
    );
}

body.scene-6::after {
  background:
    /* Smoke puffs */
    radial-gradient(ellipse 18px 14px at 32% calc(100% - 115px), rgba(80,80,80,0.25), transparent),
    radial-gradient(ellipse 14px 10px at 28% calc(100% - 125px), rgba(100,100,100,0.2), transparent),
    /* Locomotive */
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 35% calc(100% - 85px) / 30px 20px,
    /* Chimney */
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 33% calc(100% - 100px) / 8px 15px,
    /* Train cars */
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 42% calc(100% - 85px) / 25px 16px,
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 50% calc(100% - 85px) / 25px 16px,
    linear-gradient(180deg, #0a0a0a, #0a0a0a) no-repeat 58% calc(100% - 85px) / 25px 16px,
    /* Wheels */
    radial-gradient(circle 3px at 37% calc(100% - 65px), #0a0a0a 70%, transparent 71%),
    radial-gradient(circle 3px at 44% calc(100% - 65px), #0a0a0a 70%, transparent 71%),
    radial-gradient(circle 3px at 52% calc(100% - 65px), #0a0a0a 70%, transparent 71%),
    radial-gradient(circle 3px at 60% calc(100% - 65px), #0a0a0a 70%, transparent 71%),
    /* Railway track */
    linear-gradient(180deg, #2a2020, #2a2020) no-repeat 0% calc(100% - 60px) / 100% 3px,
    /* Steppe horizon */
    linear-gradient(180deg, transparent 82%, #3a2a15 83%, #4a3520 88%, #5a4530 100%);
}

/* ════════════════════════════════════════
   Scene 7: Moscow Skyline
   ════════════════════════════════════════ */
body.scene-7::before {
  background:
    /* City glow */
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(100,80,150,0.2), transparent),
    /* Stars */
    radial-gradient(1px 1px at 15% 8%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 40% 12%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 70% 6%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 88% 15%, rgba(255,255,255,0.3), transparent),
    /* Twilight sky */
    linear-gradient(180deg,
      #0f0c29 0%,
      #1a1545 25%,
      #302b63 50%,
      #3d3578 70%,
      #24243e 100%
    );
}

body.scene-7::after {
  background:
    /* Tall tower (Moscow City) */
    linear-gradient(180deg, #0c0c1a, #0c0c1a) no-repeat 30% calc(100% - 160px) / 12px 130px,
    linear-gradient(180deg, #0c0c1a, #0c0c1a) no-repeat 34% calc(100% - 140px) / 12px 110px,
    /* Tower spire */
    linear-gradient(180deg, #0c0c1a, #0c0c1a) no-repeat calc(30% + 4px) calc(100% - 175px) / 4px 20px,
    /* Medium buildings */
    linear-gradient(180deg, #0e0e20, #0e0e20) no-repeat 45% calc(100% - 100px) / 20px 70px,
    linear-gradient(180deg, #0e0e20, #0e0e20) no-repeat 50% calc(100% - 90px) / 16px 60px,
    linear-gradient(180deg, #0e0e20, #0e0e20) no-repeat 55% calc(100% - 110px) / 14px 80px,
    /* Church dome */
    radial-gradient(ellipse 18px 22px at 65% calc(100% - 110px), #0c0c1a 69%, transparent 70%),
    linear-gradient(180deg, #0c0c1a, #0c0c1a) no-repeat calc(65% - 1px) calc(100% - 132px) / 3px 15px,
    /* Shorter buildings */
    linear-gradient(180deg, #101025, #101025) no-repeat 18% calc(100% - 70px) / 22px 40px,
    linear-gradient(180deg, #101025, #101025) no-repeat 75% calc(100% - 80px) / 18px 50px,
    linear-gradient(180deg, #101025, #101025) no-repeat 82% calc(100% - 65px) / 25px 35px,
    /* Building windows (dots of light) */
    radial-gradient(circle 1.5px at 31% calc(100% - 100px), rgba(255,220,100,0.6), transparent),
    radial-gradient(circle 1.5px at 46% calc(100% - 75px), rgba(255,220,100,0.5), transparent),
    radial-gradient(circle 1.5px at 56% calc(100% - 85px), rgba(255,220,100,0.4), transparent),
    radial-gradient(circle 1.5px at 76% calc(100% - 60px), rgba(255,220,100,0.5), transparent),
    /* Ground */
    linear-gradient(180deg, transparent 92%, #0c0c1a 93%);
}

/* ════════════════════════════════════════
   Scene 8: Russian Countryside
   ════════════════════════════════════════ */
body.scene-8::before {
  background:
    /* Wispy clouds */
    radial-gradient(ellipse 80px 15px at 25% 20%, rgba(255,255,255,0.15), transparent),
    radial-gradient(ellipse 60px 12px at 70% 15%, rgba(255,255,255,0.1), transparent),
    /* Pastoral sky */
    linear-gradient(180deg,
      #2a5fa0 0%,
      #4a90d9 20%,
      #6ab0e8 40%,
      #87ceeb 55%,
      #b0d8e8 70%,
      #d4c8a0 85%,
      #e8d5b7 100%
    );
}

body.scene-8::after {
  background:
    /* Distant church dome */
    radial-gradient(ellipse 12px 16px at 75% calc(100% - 120px), #2a3520 69%, transparent 70%),
    linear-gradient(180deg, #2a3520, #2a3520) no-repeat calc(75% - 1px) calc(100% - 136px) / 3px 12px,
    /* Cross on dome */
    linear-gradient(180deg, #2a3520, #2a3520) no-repeat calc(75% - 1px) calc(100% - 142px) / 2px 8px,
    linear-gradient(90deg, #2a3520, #2a3520) no-repeat calc(75% - 4px) calc(100% - 140px) / 8px 2px,
    /* Birch trees */
    linear-gradient(180deg, #e8e0d0, #d8d0c0) no-repeat 20% calc(100% - 100px) / 5px 65px,
    radial-gradient(ellipse 18px 30px at 20% calc(100% - 115px), rgba(60,100,40,0.7), transparent),
    linear-gradient(180deg, #e8e0d0, #d8d0c0) no-repeat 25% calc(100% - 90px) / 4px 55px,
    radial-gradient(ellipse 15px 25px at 25% calc(100% - 105px), rgba(70,110,50,0.6), transparent),
    linear-gradient(180deg, #e8e0d0, #d8d0c0) no-repeat 85% calc(100% - 95px) / 5px 60px,
    radial-gradient(ellipse 16px 28px at 85% calc(100% - 110px), rgba(65,105,45,0.6), transparent),
    /* Rolling hills */
    radial-gradient(ellipse 55% 60px at 30% 105%, #4a7a30 0%, transparent 70%),
    radial-gradient(ellipse 45% 50px at 70% 108%, #3d6828 0%, transparent 70%),
    radial-gradient(ellipse 50% 55px at 50% 106%, #558a38 0%, transparent 70%),
    /* Ground */
    linear-gradient(180deg, transparent 90%, #6a9a48 91%, #5a8a38 95%, #4a7a30 100%);
}

/* ════════════════════════════════════════
   Scene 9: Peterhof Palace - Golden Hour
   ════════════════════════════════════════ */
body.scene-9::before {
  background:
    /* Sun glow */
    radial-gradient(circle 60px at 50% 70%, rgba(255,200,50,0.3), transparent),
    /* Golden hour sky */
    linear-gradient(180deg,
      #2c3e50 0%,
      #4a3040 15%,
      #7a3a30 30%,
      #b85a30 45%,
      #d35400 55%,
      #e67e22 65%,
      #f39c12 78%,
      #f5c842 90%,
      #fad770 100%
    );
}

body.scene-9::after {
  background:
    /* Palace central dome */
    radial-gradient(ellipse 25px 20px at 50% calc(100% - 130px), #1a1008 69%, transparent 70%),
    linear-gradient(180deg, #1a1008, #1a1008) no-repeat 50% calc(100% - 150px) / 3px 15px,
    /* Palace body (symmetric) */
    linear-gradient(180deg, #1a1008, #1a1008) no-repeat 50% 100% / 50% 65px,
    /* Palace wings */
    linear-gradient(180deg, #1a1008, #1a1008) no-repeat 20% 100% / 12% 50px,
    linear-gradient(180deg, #1a1008, #1a1008) no-repeat 80% 100% / 12% 50px,
    /* Fountain base */
    linear-gradient(180deg, #1a1008, #1a1008) no-repeat 50% calc(100% - 25px) / 20px 10px,
    /* Fountain jets (white) */
    linear-gradient(180deg, rgba(255,255,255,0.4), transparent) no-repeat 50% calc(100% - 70px) / 2px 40px,
    linear-gradient(180deg, rgba(255,255,255,0.3), transparent) no-repeat calc(50% - 8px) calc(100% - 55px) / 2px 28px,
    linear-gradient(180deg, rgba(255,255,255,0.3), transparent) no-repeat calc(50% + 8px) calc(100% - 55px) / 2px 28px,
    /* Fountain spray */
    radial-gradient(ellipse 15px 8px at 50% calc(100% - 70px), rgba(255,255,255,0.2), transparent);
}

/* ════════════════════════════════════════
   Scene 10: Northern Lights Over Mountains
   ════════════════════════════════════════ */
body.scene-10::before {
  background:
    /* Aurora bands - full display */
    radial-gradient(ellipse 60% 18% at 25% 20%, rgba(46,204,113,0.25), transparent),
    radial-gradient(ellipse 50% 12% at 55% 15%, rgba(26,188,156,0.2), transparent),
    radial-gradient(ellipse 45% 15% at 40% 30%, rgba(142,68,173,0.18), transparent),
    radial-gradient(ellipse 55% 10% at 70% 22%, rgba(46,204,113,0.2), transparent),
    radial-gradient(ellipse 40% 12% at 20% 35%, rgba(231,76,160,0.1), transparent),
    radial-gradient(ellipse 50% 8% at 80% 18%, rgba(52,152,219,0.15), transparent),
    /* Stars */
    radial-gradient(1.5px 1.5px at 10% 8%, #fff, transparent),
    radial-gradient(1px 1px at 30% 5%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 70% 4%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90% 12%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 85% 8%, rgba(255,255,255,0.6), transparent),
    /* Dark sky base */
    linear-gradient(180deg,
      #050510 0%,
      #0a0f20 30%,
      #0f1a30 50%,
      #152540 70%,
      #1a2a45 100%
    );
}

body.scene-10::after {
  background:
    /* Mountain range - jagged peaks */
    linear-gradient(155deg, #0a1020 49%, transparent 50%) no-repeat 0% calc(100% - 130px) / 15% 100px,
    linear-gradient(205deg, transparent 49%, #0a1020 50%) no-repeat 8% calc(100% - 130px) / 12% 100px,
    linear-gradient(160deg, #0c1425 49%, transparent 50%) no-repeat 14% calc(100% - 160px) / 18% 130px,
    linear-gradient(200deg, transparent 49%, #0c1425 50%) no-repeat 24% calc(100% - 160px) / 16% 130px,
    linear-gradient(158deg, #0a1020 49%, transparent 50%) no-repeat 32% calc(100% - 140px) / 14% 110px,
    linear-gradient(202deg, transparent 49%, #0a1020 50%) no-repeat 40% calc(100% - 140px) / 14% 110px,
    linear-gradient(163deg, #0e1830 49%, transparent 50%) no-repeat 48% calc(100% - 170px) / 20% 140px,
    linear-gradient(197deg, transparent 49%, #0e1830 50%) no-repeat 60% calc(100% - 170px) / 18% 140px,
    linear-gradient(160deg, #0c1425 49%, transparent 50%) no-repeat 70% calc(100% - 145px) / 16% 115px,
    linear-gradient(200deg, transparent 49%, #0c1425 50%) no-repeat 80% calc(100% - 145px) / 14% 115px,
    linear-gradient(155deg, #0a1020 49%, transparent 50%) no-repeat 88% calc(100% - 120px) / 15% 90px,
    /* Snow caps */
    radial-gradient(ellipse 10px 5px at 22% calc(100% - 160px), rgba(255,255,255,0.35), transparent),
    radial-gradient(ellipse 14px 6px at 56% calc(100% - 170px), rgba(255,255,255,0.4), transparent),
    radial-gradient(ellipse 10px 5px at 76% calc(100% - 145px), rgba(255,255,255,0.3), transparent),
    /* Snow ground */
    linear-gradient(180deg, transparent 90%, rgba(200,215,230,0.4) 92%, rgba(220,230,240,0.6) 100%);
}