/* ============================================================
   ULESEE Motion Layer
   全ページ共通の「動き」を司るスタイル。
   方針: 既存の上質なトーンを壊さない。派手にしない。
        慣性・間・連動で“予算をかけた”質感を出す。
   ============================================================ */

/* ---- Lenis (慣性スクロール) 必須スタイル ------------------ */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============================================================
   0. スクロールリビール基底（全ページ共通）
   各ページのインライン定義と重複しても同値なので無害。
   .anim が外れれば（フェイルセーフ時）本文は常に表示される。
   ============================================================ */
.anim .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   1. 見出しのマスク立ち上げ（signature）
   <br> 区切りごとに1行ずつ、マスクの裏からせり上がる。
   ※ JSが lines を生成するまでは元テキストがそのまま表示される
   ============================================================ */
[data-reveal="lines"] .ln {
  display: block;
  overflow: hidden;
}
.anim [data-reveal="lines"] .ln-i {
  display: block;
  transform: translateY(115%);
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
[data-reveal="lines"] .ln-i { display: block; }
[data-reveal="lines"].is-in .ln-i { transform: translateY(0); }
/* 行ごとの僅かなstagger（最大6行） */
[data-reveal="lines"] .ln:nth-child(1) .ln-i { transition-delay: 0.00s; }
[data-reveal="lines"] .ln:nth-child(2) .ln-i { transition-delay: 0.09s; }
[data-reveal="lines"] .ln:nth-child(3) .ln-i { transition-delay: 0.18s; }
[data-reveal="lines"] .ln:nth-child(4) .ln-i { transition-delay: 0.27s; }
[data-reveal="lines"] .ln:nth-child(5) .ln-i { transition-delay: 0.36s; }
[data-reveal="lines"] .ln:nth-child(6) .ln-i { transition-delay: 0.45s; }

/* lines見出しを内包する .reveal 親は自身のフェードを止め、
   行マスクに主役を譲る（兄弟要素は各自 .reveal を持たせる） */
.reveal:has([data-reveal="lines"]) {
  opacity: 1;
  transform: none;
}

/* ============================================================
   2. 画像のクリップ展開 ＋ 微パララックス
   .img-reveal を画像コンテナに付与。左→右へワイプして展開。
   data-parallax を付けた画像はスクロールで僅かに浮遊する。
   ============================================================ */
.img-reveal { overflow: hidden; }
.anim .img-reveal > img {
  clip-path: inset(0 100% 0 0); /* 左→右へワイプ展開 */
  transform: scale(1.04);
  transition:
    clip-path 1.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path, transform;
}
.img-reveal.is-in > img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
/* パララックス対象は余白確保のため常時わずかに拡大しておく
   （JSが transform を毎フレーム上書きするので transition は切る） */
.anim .img-reveal[data-parallax] > img { transform: scale(1.08); }
.img-reveal[data-parallax].is-in > img { transition: clip-path 1.5s cubic-bezier(0.16, 1, 0.3, 1); }

/* ホバーで画像が静かに寄る（上質な“生きてる”感） */
.img-hover { overflow: hidden; }
.img-hover img {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.img-hover:hover img { transform: scale(1.035); }
/* パララックスとホバー拡大が競合する画像はホバー拡大を無効化 */
.img-reveal[data-parallax].img-hover:hover img { transform: none; }

/* ============================================================
   3. ヒーローのアンビエント
   背景がごく緩やかにズームし、空気が動いて見える。
   ============================================================ */
.hero-bg {
  animation: heroDrift 24s ease-in-out 0.2s infinite alternate;
  transform-origin: 50% 60%;
}
@keyframes heroDrift {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}

/* ============================================================
   4. テキストリンクの下線ワイプ
   ナビ・フッター・News“View All”に、左から伸びる細い下線。
   ============================================================ */
.nav a,
.footer-nav a,
.news-more,
.cta-arrow {
  position: relative;
}
.nav a::after,
.footer-nav a::after,
.news-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav a:hover::after,
.footer-nav a:hover::after,
.news-more:hover::after { transform: scaleX(1); }
/* 下線を足したので、ナビ標準のopacity低下は控えめに上書き */
.nav a:hover { opacity: 1; }

/* News項目: ホバーで左に細い罫が引かれる */
.news-item { position: relative; }
.news-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--text);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.news-item:hover::before { transform: scaleY(1); }

/* ============================================================
   6. 軽量モード（記事ページ） <body data-motion="light">
   慣性スクロール無し・本文常時表示。
   読み込み時の上品なフェードは CSS のみ（JS非依存／本文は消えない）。
   .lite-in を付けた要素だけが一度だけフワッと立ち上がる。
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  [data-motion="light"] .lite-in {
    animation: liteIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  [data-motion="light"] .lite-in.d2 { animation-delay: 0.08s; }
  [data-motion="light"] .lite-in.d3 { animation-delay: 0.16s; }
}
@keyframes liteIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   5. アクセシビリティ / 品質の床
   ============================================================ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* prefers-reduced-motion: 動きを止め、すべて即時表示 */
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  [data-reveal="lines"] .ln-i { transform: none !important; transition: none !important; }
  .img-reveal > img {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
  .img-hover:hover img { transform: none; }
}