/*!
 * asbsb-animations.css — ASB Smart Builder 出現アニメ語彙（共有カタログアセット）
 * 相方 = asbsb-animations.js。className で当てる（保存正規形＝WPの追加CSSクラスに残る）。
 *
 * 設計の柱:
 *  - 隠す初期状態は必ず `html.anim-on`（JSが付与）配下だけ＝JS無効/エディタでは中身が見える（プログレッシブ）。
 *  - 連続系（sway/parallax）と隠す系は `prefers-reduced-motion` で最終静止状態に落ちる＝
 *    measure は reduced-motion エミュレートで「静止状態」を測れる（静的==WP を壊さない）。
 *  - フロントのみ enqueue（エディタには入れない）。装飾色は decorations の CSS 変数で上書き。
 *
 * 語彙（className）:
 *  出現(スクロールで1回)  : anim-fade / anim-fade-up / anim-fade-down / anim-fade-left / anim-fade-right / anim-zoom
 *  画像カラーワイプ        : anim-wipe（色帯が走って画像が出る。色= --anim-wipe-color）
 *                           向き(M7-3)= 無印:左→右 / anim-wipe-left / anim-wipe-down / anim-wipe-up（単体でも anim-wipe 併用でも可）
 *  文字ワイプ(M7-3)        : anim-clip / anim-clip-left / anim-clip-down / anim-clip-up（マスク開き＝帯なし。文字にも画像にも可）
 *  ぼかし出現(M7-3)        : anim-blur（フェード＋blur→鮮明。強さ= --anim-blur）
 *  ポップ(M7-3)            : anim-pop（ぽんっとバウンス出現。開始倍率= --anim-pop-from）
 *  起き上がり(M7-3)        : anim-flip（下辺を軸に3D起き上がり。角度= --anim-flip-deg）
 *  ライン(M7-3)            : anim-line / anim-line-left / anim-line-down / anim-line-up（線が伸びる。仕切り線・下線に）
 *  数字カウント(M7-3)      : anim-count（JS。中身は数字テキストのみ・最終表示は元テキストと完全一致）
 *  遅延・スタッガ          : anim-delay-1..6 / 親に anim-stagger（子へJSが順番に遅延）
 *  連続                    : anim-sway（ゆらゆら）
 *  タイピング              : anim-type（JS。実テキストはDOMに残す）
 *  パララックス            : anim-parallax（速度= --anim-parallax-speed 既定0.15、負で逆）
 *  スティッキー            : anim-sticky（top= --anim-sticky-top 既定1.5rem。※transform/backdrop-filter祖先に注意）
 *
 * 方向サフィックスの規約（fade 系と同一）: サフィックス＝演出の進行方向。
 *  例) anim-wipe-left＝帯が右→左へ走る / anim-clip-up＝下→上へ開く / anim-line-down＝上→下へ伸びる。
 *
 * 調整用 CSS 変数（M7-1/M7-3。既定値＝従来のハードコード値と同一。運用モードの「アニメ調整」パネルが :root で上書き。
 * 制作フェーズで変えたい時は decorations.css の :root で宣言＝静的とWPで共有される）:
 *  --anim-duration(.7s) / --anim-distance(30px 縦) / --anim-distance-x(40px 横) / --anim-zoom-from(.9)
 *  --anim-delay-step(.08s) / --anim-wipe-duration(1.1s) / --anim-sway-duration(4.5s)
 *  --anim-sway-y(-10px) / --anim-sway-rot(-1.5deg) / --anim-type-speed(45 ms・JSが読む)
 *  --anim-clip-duration(.9s) / --anim-blur(12px) / --anim-pop-from(.6) / --anim-flip-deg(55deg)
 *  --anim-count-duration(1.2s・JSが読む)
 */

/* ---- 出現系（scroll reveal）：隠す初期状態は html.anim-on ＋ motion許可時のみ ---- */
@media (prefers-reduced-motion: no-preference) {
  html.anim-on :is(.anim-fade, .anim-fade-up, .anim-fade-down, .anim-fade-left, .anim-fade-right, .anim-zoom) {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity var(--anim-duration, .7s) cubic-bezier(.22, .61, .36, 1), transform var(--anim-duration, .7s) cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--anim-delay, 0s);
  }
  html.anim-on .anim-fade-up    { transform: translateY(var(--anim-distance, 30px)); }
  html.anim-on .anim-fade-down  { transform: translateY(calc(-1 * var(--anim-distance, 30px))); }
  html.anim-on .anim-fade-left  { transform: translateX(var(--anim-distance-x, 40px)); }  /* 右から入る */
  html.anim-on .anim-fade-right { transform: translateX(calc(-1 * var(--anim-distance-x, 40px))); } /* 左から入る */
  html.anim-on .anim-zoom       { transform: scale(var(--anim-zoom-from, .9)); }

  html.anim-on :is(.anim-fade, .anim-fade-up, .anim-fade-down, .anim-fade-left, .anim-fade-right, .anim-zoom).is-inview {
    opacity: 1;
    transform: none;
  }
}

