/* ==========================================================
   MONOPAGE Scroll-in Animations  v1.2
   ----------------------------------------------------------
   アニメーション : mp-in-*   （ブロックの「追加CSSクラス」へ）
   遅延           : mp-delay-100 〜 mp-delay-1000（全アニメ共通）
   速度           : mp-dur-fast / mp-dur-slow（全アニメ共通）
   繰り返し       : mp-repeat（画面外に出ると戻り、再表示で再生）
   ========================================================== */


/* ========================================
   SETTINGS（サイトごとにここだけ調整）
======================================== */

:root {
  --mp-dur: 1s;
  --mp-ease: cubic-bezier(.22, 1, .36, 1);
  --mp-ease-curtain: cubic-bezier(.77, 0, .175, 1);
  --mp-distance: 32px;
  --mp-cover-color: var(--wp--preset--color--swl-main, var(--color_main, #1b1f1d));
  --mp-cover-from: left center;
  --mp-cover-to: right center;
  --mp-cover-anim: mpCoverPassX;
  --mp-marker-color: rgba(255, 214, 80, .55);
  --mp-split-step: 45ms;
  --mp-stagger-step: 120ms;
}


/* ========================================
   BASE（mp-in-* 共通のトランジション）
======================================== */

.mp-js [class*="mp-in-"] {
  transition-property: opacity, translate, scale, rotate, filter, clip-path, transform;
  transition-duration: var(--mp-dur);
  transition-timing-function: var(--mp-ease);
  transition-delay: var(--mp-delay, 0ms);
}


/* ========================================
   TEXT
======================================== */

/* --- fade-up：下からフワッと（定番） --- */
.mp-js .mp-in-fade-up {
  opacity: 0;
  translate: 0 var(--mp-distance);
}

/* --- fade-down：上から --- */
.mp-js .mp-in-fade-down {
  opacity: 0;
  translate: 0 calc(var(--mp-distance) * -1);
}

/* --- slide-left：左からスライド --- */
.mp-js .mp-in-slide-left {
  opacity: 0;
  translate: calc(var(--mp-distance) * -1.5) 0;
}

/* --- slide-right：右からスライド --- */
.mp-js .mp-in-slide-right {
  opacity: 0;
  translate: calc(var(--mp-distance) * 1.5) 0;
}

/* --- fade：その場でフェード --- */
.mp-js .mp-in-fade {
  opacity: 0;
}

/* --- blur：ぼかしからピントが合う --- */
.mp-js .mp-in-blur {
  opacity: 0;
  filter: blur(12px);
  scale: 1.04;
}

.mp-js .mp-in-fade-up.is-inview,
.mp-js .mp-in-fade-down.is-inview,
.mp-js .mp-in-slide-left.is-inview,
.mp-js .mp-in-slide-right.is-inview,
.mp-js .mp-in-fade.is-inview,
.mp-js .mp-in-blur.is-inview {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  scale: 1;
}

/* --- split：1文字ずつ表示（JSで自動分割） --- */
.mp-js .mp-in-split .mp-char {
  display: inline-block;
  opacity: 0;
  translate: 0 .6em;
  filter: blur(4px);
  transition:
    opacity .8s var(--mp-ease),
    translate .8s var(--mp-ease),
    filter .8s var(--mp-ease);
  transition-delay: calc(var(--mp-delay, 0ms) + var(--mp-ci, 0) * var(--mp-split-step));
}

.mp-js .mp-in-split.is-inview .mp-char {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}

/* --- mask-up：マスクの下からせり上がる（見出し向け） --- */
.mp-js .mp-in-mask-up {
  overflow: hidden;
}

.mp-js .mp-in-mask-up .mp-mask-inner {
  display: block;
  translate: 0 105%;
  transition: translate calc(var(--mp-dur) * 1.1) var(--mp-ease) var(--mp-delay, 0ms);
}

.mp-js .mp-in-mask-up.is-inview .mp-mask-inner {
  translate: 0 0;
}

/* --- marker：マーカーが引かれる
       段落に付与 → 中の mark / .mp-mark / SWELLマーカー(.swl-marker)が対象 --- */
.mp-in-marker mark,
.mp-in-marker .mp-mark {
  color: inherit;
  background-image: linear-gradient(transparent 60%, var(--mp-marker-color) 60%);
  background-repeat: no-repeat;
}

.mp-js .mp-in-marker mark,
.mp-js .mp-in-marker .mp-mark,
.mp-js .mp-in-marker .swl-marker {
  background-repeat: no-repeat !important;
  background-size: 0% 100% !important;
  transition: background-size 1.2s var(--mp-ease-curtain) calc(var(--mp-delay, 0ms) + 300ms);
}

.mp-js .mp-in-marker.is-inview mark,
.mp-js .mp-in-marker.is-inview .mp-mark,
.mp-js .mp-in-marker.is-inview .swl-marker {
  background-size: 100% 100% !important;
}


/* ========================================
   IMAGE（SWELL画像ブロックの figure に付与）
======================================== */

/* --- reveal-x / reveal-y / circle：クリップで現れる --- */
.mp-in-reveal-x,
.mp-in-reveal-y,
.mp-in-circle {
  --mp-ease: var(--mp-ease-curtain);
  --mp-dur: 1.3s;
  overflow: hidden;
}

.mp-js .mp-in-reveal-x {
  clip-path: inset(0 100% 0 0);
}

.mp-js .mp-in-reveal-y {
  clip-path: inset(100% 0 0 0);
}

.mp-js .mp-in-circle {
  clip-path: circle(0% at 50% 50%);
}

.mp-js .mp-in-reveal-x.is-inview,
.mp-js .mp-in-reveal-y.is-inview {
  clip-path: inset(0 0 0 0);
}

.mp-js .mp-in-circle.is-inview {
  clip-path: circle(75% at 50% 50%);
}

/* 中の画像は少し寄った状態から戻る */
.mp-js .mp-in-reveal-x img,
.mp-js .mp-in-reveal-y img,
.mp-js .mp-in-circle img {
  scale: 1.2;
  transition: scale 1.8s var(--mp-ease) var(--mp-delay, 0ms);
}

.mp-js .mp-in-reveal-x.is-inview img,
.mp-js .mp-in-reveal-y.is-inview img,
.mp-js .mp-in-circle.is-inview img {
  scale: 1;
}

/* --- cover：色の帯が通過して画像が現れる（カーテンリビール）
       帯は JS が .mp-cover-band として差し込む（SWELL側の ::after と競合しないように）
       色・方向は下の「COVER MODIFIERS」のクラスで変更
       （figure にも、親のセクションにも付けられる。親に付けると中の cover 全部に効く） --- */
.mp-in-cover {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.mp-cover-band {
  display: none;
}

.mp-js .mp-cover-band {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  margin: 0;
  padding: 0;
  background: var(--mp-cover-color);
  transform: scale(0);
  transform-origin: var(--mp-cover-from);
  pointer-events: none;
}

.mp-js .mp-in-cover.is-inview .mp-cover-band {
  animation-name: var(--mp-cover-anim);
  animation-duration: 1.4s;
  animation-timing-function: var(--mp-ease-curtain);
  animation-delay: var(--mp-delay, 0ms);
  animation-fill-mode: both;
}

.mp-js .mp-in-cover > :not(.mp-cover-band) {
  opacity: 0;
  scale: 1.08;
}

.mp-js .mp-in-cover.is-inview > :not(.mp-cover-band) {
  opacity: 1;
  scale: 1;
  transition:
    opacity 0s linear calc(var(--mp-delay, 0ms) + .7s),
    scale 1.6s var(--mp-ease) calc(var(--mp-delay, 0ms) + .7s);
}

/* 横方向（左右） */
@keyframes mpCoverPassX {
  0% {
    transform: scaleX(0);
    transform-origin: var(--mp-cover-from);
  }
  50% {
    transform: scaleX(1);
    transform-origin: var(--mp-cover-from);
  }
  50.1% {
    transform: scaleX(1);
    transform-origin: var(--mp-cover-to);
  }
  100% {
    transform: scaleX(0);
    transform-origin: var(--mp-cover-to);
  }
}

/* 縦方向（上下） */
@keyframes mpCoverPassY {
  0% {
    transform: scaleY(0);
    transform-origin: var(--mp-cover-from);
  }
  50% {
    transform: scaleY(1);
    transform-origin: var(--mp-cover-from);
  }
  50.1% {
    transform: scaleY(1);
    transform-origin: var(--mp-cover-to);
  }
  100% {
    transform: scaleY(0);
    transform-origin: var(--mp-cover-to);
  }
}

/* --- zoom：寄った画像がゆっくり引いていく --- */
.mp-in-zoom {
  overflow: hidden;
}

.mp-js .mp-in-zoom {
  opacity: 0;
}

.mp-js .mp-in-zoom img {
  scale: 1.25;
  transition: scale 2s var(--mp-ease) var(--mp-delay, 0ms);
}

.mp-js .mp-in-zoom.is-inview {
  opacity: 1;
}

.mp-js .mp-in-zoom.is-inview img {
  scale: 1;
}

/* --- parallax：スクロールに合わせて中の画像がゆっくり動く（常時連動）
       強さは --mp-speed（0.05〜0.15 推奨／初期値 0.1） --- */
.mp-parallax {
  overflow: hidden;
}

.mp-parallax img {
  scale: calc(1 + var(--mp-speed, .1) * 2);
  translate: 0 var(--mp-py, 0);
  will-change: translate;
}

/* --- parallax-el：要素そのものが別の速度で動く（装飾テキスト・あしらい画像向け）
       強さは --mp-speed（初期値 0.3 ／ マイナスで逆方向） --- */
.mp-parallax-el {
  translate: 0 var(--mp-py, 0);
  will-change: translate;
}


/* ========================================
   OTHER
======================================== */

/* --- scale-up：小さい状態から立ち上がる（ボタン・アイコン向け） --- */
.mp-js .mp-in-scale-up {
  opacity: 0;
  scale: .86;
}

.mp-js .mp-in-scale-up.is-inview {
  opacity: 1;
  scale: 1;
}

/* --- flip：手前に倒れてくる（カード向け） --- */
.mp-js .mp-in-flip {
  opacity: 0;
  transform: perspective(900px) rotateX(-60deg);
  transform-origin: center top;
}

.mp-js .mp-in-flip.is-inview {
  opacity: 1;
  transform: perspective(900px) rotateX(0deg);
}

/* --- stagger：親に付けると子要素が順番に表示
       SWELLのカラム・リスト・カード一覧などにそのまま使える --- */
.mp-js .mp-stagger-item {
  opacity: 0;
  translate: 0 var(--mp-distance);
  transition:
    opacity var(--mp-dur) var(--mp-ease),
    translate var(--mp-dur) var(--mp-ease),
    scale var(--mp-dur) var(--mp-ease);
  transition-delay: calc(var(--mp-delay, 0ms) + var(--mp-i, 0) * var(--mp-stagger-step));
}

.mp-js .mp-stagger--pop .mp-stagger-item {
  translate: 0 0;
  scale: .88;
}

.mp-js .mp-stagger.is-inview .mp-stagger-item {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* --- count：数字がカウントアップ（JS） --- */
.mp-count {
  font-variant-numeric: tabular-nums;
}


/* ========================================
   COVER MODIFIERS（カバーリビールの色・方向）
   figure か、親のセクション（フルワイド等）の追加CSSクラスへ
   例：mp-in-cover mp-cover--rtl mp-cover--deep02
======================================== */

/* --- 方向 --- */
.mp-cover--ltr {
  --mp-cover-from: left center;
  --mp-cover-to: right center;
  --mp-cover-anim: mpCoverPassX;
}

.mp-cover--rtl {
  --mp-cover-from: right center;
  --mp-cover-to: left center;
  --mp-cover-anim: mpCoverPassX;
}

.mp-cover--up {
  --mp-cover-from: center bottom;
  --mp-cover-to: center top;
  --mp-cover-anim: mpCoverPassY;
}

.mp-cover--down {
  --mp-cover-from: center top;
  --mp-cover-to: center bottom;
  --mp-cover-anim: mpCoverPassY;
}

/* --- 色（SWELLのカラー設定に連動） --- */
.mp-cover--main      { --mp-cover-color: var(--wp--preset--color--swl-main, var(--color_main, #1b1f1d)); }
.mp-cover--main-thin { --mp-cover-color: var(--wp--preset--color--swl-main-thin, var(--color_main_thin, #e8ecf3)); }
.mp-cover--text      { --mp-cover-color: var(--color_text, #333333); }
.mp-cover--deep01    { --mp-cover-color: var(--wp--preset--color--swl-deep-01, #e44141); }
.mp-cover--deep02    { --mp-cover-color: var(--wp--preset--color--swl-deep-02, #3d79d5); }
.mp-cover--deep03    { --mp-cover-color: var(--wp--preset--color--swl-deep-03, #63a84d); }
.mp-cover--deep04    { --mp-cover-color: var(--wp--preset--color--swl-deep-04, #f09f4d); }
.mp-cover--pale01    { --mp-cover-color: var(--wp--preset--color--swl-pale-01, #fff2f0); }
.mp-cover--pale02    { --mp-cover-color: var(--wp--preset--color--swl-pale-02, #f3f8fd); }
.mp-cover--pale03    { --mp-cover-color: var(--wp--preset--color--swl-pale-03, #f1f9ee); }
.mp-cover--pale04    { --mp-cover-color: var(--wp--preset--color--swl-pale-04, #fdf9ee); }

/* --- 色（固定） --- */
.mp-cover--white     { --mp-cover-color: #ffffff; }
.mp-cover--black     { --mp-cover-color: #111111; }

/* --- サイト独自の色を足すとき（例）
.mp-cover--gold { --mp-cover-color: #b89b5e; }
--- */


/* ========================================
   DELAY（全アニメ共通）
======================================== */

.mp-delay-100  { --mp-delay: 100ms; }
.mp-delay-200  { --mp-delay: 200ms; }
.mp-delay-300  { --mp-delay: 300ms; }
.mp-delay-400  { --mp-delay: 400ms; }
.mp-delay-500  { --mp-delay: 500ms; }
.mp-delay-600  { --mp-delay: 600ms; }
.mp-delay-700  { --mp-delay: 700ms; }
.mp-delay-800  { --mp-delay: 800ms; }
.mp-delay-900  { --mp-delay: 900ms; }
.mp-delay-1000 { --mp-delay: 1000ms; }


/* ========================================
   DURATION（全アニメ共通）
======================================== */

.mp-dur-fast { --mp-dur: .6s; }
.mp-dur-slow { --mp-dur: 1.6s; }


/* ========================================
   TB / SP：ディレイ解除（不要なら削除）
======================================== */

@media (max-width: 960px) {
  [class*="mp-delay-"] {
    --mp-delay: 0ms;
  }
}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {
  .mp-js [class*="mp-in-"],
  .mp-js .mp-char,
  .mp-js .mp-mask-inner,
  .mp-js .mp-stagger-item,
  .mp-js .mp-in-cover > :not(.mp-cover-band),
  .mp-js .mp-in-zoom img,
  .mp-js .mp-in-reveal-x img,
  .mp-js .mp-in-reveal-y img,
  .mp-js .mp-in-circle img {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .mp-js .mp-cover-band {
    display: none;
  }

  .mp-js .mp-in-marker mark,
  .mp-js .mp-in-marker .mp-mark,
  .mp-js .mp-in-marker .swl-marker {
    background-size: 100% 100% !important;
    transition: none !important;
  }

  .mp-parallax img,
  .mp-parallax-el {
    translate: none !important;
  }
}