/* メインビジュアルの演出（hero-fx.js と対）。
   ・基本の見た目＝演出が終わった状態。隠した状態はキーフレームの from だけに書く
     → 「動きを減らす」設定や動きの停止でアニメーションが外れても、文字は必ず見えている
   ・html.fx-boot＝演出あり（index.html が付ける）／fx-play＝開幕の合図／fx-gl＝WebGL で描けている
   ・出る順番は「--fx-base ＋ 秒数×--fx-k」。開幕の幕のあとは base を足して遅らせ、
     ページ送りで戻ったときは k を小さくして手早く出す */

/* ── 絵 ── */
.hero-fx{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .45s ease-out;pointer-events:none}
.fx-gl .hero-fx{opacity:1}
/* 準備ができるまでは淡い空の色だけを見せる。WebGL が使えなければ従来の背景画像をゆっくり出す */
.fx-boot .hero-art{animation:none;opacity:0;transition:opacity 1.2s ease-out}
.fx-boot.fx-play:not(.fx-gl) .hero-art{opacity:1}

/* 合図までは全部を先頭で止めておく */
.fx-boot:not(.fx-play) .hero *,.fx-boot:not(.fx-play) .hero *:before,.fx-boot:not(.fx-play) .hero *:after{animation-play-state:paused!important}

/* ── 文字 ── */
/* 塊ごとの出現はやめ、行ごとに順番に出す。画面を離れるとき、文字は絵より先に抜けていく */
.fx-boot .hero-copy{animation:none;translate:0 calc(var(--hs,0)*-70px);opacity:calc(1 - var(--hs,0)*1.7)}
/* 文字は動かさない（絵だけが動く）。カメラに合わせて揺らすと読みにくかった */

.fx-boot .hero{--fx-char-from:translate3d(0,.5em,0)}
.fx-boot .hero-eyebrow{animation:fx-fade .8s ease-out backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*.35s)}
.fx-boot .hero-eyebrow>span{transform-origin:left top;animation:fx-draw .7s cubic-bezier(.6,0,.2,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*.35s)}

.fx-ch{display:inline-block}
.fx-boot .hero h1 .fx-ch{animation:fx-char .95s cubic-bezier(.16,.8,.24,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*(.55s + var(--i)*58ms))}

/* 「星に刻め。」：火花が走ったあとに細い線が残り、最後に星がひとつ灯る（横組み＝下線／縦組み＝行の左に沿う線）*/
.fx-engrave-box{position:relative;display:inline-block}
.fx-engrave{position:absolute;left:-.04em;right:.62em;bottom:.24em;height:1px;pointer-events:none}
.fx-engrave b{position:absolute;inset:0;background:currentColor;opacity:.5;transform-origin:left top}
.fx-engrave u{position:absolute;inset:-5px 0;transform:translateX(-100%);opacity:0}
.fx-engrave u:after{content:"";position:absolute;right:0;top:50%;width:30px;height:3px;margin-top:-1.5px;border-radius:3px;background:linear-gradient(90deg,transparent,#fff 75%);box-shadow:0 0 10px 2px #fff,0 0 22px 7px #ffbf52e0}
.fx-engrave svg{position:absolute;left:100%;top:50%;width:.46em;height:.46em;margin:-.23em 0 0 .16em;fill:currentColor;overflow:visible;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #ffd58a)}
.fx-boot .fx-engrave b{animation:fx-draw 1.05s cubic-bezier(.6,0,.2,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*1.8s)}
.fx-boot .fx-engrave u{animation:fx-spark 1.05s cubic-bezier(.6,0,.2,1);animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*1.8s)}
.fx-boot .fx-engrave svg{animation:fx-star 1s cubic-bezier(.2,1.5,.3,1) backwards,fx-twinkle 5.5s ease-in-out infinite;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*1.8s + 1s),calc(var(--fx-base,0s) + var(--fx-k,1)*1.8s + 2.6s)}

.fx-boot .hero-description{animation:fx-rise .9s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*1.5s)}
.fx-boot .hero-lockup:before{transform-origin:left;animation:fx-draw .9s cubic-bezier(.6,0,.2,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*1.75s)}
/* 元の .hero-logo span（ACADEMY の行用）が 1 文字ずつの span にも当たるので打ち消す */
.hero-logo .fx-ch{display:inline-block;font:inherit;letter-spacing:inherit;text-align:inherit;padding:0;margin:0}
.fx-boot .hero-logo .fx-ch{animation:fx-logo .8s cubic-bezier(.16,.8,.24,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*(1.9s + var(--i)*45ms))}
.fx-boot .hero-logo:before{transform-origin:right;animation:fx-draw .8s cubic-bezier(.6,0,.2,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*2.2s)}
.fx-boot .hero-logo:after{transform-origin:left;animation:fx-draw .8s cubic-bezier(.6,0,.2,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*2.2s)}
.fx-boot .hero-logo>span:not(.fx-ch){animation:fx-track 1.1s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*2.25s)}
.fx-boot .hero-jp{animation:fx-fade .8s ease-out backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*2.45s)}
.fx-boot .primary-button{animation:fx-slide .8s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*2.6s)}
.fx-boot .hero-coordinate,.fx-boot .visual-play,.fx-boot .hero-bottom{animation:fx-fade 1.2s ease-out backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*2.6s)}

