/* ============================================================
   A から作る動きのあるスタイル（テーマに @page motion）の動き（motion.css）

   - 対象は <html class="mv"> のページだけ。scripts/variants.py が A から作り、scripts/motion.py が
     テーマの @motion の動きを足す。どの動きを使うかは <html data-mv="…">（motion.js が読む）
   - 動きは <html> の印で切り替える（美容室 D の premium.css と同じ考え方）
       .mv-boot      … 描画の前に head の短いスクリプトが付ける。スクロールで出す前の要素と、ヒーローの文字を隠しておく
                       （motion.js が読めなかったときも、4秒で必ず見せる）
       .is-opening   … 開いたときの演出の最中（head のスクリプトが付け、motion.js が外す。
                       motion.js が読めなくても、幕は CSS だけで消える）
       .mv-live      … motion.js が動いている
       .mv-ready     … 開いたときの演出が終わり、ヒーローの文字が出始めた
       .mv-settled   … ヒーローの文字が出終わった（動きを止めてから戻しても、出方をくり返さない）
       .mv-hero-away … ヒーローが画面の外にある（ヒーローの中の動きを止めて、処理を減らす）
       .is-still     … 動きを止めている（OS の「視差効果を減らす」か、ヒーローの右上の「動きを止める」ボタン）
     JavaScript が動かないときと .is-still のときは、すべて最初から見える止まった表示になる
   - 色と位置はテーマの変数（--c-*・--mv-*）から取る。業種ごとの値は themes/<業種>.css の @page motion のブロック
   - 飾り（湯気・光・音符など）は、写真に重ねる色（--hero-overlay）の下に置く。文字の読みやすさは
     contrast.py が測る「白い写真に重ねる色」より下がらない
   ============================================================ */

.mv {
  --mv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mv-ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --mv-slide: 7s;                 /* ヒーローの写真を切り替える間隔（motion.js もこの値を読む） */
  --mv-slide-pair: 3s;            /* 施工の前の写真を見せる長さ。次の写真がローラー・光の帯で入るときだけ（motion.js が読む） */
  --mv-slide-first: 2.5s;         /* 開いてから最初に切り替えるまで。替わるときの動き（ローラー・光の帯など）を早めに見せる（motion.js が読む） */
  --mv-fade: 1.6s;                /* 切り替えで、次の写真が重なって現れる長さ（motion.js も読む） */
  --mv-zoom: 1.12;                /* 写真がゆっくり寄る倍率 */
  --mv-glint: #ffffff;            /* きらめき・音符の色 */
  --mv-tile: var(--c-text);       /* タイルの色（2色を市松に並べる） */
  --mv-tile-2: var(--c-accent-deco);
  --mv-mark: var(--c-accent-deco);
  --mv-toggle-bg: var(--c-text);
  --mv-toggle-fg: var(--c-bg);
  --mv-opening-bg: var(--c-bg);
  --mv-opening-ink: var(--c-text);
  --mv-opening-accent: var(--c-accent-deco);
  --mv-window-overlay: transparent;
}

.mv body {
  overflow-x: clip;
}

.mv .hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.mv .section {
  position: relative;
  overflow-x: clip;
}

/* ============ 動きを止める・戻すボタン（ヒーローの右上。JavaScript が動くときだけ出る） ============ */
/* 5秒を超えて自動で動くのはヒーローの中だけ（ほかは読み進めたときに一度動くだけ）なので、ヒーローに置く。
   画面に固定すると、スマホでヒーローや本文の文字に重なる */
.mv-toggle {
  display: none;
}

.mv-live .mv-toggle {
  position: absolute;
  top: clamp(12px, 2.5vw, 20px);
  right: max(clamp(12px, 2.5vw, 20px), env(safe-area-inset-right));
  z-index: 5;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--mv-toggle-fg);
  border-radius: 50%;
  background: var(--mv-toggle-bg);
  color: var(--mv-toggle-fg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

/* 写真の上でも見えるよう、白と黒の2色の枠にする */
.mv-toggle:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 0;
  box-shadow: 0 0 0 6px #111111;
}

.mv-toggle__icon {
  position: relative;
  width: 16px;
  height: 16px;
}

/* 動いているあいだは一時停止の2本線、止めているあいだは再生の三角 */
.mv-toggle__icon::before {
  content: "";
  position: absolute;
  inset: 1px 3px;
  background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px);
}

.is-still .mv-toggle__icon::before {
  inset: 0 1px 0 4px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* 見比べる一覧の大きな表示（?embed=1）ではボタンを残す（その中でも動きを止められるように）。カード（?embed=card）は動きがない */
.is-opening .mv-toggle,
html[data-demo-embed="card"] .mv-toggle,
html[data-shot] .mv-toggle {
  visibility: hidden;
}

/* 写真の仮置き枠の説明文は、右上のボタンと重ならないよう左上に置く */
.mv .hero__media > .ph {
  place-items: start start;
}

/* ============ 開いたときの演出（幕） ============ */
.mv-opening {
  display: none;
}

.is-opening .mv-opening {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--mv-opening-ink);
}

.mv-opening__inner {
  position: relative;
  display: grid;
  justify-items: center;
}

