/* ============================================================
   LATERAL — トップページ 初回イントロ演出
   **秒数の正本はこのファイル。** 下のCSS変数を intro.js が読む。
   JS側に数字を書き写さないこと。

     描画    480 ms   地球儀・文字・大陸を重ねて走らせた合計
     キープ  520 ms   完成形が静止している時間
     移動    700 ms   縮みながらヘッダーの定位置へ
     受け渡し 200 ms   着地して本物のロゴと入れ替わる（見た目には出ない）
     ────────────────
     合計    1900 ms

   退場は2段構え:
     既定    = CSSだけで「その場で消える」。1300 ms で完走（JSが死んでもここで終わる）
     乗っ取り = intro.js が飛び先を実測できたときだけ .is-flying を付けて差し替える
   ============================================================ */

.lt-intro { display: none; }

.lt-has-intro .lt-intro {
  --lt-draw:    480ms;
  --lt-keep:    520ms;
  --lt-move:    700ms;
  --lt-handoff: 200ms;

  display: block;
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: #fff;
  /* ↓ 保険の退場。JSが引き取れば .is-flying で止まる */
  animation: lt-intro-out 300ms ease 1000ms forwards;
}

.lt-intro__logo {
  position: absolute;
  top: 50%; left: 50%;
  width: min(52vw, 420px);
  transform: translate(-50%, -50%);
  animation: lt-logo-out 300ms ease 1000ms forwards;
}
.lt-intro__logo svg { width: 100%; height: auto; display: block; }

@keyframes lt-intro-out { to { opacity: 0; visibility: hidden; } }
@keyframes lt-logo-out  { to { transform: translate(-50%, -50%) scale(1.03); } }

/* JSが飛ばす側を引き受けたら、保険の退場は止める。
   ⚠ 消すのではなく止めるだけ。JSは transform / background-color を直に書く。 */
.lt-intro.is-flying,
.lt-intro.is-flying .lt-intro__logo { animation: none !important; }

/* --- 地球儀: 16本を線で描く。pathLength="100" で正規化済み --- */
.lt-wire path {
  fill: none;
  stroke: #DE9044;
  stroke-width: .4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: lt-draw 260ms cubic-bezier(.25,.8,.35,1) forwards;
}
@keyframes lt-draw { to { stroke-dashoffset: 0; } }

.lt-wire path:nth-child(1) { animation-delay: 0ms; }
.lt-wire path:nth-child(2) { animation-delay: 7ms; }
.lt-wire path:nth-child(3) { animation-delay: 14ms; }
.lt-wire path:nth-child(4) { animation-delay: 21ms; }
.lt-wire path:nth-child(5) { animation-delay: 28ms; }
.lt-wire path:nth-child(6) { animation-delay: 35ms; }
.lt-wire path:nth-child(7) { animation-delay: 42ms; }
.lt-wire path:nth-child(8) { animation-delay: 49ms; }
.lt-wire path:nth-child(9) { animation-delay: 56ms; }
.lt-wire path:nth-child(10) { animation-delay: 63ms; }
.lt-wire path:nth-child(11) { animation-delay: 70ms; }
.lt-wire path:nth-child(12) { animation-delay: 77ms; }
.lt-wire path:nth-child(13) { animation-delay: 84ms; }
.lt-wire path:nth-child(14) { animation-delay: 91ms; }
.lt-wire path:nth-child(15) { animation-delay: 98ms; }
.lt-wire path:nth-child(16) { animation-delay: 105ms; }

/* --- 文字: 1文字ずつ塗りワイプ。clipPathの平行四辺形を左から流し込む --- */
.lt-text path { fill: #1A1A1A; }
.lt-intro clipPath polygon {
  transform: translateX(-100px);
  animation: lt-wipe 140ms cubic-bezier(.35,0,.3,1) forwards;
}
@keyframes lt-wipe { to { transform: translateX(0); } }

#lt-wipe-0 polygon { transform: translateX(-28.65px); animation-delay: 70ms; }
#lt-wipe-1 polygon { transform: translateX(-37.00px); animation-delay: 100ms; }
#lt-wipe-2 polygon { transform: translateX(-37.58px); animation-delay: 130ms; }
#lt-wipe-3 polygon { transform: translateX(-33.15px); animation-delay: 160ms; }
#lt-wipe-4 polygon { transform: translateX(-34.02px); animation-delay: 190ms; }
#lt-wipe-5 polygon { transform: translateX(-37.00px); animation-delay: 220ms; }
#lt-wipe-6 polygon { transform: translateX(-28.65px); animation-delay: 250ms; }

/* --- 大陸・下線: 最後にふわっと乗る --- */
.lt-land, .lt-bars {
  fill: #DE9044;
  opacity: 0;
  animation: lt-fade 170ms ease 310ms forwards;
}
.lt-bars { animation-delay: 370ms; }
@keyframes lt-fade { to { opacity: 1; } }

/* --- 安全側の倒し方 --------------------------------------------------
   1. reduce: 演出そのものを出さない。
      ⚠ base.css が reduce で全アニメを .001ms に潰すので、放っておくと
        「一瞬チラついて消える」になる。display:none で断ち切る。
   2. スキップ: クリック・スクロール・キー操作で即座に閉じる（intro.js）。
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lt-has-intro .lt-intro { display: none !important; }
}

.lt-intro.is-skip {
  animation: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.lt-intro.is-skip .lt-intro__logo { transition: none !important; }