/* Intro « écran noir » avant la connexion (ui/intro.js) : calque plein écran, icône 768 px, étoile, reflet, halo.
   Les valeurs animées (opacités, échelle, flou, rotations) sont posées à chaque image par la boucle du module. */
.cb-intro {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden;
  background: #000; opacity: 0; isolation: isolate; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* Pendant le fondu de sortie, la connexion est déjà dessous : clics et saisie passent au travers. */
.cb-intro.is-leaving { pointer-events: none; cursor: auto; }

.cb-intro__mark { position: relative; width: min(52vmin, 440px); aspect-ratio: 1; will-change: transform, opacity; }
.cb-intro__img, .cb-intro__star { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cb-intro__img { user-select: none; -webkit-user-drag: none; }
.cb-intro__star { overflow: visible; }
/* Les triangles suivent la boucle de l'intro, pas l'animation continue du lockup (brand.css). */
.cb-intro .cb-star__tri { animation: none; }

/* Très léger halo bleu du noyau, au passage du reflet. */
.cb-intro__halo {
  position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 140, 255, 0.8) 0%, rgba(40, 110, 255, 0.3) 40%, transparent 70%);
  mix-blend-mode: screen; opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cb-intro { display: none; }
}