/* ============================================================
   motion.css — LUXNOIR LP
   キーフレーム / スクロールリビール基盤 / reduced-motion 対応
   カウントアップ・発光演出などの実際の制御は assets/js/main.js（別担当）
   ============================================================ */

/* ---------- キーフレーム ---------- */

/* HERO 背景の浮遊粒子 */
@keyframes float-p{
  0%{
    transform: translate3d(0,0,0);
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    transform: translate3d(0,-120px,0);
    opacity: 0;
  }
}

/* ローディング画面：ゴールドの縦ラインが開く */
@keyframes line-open{
  0%{
    transform: scaleY(0);
    opacity: 0;
  }
  40%{
    opacity: 1;
  }
  100%{
    transform: scaleY(1);
    opacity: 1;
  }
}

/* ---------- スクロールリビール基盤 ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--e-out), transform .8s var(--e-out);
}

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

[data-reveal-delay="120"]{
  transition-delay: .12s;
}

[data-reveal-delay="240"]{
  transition-delay: .24s;
}

/* ---------- ローディング画面（マークアップのみ・制御はJS） ---------- */
.s-load{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background-color: var(--bg-0);
}

.s-load__line{
  width: 1px;
  height: 80px;
  background: var(--grad-gold);
  transform-origin: center;
  animation: line-open 1.1s var(--e-out) forwards;
}

.s-load__brand{
  font-family: var(--f-num);
  font-size: 1.2rem;
  letter-spacing: .3em;
  color: var(--tx-mid);
}

/* ---------- HERO 浮遊粒子（配置はJS/sections-a.cssで個別調整想定） ---------- */
.s-hero__p{
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: var(--gold-lt);
  animation: float-p 8s linear infinite;
}

/* ---------- reduced-motion 対応（必須・末尾固定） ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .s-load{display:none!important}
}