/* =========================================================
   開腸瑜伽協会 — アニメーション / 演出
   役割: 動きの定義を一箇所に集約。フェード＆スタッガー(.reveal)、写真の
         マスクリビール(data-reveal 各モード)、3D造形バックドロップ層、
         HERO入場、スクロール誘導、モーション(data-motion)、@keyframes、
         および 印刷/低モーション時の安全フォールバック。
   依存: tokens.css, base.css（構造）, top.css（対象セクション）
   注意: ここは「全ページ共有」。TOP以外にも .reveal を使うため必ず読み込む。
         セレクタはすべて対象クラスにスコープ済みで、要素が無いページでは無害。
   ========================================================= */

/* HEROロゴのマスク用カスタムプロパティ（@propertyで滑らかに補間）。
   hmA＝可視センターバンドの半幅（出現：中央から開く）／hmB＝非可視センターバンドの半幅（消失：中央から左右に開いて消える）。 */
@property --hmA { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --hmB { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

/* ====================================================================
   フェード＆スタッガー（共通）— JSが .is-in を付与
   ==================================================================== */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }
.reveal[data-delay="4"] { transition-delay: 0.48s; }

/* ====================================================================
   HERO 入場（opacity は常に1。提＝translateだけ動かし、印刷/凍結でも可視）
   ==================================================================== */
.hero__logo, .hero__rule, .hero__copy { opacity: 1; }
.hero__logo { animation: heroUp 1.5s var(--ease) .25s both; }
html.hero-intro .hero__logo { animation: none; }
@keyframes heroUp { from { transform: translateY(14px); } to { transform: none; } }

/* ====================================================================
   HERO 初回イントロ（load時に1回）：白背景→動画フェードイン→ロゴが一文字ずつ
   中央から左右に開く（パンパンパン）→ロゴ完了でコピー＆ヘッダー同時イン→
   Scroll文字が出て、罫線が上から下へ流れる。reduced-motion/印刷では最終状態で静止。
   ==================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* イントロ保留：hero-go が付くまで全イントロアニメを一時停止＝開始状態（白ヴェール＋ロゴ非表示）で待機。
     Babelの重いコンパイルが終わって空いたフレームで再生するので「駒落ち」が出ない。 */
  html.hero-intro:not(.hero-go) .hero__veil,
  html.hero-intro:not(.hero-go) .hero__logo,
  html.hero-intro:not(.hero-go) .hero__logo-ch,
  html.hero-intro:not(.hero-go) .hero__rule,
  html.hero-intro:not(.hero-go) .hero__copy,
  html.hero-intro:not(.hero-go) .site-header,
  html.hero-intro:not(.hero-go) .hero__scroll,
  html.hero-intro:not(.hero-go) .hero__scroll-line { animation-play-state: paused !important; }
  html.hero-intro .hero__bg { animation: none; }
  /* 白ヴェール：最初は全面白、動画の上にかぶさり、ゆっくり消えて「白→動画フェードイン」を作る（parallax非依存） */
  html.hero-intro .hero__veil { animation: heroVeilOut 1.0s var(--ease) both; }
  /* ロゴの開き方：CSS変数でスピード/イージングを切替（data-hero-logo）。既定＝snap（スパンと開く）。
     clip-path のジャンク回避のため、開いている間は親のdrop-shadowを外し、完了後に戻す。 */
  html.hero-intro {
    --logoStart: 0.5s; --logoDur: 1.6s; --logoStag: 0.16s; --logoIters: 1;
    --logoEase: cubic-bezier(0.05, 0.9, 0.1, 1);          /* きつめの easeOutExpo：一気に開いて長く静かに収まる */
    /* ロゴが視覚的に出そろうタイミング。後続要素（罫線・コピー・ヘッダー）はここを基準に続く。 */
    --logoDone: calc(var(--logoStart) + 3*var(--logoStag) + var(--logoDur)*var(--logoIters, 1));
  }
  html.hero-intro[data-hero-logo="smooth"] { --logoStart: 0.5s; --logoDur: 1.8s; --logoStag: 0.18s; --logoEase: cubic-bezier(0.62, 0, 0.2, 1); }
  /* 連続で素早く開閉（3回パッパッパッ）してから開いたまま静止。開も閉も中央から。 */
  html.hero-intro[data-hero-logo="fast"]   { --logoStart: 0.4s; --logoDur: 1.5s; --logoStag: 0.08s; --logoIters: 1; --logoEase: cubic-bezier(0.3, 0.9, 0.2, 1); }
  html.hero-intro[data-hero-logo="fast"] .hero__logo-ch { animation-name: heroChPulse; }
  html.hero-intro[data-hero-logo="grand"]  { --logoStart: 0.6s;  --logoDur: 2.2s; --logoStag: 0.26s; --logoEase: cubic-bezier(0.07, 0.95, 0.1, 1); }
  /* softrise は背景（白ヴェール）が消え切ってからロゴ開始＝logoStart をヴェール後に。 */
  html.hero-intro[data-hero-logo="softrise"] { --logoStart: 1.1s; --logoDur: 1.0s; --logoStag: 0.13s; --logoEase: cubic-bezier(0.22, 0.7, 0.24, 1);
    --logoDone: calc(var(--logoStart) + 3*var(--logoStag) + var(--logoDur)*0.55); }
  html.hero-intro .hero__logo { filter: none; will-change: filter;
    animation: heroLogoShadowIn 0.6s linear calc(var(--logoStart) + 3*var(--logoStag) + var(--logoDur) - 0.1s) both; }
  html.hero-intro .hero__logo-ch {
    -webkit-mask-image:
      linear-gradient(to right, transparent calc(50% - var(--hmA)), #000 calc(50% - var(--hmA)), #000 calc(50% + var(--hmA)), transparent calc(50% + var(--hmA))),
      linear-gradient(to right, #000 calc(50% - var(--hmB)), transparent calc(50% - var(--hmB)), transparent calc(50% + var(--hmB)), #000 calc(50% + var(--hmB)));
    mask-image:
      linear-gradient(to right, transparent calc(50% - var(--hmA)), #000 calc(50% - var(--hmA)), #000 calc(50% + var(--hmA)), transparent calc(50% + var(--hmA))),
      linear-gradient(to right, #000 calc(50% - var(--hmB)), transparent calc(50% - var(--hmB)), transparent calc(50% + var(--hmB)), #000 calc(50% + var(--hmB)));
    -webkit-mask-composite: source-in; mask-composite: intersect;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    will-change: --hmA, --hmB;
    animation: heroChCycle var(--logoDur) var(--logoEase) var(--logoIters, 1) both; }
  html.hero-intro .hero__logo-ch:nth-child(1) { animation-delay: var(--logoStart); }
  html.hero-intro .hero__logo-ch:nth-child(2) { animation-delay: calc(var(--logoStart) + var(--logoStag)); }
  html.hero-intro .hero__logo-ch:nth-child(3) { animation-delay: calc(var(--logoStart) + 2*var(--logoStag)); }
  html.hero-intro .hero__logo-ch:nth-child(4) { animation-delay: calc(var(--logoStart) + 3*var(--logoStag)); }
  /* === 全く違うモーション案 === */
  /* 筆書き：上から下へ墨でなぞるように、ぼけ→くっきりで現れる */
  html.hero-intro[data-hero-logo="brush"] .hero__logo-ch {
    -webkit-mask-image: none; mask-image: none;
    clip-path: inset(0 0 100% 0); filter: blur(7px);
    animation-name: heroChBrush; animation-duration: var(--logoDur); animation-timing-function: var(--logoEase); animation-fill-mode: both; }
  /* せり上がり：下から上へ立ち上がるように現れる */
  html.hero-intro[data-hero-logo="rise"] .hero__logo-ch {
    -webkit-mask-image: none; mask-image: none;
    clip-path: inset(100% 0 0 0);
    animation-name: heroChRise; animation-duration: var(--logoDur); animation-timing-function: var(--logoEase); animation-fill-mode: both; }
  /* ふわっと下から：一文字ずつ、下からフェード＋スライドインでやわらかく現れる */
  html.hero-intro[data-hero-logo="softrise"] .hero__logo-ch {
    -webkit-mask-image: none; mask-image: none;
    opacity: 0; transform: translate3d(0, 34px, 0); backface-visibility: hidden;
    will-change: transform, opacity;
    animation-name: heroChSoftRise; animation-duration: var(--logoDur); animation-timing-function: var(--logoEase); animation-fill-mode: both; }
  /* ロゴ完了後：罫線→コピーがフェードイン、ヘッダーが少し上からスライドイン（同時） */
  html.hero-intro[data-motion] .hero__rule  { opacity: 0; animation: heroFadeUp 1.0s var(--ease) calc(var(--logoDone) + 0.1s) forwards; }
  html.hero-intro[data-motion] .hero__copy  { opacity: 0; animation: heroFadeUp 1.1s var(--ease) calc(var(--logoDone) + 0.18s) forwards; }
  html.hero-intro .site-header { animation: heroHeaderIn 1.0s var(--ease) calc(var(--logoDone) + 0.1s) both; }
  /* 最後に Scroll 文字、続けて罫線が上から下へ（縦LINE-MOV） */
  html.hero-intro .hero__scroll { opacity: 0; animation: heroScrollIn 1.0s var(--ease) calc(var(--logoDone) + 0.45s) forwards; }
  html.hero-intro .hero__scroll-line { transform: scaleY(0); transform-origin: top; animation: heroLineDown 0.9s var(--ease) calc(var(--logoDone) + 0.7s) forwards; }
}
@keyframes heroBgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroVeilOut { 0%, 12% { opacity: 1; } 100% { opacity: 0; } }
/* 出現（中央から開く）→保持→中央に閉じて消失→再び中央から出現。clip-pathで確実にレンダリング。 */
@keyframes heroChCycle {
  0%   { --hmA: 0%;  --hmB: 0%; }   /* 隠れている */
  24%  { --hmA: 50%; --hmB: 0%; }   /* 出現：中央から開いて出る */
  48%  { --hmA: 50%; --hmB: 0%; }   /* 保持 */
  66%  { --hmA: 50%; --hmB: 50%; }  /* 消失：真ん中からマスクが開いて中央から消える */
  70%  { --hmA: 0%;  --hmB: 50%; }  /* 隠れたまま hmA をリセット（不可視） */
  71%  { --hmA: 0%;  --hmB: 0%; }   /* 隠れたまま hmB もリセット（不可視） */
  100% { --hmA: 50%; --hmB: 0%; }   /* 再出現：また中央から開いて出る */
}
/* 連続パッ・パッ・パッ：中央から開く→中央から閉じる、を素早く3回繰り返して最後は開いたまま。 */
@keyframes heroChPulse {
  0%   { --hmA: 0%;  --hmB: 0%; }   /* 隠れ */
  10%  { --hmA: 50%; --hmB: 0%; }   /* 開く① */
  18%  { --hmA: 50%; --hmB: 0%; }
  27%  { --hmA: 50%; --hmB: 50%; }  /* 中央から閉じる */
  28%  { --hmA: 0%;  --hmB: 50%; }  /* 不可視のままリセット */
  29%  { --hmA: 0%;  --hmB: 0%; }
  39%  { --hmA: 50%; --hmB: 0%; }   /* 開く② */
  47%  { --hmA: 50%; --hmB: 0%; }
  56%  { --hmA: 50%; --hmB: 50%; }  /* 中央から閉じる */
  57%  { --hmA: 0%;  --hmB: 50%; }
  58%  { --hmA: 0%;  --hmB: 0%; }
  70%  { --hmA: 50%; --hmB: 0%; }   /* 開く③（最後） */
  100% { --hmA: 50%; --hmB: 0%; }   /* 開いたまま静止 */
}
@keyframes heroChBrush {
  0%   { clip-path: inset(0 0 100% 0); filter: blur(7px); }
  65%  { filter: blur(0.4px); }
  100% { clip-path: inset(0 0 0 0); filter: blur(0); }
}
@keyframes heroChRise {
  0%   { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes heroChSoftRise {
  0%   { opacity: 0; transform: translate3d(0, 34px, 0); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes heroLogoShadowIn { from { filter: none; } to { filter: drop-shadow(0 3px 18px rgba(20,16,12,0.42)); } }
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes heroHeaderIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes heroScrollIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes heroLineDown { to { transform: scaleY(1); } }

/* スクロール誘導の線が流れ落ちる */
.hero__scroll-line::after { content: ""; position: absolute; inset: 0; background: var(--ink);
  animation: scrollDrop 2.6s var(--ease-soft) infinite; }
@keyframes scrollDrop { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ====================================================================
   モーション（data-motion：Tweak連動）
   ==================================================================== */
html[data-motion="breath"] .hero__bg { animation: heroPan 32s var(--ease-soft) infinite alternate; }
html[data-motion="breath"] .hero__sheen { animation: heroSheen 17s var(--ease-soft) infinite alternate; }
@keyframes heroPan { from { transform: scale(1.04); } to { transform: scale(1.13) translate(-1.6%, -1.1%); } }
@keyframes heroSheen { from { transform: translate(-2%, -1%); opacity: 0.65; } to { transform: translate(3%, 2.4%); opacity: 1; } }
html[data-motion="still"] .hero__logo,
html[data-motion="still"] .hero__rule,
html[data-motion="still"] .hero__copy { animation: none; opacity: 1; transform: none; }
html[data-motion="still"] .hero__scroll-line::after { animation: none; }

/* ====================================================================
   3D造形バックドロップ（Intro / Concept）— gut.js が canvas を描画
   ==================================================================== */
.concept__obj, .intro__obj {
  position: absolute; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--ease); will-change: transform, opacity;
}
.concept__obj { inset: -6% -4% -2% -4%; }
.intro__obj { inset: -14% -8% -8% -2%; }
html.js .concept.is-in .concept__obj,
html.js .intro.is-in .intro__obj { opacity: 1; }
.concept__obj canvas { width: 100% !important; height: 100% !important; display: block; filter: blur(1.1px) saturate(0.92); }
.intro__obj canvas { width: 100% !important; height: 100% !important; display: block; filter: blur(0.7px) saturate(0.9); }
/* WebGL不可・印刷・低モーション時の保険：淡い陶のにじみ */
.concept__fallback, .intro__fallback { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }
.concept__fallback { background: radial-gradient(38% 42% at 64% 46%, rgba(226,179,166,0.34), rgba(226,179,166,0) 70%); }
.intro__fallback { background: radial-gradient(34% 40% at 70% 26%, rgba(214,189,180,0.30), rgba(214,189,180,0) 72%); }
html:not(.js) .concept__fallback, .concept.no-webgl .concept__fallback,
html:not(.js) .intro__fallback, .intro.no-webgl .intro__fallback { opacity: 1; }
html:not(.js) .concept__obj, .concept.no-webgl .concept__obj,
html:not(.js) .intro__obj, .intro.no-webgl .intro__obj { display: none; }

/* ====================================================================
   写真のマスクリビール（data-reveal の各モード）
   写真の上に紙面色の布(.photo__mask)を被せ、transform で物理的にずらして現す。
   【可視が基底】布は既定で開いた状態。reduced-motion・JS無効・印刷でも必ず見える。
   ==================================================================== */
.photo__mask { position: absolute; inset: 0; z-index: 2; background: var(--paper); pointer-events: none; transform: scaleX(0); }
.photo__mask.b { display: none; }
.sec--rose .photo__mask { background: #E0C6C5; }   /* 締めセクションは布も桜色 */

/* Who we are：上へ立ち上がる布 */
.overlaysec__mask { position: absolute; inset: 0; z-index: 2; background: var(--paper); pointer-events: none;
  transform-origin: center bottom; transform: scaleY(0); }
html.js .overlaysec:not(.is-in) .overlaysec__mask { transform: scaleY(1); }

@media (prefers-reduced-motion: no-preference) {
  html.js .overlaysec__mask { transition: transform 1.7s cubic-bezier(.22,.61,.21,1); }

  html.js[data-reveal] .photo__mask {
    transition: transform 1.6s cubic-bezier(.22,.61,.21,1), opacity 1.4s cubic-bezier(.22,.61,.21,1); }
  html.js[data-reveal] .photo img { transition: transform 2.2s cubic-bezier(.22,.61,.21,1); }
  html.js[data-reveal] .reveal { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }

  /* 内側写真の沈み込み（奥行き・全モード共通）：1.08→1.0 */
  html.js[data-reveal] .photo:not(.is-in) img { transform: scale(1.08); }
  html.js[data-reveal] .photo img { will-change: transform; }

  /* テキストの立ち上がり（写真figureと全面背景は除外） */
  html.js[data-reveal] .reveal:not(.is-in):not(.photo):not(.overlaysec__body) { opacity: 0; transform: translateY(14px); }

  /* ① 横（右originで左→右に払う） */
  html.js[data-reveal="mask-h"] .photo__mask.a { transform-origin: right center; transform: scaleX(0); }
  html.js[data-reveal="mask-h"] .photo:not(.is-in) .photo__mask.a { transform: scaleX(1); }
  /* ② 縦（下originで下→上に立ち上がる） */
  html.js[data-reveal="mask-v"] .photo__mask.a { transform-origin: center bottom; transform: scaleY(0); }
  html.js[data-reveal="mask-v"] .photo:not(.is-in) .photo__mask.a { transform: scaleY(1); }
  /* ③ 中央から開く（2枚が左右に割れる） */
  html.js[data-reveal="mask-c"] .photo__mask.a { right: 50%; transform: translateX(-101%); }
  html.js[data-reveal="mask-c"] .photo__mask.b { display: block; left: 50%; transform: translateX(101%); }
  html.js[data-reveal="mask-c"] .photo:not(.is-in) .photo__mask.a,
  html.js[data-reveal="mask-c"] .photo:not(.is-in) .photo__mask.b { transform: translateX(0); }
  /* ④ フェード＋クリップ（最も静か） */
  html.js[data-reveal="fade-clip"] .photo__mask.a { transform: none; opacity: 0; }
  html.js[data-reveal="fade-clip"] .photo:not(.is-in) .photo__mask.a { opacity: 1; }
  html.js[data-reveal="fade-clip"] .photo:not(.is-in) img { transform: scale(1.04); opacity: .0; }
  html.js[data-reveal="fade-clip"] .photo img { transition: transform 2.2s cubic-bezier(.22,.61,.21,1), opacity 1.4s cubic-bezier(.22,.61,.21,1); }
  /* ⑤ クリップ＋微パララックス（縦に立ち上がり、その後 parallax.js が漂わせる） */
  html.js[data-reveal="parallax"] .photo__mask.a { transform-origin: center bottom; transform: scaleY(0); }
  html.js[data-reveal="parallax"] .photo:not(.is-in) .photo__mask.a { transform: scaleY(1); }
}

/* ====================================================================
   フォールバック（印刷・PDF・JS無効・低モーション）— 必ず可視/静止
   ==================================================================== */
@media print {
  .concept__obj, .intro__obj { display: none !important; }
  .concept__fallback, .intro__fallback { opacity: 1 !important; }
  .photo__mask, .overlaysec__mask { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .photo img { transform: none !important; opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .concept__obj, .intro__obj { display: none !important; }
  .concept__fallback, .intro__fallback { opacity: 1 !important; }
  .photo__mask, .overlaysec__mask { display: none !important; }
  .photo img, .overlaysec__bg img { transform: none !important; opacity: 1 !important; }
}
html:not(.js) .photo__mask, html:not(.js) .overlaysec__mask { display: none; }