/* --- Keyframes from both projects --- */
@keyframes blink { from, to { opacity: 1 } 50% { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
@keyframes pulse-ring { 0% { transform: scale(0.33); opacity: 1; } 80%, 100% { transform: scale(1); opacity: 0; } }
@keyframes flow-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* --- Core Layout & Background --- */
html, body, #root {
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  font-family: 'Kosugi', sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  overflow: hidden;
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: -1;
}

.ui-container {
  max-width: 65ch;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 2rem;
  background-color: rgba(10, 10, 20, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow-y: auto;
  box-sizing: border-box;
  color: #d1d5db; /* Default light text color */
}


/* --- General Element Styling for Dark Theme --- */
h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
  margin: 0;
  font-weight: normal;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.interactive-word {
  color: #d1d5db;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}
.interactive-word:hover {
  color: #c4b5fd;
  text-decoration-color: #c4b5fd;
  background-color: rgba(196, 181, 253, 0.1);
}
.orbit-link {
  color: #a78bfa;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 2px dotted #a78bfa;
  transition: all 0.2s ease-in-out;
  padding: 0.1em 0.3em;
  border-radius: 4px;
  background-color: rgba(167, 139, 250, 0.1);
  position: relative;
  padding-left: 1.2em;
}
.orbit-link::before {
  content: '○';
  position: absolute;
  left: 0.3em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  color: #f472b6;
  transition: transform 0.3s ease;
}
.orbit-link:hover {
  color: #f5d0fe;
  background-color: rgba(245, 208, 254, 0.2);
  border-bottom-color: #f5d0fe;
}
.orbit-link:hover::before { transform: translateY(-50%) rotate(360deg); }

/* --- UI Components --- */
.search-container {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 3rem;
}
.search-form { flex-grow: 1; }
.search-input {
  width: 100%;
  padding: 0.5rem 0.2rem;
  font: inherit;
  color: #fff;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background-color: transparent;
  box-sizing: border-box;
  outline: none;
}
.search-input:disabled { color: #6b7280; }
.search-input::placeholder { color: #9ca3af; opacity: 1; }

.random-button {
  color: #d1d5db;
  white-space: nowrap;
  padding: 0.5rem 0;
}
.random-button:hover:not(:disabled) { color: #a78bfa; }
.random-button:disabled { color: #6b7280; cursor: not-allowed; }

.pillars-nav {
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1.5rem;
}
.pillars-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1rem 2rem;
}
.pillar-button {
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.1em;
  color: #9ca3af;
  transition: color 0.2s ease;
  padding: 0.25rem 0;
}
.pillar-button:hover { color: #c4b5fd; }
.pillar-button.active {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #a78bfa;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sticky-footer {
  position: absolute;
  bottom: 0;
  left: 2rem; /* Match parent padding */
  right: 2rem; /* Match parent padding */
  text-align: center;
  padding: 1.5rem 0;
  background: linear-gradient(to top, rgba(10, 10, 20, 1) 20%, transparent);
}
.footer-text { font-size: 0.9em; color: #6b7280; }
.footer-text a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.footer-text a:hover { color: #a78bfa; text-decoration: underline; }

.orbit-display-container {
  width: 100%;
  margin: 2rem auto 0;
  position: relative;
  border-radius: 12px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 40vh;
  max-height: 50vh;
}

.content-overlay {
  overflow-y: auto;
  padding: 2rem;
  box-sizing: border-box;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  width: 100%;
}


.blinking-cursor { animation: blink 1s step-end infinite; }

/* --- Loading Skeletons (Dark Theme) --- */
.skeleton-default-bar { height: 1rem; margin-bottom: 0.75rem; background-color: #374151; background-image: linear-gradient(to right, #374151 0%, #4b5563 50%, #374151 100%); background-repeat: no-repeat; background-size: 800px 104px; animation: shimmer 1s linear infinite; }
.skeleton-default-bar:nth-child(1) { width: 100%; } .skeleton-default-bar:nth-child(2) { width: 83.33%; } .skeleton-default-bar:nth-child(3) { width: 100%; } .skeleton-default-bar:nth-child(4) { width: 75%; } .skeleton-default-bar:nth-child(5) { width: 66.66%; }

.skeleton-genesis { position: relative; height: 80px; width: 80px; margin: 2rem auto; }
.skeleton-genesis-circle { position: absolute; border: 2px solid #6b7280; border-radius: 50%; inset: 0; animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; }
.skeleton-genesis-circle:nth-child(2) { animation-delay: -0.5s; } .skeleton-genesis-circle:nth-child(3) { animation-delay: -1s; }

.skeleton-choreography { display: flex; justify-content: center; align-items: center; gap: 8px; height: 60px; margin: 2rem auto; }
.skeleton-choreography-bar { width: 8px; height: 10px; background-color: #6b7280; animation: flow-wave 1.2s ease-in-out infinite; }
.skeleton-choreography-bar:nth-child(2) { animation-delay: -1.1s; } .skeleton-choreography-bar:nth-child(3) { animation-delay: -1.0s; } .skeleton-choreography-bar:nth-child(4) { animation-delay: -0.9s; } .skeleton-choreography-bar:nth-child(5) { animation-delay: -0.8s; }