/**
 * MID MOTION — ヒーロー直後ゾーンの質感強化（front page限定・2026-08-20）
 * 対象: p-proof-band(3連ロゴ帯) / p-stats(実績数値) / p-shindan-band(診断CV)
 * PHP無変更: is-inview は front-mid-motion.js が付与。JS無効なら素のまま。
 * reduced-motion では全て無効。
 */

/* ---- 1) ロゴ帯: ホバーで一時停止 + ロゴの浮き + 帯の時差入場 ---- */
.p-proof-band .p-clients__marquee:hover .p-clients__track,
.p-proof-band .p-media__marquee:hover .p-media__track,
.p-proof-band .p-ai-services__marquee:hover .p-ai-services__track {
  animation-play-state: paused;
}
.p-proof-band .p-clients__item,
.p-proof-band .p-media__item,
.p-proof-band .p-ai-services__item {
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s cubic-bezier(.22,.61,.36,1);
}
.p-proof-band .p-clients__item:hover,
.p-proof-band .p-media__item:hover,
.p-proof-band .p-ai-services__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(10, 22, 40, .10);
}
.p-proof-band .l-section {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.p-proof-band .l-section.is-inview { opacity: 1; transform: none; }
.p-proof-band .l-section:nth-of-type(2).is-inview { transition-delay: .12s; }
.p-proof-band .l-section:nth-of-type(3).is-inview { transition-delay: .24s; }

/* ---- 2) 実績数値: PROOFウォーターマーク + 項目の時差入場 + 数字下罫線 ---- */
.p-stats { position: relative; overflow: hidden; }
.p-stats::before {
  content: "PROOF";
  position: absolute;
  top: .02em;
  left: max(4vw, calc((100vw - 1180px) / 2));
  font-weight: 800;
  font-size: clamp(4.5rem, 11vw, 9rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(10, 22, 40, .045);
  pointer-events: none;
  user-select: none;
}
.p-stats .l-inner { position: relative; }
.p-stats__grid.js-reveal .p-stats__item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.p-stats__grid.js-reveal.is-revealed .p-stats__item { opacity: 1; transform: none; }
.p-stats__grid.js-reveal.is-revealed .p-stats__item:nth-child(2) { transition-delay: .10s; }
.p-stats__grid.js-reveal.is-revealed .p-stats__item:nth-child(3) { transition-delay: .20s; }
.p-stats__grid.js-reveal.is-revealed .p-stats__item:nth-child(4) { transition-delay: .30s; }
.p-stats__number { position: relative; display: inline-block; padding-bottom: 8px; }
.p-stats__number::after {
  content: "";
  position: absolute;
  left: 0; right: 26%;
  bottom: 0;
  height: 2px;
  background: var(--color-primary, #00D9FF);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.22,.61,.36,1) .35s;
}
.p-stats__grid.js-reveal.is-revealed .p-stats__number::after { transform: scaleX(1); }

/* ---- 3) 診断バンド: 入場 + CTA光沢スイープ + パルスドット ---- */
.p-shindan-band__inner {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.p-shindan-band.is-inview .p-shindan-band__inner { opacity: 1; transform: none; }
.p-shindan-band__eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #007a8a;
  margin-right: 8px;
  vertical-align: 1px;
  animation: urvShindanPulse 2.2s ease-in-out infinite;
}
@keyframes urvShindanPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 122, 138, .35); }
  50%      { box-shadow: 0 0 0 7px rgba(0, 122, 138, 0); }
}
.p-shindan-band__btn {
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s cubic-bezier(.22,.61,.36,1);
}
.p-shindan-band__btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
}
.p-shindan-band__btn:hover, .p-shindan-band__btn:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 122, 138, .30);
}
.p-shindan-band__btn:hover::after, .p-shindan-band__btn:focus-visible::after { left: 120%; }

@media (prefers-reduced-motion: reduce) {
  .p-proof-band .l-section,
  .p-shindan-band__inner,
  .p-stats__grid.js-reveal .p-stats__item { opacity: 1; transform: none; transition: none; }
  .p-stats__number::after { transform: scaleX(1); transition: none; }
  .p-shindan-band__eyebrow::before { animation: none; }
  .p-shindan-band__btn::after { display: none; }
  .p-proof-band .p-clients__item:hover,
  .p-proof-band .p-media__item:hover,
  .p-proof-band .p-ai-services__item:hover { transform: none; }
}