/* SKYLINE GRADIENT — motion.css : reveal / パララックス / 空グラデ遷移 */

/* 空テーマ切替は色トークンの遷移で滑らかに（点滅なし） */
.sky, .header, .status-dot { transition: background 900ms var(--ease), border-color 600ms var(--ease); }

/* reveal 基調 */
[data-reveal] { opacity: 0; transform: translateY(26px); 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(20px) scale(.965); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* 段階表示（グループ）: 子要素に --d 遅延を注入 */
[data-reveal-group] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal-group].is-in > * { opacity: 1; transform: none; }

/* パララックス層（transform は JS が rAF で更新） */
[data-parallax] { will-change: transform; }

/* 浮遊パネルの微かな浮遊（reduce で停止） */
@media (prefers-reduced-motion: no-preference) {
  .is-float { animation: floaty 7s var(--ease) infinite alternate; }
  @keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-8px); } }
}

@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; }
}