.mv-opening__name {
  color: var(--mv-opening-ink);
  font-family: var(--font-hero);
  font-size: clamp(2.5rem, 12vw, 5rem);
  font-weight: var(--fw-hero);
  line-height: 1.2;
  letter-spacing: 0.12em;
}

.mv-opening__name span {
  display: inline-block;
}

@keyframes mv-hide {
  to {
    visibility: hidden;
  }
}

@keyframes mv-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes mv-char-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.5em, 0);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* まばたき：上下のまぶた（幕）が閉じた状態から、まつげの線が引かれ、まぶたが開く（約1.8秒） */
.mv-opening--blink {
  --mv-opening-total: 1.8s;
}

.is-opening .mv-opening--blink {
  background: transparent;
  animation: mv-hide 0s linear 1.8s forwards;
}

.mv-lid {
  position: absolute;
  right: -10%;
  left: -10%;
  height: 56%;
  background: var(--mv-opening-bg);
}

.mv-lid--top {
  top: 0;
  border-radius: 0 0 50% 50% / 0 0 22% 22%;
  animation: mv-lid-up 1s var(--mv-ease-io) 0.8s both;
}

.mv-lid--bottom {
  bottom: 0;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  animation: mv-lid-down 1s var(--mv-ease-io) 0.8s both;
}

@keyframes mv-lid-up {
  to {
    transform: translate3d(0, -104%, 0);
  }
}

@keyframes mv-lid-down {
  to {
    transform: translate3d(0, 104%, 0);
  }
}

.mv-opening__lash {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(78vw, 560px);
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--mv-opening-accent);
  stroke-width: 3;
  stroke-linecap: round;
  transform: translate(-50%, 52%);
}

.mv-opening__lash path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mv-draw 0.6s var(--mv-ease) 0.1s forwards;
}

.mv-opening__lash .mv-opening__hairs {
  stroke-width: 2.4;
  animation-delay: 0.4s;
}

/* 湯気のロゴ：屋号が上がり、屋号から湯気が立ちのぼって、画面ごと消える（約1.7秒） */
.mv-opening--steam {
  --mv-opening-total: 1.75s;
}

.is-opening .mv-opening--steam {
  background: var(--mv-opening-bg);
  animation: mv-fade-away 0.45s ease 1.3s forwards;
}

@keyframes mv-fade-away {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.mv-opening--steam .mv-opening__name span {
  animation: mv-char-in 0.7s var(--mv-ease) both;
  animation-delay: calc(0.08s + var(--i) * 0.09s);
}

.mv-opening__steam {
  position: absolute;
  bottom: 88%;
  left: 50%;
  width: 0;
  height: 0;
}

.mv-opening__steam i {
  position: absolute;
  bottom: 0;
  width: 44px;
  height: 120px;
  margin-left: -22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%);
  filter: blur(5px);
  opacity: 0;
  animation: mv-wisp 1.3s ease-out both;
}

.mv-opening__steam i:nth-child(1) {
  left: -46px;
  animation-delay: 0.35s;
}

.mv-opening__steam i:nth-child(2) {
  left: 0;
  animation-delay: 0.2s;
}

.mv-opening__steam i:nth-child(3) {
  left: 46px;
  animation-delay: 0.5s;
}

@keyframes mv-wisp {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.5, 0.6);
  }

  35% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate3d(8px, -70px, 0) scale(1.2, 1.5) skewX(-8deg);
  }
}

/* 音符のイントロ：五線が引かれ、音符が1つずつ乗り、屋号が出てから幕が上がる（約2.4秒） */
.mv-opening--notes {
  --mv-opening-total: 2.4s;
}

.is-opening .mv-opening--notes {
  background: var(--mv-opening-bg);
  animation: mv-lift 0.75s var(--mv-ease-io) 1.65s both;
}

@keyframes mv-lift {
  from {
    clip-path: inset(0 0 0 0);
  }

  to {
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
  }
}

.mv-opening__staff {
  width: min(86vw, 560px);
  height: auto;
  overflow: visible;
  fill: var(--mv-opening-accent);
  stroke: var(--mv-opening-accent);
}

.mv-opening__staff > path {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mv-draw 0.7s var(--mv-ease-io) 0.05s forwards;
}

.mv-opening__note {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: mv-note-pop 0.45s var(--mv-ease) both;
  animation-delay: calc(0.6s + var(--i) * 0.14s);
}

.mv-opening__note ellipse {
  stroke: none;
}

.mv-opening__note path {
  fill: none;
  stroke-width: 2.4;
}

@keyframes mv-note-pop {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.6);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.mv-opening--notes .mv-opening__name {
  margin-top: 0.3em;
  font-size: clamp(1.75rem, 8vw, 3rem);
  animation: mv-char-in 0.7s var(--mv-ease) 1.05s both;
}

/* ============ ヒーローの写真（動画のように、次の写真が重なって現れ、ゆっくり寄る） ============ */
/* 写真は重ねて置き、いまの1枚（.is-active）だけを見せる。JavaScript が動かないときは1枚目だけ。
   重なり順は z-index を使わず並び順で決める（写真 → 飾り → 写真に重ねる色 ::after → 仮置き枠の説明文）。
   motion.js が次の写真を写真の並びのいちばん後ろへ移し、前の写真の上から重ねる。
   枠の中で重なり順を閉じ、屋号の面（.hero__body）より前に出さない */
