/* --- Orchestra Member Page Styles --- */

/* Theme: Harmony Indigo */
.page-title-area.theme-indigo {
  text-align: center; /* Centered for grandeur */
  margin-bottom: 4rem;
}
.page-title-area.theme-indigo .page-title-text {
  color: #4338ca; /* Indigo-700 */
}
.page-title-area.theme-indigo .title-underline {
  background: #fbbf24; /* Amber-400 (Gold) */
  margin: 1rem auto;
}
.page-title-area.theme-indigo .title-subtext {
  color: #6366f1;
}

.header-indigo {
  border-left-color: #4338ca;
  color: #312e81; /* Indigo-900 */
}

.num-indigo {
  color: white;
  background: #4338ca;
}

/* Cosmic Background (Fixed) */
.cosmic-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: linear-gradient(to bottom, #fcfdff 0%, #eef2ff 100%);
  pointer-events: none;
  overflow: hidden;
}
.stars {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(#c7d2fe 1px, transparent 1px),
    radial-gradient(#818cf8 1px, transparent 1px);
  background-size: 50px 50px;
  background-position:
    0 0,
    25px 25px;
  opacity: 0.5;
  animation: starPulse 6s ease-in-out infinite; /* Subtle twinkle */
}

@keyframes starPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

/* Cosmic Quote Style */
.quote-style-cosmic {
  background: radial-gradient(circle at top right, #312e81, #1e1b4b);
  color: white;
  border-radius: 16px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(49, 46, 129, 0.4);
  border: none;
  text-align: center;
}
.quote-style-cosmic .quote-text p {
  color: #e0e7ff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.quote-style-cosmic .quote-author {
  color: #a5b4fc;
}
.musical-notes-anim i {
  position: absolute;
  color: rgba(255, 255, 255, 0.1);
  animation: floatNote 6s infinite ease-in-out;
}
.note-1 {
  top: 10%;
  left: 10%;
  font-size: 3rem;
  animation-delay: 0s;
}
.note-2 {
  top: 20%;
  right: 15%;
  font-size: 2rem;
  animation-delay: 2s;
}
.note-3 {
  bottom: 15%;
  left: 20%;
  font-size: 4rem;
  animation-delay: 4s;
}

@keyframes floatNote {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.1;
  }
  50% {
    transform: translateY(-20px) rotate(10deg);
    opacity: 0.3;
  }
}

/* Highlight Wrapper */
.highlight-wrapper-indigo {
  background: #e0e7ff;
  padding: 2rem;
  border-radius: 50px; /* Capsule shape */
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 4px 6px rgba(67, 56, 202, 0.1);
}
.highlight-icon {
  font-size: 2.5rem;
  color: #4338ca;
  background: white;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.highlight-text {
  flex: 1;
  font-weight: bold;
  color: #3730a3;
}

/* Thought Experiment Box */
.thought-experiment-box {
  background: white;
  border: 2px dashed #a5b4fc;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
}
.thought-experiment-box h3 {
  text-align: center;
  color: #6366f1;
  margin-bottom: 1.5rem;
}
.thought-experiment-box .experiment-scenario {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e7ff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.thought-experiment-box .experiment-scenario:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.thought-experiment-box .experiment-scenario:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.experiment-scenario strong {
  color: #4338ca;
  display: block;
  margin-bottom: 0.3rem;
}

.experiment-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  color: #4338ca;
}
.experiment-question i {
  transition: transform 0.3s ease;
  /* Gentle bounce to suggest interactivity */
  animation: gentle-bounce 2s infinite;
}
.experiment-scenario.active .experiment-question i {
  transform: rotate(180deg);
  animation: none; /* Stop bouncing when open */
}

@keyframes gentle-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-2px);
  }
}
.experiment-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease-out;
  color: #4b5563;
  margin-top: 0;
}
.experiment-scenario.active .experiment-answer {
  max-height: 200px; /* Pillow for content */
  opacity: 1;
  margin-top: 1rem;
}

/* Hint Text */
.click-hint-text {
  text-align: center;
  font-size: 0.85rem;
  color: #818cf8;
  margin-bottom: 1.5rem;
  animation: pulse-text 2s infinite;
}

