/*
 * 効果：スクロールで表示する動き、ボタンの光、英字ラベルの前の黄色いドット。
 *
 * ホバーのルール（README の "デザインのルール" を参照）：
 *   ボタン — 黄色に塗りつぶし、光の帯が横切る
 *   カード — 枠線が紺色になり、矢印が右へ動き、写真が少し拡大する
 */
:root {
  --light-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/*
 * スクロールで表示：class="reveal" の要素は、画面に入ると下からすっと上がってくる。
 * assets/js/site.js が data-reveal を付ける。スクリプトが動かなくても内容は見えたまま。
 * ブロックエディターでは：ブロックの右側 → 動き → 「スクロールで表示」（"reveal" クラスが付く）。
 */
.reveal[data-reveal="hidden"] {
  opacity: 0;
  transform: translateY(24px);
}

.reveal[data-reveal="shown"] {
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ホバーするとボタンの上を光の帯が横切る */
.shine,
.rcs-blocks .wp-block-button__link,
.contact-form .smf-button-control__control {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.shine::before,
.rcs-blocks .wp-block-button__link::before,
.contact-form .smf-button-control__control::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(110deg, transparent 30%, var(--shine-color, rgb(180 190 254 / 0.45)) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
  transition: transform 0.7s var(--light-ease);
}

.shine:hover::before,
.shine:focus-visible::before,
.rcs-blocks .wp-block-button__link:hover::before,
.contact-form .smf-button-control__control:hover::before {
  transform: translateX(120%);
}

/* ホバー中に白くなるボタン：水色の帯の代わりに淡い青の帯にする */
.shine--on-white,
.site-header[data-over="true"] .shine,
.wp-block-button.is-style-rcs-white .wp-block-button__link,
.wp-block-button.is-style-rcs-ghost .wp-block-button__link,
.contact-form [data-action="back"] .smf-button-control__control,
.contact-form .smf-button-control__control[data-action="back"] {
  --shine-color: rgb(30 102 245 / 0.15);
}

/* 英字ラベルの前の黄色いドット */
.dot::before,
p.is-style-rcs-eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.625rem;
  border-radius: var(--radius-round);
  background: var(--color-yellow);
  vertical-align: 0.1em;
}

/* カードやボタンをホバーすると右へ動く矢印 */
.arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}

a:hover .arrow {
  transform: translateX(0.25rem);
}

/* カードをホバーすると少し拡大する写真 */
.zoom {
  transition: transform 0.7s var(--ease);
}

a:hover .zoom {
  transform: scale(1.05);
}

/* 端末の "動きを減らす" 設定：アニメーションも動く光も止める */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .shine::before,
  .rcs-blocks .wp-block-button__link::before,
  .contact-form .smf-button-control__control::before {
    display: none;
  }
}