.mv [data-mv-film] {
  isolation: isolate;
}

.mv .mv-slide {
  opacity: 0;
}

.mv .mv-slide.is-active,
.mv .mv-slide.is-leaving {
  opacity: 1;
}

.mv-live:not(.is-still) .mv-slide.is-active {
  transition: opacity var(--mv-fade) ease;
}

/* 1枚ごとに、寄る先を少しずつ変える（data-kb は motion.js が元の並びの順に付ける） */
.mv .mv-slide {
  transform-origin: 50% 50%;
}

.mv .mv-slide[data-kb="1"] {
  --kb-x: 1.5%;
  --kb-y: -1%;
  transform-origin: 20% 60%;
}

.mv .mv-slide[data-kb="2"] {
  --kb-x: -1.5%;
  --kb-y: 1%;
  transform-origin: 80% 40%;
}

.mv .mv-slide[data-kb="3"] {
  --kb-y: -1.5%;
  transform-origin: 50% 80%;
}

@keyframes mv-kenburns {
  from {
    transform: scale(1.001);
  }

  to {
    transform: scale(var(--mv-zoom)) translate3d(var(--kb-x, 0%), var(--kb-y, 0%), 0);
  }
}

/* 切り替えのあいだ、出ていく写真も同じ動きを続ける（animation の名前が同じなので、印が替わっても止まらない） */
.mv-live:not(.is-still) [data-mv-film="fade"] .mv-slide.is-active,
.mv-live:not(.is-still) [data-mv-film="fade"] .mv-slide.is-leaving,
.mv-live:not(.is-still) [data-mv-film="tiles"] .mv-slide.is-active,
.mv-live:not(.is-still) [data-mv-film="tiles"] .mv-slide.is-leaving {
  animation: mv-kenburns calc(var(--mv-slide) + var(--mv-fade) + 1.5s) linear both;
}

/* 写真の仮置き枠は寄せない（寄せると枠が重なりの層になり、説明文が写真に重ねる色の下に沈む） */
.mv-live:not(.is-still) .ph.mv-slide {
  animation: none !important;
}

/* 写真が1枚のときは、ゆっくり寄っては戻る */
.mv-live:not(.is-still) [data-mv-film="zoom"] .mv-slide.is-active {
  animation: mv-kenburns 16s ease-in-out infinite alternate;
}

/* 何枚目か（電気工事など）。写真の上で読めるよう、濃い面に白い文字 */
.mv-counter {
  display: none;
}

.mv-live:not(.is-still) .mv-counter {
  position: absolute;
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 24px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: var(--font-num);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.mv-counter__total {
  font-weight: 400;
}

.mv-counter__bar {
  position: relative;
  width: 44px;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.35);
}

.mv-counter__bar i {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}

.mv-counter__bar.is-run i {
  animation: mv-bar var(--mv-slide) linear forwards;
}

@keyframes mv-bar {
  to {
    transform: scaleX(1);
  }
}

/* ============ 入り方：ローラーで塗り替わる（外壁塗装）・円く開く（美容室） ============ */
/* motion.js が次の写真に data-entering を付けて閉じた形を描き、.is-open で開く。開き切ったら印を外す */
.mv {
  --mv-roll: 2.4s;   /* ローラーが写真を横切る長さ（motion.js も読む） */
  --mv-iris: 1.6s;   /* 円く開く長さ（motion.js も読む） */
}

.mv .mv-slide[data-entering="roller"] {
  clip-path: inset(0 100% 0 0);
}

.mv .mv-slide[data-entering="roller"].is-open {
  clip-path: inset(0 0 0 0);
}

.mv .mv-slide[data-entering="iris"] {
  clip-path: circle(0% at 50% 50%);
}

.mv .mv-slide[data-entering="iris"].is-open {
  clip-path: circle(75% at 50% 50%);
}

/* 円く開く型は、開いたときの最初の写真も閉じた円から出す（motion.js の intro が開く。
   読めなかったときは3.5秒で開く） */
.mv-boot:not(.is-still):not(.mv-ready) [data-mv-film="iris"] .mv-slide.is-active {
  clip-path: circle(0% at 50% 50%);
  animation: mv-iris-show 1.6s cubic-bezier(0.65, 0, 0.35, 1) 3.5s forwards;
}

@keyframes mv-iris-show {
  to {
    clip-path: circle(75% at 50% 50%);
  }
}

/* 重なって現れる（opacity）のではなく、形が開いて現れる */
.mv-live:not(.is-still) .mv-slide.is-active[data-entering="roller"] {
  transition: clip-path var(--mv-roll) cubic-bezier(0.45, 0, 0.55, 1);
}

.mv-live:not(.is-still) .mv-slide.is-active[data-entering="iris"] {
  transition: clip-path var(--mv-iris) cubic-bezier(0.65, 0, 0.35, 1);
}

/* 前と後の組（塗装前・塗装後）は、同じ場所から撮った写真の位置がずれないよう寄せない */
.mv-live:not(.is-still) [data-mv-film] .mv-slide[data-mv-pair] {
  animation: none;
}

