/* =========================================================
   home3d.css — additions propres à index-3d-eye.html
   (rendu three.js de l'œil + panneaux latéraux décoratifs)

   Chargé en plus de assets/style.css, uniquement sur cette page.
   Tout ce qui est commun aux deux versions de l'accueil (menu
   radial, HUD/réticule, anneau) vit dans assets/style.css.
   ========================================================= */

/* masqué par défaut : l'œil CSS/JS ne doit apparaître que si le rendu 3D
   échoue vraiment (cf. watchdog JS) — sinon on voit un "flash" de cette
   version au chargement, le temps que three.js arrive depuis le CDN. */
#eyeAscii, #eyeAsciiMobile { display: none; }

/* indicateur neutre pendant le chargement du rendu 3D — évite un trou
   visuel pendant que le CSS ascii reste caché et que three.js arrive */
.eye-loading {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  animation: blink 1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .eye-loading { animation: none; opacity: 0.5; }
}

/* --- rendu three.js -> ASCII (remplace l'œil CSS si le chargement réussit) --- */
.eye-holder-3d {
  display: none;
  align-items: center;
  justify-content: center;
  width: min(40vmin, 300px);  /* réduit — laisse plus d'air au menu radial */
  height: min(40vmin, 300px);
  background: transparent;
}
/* AsciiEffect repeint des styles inline sur ses cellules à chaque frame —
   on force la transparence en !important pour ne jamais voir de fond noir,
   quelle que soit la structure DOM interne (table/td ou div/span). */
.eye-holder-3d, .eye-holder-3d * {
  background: transparent !important;
  background-color: transparent !important;
}
.eye-holder-3d table {
  color: var(--category-color) !important;
  text-shadow: 0 0 8px var(--category-color);
  margin: 0 auto;
}
/* conteneur mobile : centré au-dessus de la liste plutôt qu'en position absolue */
.linear-menu .eye-holder-3d {
  position: static;
  align-self: center;
  margin: 0 auto 1.2rem;
  width: min(30vmin, 140px);
  height: min(30vmin, 140px);
}

/* =========================================================
   mise en page accueil + panneaux latéraux (télémétrie décorative)
   ========================================================= */

.home-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  width: 100%;
}

.center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.side-rail {
  display: none; /* masqué par défaut — évite de charger l'écran sur les viewports étroits */
  flex-direction: column;
  gap: 1.7rem;
  width: 150px;
  flex-shrink: 0;
}

@media (min-width: 1100px) {
  .side-rail { display: flex; }
}

.rail-label {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  opacity: 0.75;
  margin-bottom: 0.45em;
}

.rail-line {
  font-size: 0.72rem;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
  line-height: 1.55;
}

.rail-wave, .rail-bars {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--fg-dim);
  letter-spacing: 0.08em;
  white-space: pre;
}

.rail-log {
  font-size: 0.66rem;
  color: var(--fg-dim);
  line-height: 1.75;
  min-height: 4.9em;
}

.rail-log div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-log .line-new {
  color: var(--category-color);
  transition: color 1.6s ease;
}

/* sous 640px : le radial-wrap est déjà masqué par assets/style.css —
   le home-grid (qui l'englobe) n'a pas besoin d'un layout flex ici */
@media (max-width: 640px) {
  .home-grid { display: block; }
}