/* SIGNATURE SIDEBAR (SITE 58) — motion.css
   reveal = fade-up 基調（中央のみ・レールは動かさない）。IntersectionObserver で 1回再生。
   パララックスは中央HEROのみ（JSが transform を当てる）。reduce で全停止。 */

/* reveal 初期状態 */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="fade-in"] { transform: none; }
[data-reveal="scale-soft"] { transform: translateY(18px) scale(.985); }

/* stagger（グループ内の順次表示 60〜100ms） */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal-group].is-in > * { opacity: 1; transform: none; }
[data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-in > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-group].is-in > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-group].is-in > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-group].is-in > *:nth-child(5) { transition-delay: 240ms; }
[data-reveal-group].is-in > *:nth-child(6) { transition-delay: 240ms; }

/* reveal 発火 */
[data-reveal].is-in { opacity: 1; transform: none; }

/* 読み込み時の短いフェード（本文を長時間待たせない） */
.center > .hero { animation: sig-hero-in .7s var(--ease) both; }
@keyframes sig-hero-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* サイドパネル本文の軽い立ち上がり */
.sidepanel.is-open .sidepanel__body > * { animation: sig-sp-in .5s var(--ease) both; }
.sidepanel.is-open .sidepanel__body > *:nth-child(2) { animation-delay: .05s; }
.sidepanel.is-open .sidepanel__body > *:nth-child(3) { animation-delay: .1s; }
@keyframes sig-sp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- reduced motion：全停止 ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .center > .hero,
  .sidepanel.is-open .sidepanel__body > * { animation: none !important; }
  .hero__img { transform: none !important; }
  * { scroll-behavior: auto !important; }
}