.connect_5points {
  height: 250vh; /* 增加滾動空間 */
  width: 100%;
  /* background: #f8f8f8; */
  position: relative;
  overflow: visible;
  will-change: transform; /* 使用 GPU 加速 */
  transition: background-color 0.5s ease;
  /* border: 1px solid red; */
}

.connect_5points.animating {
  transition: none;
}

.parallax-section {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0 20px; /* 添加水平內邊距 */
  background: transparent; /* 確保背景透明 */
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform; /* 告知瀏覽器此元素將被頻繁改變，可能會啟用 GPU 加速 */
  transition: opacity 0.3s ease;
  position: absolute; /* 添加絕對定位 */
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto; /* 水平置中 */
  background: transparent; /* 確保畫布背景透明 */
}

.label {
  position: absolute;
  font-size: 14px;
  color: #111;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  word-wrap: break-word;
  overflow-wrap: break-word;
  will-change: opacity, transform; /* 優化動畫性能 */
  pointer-events: none;
  text-align: center; /* 文字置中 */
  transform: translateY(10px); /* 恢復原本的變形，讓標籤可以獨立定位 */

  width: 200px;
  /* border: 1px solid black; */
}

.label.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 針對特定標籤的位置調整 */
#label0 {
  left: calc(50% - 17%);
  top: 17vh;
}

#label1 {
  left: calc(50% + 2%);
  top: 31vh;
}

#label2 {
  left: calc(50% - 27%);
  top: 44vh;
}

#label3 {
  left: calc(52% + 1%);
  top: 58vh;
}

#label4 {
  left: calc(50% + 5%);
  top: 87vh;
  transform: translateX(-50%) translateY(10px);
}

#label4.visible {
  transform: translateX(-50%) translateY(0);
}

/* 媒體查詢：小尺寸螢幕（手機） */
@media (max-width: 767px) {
  .label {
    font-size: 12px;
  }

  #label0 {
    left: calc(50% - 50%);
  }

  #label2 {
    left: calc(50% - 34%);
  }

  #label3 {
    left: calc(50%);
  }

  .animation-indicator {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* 媒體查詢：大尺寸螢幕 */
@media (min-width: 1200px) {
  .label {
    font-size: 16px;
  }
}