@keyframes pulse-text {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* Harmony Visual (Ripple) */
.harmony-visual {
  position: relative;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
}
.conductor-circle {
  width: 60px;
  height: 60px;
  background: #4338ca;
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  z-index: 2;
  box-shadow: 0 0 20px rgba(67, 56, 202, 0.4);
}
.wave-ring {
  position: absolute;
  border: 2px solid #818cf8;
  border-radius: 50%;
  opacity: 0;
  animation: rippleEffect 3s infinite linear;
}
.ring1 {
  width: 60px;
  height: 60px;
  animation-delay: 0s;
}
.ring2 {
  width: 60px;
  height: 60px;
  animation-delay: 1s;
}
.ring3 {
  width: 60px;
  height: 60px;
  animation-delay: 2s;
}

@keyframes rippleEffect {
  0% {
    width: 60px;
    height: 60px;
    opacity: 1;
    border-width: 4px;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
    border-width: 0px;
  }
}

/* 2. Global Click Ripple (Resonance Effect) */
.click-ripple {
  position: fixed;
  border-radius: 50%;
  border: 2px solid rgba(99, 102, 241, 0.6); /* Indigo light */
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 9999;
  animation: clickRippleAnim 1s ease-out forwards;
}

@keyframes clickRippleAnim {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    width: 500px;
    height: 500px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    border-width: 0;
  }
}

/* 3. Role Diagnosis */
.diagnosis-section {
  text-align: center;
  margin: 4rem 0 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, #e0e7ff 0%, #ffffff 100%);
  border-radius: 16px;
  border: 1px dashed #c7d2fe;
}
.diagnosis-btn {
  background: #4338ca;
  color: white;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(67, 56, 202, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.diagnosis-btn:hover {
  background: #3730a3;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(67, 56, 202, 0.3);
}
.diagnosis-result {
  margin-top: 2rem;
  min-height: 120px; /* Pre-allocate space */
  opacity: 0;
  transition: opacity 0.5s ease;
}
.diagnosis-result.show {
  opacity: 1;
}
.role-icon {
  font-size: 3rem;
  color: #f59e0b; /* Gold */
  margin-bottom: 0.5rem;
  display: block;
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.role-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1e1b4b;
  margin-bottom: 0.5rem;
}
.role-desc {
  color: #4b5563;
  font-size: 0.95rem;
}
.theme-indigo-box {
  border-color: #6366f1;
  background: #eef2ff;
  color: #312e81;
}

/* Sidebar Advice Indigo */
.advice-indigo {
  background: #e0e7ff;
  border: 2px solid #818cf8;
}
.advice-highlight-indigo {
  background: linear-gradient(
    120deg,
    rgba(129, 140, 248, 0) 0%,
    rgba(129, 140, 248, 0.4) 100%
  );
  box-shadow: inset 0 -0.5em 0 rgba(129, 140, 248, 0.5);
}

/* Tile Indigo (Added to main CSS for reusability if needed in future, though mainly logical in useful_words) */
.tile-indigo:hover {
  background: #eef2ff;
  border-color: #818cf8;
}
.tile-indigo .tile-icon {
  color: #4338ca;
}

/* Mirror Words Animation - Used in Harmony floating words too */
.floating-word {
  position: absolute;
  color: #0d9488; /* Overridden by .indigo */
  font-weight: bold;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
  font-size: 1.2rem;
  z-index: 10;
}

.floating-word.indigo {
  color: #fca5a5; /* This seems to be pink in style.css, checking usage */
  /* Wait, style.css line 5937 says: color: #fca5a5; Warm Pink/Red tint for warmth */
  /* But for orchestra maybe indigo makes more sense? Or stick to style.css def? */
  /* Let's copy style.css definition for consistency */
  color: #fca5a5; 
  text-shadow: 0 0 10px rgba(254, 202, 202, 0.8);
  font-size: 1.1rem;
  animation: wordFloatRadial 3s ease-out forwards; 
}

@keyframes wordFloatRadial {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(
        calc(-50% + var(--mx) * 0.2),
        calc(-50% + var(--my) * 0.2)
      )
      scale(1);
  }
  100% {
    transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my)))
      scale(1.1);
    opacity: 0;
  }
}