/* site.css — 新トップデザインのモーション・補助スタイル（Claude Design 由来）
 * front-page（トップ）でのみ読み込む。 */

html { scroll-behavior: smooth; }

@keyframes ksz-drift-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, -22px); } }
@keyframes ksz-drift-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, 16px); } }

@media (max-width: 840px) { .ksz-hide-sm { display: none !important; } }

/* スクロール連動の表示アニメーション（site-motion.js が data-rv を付与） */
html.rv-ready [data-rv] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rv-delay, 0ms);
}
html.rv-ready [data-rv].rv-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  transition-delay: var(--rv-delay, 0ms), var(--rv-delay, 0ms), 0ms, 0ms, 0ms;
}
[data-elevate] { transition: box-shadow 0.25s ease; }
[data-elevate].is-elevated { box-shadow: var(--shadow-raised); }
@media (prefers-reduced-motion: reduce) {
  html.rv-ready [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* style-hover の代替（ホバー挙動を CSS クラスで再現） */
.ksz-navlink { transition: color 0.15s ease; }
.ksz-navlink:hover { color: var(--brand-color-vermilion); }
.ksz-footlink { transition: color 0.15s ease; }
.ksz-footlink:hover { color: #FFFFFF !important; }
.ksz-lift { transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.ksz-lift:hover { box-shadow: var(--shadow-raised); border-color: var(--color-border-strong); }