/* =============================================================
   galaxy.css — Galassia di Sirus  (Fase 3)
   ============================================================= */

/* ── Canvas Three.js ──────────────────────────────────────── */
#galaxy-canvas {
  position:   fixed;
  inset:      0;
  width:      100vw;
  height:     100vh;
  z-index:    2;           /* sopra living-bg (z:0) e vignette (z:1) */
  display:    block;
  cursor:     grab;
}
#galaxy-canvas:active { cursor: grabbing; }

/* ── Labels pianeti (HTML sopra Three.js) ──────────────────── */
#galaxy-labels {
  position:   fixed;
  inset:      0;
  pointer-events: none;
  z-index:    3;
}

.planet-label {
  position:        absolute;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             2px;
  text-align:      center;
  pointer-events:  none;
  transition:      opacity 0.35s ease;
  filter:          drop-shadow(0 0 6px rgba(0,0,0,0.9));
}

.lbl-name {
  font-family:  var(--display);
  font-size:    12px;
  font-weight:  600;
  letter-spacing: 0.06em;
  text-shadow:  0 0 10px currentColor;
  white-space:  nowrap;
}

.lbl-sub {
  font-family:  var(--serif);
  font-size:    10px;
  color:        rgba(230, 200, 140, 0.72);
  white-space:  nowrap;
}

.planet-label.founder .lbl-name {
  font-size:    13px;
  letter-spacing: 0.1em;
}

/* ── Galaxy UI overlay ────────────────────────────────────── */
#galaxy-ui {
  position:   fixed;
  inset:      0;
  z-index:    4;
  display:    flex;
  flex-direction: column;
  align-items:    center;
  justify-content: space-between;
  padding:    clamp(2rem, 5vh, 4rem) var(--gutter);
  pointer-events: none;
}

/* Titolo — terzo superiore */
.galaxy-title-block {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.75rem;
  pointer-events: none;
  animation:      galaxyFadeUp 1.8s var(--ease) forwards;
  opacity:        0;
}

.galaxy-seal-small {
  opacity: 0.85;
  filter: drop-shadow(0 0 12px rgba(201, 164, 90, 0.5));
}

.galaxy-eyebrow {
  font-family:    var(--serif);
  font-size:      clamp(12px, 1.4vw, 15px);
  color:          var(--parchment-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity:        0.75;
  margin:         0;
}

.galaxy-title {
  font-family:    var(--black-letter);
  font-size:      clamp(2.4rem, 6vw, 5rem);
  color:          var(--gold-bright);
  text-align:     center;
  line-height:    1.1;
  margin:         0;
  text-shadow:
    0 0 40px rgba(201, 164, 90, 0.6),
    0 0 80px rgba(201, 164, 90, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Zona centrale — libera per vedere la stella */
.galaxy-center {
  flex: 1;
  pointer-events: none;
}

/* Zona inferiore — invito + pulsante */
.galaxy-bottom {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1.2rem;
  animation:      galaxyFadeUp 2.4s var(--ease) forwards;
  opacity:        0;
  animation-delay: 0.6s;
}

.galaxy-quote {
  font-family:  var(--serif);
  font-style:   italic;
  font-size:    clamp(13px, 1.5vw, 16px);
  color:        rgba(230, 200, 140, 0.6);
  text-align:   center;
  max-width:    52ch;
  line-height:  1.7;
  margin:       0;
  pointer-events: none;
}

#galaxy-enter {
  pointer-events: all;
  font-family:    var(--display);
  font-size:      clamp(13px, 1.5vw, 16px);
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--ink-deep);
  background:     linear-gradient(135deg, var(--gold-bright), var(--amber));
  border:         none;
  padding:        0.75em 2.2em;
  border-radius:  2px;
  cursor:         pointer;
  box-shadow:
    0 0 24px rgba(201, 164, 90, 0.45),
    0 0  8px rgba(201, 164, 90, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background 0.25s var(--ease);
}

#galaxy-enter:hover {
  transform:  translateY(-2px) scale(1.03);
  box-shadow:
    0 0 40px rgba(201, 164, 90, 0.65),
    0 0 16px rgba(201, 164, 90, 0.40),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

#galaxy-enter:active {
  transform: translateY(0) scale(0.98);
}

.galaxy-hint {
  font-family: var(--serif);
  font-size:   11px;
  color:       rgba(201, 164, 90, 0.35);
  letter-spacing: 0.12em;
  pointer-events: none;
}

/* ── Transizione uscita galassia ──────────────────────────── */
.galaxy-fade-out {
  animation: galaxyFadeOut 1.2s var(--ease) forwards !important;
}

@keyframes galaxyFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes galaxyFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Nasconde galassia quando libro è attivo ──────────────── */
body.book-mode #galaxy-canvas,
body.book-mode #galaxy-labels,
body.book-mode #galaxy-ui {
  display: none;
}

/* ── Pulsante "Galassia" nel menu laterale ────────────────── */
.menu-galaxy-btn {
  display:     block;
  width:       100%;
  text-align:  left;
  font-family: var(--serif);
  font-size:   14px;
  color:       var(--gold);
  padding:     0.5rem 0;
  border:      none;
  background:  transparent;
  cursor:      pointer;
  letter-spacing: 0.06em;
  transition:  color 0.2s var(--ease);
}
.menu-galaxy-btn:hover { color: var(--amber-glow); }