/* 遅延（スタッガ用。親 anim-stagger は JS が子に --anim-delay を振る。1歩= --anim-delay-step） */
html.anim-on .anim-delay-1 { --anim-delay: calc(1 * var(--anim-delay-step, .08s)); }
html.anim-on .anim-delay-2 { --anim-delay: calc(2 * var(--anim-delay-step, .08s)); }
html.anim-on .anim-delay-3 { --anim-delay: calc(3 * var(--anim-delay-step, .08s)); }
html.anim-on .anim-delay-4 { --anim-delay: calc(4 * var(--anim-delay-step, .08s)); }
html.anim-on .anim-delay-5 { --anim-delay: calc(5 * var(--anim-delay-step, .08s)); }
html.anim-on .anim-delay-6 { --anim-delay: calc(6 * var(--anim-delay-step, .08s)); }

/* ---- 画像カラーワイプ（kihan-tohoku 風：色帯が走って画像が出現）----
   向き（M7-3）: 無印=左→右。anim-wipe-left / anim-wipe-down / anim-wipe-up は単体でも anim-wipe 併用でも可
   （方向クラス自体が語彙＝:is() で本体機構に含める。上書きは「後勝ち」＝方向ルールを本体ルールの後に置く） */
:is(.anim-wipe, .anim-wipe-left, .anim-wipe-down, .anim-wipe-up) { overflow: hidden; }
/* position は :where()（詳細度0）で既定だけ与える＝絶対配置コラージュ（.c-cphoto 等の position:absolute）を
   読み込み順（このCSSは site.css の後）で潰さない。絶対配置でも ::after の基準になるので帯は正しく載る */
:where(.anim-wipe, .anim-wipe-left, .anim-wipe-down, .anim-wipe-up) { position: relative; }
:is(.anim-wipe, .anim-wipe-left, .anim-wipe-down, .anim-wipe-up)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--anim-wipe-color, currentColor);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.anim-wipe-left::after { transform-origin: right center; }
.anim-wipe-down::after { transform: scaleY(0); transform-origin: center top; }
.anim-wipe-up::after   { transform: scaleY(0); transform-origin: center bottom; }
/* 下地モディファイア: 重ねコラージュで、出現待ちの間に下の写真が透けて見えるのを防ぐ（使う時だけ anim-wipe に併用）。
   色は --anim-wipe-bg（既定 #fff）。html.anim-on 配下だけ＝JS無効/エディタ/reduced-motion では付かない（measure 不変） */
