/* オープニング（確定：「線から（間）」）
   白の地のど真ん中に金の線が引かれ、線の上へ Wellness、線の下へ Design. が生まれる。
   2.9秒で言葉は左下の部屋へ降り、中央から順に部屋がひらく。
   html の印：op-play＝再生する／op-skip＝省く（再訪・動きを減らす設定）／op-go＝開始／op-land＝着地／op-done＝切り抜きを外す
   時刻は js/config.js、位置合わせは js/opening.js */

/* 測り終えるまで、動きを止めておく（測る前に動き出すと中央からずれる）。言葉の部屋も、測り終えて動き出す（op-go）までは見せない：
   JS が文字を一字ずつに分ける前の素の文字が、読み込みの瞬間に一瞬見える（2026-10-06 iPhone で発生）のを止める */
.op-play:not(.op-go) .copy{opacity:0}
.op-play:not(.op-go) *,.op-play:not(.op-go) *::after{animation-play-state:paused!important}
.op-play:not(.op-go) .disp-wrap{transition:none!important}
/* 省く時（戻る／進む・hash・動きを減らす）も、言葉の部屋は js/plan.js が左下の部屋へ置く（op-ready）までは見せない：置く前は .copy が左上（left:0 top:0）にあり、素の文字が一瞬見える（2026-10-08 本人：下層からロゴで戻った時に左上でフラッシュ）。opacity は送りの量で JS が上書きするので visibility で */
.op-skip:not(.op-ready) .copy{visibility:hidden}

/* 中央に大きく → 左下へ着地 */
.op-play .disp-wrap{transform:translate(var(--dx,0),var(--dy,0)) scale(var(--sc,1));transition:transform 1.5s var(--ease-io)}
.op-play.op-land .disp-wrap{transform:none}

/* 金の線：2行の間。js/opening.js が高さ（--seedY）を入れ、この線が画面の中心に来るよう言葉を置く */
.seed{position:absolute;left:-2%;right:-2%;top:var(--seedY,50%);height:1px;background:var(--line-gold);transform:scaleX(0);opacity:0;pointer-events:none}
.op-play .seed{opacity:1;animation:draw 1.1s var(--ease) .25s forwards}
.op-play.op-land .seed{opacity:0;transition:opacity .8s ease .5s}       /* 着地したら、床の金の線へ受け渡して消える */
@keyframes draw{to{transform:scaleX(1)}}

/* 線から文字が生まれる：Wellness は上へ、Design. は下へ */
.op-play .w1 .ch>i{transform:translateY(110%);animation:rise 1.3s var(--ease) forwards;animation-delay:calc(1s + var(--i)*45ms)}
.op-play .w2 .ch>i{transform:translateY(-110%);animation:rise 1.3s var(--ease) forwards;animation-delay:calc(1s + (var(--i) - 4)*45ms)}
@keyframes rise{to{transform:none}}

/* 着地のあと：旗が一文字ずつ立ち、床の金の線が引かれる */
.op-play .catch .ch>i{opacity:0;transform:translateY(105%)}
.op-play.op-land .catch .ch>i{animation:rise 1s var(--ease) forwards,fade .8s ease forwards;animation-delay:calc(1.1s + var(--i)*55ms)}
@keyframes fade{to{opacity:1}}
.op-play .floor{transform:scaleX(0)}
.op-play.op-land .floor{transform:none;transition:transform 1.8s var(--ease) .7s}