/* =============================================
   GALAXY.CSS — Chapter 4: Memory Galaxy
   ============================================= */
:root {
  --rose:       #c0143c;
  --rose-mid:   #e0365a;
  --rose-light: #f48fb1;
  --white:      #ffffff;
  --bg:         #02000a;
  --font-display: 'Cinzel', serif;
  --font-serif:   'Cormorant Garamond', serif;
  --font-sans:    'Lato', sans-serif;
  --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: var(--bg); overflow: hidden; }

/* ── Canvas — z-index 0 so all UI elements sit on top ── */
#galaxy-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: default;
  z-index: 0;
}

/* ── Chapter label — desktop: left-centre ── */
.chapter-label {
  position: absolute;
  top: 50%;
  left: 5vw;
  transform: translateY(-50%);
  z-index: 10;
  max-width: 280px;
  pointer-events: none;
  animation: fadeSlideIn 1s var(--ease-expo) 0.2s both;
}
.gl-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--rose-mid);
  margin-bottom: 0.7rem;
}
.gl-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  letter-spacing: 0.07em;
  line-height: 1.1;
  color: var(--white);
  text-shadow: 0 0 60px rgba(192,20,60,0.4);
  margin-bottom: 1.1rem;
}
.gl-title em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--rose-light);
  font-size: 1.08em;
}
.gl-hint {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-style: italic;
  color: rgba(255,255,255,0.32);
  line-height: 1.8;
}

/* ── Orb — bottom-right near galaxy, same as flower page ── */
.orb-wrap {
  position: absolute;
  bottom: 2rem;
  right: 2.5rem;
  width: 64px;
  height: 64px;
  z-index: 30;
  cursor: grab;
  animation: fadeIn 0.8s ease 0.5s both;
}
.orb-wrap:active { cursor: grabbing; }

/* ── Nav buttons — desktop: bottom-centre like flower page ── */
.galaxy-nav {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  gap: 1rem;
  align-items: center;
  opacity: 1 !important;
}

/* Hero-style button — same as timeline/flower */
.ch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.8rem;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.18);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  transition: border-color 0.4s;
}
.ch-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--rose);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-expo);
}
.ch-btn:hover::before { transform: translateX(0); }
.ch-btn:hover { border-color: var(--rose); }
.ch-btn span, .ch-btn svg { position: relative; z-index: 1; }
.ch-btn--next { border-color: rgba(192,20,60,0.35); }

/* ── Tooltip ── */
#star-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 30;
  padding: 0.45rem 0.9rem;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(192,20,60,0.3);
  backdrop-filter: blur(6px);
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-style: italic;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -150%);
  transition: opacity 0.2s;
  border-radius: 2px;
}
#star-tooltip.visible { opacity: 1; }

/* ── Memory card overlay ── */
.mem-overlay {
  position: fixed; inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  pointer-events: none;
  transition: background 0.5s, backdrop-filter 0.5s;
}
.mem-overlay.open {
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}
.mem-card {
  position: relative;
  width: min(460px, 92vw);
  padding: 2.4rem 2.2rem 2rem;
  background: rgba(8,0,16,0.94);
  border: 1px solid rgba(192,20,60,0.28);
  text-align: center;
  transform: scale(0.85) translateY(30px);
  opacity: 0;
  transition: transform 0.55s var(--ease-expo), opacity 0.55s var(--ease-expo);
}
.mem-overlay.open .mem-card { transform: scale(1) translateY(0); opacity: 1; }
.mem-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,20,60,0.6), rgba(255,200,220,0.8), rgba(192,20,60,0.6), transparent);
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}
.mem-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none;
  color: rgba(255,255,255,0.3); font-size: 1.1rem;
  cursor: pointer; padding: 0.3rem;
  transition: color 0.3s; line-height: 1;
}
.mem-close:hover { color: var(--white); }
.mem-star-icon { font-size: 2.4rem; margin-bottom: 0.6rem; display: block; animation: pulse-star 2s ease-in-out infinite; }
.mem-date  { font-family: var(--font-sans); font-size: 0.58rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--rose-mid); margin-bottom: 0.6rem; }
.mem-title { font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 300; letter-spacing: 0.06em; color: var(--white); margin-bottom: 1rem; }
.mem-desc  { font-family: var(--font-serif); font-size: clamp(0.95rem, 1.8vw, 1.08rem); font-style: italic; color: rgba(255,255,255,0.58); line-height: 1.8; margin-bottom: 1.4rem; }
.mem-spotify { border-radius: 6px; overflow: hidden; }
.mem-spotify iframe { display: block; border-radius: 6px; }
.mem-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mem-particle  { position: absolute; border-radius: 50%; animation: burst 0.85s var(--ease-expo) forwards; }

/* ── Keyframes ── */
@keyframes fadeIn      { from { opacity:0; } to { opacity:1; } }
@keyframes fadeSlideIn { from { opacity:0; transform:translateY(-50%) translateX(-20px); } to { opacity:1; transform:translateY(-50%) translateX(0); } }
@keyframes shimmer     { 0% { background-position:-200% center; } 100% { background-position:200% center; } }
@keyframes pulse-star  { 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); } }
@keyframes burst       { 0% { opacity:1; transform:translate(var(--bx),var(--by)) scale(1); } 100% { opacity:0; transform:translate(calc(var(--bx)*3.5),calc(var(--by)*3.5)) scale(0); } }

/* ── MOBILE ── */
@media (max-width: 700px) {
  /* Text: slides to bottom overlay — enough padding for 2 stacked buttons below */
  .chapter-label {
    top: auto; bottom: 0;
    left: 0; right: 0;
    transform: none;
    max-width: 100%;
    padding: 1rem 6vw 8.5rem;
    background: linear-gradient(to top, rgba(2,0,10,0.93) 58%, transparent);
    animation: fadeIn 1.2s var(--ease-expo) 0.3s both;
  }
  .gl-title { font-size: clamp(1.5rem, 7vw, 2rem); margin-bottom: 0.4rem; }
  .gl-hint  { font-size: 0.8rem; }

  /* Orb: right side, just above the text block — like flower page */
  .orb-wrap {
    bottom: 9rem;
    right: 1.5rem;
    left: auto;
    transform: none;
  }

  /* Nav: stacked centred at very bottom, below text block */
  .galaxy-nav {
    top: auto;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    gap: 0.6rem;
  }
  .ch-btn {
    width: 80vw;
    justify-content: center;
    font-size: 0.6rem;
    padding: 0.75rem 1.2rem;
  }

  .mem-card { padding: 2rem 1.4rem 1.6rem; }
}