/* ローラー：塗り替わる境目の上を、左から右へ横切る（読み上げない） */
.mv-roller {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}

.mv-roller i {
  position: absolute;
  top: -8%;
  bottom: -8%;
  left: 0;
  width: clamp(26px, 3.4vw, 42px);
  border-radius: 999px;
  background: linear-gradient(90deg, #cfc9bb, #fbf9f4 42%, #e8e2d4 68%, #bdb6a6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 8px 0 18px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%);
}

/* 持ち手 */
.mv-roller i::after {
  content: "";
  position: absolute;
  top: 58%;
  left: 60%;
  width: clamp(44px, 7vw, 96px);
  height: 5px;
  border-radius: 3px;
  background: #5f6670;
  transform: rotate(32deg);
  transform-origin: left center;
}

.mv-live:not(.is-still) .mv-roller.is-go {
  visibility: visible;
  animation: mv-roll var(--mv-roll) cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

@keyframes mv-roll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(100%, 0, 0);
  }
}

/* 写真の左上の札（塗装前・塗装後）。どの写真の上でも読めるよう、濃い面に白い文字 */
.mv-tagchip {
  position: absolute;
  top: clamp(12px, 2.5vw, 20px);
  left: clamp(12px, 2.5vw, 20px);
  z-index: 5;
  padding: 0.2em 0.9em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.66);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.06em;
  opacity: 0;
  pointer-events: none;
}

.mv-live:not(.is-still) .mv-tagchip {
  transition: opacity 0.4s ease;
}

.mv-live:not(.is-still) .mv-tagchip.is-shown {
  opacity: 1;
}

/* 入り方：光の帯で拭き替わる（前の写真の上を、明るい帯が左から右へ横切り、後の写真に替わる。
   ローラーと同じ長さ --mv-roll。帯の色はテーマの --mv-sweep） */
.mv .mv-slide[data-entering="sweep"] {
  clip-path: inset(0 100% 0 0);
}

.mv .mv-slide[data-entering="sweep"].is-open {
  clip-path: inset(0 0 0 0);
}

.mv-live:not(.is-still) .mv-slide.is-active[data-entering="sweep"] {
  transition: clip-path var(--mv-roll) cubic-bezier(0.45, 0, 0.55, 1);
}

.mv-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}

.mv-sweep i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(48px, 8vw, 110px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--mv-sweep, rgba(255, 255, 255, 0.9)) 50%, rgba(255, 255, 255, 0));
  filter: blur(3px);
  transform: translateX(-50%);
}

.mv-live:not(.is-still) .mv-sweep.is-go {
  visibility: visible;
  animation: mv-roll var(--mv-roll) cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

/* ============ 英字の小見出しを1字ずつせり上げる（美容室。小見出しは読み上げない） ============ */
.mv-label {
  overflow: hidden;
  padding-block: 0.06em;
  padding-inline-end: 0.12em;
}

.mv-label__in,
.mv-label__in > span {
  display: inline-block;
}

.mv-boot:not(.is-still) .section__head:not(.is-in) .mv-label__in > span {
  transform: translate3d(0, 110%, 0);
}

.mv-live:not(.is-still) .mv-label__in > span {
  transition: transform 0.9s var(--mv-ease);
  transition-delay: calc(0.15s + var(--i) * 0.045s);
}

/* motion.js が読めなかったときも、4秒で見せる */
.mv-boot:not(.mv-live):not(.is-still) .mv-label__in > span {
  animation: mv-label-show 0.01s linear 4s forwards;
}

@keyframes mv-label-show {
  to {
    transform: none;
  }
}

/* ============ タイルで切り替える（パーソナルジム。motion.js がタイルを作る） ============ */
.mv-tiles {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  pointer-events: none;
}

.mv-tiles i {
  background: var(--mv-tile);
  transform: scale(0);
  transition: transform 0.6s var(--mv-ease-io);
  transition-delay: calc(var(--d) * 45ms);
}

.mv-tiles i.is-alt {
  background: var(--mv-tile-2);
}

.mv-tiles.is-cover i {
  transform: scale(1.02);
}

.mv-tiles.is-instant i {
  transition: none;
}

/* motion.js がタイルを作るまで、最初の写真をタイルの色で覆っておく（読めなかったときは3.5秒で外す） */
.mv-boot:not(.is-still) [data-mv-film="tiles"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--mv-tile);
  animation: mv-hide 0s linear 3.5s forwards;
}

.mv-boot [data-mv-film="tiles"].mv-tiles-ready::before {
  display: none;
}

/* ============ ヒーローの文字（屋号・ひとこと） ============ */
.mv-boot:not(.is-still):not(.mv-settled) .hero__card > * {
  opacity: 0;
}

/* motion.js が読めなかったときも、4秒で見せる */
.mv-boot:not(.is-still):not(.mv-ready) .hero__card > * {
  animation: mv-show 0.01s linear 4s forwards;
}

.mv-ready:not(.is-still) .hero__card > * {
  animation: mv-rise 1.1s var(--mv-ease) both;
}

.mv-ready:not(.is-still) .hero__card > :nth-child(2) {
  animation-delay: 0.14s;
}

