/* 072 — Starfield Drift
   Champ d'étoiles CSS pur : 3 couches de box-shadow multiples qui dérivent
   vers le haut à des vitesses différentes (parallax de profondeur) + un
   scintillement d'opacité désynchronisé. Le motif fait 800×600 px et boucle
   sans couture grâce au ::after décalé d'une hauteur de motif. */

.starfield-drift {
  /* Étoiles lointaines — petites, ténues, lentes */
  --starfield-drift-far:
    12px 340px rgba(232, 234, 242, 0.45), 47px 78px rgba(232, 234, 242, 0.4),
    89px 512px rgba(232, 234, 242, 0.45), 121px 190px rgba(232, 234, 242, 0.35),
    160px 430px rgba(232, 234, 242, 0.45), 198px 66px rgba(232, 234, 242, 0.4),
    236px 300px rgba(232, 234, 242, 0.35), 274px 540px rgba(232, 234, 242, 0.45),
    310px 150px rgba(232, 234, 242, 0.4), 349px 470px rgba(232, 234, 242, 0.35),
    388px 24px rgba(232, 234, 242, 0.45), 420px 350px rgba(232, 234, 242, 0.4),
    458px 210px rgba(232, 234, 242, 0.35), 497px 560px rgba(232, 234, 242, 0.45),
    531px 100px rgba(232, 234, 242, 0.4), 566px 390px rgba(232, 234, 242, 0.35),
    604px 260px rgba(232, 234, 242, 0.45), 641px 44px rgba(232, 234, 242, 0.4),
    678px 500px rgba(232, 234, 242, 0.35), 714px 170px rgba(232, 234, 242, 0.45),
    752px 330px rgba(232, 234, 242, 0.4), 789px 585px rgba(232, 234, 242, 0.35),
    30px 250px rgba(232, 234, 242, 0.4), 70px 590px rgba(232, 234, 242, 0.35),
    110px 20px rgba(232, 234, 242, 0.45), 150px 320px rgba(232, 234, 242, 0.4),
    260px 110px rgba(232, 234, 242, 0.35), 330px 380px rgba(232, 234, 242, 0.45),
    370px 240px rgba(232, 234, 242, 0.4), 440px 90px rgba(232, 234, 242, 0.35),
    520px 450px rgba(232, 234, 242, 0.45), 590px 530px rgba(232, 234, 242, 0.4),
    650px 140px rgba(232, 234, 242, 0.35), 720px 410px rgba(232, 234, 242, 0.45),
    770px 60px rgba(232, 234, 242, 0.4), 250px 480px rgba(232, 234, 242, 0.35);
  /* Étoiles intermédiaires */
  --starfield-drift-mid:
    25px 120px rgba(232, 234, 242, 0.75), 65px 400px rgba(232, 234, 242, 0.65),
    105px 250px rgba(232, 234, 242, 0.75), 145px 560px rgba(232, 234, 242, 0.65),
    185px 90px rgba(232, 234, 242, 0.7), 225px 330px rgba(232, 234, 242, 0.75),
    265px 200px rgba(232, 234, 242, 0.65), 305px 520px rgba(232, 234, 242, 0.75),
    345px 60px rgba(232, 234, 242, 0.7), 385px 300px rgba(232, 234, 242, 0.65),
    425px 440px rgba(232, 234, 242, 0.75), 465px 160px rgba(232, 234, 242, 0.7),
    505px 380px rgba(232, 234, 242, 0.65), 545px 240px rgba(232, 234, 242, 0.75),
    585px 570px rgba(232, 234, 242, 0.65), 625px 110px rgba(232, 234, 242, 0.75),
    665px 350px rgba(232, 234, 242, 0.7), 705px 480px rgba(232, 234, 242, 0.65),
    745px 30px rgba(232, 234, 242, 0.75), 785px 210px rgba(232, 234, 242, 0.7),
    90px 470px rgba(232, 234, 242, 0.65), 300px 10px rgba(232, 234, 242, 0.75),
    480px 545px rgba(232, 234, 242, 0.7), 690px 585px rgba(232, 234, 242, 0.65);
  /* Étoiles proches — brillantes, halo coloré */
  --starfield-drift-near:
    55px 180px rgba(255, 255, 255, 0.95), 55px 180px 8px rgba(124, 140, 255, 0.55),
    140px 350px rgba(255, 255, 255, 0.9), 140px 350px 8px rgba(45, 212, 191, 0.5),
    230px 80px rgba(255, 255, 255, 0.95), 230px 80px 8px rgba(124, 140, 255, 0.5),
    320px 430px rgba(255, 255, 255, 0.9), 320px 430px 8px rgba(124, 140, 255, 0.55),
    410px 190px rgba(255, 255, 255, 0.95), 410px 190px 8px rgba(45, 212, 191, 0.5),
    500px 320px rgba(255, 255, 255, 0.9), 500px 320px 8px rgba(124, 140, 255, 0.5),
    580px 60px rgba(255, 255, 255, 0.95), 580px 60px 8px rgba(45, 212, 191, 0.55),
    660px 440px rgba(255, 255, 255, 0.9), 660px 440px 8px rgba(124, 140, 255, 0.5),
    740px 260px rgba(255, 255, 255, 0.95), 740px 260px 8px rgba(45, 212, 191, 0.5),
    350px 560px rgba(255, 255, 255, 0.9), 350px 560px 8px rgba(124, 140, 255, 0.55);

  position: relative;
  width: 100%;
  min-height: 240px;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(120% 100% at 50% 0%, #131a2b 0%, var(--ml-bg, #0d1017) 62%);
  isolation: isolate;
}

/* Une couche = un point de 1–2 px dupliqué par box-shadow.
   Le ::after répète le motif 600 px plus bas → boucle sans couture. */
.starfield-drift__layer {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  border-radius: 50%;
  will-change: transform;
}

.starfield-drift__layer::after {
  content: "";
  position: absolute;
  top: 600px;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: inherit;
}

.starfield-drift__layer--far {
  width: 1px;
  height: 1px;
  box-shadow: var(--starfield-drift-far);
  animation:
    starfield-drift-fall 120s linear infinite,
    starfield-drift-twinkle 5s ease-in-out infinite alternate;
}

.starfield-drift__layer--mid {
  width: 1.6px;
  height: 1.6px;
  box-shadow: var(--starfield-drift-mid);
  animation:
    starfield-drift-fall 75s linear infinite,
    starfield-drift-twinkle 4s ease-in-out -1.5s infinite alternate;
}

.starfield-drift__layer--near {
  width: 2.2px;
  height: 2.2px;
  box-shadow: var(--starfield-drift-near);
  animation:
    starfield-drift-fall 45s linear infinite,
    starfield-drift-twinkle 3s ease-in-out -2.2s infinite alternate;
}

/* Étoiles vedettes — pulsation individuelle */
.starfield-drift__spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 10px 2px var(--starfield-drift-spark, rgba(124, 140, 255, 0.65));
  animation: starfield-drift-pulse 2.8s ease-in-out infinite alternate;
}

.starfield-drift__spark--1 {
  top: 30%;
  left: 22%;
}

.starfield-drift__spark--2 {
  top: 62%;
  left: 72%;
  --starfield-drift-spark: rgba(45, 212, 191, 0.65);
  animation-delay: -1.4s;
}

/* Contenu par-dessus le champ (mini-hero) */
.starfield-drift__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  gap: 4px;
  padding: 24px;
  text-align: center;
}

.starfield-drift__eyebrow {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ml-accent, #7c8cff);
}

.starfield-drift__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ml-fg, #e8eaf2);
  text-shadow: 0 2px 20px rgba(4, 7, 16, 0.7);
}

.starfield-drift__sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ml-muted, #8b91a3);
}

@keyframes starfield-drift-fall {
  to {
    transform: translate3d(0, -600px, 0);
  }
}

@keyframes starfield-drift-twinkle {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

@keyframes starfield-drift-pulse {
  from {
    opacity: 0.5;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .starfield-drift__layer,
  .starfield-drift__spark {
    animation: none;
  }
}