/* ============================================================
   Chill Stretch  ―  gsap-extra.css
   index-gsap.html(GSAP版)だけが読み込む追加スタイル。

   方針:
   - 通常版(index.html)には一切影響しない。すべて .gsap-mode 配下。
   - .gsap-mode は GSAP が読めていて、かつユーザーが
     「動きを減らす」設定にしていないときだけ <html> に付く。
     付かなかった場合は通常版とまったく同じ見た目・挙動になる。
   ============================================================ */

/* ---------- 1. CSS トランジションを譲る -------------------- */
/* .reveal の表示は gsap-motion.js が受け持つ。
   CSS 側の transition が残っていると二重に効くので切っておく。 */
.gsap-mode .reveal {
  transition: none;
  transition-delay: 0s;
}

/* ---------- 2. ヒーロー ------------------------------------ */
/* 写真をゆっくり引かせるため、はみ出しを隠す器を用意する */
.gsap-mode .hero__media {
  overflow: hidden;
}
.gsap-mode .hero__media img {
  will-change: transform;
}

/* 見出しは SplitText が行ごとに分割する。
   行が下から迫り上がるので、はみ出しを行単位で隠す */
.gsap-mode .hero__title .gs-line-wrap {
  overflow: hidden;
  display: block;
}
.gsap-mode .hero__title .gs-line {
  display: block;
  will-change: transform;
}

/* ---------- 3. 図解 ---------------------------------------- */
/* 線が描かれる演出のあいだ、SVG がちらつかないように */
.gsap-mode .diagram svg [data-gs-draw] {
  will-change: stroke-dashoffset;
}

/* ---------- 4. 数字のカウントアップ ------------------------ */
/* 桁が増減しても位置がずれないよう、等幅の数字を使う */
.gsap-mode [data-gs-count] {
  font-variant-numeric: tabular-nums;
}

/* ---------- 5. 装飾の葉 ------------------------------------ */
.gsap-mode .section__leaf,
.gsap-mode .leaf-deco {
  will-change: transform;
}

/* ---------- 6. 動きを減らす設定への配慮 -------------------- */
/* .gsap-mode 自体が付かないので基本は無関係だが、
   ページ表示後に設定を変えた場合の保険として残す */
@media (prefers-reduced-motion: reduce) {
  .gsap-mode .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .gsap-mode .hero__media img {
    transform: none !important;
  }
}

/* ---------- 7. ローディング画面 ----------------------------- */
/* 表示・非表示の制御は js/gsap-motion.js の heroIntro() が行う。
   ここでは gsap-mode のときだけ「見え方」を定義する。 */
.gsap-mode #loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  position: fixed; inset: 0; z-index: 200;
  background: var(--cs-bg);
}
.gsap-mode .loader-halo {
  position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, var(--cs-gold-pale) 0%, transparent 70%);
  opacity: .32; animation: loader-breathe 3.4s ease-in-out infinite;
}
@keyframes loader-breathe {
  0%, 100% { transform: scale(1); opacity: .26; }
  50%      { transform: scale(1.14); opacity: .48; }
}
.gsap-mode .loader-logo { width: 96px; height: auto; position: relative; }
@media (min-width: 768px) {
  /* スマホでは96pxで画面幅の約1/4を占めるが、PCでは同じ96pxが1/15以下になり
     ヘッダーの常設ロゴ(実質148px)より小さく見えてしまう。PCだけ引き上げる */
  .gsap-mode .loader-logo { width: 152px; }
}
.gsap-mode .loader-line { width: 0; height: 1px; background: var(--cs-gold); position: relative; }
.gsap-mode .loader-sub {
  position: relative; margin: 0;
  font-family: var(--font-gothic); font-size: .6875rem; font-weight: 700;
  letter-spacing: .28em; text-indent: .28em; color: var(--cs-green-deep);
}
@media (prefers-reduced-motion: reduce) {
  .gsap-mode .loader-halo { animation: none; }
}