.mv-ready:not(.is-still) .hero__card > :nth-child(3) {
  animation-delay: 0.28s;
}

.mv-ready:not(.is-still) .hero__card > :nth-child(n + 4) {
  animation-delay: 0.42s;
}

@keyframes mv-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mv-show {
  to {
    opacity: 1;
  }
}

/* 出終わったあと（.mv-settled）は、動きを止めてから戻しても、最初の出方をくり返さない */
.mv-settled .hero__card > *,
.mv-settled .mv-chars > span {
  opacity: 1;
  animation: none !important;
}

.mv-settled .mv-lashline path {
  stroke-dashoffset: 0;
  animation: none !important;
}

/* 屋号を1字ずつ（chars）。屋号の見出しそのものは動かさず、中の字を動かす */
.mv-chars > span {
  display: inline-block;
}

.mv-boot:not(.is-still) .hero__card > .hero__title:has(.mv-chars),
.mv-ready:not(.is-still) .hero__card > .hero__title:has(.mv-chars) {
  opacity: 1;
  animation: none;
}

.mv-boot:not(.is-still):not(.mv-settled) .mv-chars > span {
  opacity: 0;
}

.mv-boot:not(.is-still):not(.mv-ready) .mv-chars > span {
  animation: mv-show 0.01s linear 4s forwards;
}

.mv-ready:not(.is-still) .mv-chars > span {
  animation: mv-char 1s var(--mv-ease) both;
  animation-delay: calc(0.2s + var(--i) * 0.09s);
}

@keyframes mv-char {
  from {
    opacity: 0;
    transform: translate3d(0, 0.45em, 0);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* 屋号の下のまつげの線（まつげサロン） */
.mv-lashline {
  display: block;
  width: min(200px, 56%);
  height: auto;
  margin-top: 0.4em;
  margin-inline: var(--hero-child-margin);
  overflow: visible;
  fill: none;
  stroke: var(--mv-lash, currentColor);
  stroke-width: 2;
  stroke-linecap: round;
}

.mv-lashline .mv-lashline__hairs {
  stroke-width: 1.6;
}

.mv-boot:not(.is-still):not(.mv-settled) .mv-lashline path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.mv-ready:not(.is-still) .mv-lashline path {
  animation: mv-draw 1.2s var(--mv-ease-io) 0.5s forwards;
}

.mv-ready:not(.is-still) .mv-lashline .mv-lashline__hairs {
  animation-delay: 1.2s;
}

/* motion.js が読めなかったときも、4秒で線を見せる */
.mv-boot:not(.mv-live):not(.is-still) .mv-lashline path {
  animation: mv-draw 0.01s linear 4s forwards;
}

/* ============ ヒーローに重ねる飾り（写真の後ろ・写真に重ねる色の前の並び。どれも読み上げない） ============ */
.mv-sparkle,
.mv-steam,
.mv-gloss,
.mv-glow,
.mv-breath,
.mv-notes {
  position: absolute;
  pointer-events: none;
}

/* きらめき（ネイルサロン） */
.mv-sparkle {
  inset: 0;
}

.mv-sparkle i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: calc(22px * var(--s));
  aspect-ratio: 1;
  background: var(--mv-glint);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: 0;
}

.mv-live:not(.is-still) .mv-sparkle i {
  animation: mv-twinkle 4.8s ease-in-out var(--d) infinite;
}

@keyframes mv-twinkle {
  0%,
  62%,
  100% {
    opacity: 0;
    transform: scale(0.2) rotate(0deg);
  }

  72% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }

  84% {
    opacity: 0;
    transform: scale(0.3) rotate(90deg);
  }
}

/* 湯気（カフェ・弁当）。位置は料理やカップのあたり（テーマの --mv-steam-x・--mv-steam-y。湯気の根もと） */
.mv-steam {
  top: var(--mv-steam-y, 55%);
  left: var(--mv-steam-x, 50%);
  width: 0;
  height: 0;
  transform: scale(var(--mv-steam-size, 1));
}

.mv-steam i {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: 84px;
  height: 210px;
  margin-left: -42px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 72%);
  filter: blur(4px);
  opacity: 0;
}

/* 白っぽい写真の上でも湯気の形が見えるよう、まわりにごく薄い影を置く */
.mv-steam i::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, rgba(40, 30, 20, 0) 40%, rgba(40, 30, 20, 0.24) 57%, rgba(40, 30, 20, 0) 75%);
}

.mv-live:not(.is-still) .mv-steam i {
  animation: mv-steam 5.2s ease-in var(--d) infinite;
}

@keyframes mv-steam {
  0% {
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale(0.55, 0.6);
  }

  30% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate3d(14px, -150px, 0) scale(1.25, 1.55) skewX(-10deg);
  }
}

/* 車体の光沢のように、光が斜めに横切る（出張洗車） */
.mv-gloss {
  inset: 0;
  overflow: hidden;
}

.mv-gloss::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -45%;
  width: 38%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 42%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.3) 58%, rgba(255, 255, 255, 0));
  opacity: 0;
  transform: skewX(-20deg);
}

