/* Héros « Constellation » (aurore-v2/heros-3) : réseau d'étoiles et de nœuds CDN, joueurs qui convergent
   vers le launcher. La lumière au survol : lumiere.css. Le launcher lui-même : launcher.css. */

/* ---------- Titre : deux lignes, point recollé ---------- */
.title .l1, .title .l2 { display: block; white-space: nowrap; }
.title .pt { margin-left: -.07em; }
.title .w { display: inline-block; }
@media (max-width: 560px) {
  .hero h1 { font-size: calc((100vw - 34px) / 9.9); letter-spacing: -.05em; line-height: 1.02; }
}

@media (max-width: 380px) { .hero .pill { font-size: 11px; gap: 8px; padding-right: 12px; } }

/* ---------- Réseau d'étoiles (canvas) ---------- */
.hero-ciel .sky { background-image:
    linear-gradient(to right, color-mix(in srgb, var(--tint) 3%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--tint) 3%, transparent) 1px, transparent 1px);
  background-size: 88px 88px; background-position: center top; }
.net { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* Aurore de fond et bordures éclairées au survol : lumiere.css / lumiere.js (« Lumière ambiante ») */

/* Boucles CSS (halo, pastille, barre du launcher) figées quand le héros est hors écran */
.hero-ciel.is-off *, .hero-ciel.is-off *::before, .hero-ciel.is-off *::after { animation-play-state: paused !important; }

/* ---------- Arrivée ---------- */
@keyframes ciel-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes ciel-op { from { opacity: 0; } }
.js .hero-ciel .pill { animation: ciel-up .8s var(--ease) .15s both; }
.js .hero-ciel .title .l1 { animation: ciel-up .9s var(--ease) .3s both; }
.js .hero-ciel .title .l2 { animation: ciel-up .9s var(--ease) .42s both; }
.js .hero-ciel .lead { animation: ciel-up .9s var(--ease) .6s both; }
.js .hero-ciel .signup { animation: ciel-up .9s var(--ease) .72s both; }
.js .hero-ciel .horizon { animation: ciel-op 1.8s var(--ease) .4s both; }
.js .hero-ciel .glow-follow { animation: ciel-op 2.4s var(--ease) .2s both; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-ciel .pill, .js .hero-ciel .title .l1, .js .hero-ciel .title .l2, .js .hero-ciel .lead,
  .js .hero-ciel .signup, .js .hero-ciel .horizon, .js .hero-ciel .glow-follow { animation: none !important; }
}

/* Écrans de bureau peu hauts (1280 × 800…) : la fenêtre, plus petite, remonte un peu pour que son haut reste bien
   visible sous le formulaire au chargement (elle reste posée sous le sommet de la planète, à 34 px) */
@media (min-width: 761px) and (max-height: 860px) { .hero-ciel .stage-zone { padding-top: 52px; } }