/* ============================================================
   トップのオープニングアニメーション（?op=a / ?op=b のときだけ読む。見比べ用）
   2026-10-15 菊池さん依頼。マークアップは template-parts/opening.php、動きは assets/js/opening.js。
   ★部品の位置と大きさは JS が画面に合わせて入れる（ここでは見た目だけ）。
   ★案が決まったら、選ばなかった方をここから消すこと。
   ============================================================ */

.t2-op {
  position: fixed; inset: 0;
  z-index: 10000;            /* ヘッダー（sticky）や下のバー（.t2-mcta）より上 */
  overflow: hidden;
  cursor: pointer;           /* どこをクリックしても飛ばせる */
}
.t2-op.is-out { opacity: 0; transition: opacity .35s ease; pointer-events: none; }

/* 景色。クラフト紙（トップの他のセクションと同じ紙の画像を、少し明るくして敷く） */
.t2-op {
  --op-paper:
    linear-gradient(rgba(230, 217, 193, .45), rgba(230, 217, 193, .45)),
    url('../img/top2_paper.jpg') 0 0 / 450px auto,
    #e6d9c1;
}
.t2-op__scene { position: absolute; inset: 0; background: var(--op-paper); }
.t2-op__world { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* A は幕（scene）ごと右へずらし、中身（world）を同じだけ左へ戻して止まって見せる。
   ★幕の端を clip-path で動かすと、トラック（transform）と別の仕組みで描かれるため、
     画面によっては幕の端がトラックから遅れて隙間が見えた。両方 transform にして揃えている。
     紙は中身の側に描く（幕の側に描くと、紙の模様が幕と一緒に流れてしまう） */
.t2-op--a .t2-op__scene { background: none; overflow: hidden; }
.t2-op--a .t2-op__world { background: var(--op-paper); }

/* 地面と道路の白線。白線の位置・長さは JS が --op-* で入れる */
.t2-op__ground {
  position: absolute; bottom: 0;
  background: #cdb994;
  border-top: 3px solid #6b573f;
}
.t2-op__ground::after {
  content: "";
  position: absolute; left: 0; right: 0;
  top: var(--op-road, 54px); height: var(--op-dash-h, 5px);
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .85) 0 var(--op-dash, 44px),
    transparent var(--op-dash, 44px) var(--op-dash-gap, 84px));
}

.t2-op__obj, .t2-op__truck { position: absolute; left: 0; top: 0; overflow: visible; }
/* JS が置き終わるまでは紙と地面だけ（置く前の位置が一瞬見えないように） */
.t2-op:not(.is-ready) .t2-op__obj,
.t2-op:not(.is-ready) .t2-op__truck { visibility: hidden; }
.t2-op__box { opacity: 0; }

/* トラック。車輪は走っている間だけ回し、車体を小さく揺らす */
.t2-op__truck-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.op-wheel, .op-body { transform-box: fill-box; transform-origin: center; }
.t2-op__truck.is-rolling .op-wheel { animation: op-spin .42s linear infinite; }
.t2-op__truck.is-rolling .op-body  { animation: op-bump .24s ease-in-out infinite alternate; }
@keyframes op-spin { to { transform: rotate(360deg); } }
@keyframes op-bump { to { transform: translateY(-1.4px); } }

/* スピード線（トラックの後ろ）。走っている間だけ出す */
.t2-op__speed {
  position: absolute; right: 100%; top: 18%;
  width: 26%; height: 34%; margin-right: 2%;
  opacity: 0; transition: opacity .25s;
}
.t2-op__truck.is-rolling .t2-op__speed { opacity: 1; }

/* A：幕の端の影。幕がめくれて、現れたページの側に落ちる影（トラックの後ろの端と一緒に動く） */
.t2-op__shade { display: none; }
.t2-op--a .t2-op__shade {
  display: block;
  position: absolute; right: 100%; width: 28px;
  background: linear-gradient(to left, rgba(43, 38, 32, .26), rgba(43, 38, 32, 0));
}

/* スキップ */
.t2-op__skip {
  position: absolute; z-index: 2;
  right: clamp(12px, 2vw, 28px);
  bottom: calc(clamp(12px, 2vw, 28px) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .6rem .85rem .6rem 1.15rem;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #2a5c3a;
  font: 700 .85rem/1 'Noto Sans JP', sans-serif; letter-spacing: .08em;
  box-shadow: 0 2px 10px rgba(43, 38, 32, .15);
  cursor: pointer;
}
.t2-op__skip:hover { background: #fff; }
.t2-op__skip:focus-visible { outline: 2px solid #2a5c3a; outline-offset: 2px; }

/* 幕が開くまで、KVの登場の動きを止めておく（案3はCSSアニメーションなので一時停止。
   案2は top2.js が t2:opreveal を待つ） */
html.is-op-hold .t2-split__inner > *,
html.is-op-hold .t2-split__col { animation-play-state: paused; }