.mv-live:not(.is-still) .mv-gloss::before {
  animation: mv-gloss 6.5s var(--mv-ease-io) 1.2s infinite;
}

@keyframes mv-gloss {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewX(-20deg);
  }

  38% {
    opacity: 1;
    transform: translate3d(420%, 0, 0) skewX(-20deg);
  }

  39%,
  100% {
    opacity: 0;
    transform: translate3d(420%, 0, 0) skewX(-20deg);
  }
}

/* 灯りのゆらぎ（カフェ） */
.mv-glow {
  inset: 0;
  background: radial-gradient(36% 42% at var(--mv-glow-x, 74%) var(--mv-glow-y, 30%), var(--mv-glow-color, rgba(255, 190, 110, 0.55)), rgba(255, 190, 110, 0) 72%);
  opacity: 0;
}

.mv-live:not(.is-still) .mv-glow {
  animation: mv-glow 4.6s ease-in-out infinite alternate;
}

@keyframes mv-glow {
  from {
    opacity: 0.35;
  }

  to {
    opacity: 1;
  }
}

/* 呼吸の速さで広がる円（整体・リラクゼーション。吸って4秒・吐いて4秒ほど） */
.mv-breath {
  top: 50%;
  left: 50%;
  width: min(76vw, 520px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.mv-breath i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--mv-breath, rgba(255, 255, 255, 0.7));
  border-radius: 50%;
  opacity: 0.5;
  transform: scale(0.94);
}

.mv-breath i:nth-child(2) {
  inset: 10%;
}

.mv-live:not(.is-still) .mv-breath i {
  animation: mv-breath 9s ease-in-out infinite;
}

.mv-live:not(.is-still) .mv-breath i:nth-child(2) {
  animation-delay: -1.2s;
}

@keyframes mv-breath {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.84);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* 浮かぶ音符（音楽教室） */
.mv-notes {
  inset: 0;
  overflow: hidden;
}

.mv-notes i {
  position: absolute;
  bottom: -40px;
  left: var(--x);
  width: calc(26px * var(--s));
  aspect-ratio: 3 / 4;
  background: var(--mv-glint);
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M9 4.5 22 1v19.5a4.5 3.6 0 1 1-2.2-3.1V8.4L11.2 10.7v12.8a4.5 3.6 0 1 1-2.2-3.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M9 4.5 22 1v19.5a4.5 3.6 0 1 1-2.2-3.1V8.4L11.2 10.7v12.8a4.5 3.6 0 1 1-2.2-3.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mv-live:not(.is-still) .mv-notes i {
  animation: mv-note 10s linear var(--d) infinite;
}

@keyframes mv-note {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-10deg);
  }

  12%,
  80% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate3d(28px, -1500%, 0) rotate(10deg);
  }
}

/* 電気が流れる線（電気工事）。ヒーローの下の端に、配線のような線と、線の上を走る光 */
.mv-current {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: clamp(56px, 9vw, 120px);
  overflow: visible;
  fill: none;
  pointer-events: none;
}

.mv-current path {
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mv-current__wire {
  stroke: var(--mv-wire, rgba(255, 255, 255, 0.4));
  stroke-width: 1.5;
}

.mv-current__pulse {
  stroke: var(--mv-pulse, #ffd23f);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.07 0.93;
  stroke-dashoffset: 1;
  opacity: 0;
}

.mv-live:not(.is-still) .mv-current__pulse {
  opacity: 1;
  animation: mv-pulse 3.6s linear var(--d) infinite;
}

@keyframes mv-pulse {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---- 2026-09-25 に足した飾り（新しく動きのある見本を作った業種）。どれも写真に重ねる色の下に置き、読み上げない ---- */
.mv-paws,
.mv-ripple,
.mv-breeze,
.mv-leaves,
.mv-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 足あと（ペット）。左下から右上へ、左右の足を交互に置いていき、少しずつ消える */
.mv-paws i {
  --rot: calc(var(--r) + 52deg);
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: clamp(22px, 3.2vw, 38px);
  aspect-ratio: 1;
  background: var(--mv-glint);
  opacity: 0;
  transform: rotate(var(--rot));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='21.5' rx='7.5' ry='6.5'/%3E%3Cellipse cx='7' cy='13' rx='3' ry='3.9'/%3E%3Cellipse cx='12.5' cy='7' rx='3' ry='3.9'/%3E%3Cellipse cx='19.5' cy='7' rx='3' ry='3.9'/%3E%3Cellipse cx='25' cy='13' rx='3' ry='3.9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='21.5' rx='7.5' ry='6.5'/%3E%3Cellipse cx='7' cy='13' rx='3' ry='3.9'/%3E%3Cellipse cx='12.5' cy='7' rx='3' ry='3.9'/%3E%3Cellipse cx='19.5' cy='7' rx='3' ry='3.9'/%3E%3Cellipse cx='25' cy='13' rx='3' ry='3.9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mv-live:not(.is-still) .mv-paws i {
  animation: mv-paw 7.2s ease-out var(--d) infinite;
}

@keyframes mv-paw {
  0% {
    opacity: 0;
    transform: rotate(var(--rot)) scale(0.6);
  }

  6%,
  46% {
    opacity: 0.85;
    transform: rotate(var(--rot)) scale(1);
  }

  62%,
  100% {
    opacity: 0;
    transform: rotate(var(--rot)) scale(1);
  }
}

/* 水の輪（水道）。しずくが落ちたように、横に長い輪が広がって消える */
.mv-ripple i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: calc(clamp(96px, 17vw, 230px) * var(--s));
  aspect-ratio: 2.6 / 1;
  border: 2px solid var(--mv-glint);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.1);
}

.mv-ripple i::after {
  content: "";
  position: absolute;
  inset: 22%;
  border: 1.5px solid var(--mv-glint);
  border-radius: 50%;
}

.mv-live:not(.is-still) .mv-ripple i {
  animation: mv-ripple 6.4s ease-out var(--d) infinite;
}

@keyframes mv-ripple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }

  8% {
    opacity: 0.85;
  }

  60%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* 風の線（エアコン）。細い線が左から右へ、ゆるく上下しながら流れる */
.mv-breeze i {
  position: absolute;
  top: var(--y);
  left: 0;
  width: var(--w);
  height: var(--t);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--mv-glint) 62%, rgba(255, 255, 255, 0));
  opacity: 0;
  transform: translate3d(-110%, 0, 0);
}

