// Rôle : génère le fond nebula et le champ d'étoiles global.
@use "sass:list";

$bright-stars:
  (12% 19% rgba(255, 255, 255, 0.98) 1.4px rgba(255, 255, 255, 0.2) 3.8px 6px),
  (38% 27% rgba(246, 196, 83, 0.94) 1.5px rgba(246, 196, 83, 0.18) 4px 7px),
  (73% 17% rgba(255, 255, 255, 0.96) 1.5px rgba(167, 139, 250, 0.2) 4.5px 7px),
  (87% 61% rgba(255, 255, 255, 0.96) 1.4px rgba(255, 255, 255, 0.18) 4px 6.5px),
  (52% 71% rgba(246, 196, 83, 0.9) 1.3px rgba(246, 196, 83, 0.16) 3.8px 6.5px),
  (29% 62% rgba(255, 255, 255, 1) 1.6px rgba(255, 255, 255, 0.18) 4.8px 8px),
  (68% 52% rgba(246, 196, 83, 0.98) 1.6px rgba(246, 196, 83, 0.18) 4.8px 8px),
  (92% 19% rgba(255, 255, 255, 1) 1.5px rgba(167, 139, 250, 0.18) 4.6px 7.5px);

$stars:
  (7% 12% rgba(255, 255, 255, 0.95) 1.1px 1.8px),
  (14% 68% rgba(167, 139, 250, 0.72) 1.2px 2px),
  (19% 34% rgba(255, 255, 255, 0.72) 0.9px 1.5px),
  (24% 86% rgba(246, 196, 83, 0.68) 1.2px 2.1px),
  (31% 18% rgba(255, 255, 255, 0.82) 1px 1.7px),
  (37% 57% rgba(255, 255, 255, 0.6) 0.9px 1.5px),
  (43% 9% rgba(246, 196, 83, 0.62) 1.2px 2px),
  (48% 77% rgba(167, 139, 250, 0.66) 1px 1.8px),
  (54% 29% rgba(255, 255, 255, 0.92) 1.1px 1.8px),
  (61% 63% rgba(255, 255, 255, 0.62) 0.9px 1.5px),
  (66% 14% rgba(167, 139, 250, 0.74) 1.2px 2px),
  (71% 84% rgba(255, 255, 255, 0.76) 1px 1.7px),
  (76% 42% rgba(246, 196, 83, 0.76) 1.2px 2.1px),
  (83% 23% rgba(255, 255, 255, 0.68) 0.9px 1.5px),
  (89% 72% rgba(167, 139, 250, 0.62) 1px 1.8px),
  (94% 48% rgba(255, 255, 255, 0.86) 1.1px 1.8px),
  (11% 45% rgba(255, 255, 255, 0.5) 0.8px 1.4px),
  (28% 51% rgba(246, 196, 83, 0.56) 0.9px 1.6px),
  (58% 92% rgba(255, 255, 255, 0.58) 0.8px 1.4px),
  (97% 8% rgba(255, 255, 255, 0.78) 1px 1.7px),
  (4% 78% rgba(255, 255, 255, 0.55) 0.8px 1.4px),
  (17% 5% rgba(246, 196, 83, 0.5) 0.9px 1.6px),
  (22% 23% rgba(255, 255, 255, 0.46) 0.7px 1.3px),
  (33% 72% rgba(167, 139, 250, 0.5) 0.9px 1.6px),
  (41% 39% rgba(255, 255, 255, 0.54) 0.8px 1.4px),
  (52% 54% rgba(246, 196, 83, 0.44) 0.8px 1.5px),
  (63% 36% rgba(255, 255, 255, 0.48) 0.7px 1.3px),
  (69% 96% rgba(255, 255, 255, 0.5) 0.8px 1.4px),
  (81% 6% rgba(246, 196, 83, 0.52) 0.9px 1.6px),
  (91% 89% rgba(255, 255, 255, 0.56) 0.8px 1.4px),
  (3% 31% rgba(167, 139, 250, 0.42) 0.7px 1.3px),
  (45% 96% rgba(246, 196, 83, 0.42) 0.8px 1.5px),
  (74% 59% rgba(255, 255, 255, 0.46) 0.7px 1.3px),
  (86% 37% rgba(255, 255, 255, 0.5) 0.8px 1.4px),
  (99% 66% rgba(167, 139, 250, 0.46) 0.8px 1.5px),
  (6% 92% rgba(255, 255, 255, 0.42) 0.7px 1.2px),
  (13% 27% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
  (21% 74% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
  (26% 11% rgba(167, 139, 250, 0.36) 0.7px 1.2px),
  (32% 44% rgba(255, 255, 255, 0.38) 0.6px 1.1px),
  (39% 88% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
  (46% 16% rgba(255, 255, 255, 0.4) 0.7px 1.2px),
  (57% 41% rgba(167, 139, 250, 0.36) 0.7px 1.2px),
  (64% 79% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
  (72% 31% rgba(255, 255, 255, 0.36) 0.6px 1.1px),
  (79% 93% rgba(255, 255, 255, 0.4) 0.7px 1.2px),
  (88% 12% rgba(246, 196, 83, 0.36) 0.7px 1.2px),
  (93% 78% rgba(255, 255, 255, 0.38) 0.6px 1.1px),
  (98% 28% rgba(167, 139, 250, 0.34) 0.7px 1.2px),
  (2% 7% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
  (8% 56% rgba(246, 196, 83, 0.32) 0.6px 1.1px),
  (15% 82% rgba(255, 255, 255, 0.38) 0.7px 1.2px),
  (18% 91% rgba(167, 139, 250, 0.32) 0.6px 1.1px),
  (23% 39% rgba(255, 255, 255, 0.3) 0.5px 1px),
  (27% 67% rgba(255, 255, 255, 0.36) 0.6px 1.1px),
  (34% 6% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
  (36% 81% rgba(255, 255, 255, 0.32) 0.6px 1.1px),
  (42% 66% rgba(167, 139, 250, 0.34) 0.7px 1.2px),
  (49% 4% rgba(255, 255, 255, 0.36) 0.6px 1.1px),
  (51% 24% rgba(246, 196, 83, 0.3) 0.6px 1.1px),
  (56% 83% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
  (62% 7% rgba(255, 255, 255, 0.3) 0.5px 1px),
  (67% 68% rgba(167, 139, 250, 0.32) 0.6px 1.1px),
  (70% 25% rgba(246, 196, 83, 0.32) 0.6px 1.1px),
  (78% 11% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
  (82% 82% rgba(255, 255, 255, 0.38) 0.7px 1.2px),
  (86% 51% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
  (90% 33% rgba(255, 255, 255, 0.32) 0.6px 1.1px),
  (96% 94% rgba(167, 139, 250, 0.32) 0.6px 1.1px);

@function star-gradient($star) {
  @return radial-gradient(circle at #{list.nth($star, 1)} #{list.nth($star, 2)}, #{list.nth($star, 3)} 0 #{list.nth($star, 4)}, transparent #{list.nth($star, 5)});
}

@function bright-star-gradient($star) {
  @return radial-gradient(circle at #{list.nth($star, 1)} #{list.nth($star, 2)}, #{list.nth($star, 3)} 0 #{list.nth($star, 4)}, #{list.nth($star, 5)} calc(#{list.nth($star, 4)} + 0.3px) #{list.nth($star, 6)}, transparent #{list.nth($star, 7)});
}

@function star-field($bright, $normal) {
  $gradients: ();

  @each $star in $bright {
    $gradients: list.append($gradients, bright-star-gradient($star), comma);
  }

  @each $star in $normal {
    $gradients: list.append($gradients, star-gradient($star), comma);
  }

  @return $gradients;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.88;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(124, 58, 237, 0.3), transparent 34%),
    radial-gradient(ellipse at 82% 10%, rgba(59, 130, 246, 0.18), transparent 30%),
    radial-gradient(ellipse at 78% 72%, rgba(217, 70, 239, 0.18), transparent 36%),
    radial-gradient(ellipse at 36% 92%, rgba(246, 196, 83, 0.1), transparent 34%),
    linear-gradient(118deg, transparent 0 22%, rgba(139, 92, 246, 0.1) 36%, transparent 55%),
    linear-gradient(62deg, transparent 0 32%, rgba(246, 196, 83, 0.06) 48%, transparent 68%);
  filter: saturate(1.18);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.82;
  background-image: star-field($bright-stars, $stars);
  background-size: 100% 100%;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.36));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.36));
}