/* 基本リセットは index.html 側に残し、
   ここではヘッディングアニメーション関連のみ定義 */

/* Heading animation container */
.heading-container {
  display: inline-block;
  margin: 0 auto 2rem;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

/* マスキング用の長方形 */
.rectangle-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right bottom, #3A4AF9, #6B5DFB, #B15CFB);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 2;
}

/* 見せたいテキスト */
.test-text-behind {
  display: inline-block;
  margin: 0;
  font-size: 5rem;
  text-align: left;
  color: #333;
  opacity: 0;
  white-space: nowrap;
}

/* IntersectionObserver で .animate が付与された時 */
.heading-container.animate .rectangle-top {
  animation: combinedAnimation 3s forwards;
}

.heading-container.animate .test-text-behind {
  animation: showText 0.001s forwards;
  animation-delay: 1.05s;
}

/* キーフレーム定義 */
@keyframes combinedAnimation {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  33% {
    transform: scaleX(1);
    transform-origin: left;
  }
  40% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

@keyframes showText {
  to {
    opacity: 1;
  }
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .test-text-behind {
    font-size: 4rem;
  }
}

@media (max-width: 480px) {
  .test-text-behind {
    font-size: 3rem;
  }
}