/* NEON OUTLINE — motion.css : reveal / parallax の初期姿勢と reduced-motion（輪郭が現れる fade-in 基調） */

/* reveal 初期状態（JS が is-in を付与して発火） */
[data-reveal] { opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
[data-reveal="fade-in"] { transform: none; }
[data-reveal="fade-up"] { transform: translateY(26px); }
[data-reveal="fade-left"] { transform: translateX(-26px); }
[data-reveal="fade-right"] { transform: translateX(26px); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* 輪郭が描かれる演出：fade-in 要素の枠を後追いで灯す */
[data-reveal="fade-in"] { box-shadow: 0 0 0 0 rgba(47,125,225,0); }
[data-reveal="fade-in"].is-in { transition: opacity .8s var(--ease), box-shadow .9s var(--ease) .1s; }

/* 段階表示（カード群）stagger は JS が --d を注入 */
[data-reveal-group] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
[data-reveal-group].is-in > * { opacity: 1; transform: none; }

/* パララックス対象は transform を JS が書き換える */
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
  .slider__track { transition: none !important; }
}