/*--------------------
 
 テキストアニメーション「グレイテキスト→フェードインテキスト」

 --------------------*/
 
 /* アニメーション全体のコンテナ「グレイテキスト→フェードインテキスト」 */
 .fade-slide-text-gray-white {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* グレーのテキスト「グレイテキスト→フェードインテキスト」 */
.text-gray-layer {
    position: relative;
    display: inline-block;
    clip-path: inset(0 100% 0 0); /* 初期状態で隠す */
    transition: clip-path 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
}
.text-gray-layer-01{
    color: rgba(255, 255, 255, 0.3);
}
.text-gray-layer-02{
    color: rgba(0, 0, 0, 0.3);
}

/* 白いテキスト（上書き用）「グレイテキスト→フェードインテキスト」 */
.text-gray-layer::after {
    content: attr(data-text);
    white-space: pre-wrap; /* ←これが改行を効かせるポイント */
    position: absolute;
    top: 0;
    left: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
    transition-delay: 0.3s;
}
.text-gray-layer-01::after{
    color: white;
}
.text-gray-layer-02::after{
    color: var(--base-black-color);
}

/* アニメーション開始クラス（スクロールで追加）「グレイテキスト→フェードインテキスト」 */
.fade-slide-text-gray-white.animate-gray-white .text-gray-layer {
    clip-path: inset(0 0 0 0); /* グレーの文字をスライドイン */
}
/*白い文字をスライドイン「グレイテキスト→フェードインテキスト」*/
.fade-slide-text-gray-white.animate-gray-white .text-gray-layer::after {
    clip-path: inset(0 0 0 0); 
}



/*ここから別のアニメーション*/
/* テキストアニメーション左To右 */
.bg-text-lefttoright-animation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.text-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* ✅ 黒背景：最初から表示 → 右へフェードアウト */
.text-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 116, 158);
  background-image: linear-gradient(-90deg, rgba(196, 182, 197, 1), rgba(35, 117, 163, 1));
  z-index: 3;
}

/* ✅ テキスト：常に表示・アニメーションなし */
.animated-text {
  position: relative;
  font-size: 2rem;
  color: var(--base-black-color);
  z-index: 2;
}

/* ✅ アニメーション開始 */
.text-wrapper.animate .text-background {
  animation: fadeOutToRight 0.35s ease forwards;
  animation-delay: 0.25s; /* ← ここで遅延を追加 */
  animation-fill-mode: both; /* ← delay中の初期状態維持に必要 */
}

/* ✅ 黒背景が右へフェードアウト */
@keyframes fadeOutToRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  99% {
    opacity: 1;
    transform: translateX(100%);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}