/* Base styles */
.container,
.container-scatter,
.container-comparison {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 2;
}

.scroll-content,
.scroll-content-scatter,
.scroll-content-comparison {
  width: 50%;
  padding-right: 20px;
  padding-left: 0;
  z-index: 3;
  pointer-events: none;
}

.scroll-content a,
.scroll-content-scatter a,
.scroll-content-comparison a {
  pointer-events: auto;
}

.sticky-container {
  position: sticky;
  top: 0;
  width: 50%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

h2,
p {
  z-index: 4;
}

#visualization,
#visualization-scatter,
#visualization-comparison {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
}

.card {
  margin-bottom: 80vh;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  opacity: 1;
}

.card.active {
  opacity: 1;
}

.card[data-step="6"],
.card[data-step="9"],
.card[data-step="12"] {
  margin-bottom: 20vh;
}

.card[data-step="0"],
.card[data-step="7"],
.card[data-step="10"] {
  opacity: 0;
}

#visualization-scatter *,
#visualization-comparison *,
#visualization * {
  font-size: medium;
  z-index: 0;
}

.tooltip {
  position: absolute;
  font-size: 12px;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1000;
  overflow: hidden;
}

/* Mobile responsive styles */
@media screen and (max-width: 768px) {
  .container,
  .container-scatter,
  .container-comparison {
    flex-direction: column;
    /* padding: 0 15px; */
    z-index: 2;
    padding-top: 20vh; /* Adjust to create spacing */
    padding-bottom: 20vh; /* Adjust to create spacing */
  }

  .scroll-content,
  .scroll-content-scatter,
  .scroll-content-comparison {
    width: 100%;
    padding-right: 0;
    order: 2; /* Places content below the visualization */
    z-index: 3;
  }

  .sticky-container {
    position: sticky;
    width: 100%;
    top: 25vh;
    height: 50vh; /* Reduced height on mobile */
    order: 1; /* Places visualization at the top */
    z-index: 1;
  }

  .card {
    margin-bottom: 80vh; /* Reduced spacing on mobile */
  }

  .card[data-step="6"],
  .card[data-step="9"],
  .card[data-step="12"] {
    margin-bottom: 10vh;
  }

  figure {
    z-index: 0;
  }
}

/* Additional adjustments for very small screens */
@media screen and (max-width: 480px) {
  .sticky-container {
    height: 40vh;
    top: 30vh;
    z-index: 0;
  }

  .card {
    margin-bottom: 30vh;
    padding: 15px;
  }
}