/* =============================================================
   data-anim.css — スクロールアニメーション ライブラリ
   - CSS カスタムプロパティで delay / duration / easing / color を制御
   - JS は is-shown クラスを付与するだけ（style属性は書き換えない）
   - --anim-global-duration でテーマエディターからグローバル速度制御
   ============================================================= */
[data-anim] {
  --anim-color: var(--color-primary, #6b705c);
  --anim-duration: calc(1s * var(--anim-global-duration, 1));
  --anim-delay: 0s;
  --anim-easing: cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
  transition:
    opacity var(--anim-duration) var(--anim-easing) var(--anim-delay),
    transform var(--anim-duration) var(--anim-easing) var(--anim-delay);
}

/* ===== delay プリセット ===== */
[data-anim-delay="100"] { --anim-delay: 100ms; }
[data-anim-delay="150"] { --anim-delay: 150ms; }
[data-anim-delay="200"] { --anim-delay: 200ms; }
[data-anim-delay="300"] { --anim-delay: 300ms; }
[data-anim-delay="400"] { --anim-delay: 400ms; }
[data-anim-delay="450"] { --anim-delay: 450ms; }
[data-anim-delay="500"] { --anim-delay: 500ms; }
[data-anim-delay="600"] { --anim-delay: 600ms; }
[data-anim-delay="800"] { --anim-delay: 800ms; }
[data-anim-delay="1000"] { --anim-delay: 1000ms; }
[data-anim-delay="1500"] { --anim-delay: 1500ms; }
[data-anim-delay="2000"] { --anim-delay: 2000ms; }

/* ===== duration プリセット（グローバル速度乗数適用） ===== */
[data-anim-duration="300"] { --anim-duration: calc(300ms * var(--anim-global-duration, 1)); }
[data-anim-duration="500"] { --anim-duration: calc(500ms * var(--anim-global-duration, 1)); }
[data-anim-duration="800"] { --anim-duration: calc(800ms * var(--anim-global-duration, 1)); }
[data-anim-duration="1000"] { --anim-duration: calc(1000ms * var(--anim-global-duration, 1)); }
[data-anim-duration="1200"] { --anim-duration: calc(1200ms * var(--anim-global-duration, 1)); }
[data-anim-duration="1500"] { --anim-duration: calc(1500ms * var(--anim-global-duration, 1)); }
[data-anim-duration="2000"] { --anim-duration: calc(2000ms * var(--anim-global-duration, 1)); }

/* ===== easing プリセット ===== */
[data-anim-easing="ease"] { --anim-easing: ease; }
[data-anim-easing="ease-in"] { --anim-easing: ease-in; }
[data-anim-easing="ease-out"] { --anim-easing: ease-out; }
[data-anim-easing="ease-in-out"] { --anim-easing: ease-in-out; }
[data-anim-easing="linear"] { --anim-easing: linear; }

/* ===== color プリセット（reveal 系のブロック色） ===== */
[data-anim-color="primary"]   { --anim-color: var(--color-primary); }
[data-anim-color="secondary"] { --anim-color: var(--color-secondary); }
[data-anim-color="accent"]    { --anim-color: var(--color-accent); }
[data-anim-color="neutral"]   { --anim-color: var(--color-neutral); }
[data-anim-color="base-100"]  { --anim-color: var(--color-base-100); }
[data-anim-color="base-200"]  { --anim-color: var(--color-base-200); }
[data-anim-color="base-300"]  { --anim-color: var(--color-base-300); }

/* =============================================================
   アニメーション種類: 初期状態（非表示）
   ============================================================= */
[data-anim="fade-in"]    { opacity: 0; }
[data-anim="fade-up"]    { opacity: 0; transform: translateY(40px); }
[data-anim="fade-down"]  { opacity: 0; transform: translateY(-40px); }
[data-anim="fade-left"]  { opacity: 0; transform: translateX(-60px); }
[data-anim="fade-right"] { opacity: 0; transform: translateX(60px); }
[data-anim="zoom-in"]    { opacity: 0; transform: scale(0.9); }
[data-anim="zoom-out"] {
  opacity: 0;
  overflow: hidden;
}
[data-anim="zoom-out"] > * {
  transform: scale(1.1);
  transition: transform var(--anim-duration) var(--anim-easing) var(--anim-delay);
}
[data-anim="blur-in"] {
  opacity: 0;
  filter: blur(10px);
  transition:
    opacity var(--anim-duration) var(--anim-easing) var(--anim-delay),
    filter var(--anim-duration) var(--anim-easing) var(--anim-delay);
}
[data-anim="blur-in-up"] {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(40px);
  transition:
    opacity var(--anim-duration) var(--anim-easing) var(--anim-delay),
    filter var(--anim-duration) var(--anim-easing) var(--anim-delay),
    transform var(--anim-duration) var(--anim-easing) var(--anim-delay);
}

[data-anim="clip-up"] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--anim-duration) var(--anim-easing) var(--anim-delay);
}
[data-anim="clip-down"] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--anim-duration) var(--anim-easing) var(--anim-delay);
}
[data-anim="clip-left"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--anim-duration) var(--anim-easing) var(--anim-delay);
}
[data-anim="clip-right"] {
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--anim-duration) var(--anim-easing) var(--anim-delay);
}

