/* --- 1. 親要素：基本設定 --- */
.js-animate-item {
  position: relative;
  display: inline-block;
  overflow: hidden;
 
}

.js-animate-item:not(.is-animated) {
  color: transparent !important;
}


/* --- 2. 帯（リビール板）：初期のスピード 1.2s を維持 --- */
.js-animate-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1;
  transform: translateX(-101%); /* 100%より少し外側から */
  will-change: transform;
}

.js-animate-item.is-animated::before {
  /* スピードは最初の 1.2s。イージングをより滑らかなものに変更 */
  animation: Reveal 1.2s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.js-animate-item div,
.js-animate-item p,
.js-animate-item h2,
.js-animate-item h3,
.js-animate-item h4,
.js-animate-item dt,
.js-animate-item dd {
  margin: 0;
}

/* 帯が左から右へ「一気に」ではなく「溜めて」抜ける動き */
@keyframes Reveal {
  0% {
    transform: translateX(-101%);
  }
  40%, 60% {
    transform: translateX(0); /* ここで一瞬だけ要素を完全に覆う */
  }
  100% {
    transform: translateX(101%);
  }
}

/* --- 3. コンテンツ：帯が中央にいる時から透過を戻す --- */
.js-animate-item > * {
  visibility: hidden; 
  opacity: 0;
  transform: translateX(-15px);
  display: block;
}

.js-animate-item.is-animated > * {
  /* 帯の動き(1.2s)に合わせて、0.2sほど遅らせて開始 */
  visibility: visible;
  animation: gokigenContent 1.2s cubic-bezier(0.76, 0, 0.24, 1) forwards 0.2s;
}

@keyframes gokigenContent {
  0% {
    opacity: 0;
    transform: translateX(-15px);
  }
  /* 帯が中央(50%地点)で重なっている間に透過を戻し始める */
  35% {
    opacity: 0;
  }
  /* 50%を過ぎたあたりで文字が見え始め、帯に追い越される */
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 白背景バージョン */
.js-animate-item.white-bg::before {
  background-color: #fff;
}

.js-animate-item.blue-bg::before {
  background-color: #1955a6;
}

.js-animate-item.r-gray-bg::before {
  background-color: #eaeaea;
}

.js-animate-item.gray-bg::before {
  background-color: #505a5f;
}

.js-animate-item.g-blue-bg::before {
  background-color: #1f2f54
}


/* 速度調整：遅い */
.js-animate-item.slow.is-animated::before {
  animation-duration: 1.6s;
}

.js-animate-item.slow.is-animated > * {
  animation-delay: 0.7s;
}

/* 速度調整：速い */
.js-animate-item.fast.is-animated::before {
  animation-duration: 0.8s;
}

.js-animate-item.fast.is-animated > * {
  animation-delay: 0.3s;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .js-animate-item.is-animated::before {
    animation-duration: 0.9s;
  }
  
  .js-animate-item.is-animated > * {
    animation-delay: 0.35s;
  }
}

section.section {
  animation: fade_in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#art .motion-parse {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes fade_in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade_out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes clip_in {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0); }
}

@keyframes blur_in {
  0% { filter: blur(8rem); }
  100% { filter: blur(0); }
}

@keyframes trace_in {
  0% { transform: translateX(-101%); }
  40%, 60% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}


/* -----------------------------------------------------------
   ブラーアニメーション専用スタイル（初期の綺麗な動きをベース）
----------------------------------------------------------- */


/* --- レイアウト干渉を完全に排除したブラー設定 --- */

.js-animate-item.only-blur {
  /* 1. 自分自身の「箱」をレイアウト計算から除外する（最重要） */
  display: contents !important;
  
  /* 2. 既存の親要素の不透明度設定などを打ち消す */
  opacity: 1 !important;
  visibility: visible !important;
}

/* 3. 背景スライド（黒い板など）を完全に無効化 */
.js-animate-item.only-blur::before {
  display: none !important;
  content: none !important;
}

/* 4. 中身（h2, p, divなど）に対して「最初の綺麗なブラー」を適用 */
.js-animate-item.only-blur > * {
  /* 初期状態：既存の translateX(-20px) などを強制上書き */
  opacity: 0 !important;
  filter: blur(20px) !important; 
  transform: translateY(10px) !important;
  
  /* 既存のアニメーション設定をリセットして上書き */
  animation: none !important;
  transition: 
    opacity 0.8s cubic-bezier(0.76, 0, 0.24, 1), 
    filter 1.6s cubic-bezier(0.76, 0, 0.24, 1), 
    transform 1.2s cubic-bezier(0.76, 0, 0.24, 1) !important;
  
  will-change: opacity, filter, transform;
}

/* 5. JSでクラスがついた瞬間に実行 */
.js-animate-item.only-blur.is-animated > * {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
}