/* 1. Global Styles */
body {
  background-color: #1f2937; /* bg-gray-900 */
  color: #f3f4f6; /* text-gray-100 */
}

/* 2. Style for Scroll Sections */
.slide-section {
  min-height: 100vh; /* Make each slide large enough to fill the viewport */
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

/* 3. Style for the Fixed Chart Container */
#fixed-chart-container {
  position: sticky; 
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background-color: #1f2937; /* bg-gray-800 */
}

/* Style for the Period Label outside the chart area */
#periodLabel, #periodLabelGender {
    font-size: 1.25rem;
    font-weight: 800;
    color: #60a5fa; /* Blue 400 */
    margin-bottom: 1rem;
    display: block;
    text-align: center;
    transition: opacity 0.5s ease-in-out;
}

/* Tab Styling */
.tab-button.active {
    color: #60a5fa; /* text-blue-400 */
    border-bottom-width: 2px;
    border-color: #60a5fa;
}

.tab-button:not(.active) {
    border-bottom-width: 2px;
    border-color: transparent;
}

/* Optional: Fade effect on narrative text */
.slide-section {
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}
.slide-section[data-slide="0"] {
    opacity: 1; /* Initial state */
}
.slide-section[style*="opacity: 1"] {
    opacity: 1 !important; /* Ensure the active slide is fully visible */
}
.slide-section-gender {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}
.slide-section-map {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}
#periodLabelMap {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fbbf24; /* Amber 400 */
    margin-bottom: 1rem;
}

/* Layout dasar untuk storytelling */
.story-container, main {
    display: grid;
    align-items: start;
}

/* Sisi Kanan (Grafik) harus menempel saat di-scroll */
#fixed-chart-container, .visual-side {
    position: sticky;
    top: 80px; /* Jarak dari header */
    height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sisi Kiri (Teks) */
.slide-section, .slide-section-gender, .slide-section-map {
    min-height: 80vh; /* Jarak antar paragraf */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    transition: opacity 0.5s;
}


.slide-section-physique {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    opacity: 0.5;
    transition: all 0.5s ease;
}