/* ===== 表示状態（is-shown 付与後） ===== */
[data-anim="fade-in"].is-shown,
[data-anim="fade-up"].is-shown,
[data-anim="fade-down"].is-shown,
[data-anim="fade-left"].is-shown,
[data-anim="fade-right"].is-shown,
[data-anim="zoom-in"].is-shown,
[data-anim="blur-in-up"].is-shown {
  opacity: 1;
  transform: none;
  filter: none;
}
[data-anim="zoom-out"].is-shown {
  opacity: 1;
}
[data-anim="zoom-out"].is-shown > * {
  transform: scale(1); /* 1.1 から 1.0 へ戻る（ズームアウト） */
}
[data-anim="blur-in"].is-shown {
  opacity: 1;
  filter: none;
}
[data-anim="clip-up"].is-shown,
[data-anim="clip-down"].is-shown,
[data-anim="clip-left"].is-shown,
[data-anim="clip-right"].is-shown {
  clip-path: inset(0);
}

/* =============================================================
   reveal / reveal-wipe（ブロックリビール）
   ============================================================= */

/* --- 1. インライン型（既存：inline-block） --- 
   中身のサイズに自動でフィットするタイプ */
[data-anim="reveal"],
[data-anim="reveal-wipe"] {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  position: relative;
  transition: none;
}

/* --- 2. Flex型（新規：flex + width: 100%） --- 
   親要素の幅を使い、Flexboxのレイアウト機能を活かすタイプ */
[data-anim="reveal-flex"],
[data-anim="reveal-wipe-flex"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: none;
}

/* --- 共通：カーテン（疑似要素）の設定 --- */
[data-anim="reveal"]::before,
[data-anim="reveal-wipe"]::before,
[data-anim="reveal-flex"]::before,
[data-anim="reveal-wipe-flex"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--anim-color);
  z-index: 2;
  pointer-events: none;
}

/* --- reveal系：カーテンがスライドアウト --- */
[data-anim="reveal"]::before,
[data-anim="reveal-flex"]::before {
  transform: translateX(0);
}

[data-anim="reveal"].is-shown::before,
[data-anim="reveal-flex"].is-shown::before {
  animation: reveal-swipe 0.9s cubic-bezier(0.4, 0, 0.2, 1) var(--anim-delay, 0s) forwards;
}

/* --- reveal-wipe系：ブロックが通過 --- */
[data-anim="reveal-wipe"]::before,
[data-anim="reveal-wipe-flex"]::before {
  transform: translateX(-101%);
}

[data-anim="reveal-wipe"] > *,
[data-anim="reveal-wipe-flex"] > * {
  opacity: 0;
  transition: opacity 0s calc(var(--anim-delay, 0s) + 0.4s);
}

[data-anim="reveal-wipe"].is-shown > *,
[data-anim="reveal-wipe-flex"].is-shown > * {
  opacity: 1;
}

[data-anim="reveal-wipe"].is-shown::before,
[data-anim="reveal-wipe-flex"].is-shown::before {
  animation: reveal-block 0.8s cubic-bezier(0.77, 0, 0.175, 1) var(--anim-delay, 0s) forwards;
}

/* --- Keyframes --- */
@keyframes reveal-swipe {
  0%   { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

@keyframes reveal-block {
  0%   { transform: translateX(-101%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

/* =============================================================
   bg-zoom / bg-pan（背景画像エフェクト）
   ※独自のtransition設定を使うためデフォルトを上書き
   ============================================================= */
[data-anim="bg-zoom"] {
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.5s ease, transform 15s ease-out;
  will-change: transform;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を枠いっぱいにトリミング */
}

[data-anim="bg-zoom"].is-shown {
  opacity: 1;
  transform: scale(1.15);
}

[data-anim="bg-pan"] {
  opacity: 0;
  transform: scale(1.15) translateX(0);
  transition: opacity 1.5s ease, transform 20s linear;
  will-change: transform;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を枠いっぱいにトリミング */
}

[data-anim="bg-pan"].is-shown {
  opacity: 1;
  transform: scale(1.15) translateX(-5%);
}

:has(> [data-anim="bg-zoom"]),
:has(> [data-anim="bg-pan"]) {
  overflow: hidden;
  display: flex; /* 隙間防止 & レイアウトの安定 */
  /* width: 100%;  必要に応じて追加 */
  /* height: 400px; など、親に高さがないと画像が表示されないケースに注意 */
}
/* =============================================================
   marquee（無限横スクロール）
   - 親要素に付与。子要素を複数並べることでループを形成。
   ============================================================= */

[data-anim="marquee"] {
  /* 一周の速度。デフォルトは30s（グローバル倍数対応） */
  --anim-duration: calc(30s * var(--anim-global-duration, 1));
  --anim-easing: linear;

  display: flex;    /* 強制的に横並び */
  flex-direction: row; /* 縦並び設定を上書き */
  flex-wrap: nowrap;           /* 絶対に折り返さない */
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* 子要素（スライドするコンテンツ） */
[data-anim="marquee"] > * {
  flex-shrink: 0;   /* 親の幅に合わせて縮小されるのを防ぐ */
  display: block;
  white-space: nowrap; /* テキスト内の改行を防ぐ */
  
  /* 共通のプリセットを反映 */
  animation-name: marquee-scroll;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--anim-easing);
  animation-delay: var(--anim-delay, 0s);
  animation-iteration-count: infinite;
  
  /* 他のアニメーションの opacity:0 や transform をリセット */
  opacity: 1 !important;
  transform: none; 
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}