/* 題字を絵にしたとき（html.copy-art／logo-art）：コピーは書かれるように現れ（縦組みは上から、横組みは左から）、ロゴは光って収まる */
.fx-boot.copy-art .hero-catch-art{animation:fx-art-down 1.5s cubic-bezier(.3,0,.2,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*.55s)}
.fx-boot.copy-art .hero-catch-art-h{animation:fx-art-right 1.4s cubic-bezier(.3,0,.2,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*.55s)}
.fx-boot.logo-art .hero-logo-art{animation:fx-art-in 1.25s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--fx-base,0s) + var(--fx-k,1)*1.7s)}

/* 縦組み（PC・タブレット）：文字は上から落ちて収まり、線は行の左を上から下へ刻む */
@media(min-width:641px){
  .fx-boot .hero{--fx-char-from:translate3d(0,-.42em,0)}
  .fx-engrave{left:-.2em;right:auto;top:.04em;bottom:.5em;width:1px;height:auto}
  .fx-engrave u{inset:0 -5px;transform:translateY(-100%)}
  .fx-engrave u:after{right:auto;left:50%;top:auto;bottom:0;width:3px;height:30px;margin:0 0 0 -1.5px;background:linear-gradient(180deg,transparent,#fff 75%)}
  .fx-engrave svg{left:50%;top:100%;margin:.2em 0 0 -.23em}
  .fx-boot .fx-engrave b{animation-name:fx-draw-y}
  .fx-boot .fx-engrave u{animation-name:fx-spark-y}
  .fx-boot .hero-eyebrow>span{animation-name:fx-draw-y}
}

/* ── 花びら（hero-fx.js が 3 層ぶんを作る）── */
.fx-boot .petals i.fx-petal{left:var(--x);top:-7%;width:var(--w);height:calc(var(--w)*.52);opacity:0;background:linear-gradient(120deg,#fff,#dbeaff 75%);filter:blur(var(--b));animation:fx-petal var(--dur) linear var(--delay) infinite}

/* 動きを止めたら、途中で固まらないよう演出ごと外して終わった状態にする */
.motion-off .hero *,.motion-off .hero *:before,.motion-off .hero *:after{animation:none!important}

@keyframes fx-art-right{from{clip-path:inset(0 100% 0 0);opacity:.2;filter:blur(6px)}35%{filter:blur(0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fx-art-down{from{clip-path:inset(0 0 100% 0);opacity:.2;filter:blur(6px)}35%{filter:blur(0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fx-art-in{from{opacity:0;transform:scale(.9);filter:blur(10px) brightness(1)}55%{opacity:1;filter:blur(0) brightness(1)}72%{filter:blur(0) brightness(1.7)}to{filter:blur(0) brightness(1)}}
@keyframes fx-fade{from{opacity:0}}
@keyframes fx-draw{from{transform:scaleX(0)}}
@keyframes fx-draw-y{from{transform:scaleY(0)}}
@keyframes fx-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes fx-slide{from{opacity:0;transform:translateX(-16px)}}
@keyframes fx-char{from{opacity:0;transform:var(--fx-char-from) scale(1.06);filter:blur(9px)}60%{filter:blur(0)}}
@keyframes fx-logo{from{opacity:0;transform:translate3d(0,.32em,0);filter:blur(6px)}70%{filter:blur(0)}}
@keyframes fx-track{from{opacity:0;letter-spacing:1.9em}}
@keyframes fx-spark{0%{transform:translateX(-100%);opacity:0}10%{opacity:1}88%{opacity:1}100%{transform:translateX(0);opacity:0}}
@keyframes fx-spark-y{0%{transform:translateY(-100%);opacity:0}10%{opacity:1}88%{opacity:1}100%{transform:translateY(0);opacity:0}}
@keyframes fx-star{from{opacity:0;transform:scale(0) rotate(-90deg)}}
@keyframes fx-twinkle{0%,82%,100%{transform:scale(1);opacity:1}88%{transform:scale(1.55) rotate(45deg);opacity:.75}94%{transform:scale(.9);opacity:1}}
@keyframes fx-petal{
  0%{transform:translate3d(0,0,0) rotate(0deg) rotateX(0deg);opacity:0}
  8%{opacity:var(--o)}
  50%{transform:translate3d(calc(var(--dx)*.45 + var(--sway)),56vh,0) rotate(calc(var(--rot)*.5)) rotateX(180deg)}
  92%{opacity:var(--o)}
  100%{transform:translate3d(var(--dx),114vh,0) rotate(var(--rot)) rotateX(360deg);opacity:0}
}