html.anim-on .anim-wipe-bg { background: var(--anim-wipe-bg, #fff); }
@media (prefers-reduced-motion: no-preference) {
  html.anim-on :is(.anim-wipe, .anim-wipe-left, .anim-wipe-down, .anim-wipe-up) :is(img, .wp-block-cover__image-background) { opacity: 0; }
  html.anim-on :is(.anim-wipe, .anim-wipe-left, .anim-wipe-down, .anim-wipe-up).is-inview::after {
    animation: anim-wipe-sweep var(--anim-wipe-duration, 1.1s) cubic-bezier(.77, 0, .18, 1) forwards;
    animation-delay: var(--anim-delay, 0s); /* anim-delay-* / anim-stagger の遅延に追従 */
  }
  html.anim-on .anim-wipe-left.is-inview::after { animation-name: anim-wipe-sweep-left; }
  html.anim-on .anim-wipe-down.is-inview::after { animation-name: anim-wipe-sweep-down; }
  html.anim-on .anim-wipe-up.is-inview::after   { animation-name: anim-wipe-sweep-up; }
  html.anim-on :is(.anim-wipe, .anim-wipe-left, .anim-wipe-down, .anim-wipe-up).is-inview :is(img, .wp-block-cover__image-background) {
    opacity: 1;
    /* 帯が覆っている間（掃引の中間点≒45.5%）に画像を出す。遅延に追従。.455*1.1s=.5005s＝従来の .5s と同値 */
    transition: opacity .01s calc(var(--anim-wipe-duration, 1.1s) * .455 + var(--anim-delay, 0s));
  }
}
/* 掃引: 伸びる原点＝進行方向の後ろ端 → 縮む原点＝進行方向の前端（先端が走り抜けて見える） */
@keyframes anim-wipe-sweep {
  0%     { transform: scaleX(0); transform-origin: left center; }
  48%    { transform: scaleX(1); transform-origin: left center; }
  52%    { transform: scaleX(1); transform-origin: right center; }
  100%   { transform: scaleX(0); transform-origin: right center; }
}
@keyframes anim-wipe-sweep-left {
  0%     { transform: scaleX(0); transform-origin: right center; }
  48%    { transform: scaleX(1); transform-origin: right center; }
  52%    { transform: scaleX(1); transform-origin: left center; }
  100%   { transform: scaleX(0); transform-origin: left center; }
}
@keyframes anim-wipe-sweep-down {
  0%     { transform: scaleY(0); transform-origin: center top; }
  48%    { transform: scaleY(1); transform-origin: center top; }
  52%    { transform: scaleY(1); transform-origin: center bottom; }
  100%   { transform: scaleY(0); transform-origin: center bottom; }
}
@keyframes anim-wipe-sweep-up {
  0%     { transform: scaleY(0); transform-origin: center bottom; }
  48%    { transform: scaleY(1); transform-origin: center bottom; }
  52%    { transform: scaleY(1); transform-origin: center top; }
  100%   { transform: scaleY(0); transform-origin: center top; }
}

/* ---- 文字ワイプ（M7-3・マスク開き）: 帯なしで拭き出すように出現。見出し・段落向け、画像にも可 ----
   方向は初期 inset の切り方だけ＝最終状態は inset(0)（measure は reduced-motion で clip 無し） */
@media (prefers-reduced-motion: no-preference) {
  html.anim-on :is(.anim-clip, .anim-clip-left, .anim-clip-down, .anim-clip-up) {
    transition: clip-path var(--anim-clip-duration, .9s) cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--anim-delay, 0s);
  }
  html.anim-on .anim-clip      { clip-path: inset(0 100% 0 0); } /* 左→右 */
  html.anim-on .anim-clip-left { clip-path: inset(0 0 0 100%); } /* 右→左 */
  html.anim-on .anim-clip-down { clip-path: inset(0 0 100% 0); } /* 上→下 */
  html.anim-on .anim-clip-up   { clip-path: inset(100% 0 0 0); } /* 下→上 */
  html.anim-on :is(.anim-clip, .anim-clip-left, .anim-clip-down, .anim-clip-up).is-inview { clip-path: inset(0 0 0 0); }
}

/* ---- ぼかし出現（M7-3）: ピンぼけ→鮮明＋フェード。写真・大見出し向け ---- */
@media (prefers-reduced-motion: no-preference) {
  html.anim-on .anim-blur {
    opacity: 0;
    filter: blur(var(--anim-blur, 12px));
    will-change: opacity, filter;
    transition: opacity var(--anim-duration, .7s) cubic-bezier(.22, .61, .36, 1), filter var(--anim-duration, .7s) cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--anim-delay, 0s);
  }
  html.anim-on .anim-blur.is-inview { opacity: 1; filter: none; }
}

/* ---- ポップ（M7-3）: ぽんっと弾んで出現（オーバーシュートは easeOutBack 系ベジェで表現）。アイコン・数字・ボタン向け ---- */
@media (prefers-reduced-motion: no-preference) {
  html.anim-on .anim-pop {
    opacity: 0;
    transform: scale(var(--anim-pop-from, .6));
    will-change: opacity, transform;
    transition: opacity calc(var(--anim-duration, .7s) * .6) cubic-bezier(.22, .61, .36, 1), transform var(--anim-duration, .7s) cubic-bezier(.34, 1.56, .64, 1);
    transition-delay: var(--anim-delay, 0s);
  }
  html.anim-on .anim-pop.is-inview { opacity: 1; transform: none; }
}

/* ---- 起き上がり（M7-3）: 下辺を軸に3Dで立ち上がる。カード・画像向け ---- */
@media (prefers-reduced-motion: no-preference) {
  html.anim-on .anim-flip {
    opacity: 0;
    transform: perspective(900px) rotateX(calc(-1 * var(--anim-flip-deg, 55deg)));
    transform-origin: 50% 100%;
    will-change: opacity, transform;
    transition: opacity var(--anim-duration, .7s) cubic-bezier(.22, .61, .36, 1), transform var(--anim-duration, .7s) cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--anim-delay, 0s);
  }
  html.anim-on .anim-flip.is-inview { opacity: 1; transform: none; }
}