.mv-live:not(.is-still) .mv-breeze i {
  animation: mv-breeze 5.4s cubic-bezier(0.4, 0, 0.6, 1) var(--d) infinite;
}

@keyframes mv-breeze {
  0% {
    opacity: 0;
    transform: translate3d(-110%, 0, 0);
  }

  15% {
    opacity: 0.85;
  }

  50% {
    transform: translate3d(48vw, -10px, 0);
  }

  85% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
    transform: translate3d(108vw, 6px, 0);
  }
}

/* 舞う葉（造園）。上から葉が左右に揺れ、回りながら落ちる（色はテーマの --mv-leaf） */
.mv-leaves i {
  position: absolute;
  top: -8%;
  left: var(--x);
  width: calc(26px * var(--s));
  aspect-ratio: 1;
  background: var(--mv-leaf, var(--mv-glint));
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 28C4 13 13 4 28 4c0 15-9 24-24 24Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 28C4 13 13 4 28 4c0 15-9 24-24 24Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mv-live:not(.is-still) .mv-leaves i {
  animation: mv-leaf 11s linear var(--d) infinite;
}

@keyframes mv-leaf {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  8% {
    opacity: 0.9;
  }

  25% {
    transform: translate3d(calc(var(--k) * 28px), 220px, 0) rotate(calc(var(--k) * 60deg));
  }

  50% {
    transform: translate3d(calc(var(--k) * -18px), 440px, 0) rotate(calc(var(--k) * 140deg));
  }

  75% {
    transform: translate3d(calc(var(--k) * 24px), 660px, 0) rotate(calc(var(--k) * 220deg));
  }

  90% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 900px, 0) rotate(calc(var(--k) * 300deg));
  }
}

/* 泡（ハウスクリーニング）。下から泡が浮かび、上で消える */
.mv-bubbles i {
  position: absolute;
  bottom: -60px;
  left: var(--x);
  width: calc(clamp(18px, 3vw, 34px) * var(--s));
  aspect-ratio: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.9) 0 12%, rgba(255, 255, 255, 0.18) 13% 60%, rgba(255, 255, 255, 0.05) 61%);
  opacity: 0;
}

.mv-live:not(.is-still) .mv-bubbles i {
  animation: mv-bubble 9s ease-in var(--d) infinite;
}

@keyframes mv-bubble {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.7);
  }

  10% {
    opacity: 0.9;
  }

  50% {
    transform: translate3d(12px, -260px, 0) scale(1);
  }

  85% {
    opacity: 0.85;
  }

  100% {
    opacity: 0;
    transform: translate3d(-8px, -560px, 0) scale(1.15);
  }
}

/* 縫い目（ハンドメイド）。ヒーローの下の端に、糸の縫い目が縫い進むように流れる（線の色はテーマの --mv-wire・--mv-pulse） */
.mv-stitch {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: clamp(48px, 8vw, 110px);
  overflow: visible;
  fill: none;
  pointer-events: none;
}

.mv-stitch path {
  vector-effect: non-scaling-stroke;
}

.mv-stitch__guide {
  stroke: var(--mv-wire, rgba(255, 255, 255, 0.3));
  stroke-width: 1;
}

.mv-stitch__thread {
  stroke: var(--mv-pulse, #ffffff);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 11 8;
}

.mv-live:not(.is-still) .mv-stitch__thread {
  animation: mv-stitch 2.4s linear infinite;
}

@keyframes mv-stitch {
  to {
    stroke-dashoffset: -38;
  }
}

/* ヒーローが画面の外にあるあいだは、中の動きを止めておく（処理を減らす） */
.mv-hero-away .hero *,
.mv-hero-away .hero *::before,
.mv-hero-away .hero *::after {
  animation-play-state: paused !important;
}

/* ============ 写真を固定した帯（窓からのぞくように、読み進めても写真は動かない） ============ */
.mv-window {
  position: relative;
  height: var(--mv-window-h, clamp(240px, 50vw, 560px));
  overflow: hidden;
  clip-path: inset(0);
  background: var(--mv-window-bg, #111111);
}

.mv-window__frame {
  position: absolute;
  inset: 0;
}

.mv-window__frame > img,
.mv-window__frame > .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-filter);
}

