/* ============================================
   Century Birthday - Ending Page (Celebration)
   ============================================ */

#ending-canvas {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}
#text-overlay {
  position: fixed; top: 35%; left: 50%; transform: translate(-50%,-50%);
  z-index: 10; text-align: center; pointer-events: none;
}
.reveal-text { opacity: 0; transition: opacity 1s ease-out, transform 0.6s ease-out; }
#happy-birthday {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem,6vw,3.5rem); color: var(--color-gold-light);
  text-shadow: 0 0 40px rgba(240,215,140,0.5), 0 0 80px rgba(240,215,140,0.2);
  letter-spacing: 0.08em; margin-bottom: 8px;
}
#century-name {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3rem,9vw,5.5rem); color: var(--color-gold);
  text-shadow: 0 0 60px rgba(212,168,83,0.6), 0 4px 20px rgba(0,0,0,0.5);
  letter-spacing: 0.06em; margin-bottom: 16px;
}
#sub-message {
  font-family: var(--font-body); font-style: italic;
  font-size: clamp(1rem,3vw,1.4rem); color: var(--color-lavender);
  letter-spacing: 0.1em;
}
#ending-links {
  position: fixed; bottom: 12%; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; gap: 16px;
  opacity: 0; transition: opacity 1s ease-out;
}
@media (max-width: 480px) { #ending-links { flex-direction: column; align-items: center; } }