/* ==========================================================================
   Orbit Core LP — motion-hero.css
   トップのヒーローセクション専用の演出（animation-plus の motion.css から
   ヒーロー部分だけを移植）。style.css の後ろで読み込む。
   このファイルと motion-flag.js / motion-hero.js を外せば元の表示に戻る。

   ・隠す系の初期状態はすべて html.motion の下にだけ書く。
     html.motion は motion-flag.js が「JS 有効 かつ 視差効果を減らす が
     オフ」のときだけ付けるので、それ以外の環境では最初から完成形が表示される。
   ・再生開始は body.is-ready（script.js がローダーを消した時点で付ける）。
   ========================================================================== */

:root {
  --m-ease-out: cubic-bezier(.16, .84, .24, 1);
  --m-ease-expo: cubic-bezier(.19, 1, .22, 1);
}

/* ---------- 見出しの行マスク（motion-hero.js が .line > .line-inner に分ける） ---------- */
.hero-title.is-split .line {
  display: block;
  overflow: hidden;
  /* 字面の上下が切れないよう、はみ出しぶんを内側に確保して外側で相殺 */
  padding: .12em 0 .1em;
  margin: -.12em 0 -.1em;
}
.hero-title.is-split .line-inner { display: block; }

/* ---------- 背景（写真・グラデーション・粒子の canvas をまとめる箱） ---------- */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;           /* 拡大・視差で動く背景をヒーロー内に収める */
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* 数秒おきに画面を横切る光のスキャン */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 42%, rgba(255, 255, 255, .28) 49%,
    rgba(127, 220, 230, .22) 51%, transparent 58%);
  background-size: 260% 100%;
  background-position: 130% 0;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

html.motion .hero-bg {
  scale: 1.06;
  translate: 0 var(--hy, 0px);   /* スクロール視差（motion-hero.js が --hy を書き込む） */
  will-change: translate, scale;
  animation: m-hero-zoom 7s var(--m-ease-out) both paused;
}
html.motion .hero-media::after { animation: m-sweep 9s ease-in-out 2.4s infinite paused; }
/* 粒子はローダーが消えてから、ゆっくり浮かび上がる */
html.motion .hero-canvas { opacity: 0; transition: opacity 2.4s ease .6s; }
html.motion body.is-ready .hero-canvas { opacity: 1; }
html.motion body.is-ready .hero-bg,
html.motion body.is-ready .hero-media::after { animation-play-state: running; }

@keyframes m-hero-zoom { from { scale: 1.16; filter: brightness(.7) saturate(.6); } to { scale: 1.06; filter: none; } }
@keyframes m-sweep {
  0%   { background-position: 130% 0; }
  40%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}

/* ---------- 見出し：1 行ずつ、マスクの下からせり上がる ---------- */
html.motion .hero-title:not(.is-split) {
  opacity: 0;
  animation: m-fallback-show 0s 5s forwards;   /* motion-hero.js が来なかったときの保険 */
}
@keyframes m-fallback-show { to { opacity: 1; } }

html.motion .hero-title .line-inner {
  animation: m-line-up 1.3s var(--m-ease-expo) both paused;
  animation-delay: calc(.3s + var(--li, 0) * 120ms);
}
html.motion body.is-ready .hero-title .line-inner { animation-play-state: running; }
@keyframes m-line-up { from { transform: translateY(110%); } to { transform: none; } }

/* ---------- ラベル・サブコピー・ボタンは見出しのあとに順番に ---------- */
html.motion .hero-label,
html.motion .hero-sub,
html.motion .hero-ctas {
  animation: m-fade-up .9s var(--m-ease-out) both paused;
}
html.motion .hero-label { animation-delay: .1s; }
html.motion .hero-sub   { animation-delay: .75s; }
html.motion .hero-ctas  { animation-delay: .9s; }
html.motion .hero-label .rule {
  transform-origin: left center;
  animation: m-rule-grow .8s var(--m-ease-out) .25s both paused;
}
html.motion body.is-ready .hero-label,
html.motion body.is-ready .hero-sub,
html.motion body.is-ready .hero-ctas,
html.motion body.is-ready .hero-label .rule { animation-play-state: running; }

@keyframes m-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes m-rule-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Reduced motion ----------
   html.motion が付かないので大半は自動で止まる。クラスに依存しない光のスキャンだけ止める。 */
@media (prefers-reduced-motion: reduce) {
  .hero-media::after { animation: none !important; }
}