/* スクロール演出（motion.js と対で使う）
 * html.has-motion のときだけ要素を隠す。JS が動かない・動きを減らす設定のときは最初から表示。
 * data-reveal="up|zoom|clip|card|slide|title" の要素に、画面に入ると .is-inview が付く。
 * 同時に入った要素には motion.js が --d（遅延ms）を順に振る。
 ------------------------------------------------------------ */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* リセットCSSが span を font-weight: normal にするため、演出用の span は親の太さを引き継ぐ */
.ttl_top_content .reveal-mask,
.ttl_top_content .reveal-mask > span { font-weight: inherit; }

/* ---------- 共通：フェードアップ ---------- */
.has-motion [data-reveal="up"],
.has-motion [data-reveal="slide"] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.has-motion [data-reveal="slide"] { transform: translate3d(-40px, 0, 0); }
.has-motion [data-reveal].is-inview { opacity: 1; transform: none; }

/* ---------- 画像：奥から寄ってくる ---------- */
.has-motion [data-reveal="zoom"] {
  opacity: 0;
  transform: scale(.92);
  filter: blur(6px);
  transition: opacity 1.2s var(--ease-out), transform 1.6s var(--ease-out), filter 1.2s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms + 150ms);
}
.has-motion [data-reveal="zoom"].is-inview { filter: none; }

/* ---------- 左から幕が開く ---------- */
.has-motion [data-reveal="clip"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s var(--ease-io);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.has-motion [data-reveal="clip"].is-inview { clip-path: inset(0 0 0 0); }

/* ---------- セクション見出し ---------- */
.ttl_top_content .reveal-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.ttl_top_content .reveal-mask > span { display: block; }
.has-motion [data-reveal="title"] .reveal-mask > span {
  transform: translate3d(0, 110%, 0);
  transition: transform 1.1s var(--ease-out);
}
.has-motion [data-reveal="title"] .en { border-bottom-color: transparent; }
.has-motion [data-reveal="title"] .en::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-io) .25s;
}
.has-motion [data-reveal="title"] .en::after {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease-io) .1s;
}
.has-motion [data-reveal="title"] .ja {
  opacity: 0;
  transform: translate3d(-16px, 0, 0);
  transition: opacity .8s var(--ease-out) .55s, transform .8s var(--ease-out) .55s;
}
.has-motion [data-reveal="title"].is-inview .reveal-mask > span,
.has-motion [data-reveal="title"].is-inview .ja { transform: none; opacity: 1; }
.has-motion [data-reveal="title"].is-inview .en::before { transform: scaleX(1); }
.has-motion [data-reveal="title"].is-inview .en::after { clip-path: inset(0); }

/* ---------- サービスのカード：白い幕が右へ抜け、写真が引いていく ---------- */
.top_content_service_wrap .content_service[data-reveal] .content_service_inner::after {
  transition: transform 1s var(--ease-io);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.top_content_service_wrap .content_service.is-inview .content_service_inner::after { transform: translateX(101%); }
.has-motion .top_content_service_wrap .content_service[data-reveal] .pho img {
  transform: scale(1.18);
  transition: transform 1.8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms + 200ms);
}
.has-motion .top_content_service_wrap .content_service.is-inview .pho img { transform: none; }
.has-motion .top_content_service_wrap .content_service.is-inview a.pho:hover img { transform: scale(1.05); transition: transform .5s var(--ease-out); }
.has-motion .top_content_service_wrap .content_service[data-reveal] .service_overview {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .8s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms + 450ms);
}
.has-motion .top_content_service_wrap .content_service.is-inview .service_overview { opacity: 1; transform: none; }
/* JS がないときは幕を出さない */
html:not(.has-motion) .top_content_service_wrap .content_service[data-reveal] .content_service_inner::after { display: none; }

/* 背景の斜めの帯：幕の開き方を滑らかにし、スクロールでゆっくり動かす（--py は motion.js） */
.mainvisual .mainvisual_inner::before,
.mainvisual .mainvisual_inner::after,
.basic_square::after,
.basic_square_small::after {
  translate: 0 var(--py, 0);
  will-change: translate;
}
.mainvisual .mainvisual_inner::after { transition: clip-path 1.1s var(--ease-io) .1s; }
.mainvisual .mainvisual_inner::before { transition: clip-path 1.1s var(--ease-io) .45s; }
.basic_square::after,
.basic_square_small::after { transition: clip-path 1.4s var(--ease-io); }

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal],
  .has-motion [data-reveal] *,
  .has-motion .top_content_service_wrap .service_overview,
  .has-motion .top_content_service_wrap .content_service[data-reveal] .pho img {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    letter-spacing: normal !important;
    animation: none !important;
    transition: none !important;
  }
  .top_content_service_wrap .content_service[data-reveal] .content_service_inner::after { display: none; }
  .mainvisual .mainvisual_inner::before,
  .mainvisual .mainvisual_inner::after,
  .basic_square::after,
  .basic_square_small::after { translate: none; }
}