/* ---- ライン（M7-3）: 線が伸びる（仕切り線・下線・separator に）。scale なので最終レイアウト不変 ---- */
@media (prefers-reduced-motion: no-preference) {
  html.anim-on :is(.anim-line, .anim-line-left, .anim-line-down, .anim-line-up) {
    will-change: transform;
    transition: transform var(--anim-duration, .7s) cubic-bezier(.77, 0, .18, 1);
    transition-delay: var(--anim-delay, 0s);
  }
  html.anim-on .anim-line      { transform: scaleX(0); transform-origin: left center; }
  html.anim-on .anim-line-left { transform: scaleX(0); transform-origin: right center; }
  html.anim-on .anim-line-down { transform: scaleY(0); transform-origin: center top; }
  html.anim-on .anim-line-up   { transform: scaleY(0); transform-origin: center bottom; }
  html.anim-on :is(.anim-line, .anim-line-left, .anim-line-down, .anim-line-up).is-inview { transform: none; }
}

/* ---- 連続：ゆらゆら ---- */
@media (prefers-reduced-motion: no-preference) {
  .anim-sway { animation: anim-sway var(--anim-sway-duration, 4.5s) ease-in-out infinite; will-change: transform; }
}
@keyframes anim-sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(var(--anim-sway-y, -10px)) rotate(var(--anim-sway-rot, -1.5deg)); }
}

/* ---- タイピング（JS駆動。キャレットのみCSS）---- */
.anim-type { }
.anim-type .anim-caret {
  display: inline-block;
  width: .08em;
  transform: translateY(.05em);
  background: currentColor;
  margin-left: .04em;
  animation: anim-caret-blink 1s steps(1) infinite;
}
@keyframes anim-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---- パララックス（JSがtransformを流す。willChangeだけCSS）---- */
.anim-parallax { will-change: transform; }

/* ---- スティッキー ---- */
.anim-sticky { position: sticky; top: var(--anim-sticky-top, 1.5rem); align-self: start; }

/* ---- SVG線描き→カラー（anim-draw・JS）: 白い線が描かれてからカラーの塗りが現れる。ロゴ・アイコン・線画向け ----
   対象=インラインSVG、または .svg を指す <img>（JS が実行時にインライン化＝保存正規形は wp:image のまま）。
   線色=--anim-draw-color(既定#fff)/太さ=--anim-draw-width(既定2・non-scaling＝拡縮で太さ不変)/
   描画=--anim-draw-dur(既定1.2s)/塗り出し=--anim-draw-fill-dur(既定.5s)/線消し=--anim-draw-fade(既定.4s)。
   塗りは SVG 自身の色（内部 .st0 等の fill）が戻ることで出す＝1つのSVGで線と色を兼ねる。 */
@media (prefers-reduced-motion: no-preference) {
  /* transition は JS が3プロパティまとめて設定（stroke-dashoffset＋fill＋stroke-opacity）＝
     インラインで stroke-dashoffset だけ指定すると fill/stroke-opacity の transition を消してしまい
     「線が見えないまま一瞬でカラー」になる罠を回避（M?） */
  html.anim-on .anim-draw svg path {
    stroke: var(--anim-draw-color, #fff);
    stroke-width: var(--anim-draw-width, 2);
    vector-effect: non-scaling-stroke;
  }
  /* 描画前＝塗りを消し白線だけ（SVG内 fill を上書き。JSが各pathへ dash を設定して線を隠す） */
  html.anim-on .anim-draw:not(.is-inview) svg path { fill: transparent; }
  /* 描画後＝塗りが戻り(:not外れる)、白線はフェードアウト */
  html.anim-on .anim-draw.is-inview svg path { stroke-opacity: 0; }
}

/* ---- reduced-motion：すべて最終静止状態（measure はこの状態を測る）---- */
@media (prefers-reduced-motion: reduce) {
  .anim-fade, .anim-fade-up, .anim-fade-down, .anim-fade-left, .anim-fade-right, .anim-zoom,
  .anim-pop, .anim-flip { opacity: 1 !important; transform: none !important; }
  .anim-blur { opacity: 1 !important; filter: none !important; }
  .anim-clip, .anim-clip-left, .anim-clip-down, .anim-clip-up { clip-path: none !important; }
  /* line は opacity を触らない（site.css 側で意図した半透明の線を reduce で潰さない） */
  .anim-line, .anim-line-left, .anim-line-down, .anim-line-up { transform: none !important; }
  .anim-sway, .anim-parallax { animation: none !important; transform: none !important; }
  :is(.anim-wipe, .anim-wipe-left, .anim-wipe-down, .anim-wipe-up)::after { display: none !important; }
  :is(.anim-wipe, .anim-wipe-left, .anim-wipe-down, .anim-wipe-up) :is(img, .wp-block-cover__image-background) { opacity: 1 !important; }
  .anim-type .anim-caret { display: none !important; }
  /* anim-draw は JS がインライン化しない＝<img>のカラーロゴのまま。手動インラインSVGがあれば塗りだけ見せ線は出さない */
  .anim-draw svg path { stroke: none !important; }
}