/* Apply this class to #parallax-bg */
.template-winter {
    position: fixed;
    inset: 0;
  
    /* Layers: top → bottom */
    background-image:
      /* ❄ snowflakes (3 densities) */
      radial-gradient(circle at 12% 18%, rgba(255,255,255,0.6) 1px, transparent 1.2px),
      radial-gradient(circle at 72% 78%, rgba(255,255,255,0.45) 1.5px, transparent 1.7px),
      radial-gradient(circle at 30% 62%, rgba(255,255,255,0.5) 1.2px, transparent 1.4px),
  
      /* ⛄ snowman (very subtle) */
      radial-gradient(circle at 80% 77%, rgba(245,248,252,0.95) 26px, transparent 27px),
      radial-gradient(circle at 80% 84%, rgba(245,248,252,1) 38px, transparent 39px),
  
      /* ⛰ mountains */
      radial-gradient(ellipse at 18% 120%, #e6edf3 22%, transparent 72%),
      radial-gradient(ellipse at 82% 125%, #dde7ef 27%, transparent 77%),
  
      /* base snowy field */
      linear-gradient(to bottom, #ffffff 55%, #f3f7fb 100%);
  
    background-size:
      320px 320px,
      440px 440px,
      280px 280px,
      100% 100%,
      100% 100%,
      120% 70%,
      120% 72%,
      100% 100%;
  
    background-position:
      0 0,
      200px 110px,
      -120px 210px,
      right 0 bottom 0,
      right 0 bottom 0,
      left 0 bottom -5%,
      right 0 bottom -6%,
      center;
  
    background-repeat:
      repeat,
      repeat,
      repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat;
  
    /* Avoid extra bleaching */
    /* background-blend-mode: overlay;  <-- removed */
  
    /* Gentle drift for flakes */
    animation: snowDrift 60s linear infinite;
  }
  
  @keyframes snowDrift {
    0% {
      background-position:
        0 0,
        200px 110px,
        -120px 210px,
        right 0 bottom 0,
        right 0 bottom 0,
        left 0 bottom -5%,
        right 0 bottom -6%,
        center;
    }
    100% {
      background-position:
        900px 420px,
        -700px 520px,
        500px 320px,
        right 0 bottom 0,
        right 0 bottom 0,
        left 0 bottom -5%,
        right 0 bottom -6%,
        center;
    }
  }


  #parallax-bg.template-stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  
    /* Layers: soft stars, moon glow, and light night gradient */
    background-image:
      /* 🌟 small twinkling stars (very subtle) */
      radial-gradient(circle at 12% 22%, rgba(255,255,255,0.5) 0.8px, transparent 1px),
      radial-gradient(circle at 68% 40%, rgba(255,255,255,0.4) 1px, transparent 1.2px),
      radial-gradient(circle at 30% 70%, rgba(255,255,255,0.45) 1px, transparent 1.3px),
  
      /* 🌙 gentle moon glow and disc */
      radial-gradient(circle at 80% 20%, rgba(255,255,240,0.25), transparent 60%),
      radial-gradient(circle at 80% 20%, rgba(255,255,255,0.8) 22px, transparent 23px),
  
      /* 🌌 light twilight gradient */
      linear-gradient(180deg, #1b2940 0%, #283f60 40%, #3d597b 80%, #7ea2c8 100%);
  
    /* Balanced scales */
    background-size:
      220px 220px,
      360px 360px,
      500px 500px,
      100% 100%,
      auto,
      cover;
  
    background-repeat:
      repeat,
      repeat,
      repeat,
      no-repeat,
      no-repeat,
      no-repeat;
  
    background-position:
      0 0,
      100px 150px,
      -150px 200px,
      center,
      center,
      center;
  
    /* Add a light haze */
    background-color: rgba(255, 255, 255, 0.05);
  
    /* Gentle, slow movement */
    animation: starsDrift 120s linear infinite;
    opacity: 0.95; /* make the entire layer feel airy */
  }
  
  /* Soft horizontal drift for realism */
  @keyframes starsDrift {
    0% {
      background-position:
        0 0,
        100px 150px,
        -150px 200px,
        center,
        center,
        center;
    }
    100% {
      background-position:
        600px 200px,
        -400px 250px,
        300px 150px,
        center,
        center,
        center;
    }
  }
  
  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    #parallax-bg.template-stars { animation: none; }
  }