.mv-live:not(.is-still) .mv-window__frame {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: 100vh;
  height: 100lvh;
}

.mv-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mv-window-overlay);
  pointer-events: none;
}

/* ============ 見出しのマーカー（パーソナルジム） ============ */
.mv .section {
  --s-mark: var(--mv-mark);
}

.mv .about {
  --s-mark: var(--about-mark, var(--mv-mark));
}

.mv .menu {
  --s-mark: var(--menu-mark, var(--mv-mark));
}

.mv .works {
  --s-mark: var(--works-mark, var(--mv-mark));
}

.mv .news {
  --s-mark: var(--news-mark, var(--mv-mark));
}

.mv .access {
  --s-mark: var(--access-mark, var(--mv-mark));
}

.mv .contact {
  --s-mark: var(--contact-mark, var(--mv-mark));
}

.mv-mark {
  background-image: linear-gradient(var(--s-mark), var(--s-mark));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.34em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mv-boot:not(.is-still) .section__head:not(.is-in) .mv-mark {
  background-size: 0% 0.34em;
}

.mv-live:not(.is-still) .mv-mark {
  transition: background-size 1.1s var(--mv-ease-io) 0.45s;
}

/* motion.js が読めなかったときも、4秒でマーカーを見せる */
.mv-boot:not(.mv-live):not(.is-still) .mv-mark {
  animation: mv-mark-show 0.01s linear 4s forwards;
}

@keyframes mv-mark-show {
  to {
    background-size: 100% 0.34em;
  }
}

/* ============ 施工の前と後を見比べる（内装・リフォーム。motion.js が組み立てる） ============ */
.mv-compare .work__media {
  --p: 0.5;
  cursor: ew-resize;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

/* 線とつまみの位置（左右に22pxずつ残し、つまみが写真からはみ出さないようにする） */
.mv-compare__before {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(0 calc(100% - 22px - (100% - 44px) * var(--p)) 0 0);
}

.mv-compare__before > img,
.mv-compare__before > .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-filter);
}

.mv-compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(22px + (100% - 44px) * var(--p));
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.mv-compare__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.mv-compare__knob::before {
  content: "";
  width: 24px;
  height: 12px;
  background: #222222;
  clip-path: polygon(0 50%, 30% 0, 30% 35%, 70% 35%, 70% 0, 100% 50%, 70% 100%, 70% 65%, 30% 65%, 30% 100%);
}

.mv-compare__tag {
  position: absolute;
  top: 10px;
  z-index: 2;
  padding: 0.1em 0.7em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.66);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.7;
  pointer-events: none;
}

.mv-compare__tag--before {
  left: 10px;
}

.mv-compare__tag--after {
  right: 10px;
}

/* キーボードでは、見えない範囲の入力（左右の矢印キー）で動かす。フォーカスはつまみに出す */
.mv-compare__range {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
}

.mv-compare__range:focus-visible ~ .mv-compare__line .mv-compare__knob {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* ============ スクロールで出す（motion.js が .is-in を付ける） ============ */
.mv-boot:not(.is-still) [data-mv-reveal]:not(.is-in) {
  opacity: 0;
  transform: translate3d(var(--mv-reveal-x, 0), var(--mv-reveal-y, 32px), 0);
}

/* motion.js が読めなかったときも、4秒で見せる */
.mv-boot:not(.mv-live):not(.is-still) [data-mv-reveal] {
  animation: mv-show-all 0.01s linear 4s forwards;
}

@keyframes mv-show-all {
  to {
    opacity: 1;
    transform: none;
  }
}

.mv-live:not(.is-still) [data-mv-reveal] {
  transition: opacity 0.9s var(--mv-ease), transform 1.1s var(--mv-ease);
  transition-delay: calc(var(--i, 0) * 0.08s);
}

/* ============ 動きを止めているとき ============ */
.is-still.mv {
  scroll-behavior: auto;
}

.is-still .mv-slide,
.is-still .mv-slide.is-active,
.is-still .mv-slide.is-leaving {
  transform: none;
  transition: none;
  animation: none;
}

.is-still .mv-slide.is-leaving {
  opacity: 0;
}

.is-still .mv-tiles,
.is-still .mv-counter,
.is-still .mv-roller,
.is-still .mv-sweep,
.is-still .mv-tagchip {
  display: none;
}

.is-still .mv-paws i,
.is-still .mv-ripple i,
.is-still .mv-breeze i,
.is-still .mv-leaves i,
.is-still .mv-bubbles i,
.is-still .mv-stitch__thread {
  animation: none;
}

.is-still .mv-slide[data-entering] {
  clip-path: none;
}

.is-still .mv-sparkle i,
.is-still .mv-steam i,
.is-still .mv-gloss::before,
.is-still .mv-glow,
.is-still .mv-notes i,
.is-still .mv-current__pulse,
.is-still .mv-breath i {
  animation: none;
}

.is-still .mv-compare__line,
.is-still .mv-compare__before {
  transition: none;
}