/* すにすて3rdライブLP — 動き
 *
 * ■ 戻し方
 *   index.html の <head> にある2行（この anim.css の <link> と anim.js の <script>）を消すだけ。
 *   このファイルと assets/js/anim.js は消さずに残しておいてもよい（読み込まれなければ何も起きない）。
 *
 * ■ 作りの決まり
 *   - 出る前の「隠した状態」は html.js-anim が付いているときだけ効く。
 *     js-anim は anim.js が付けるので、JS が動かない環境・動きを減らす設定の人には何も隠れない。
 *   - 出終わった状態は opacity:1 / translate:none / scale:none で、デザインと1pxも変わらない。
 *   - 場所の移動は translate・scale（単独プロパティ）で、transform はホバーの持ち上げ用に空けてある。
 *     こうしておくと「出てくる動き」と「ホバー」がぶつからない。
 */

/* ---- 章（セクション）が画面に入ったら、まとめてふわっと出す -------------------
 * .anim は anim.js が章（.sch / .tk / .pp / .qa / .ft）に付ける。
 * 章は縦に隙間なく並んでいるので、位置は動かさず濃さだけで出す（動かすと継ぎ目に隙間が出る）
 */
.js-anim .anim { opacity: 0; transition: opacity .8s ease; }
.js-anim .anim.is-in { opacity: 1; }

/* ---- ファーストビュー（読み込んだ直後）--------------------------------------- */
/* ロゴは「大きい→ふつう」にすると上端が 5px 下がり、画面が下へスクロールしたように見える。
   かならず「小さい→ふつう」側（＝上端が上がる向き）にする */
@keyframes kv-logo  { from { opacity: 0; scale: .97; } to { opacity: 1; scale: 1; } }
/* 読み込み時の動きで要素を縦にずらすと、再読み込みでブラウザが位置を戻すときに
   そのぶん（ここでは 8px）下へずれて復元される。読み込み時は縦に動かさない */
@keyframes kv-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes kv-pop   { 0% { opacity: 0; scale: .72; } 62% { opacity: 1; scale: 1.05; } 100% { opacity: 1; scale: 1; } }
@keyframes kv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.4rem); } }

.js-anim .kv__logo    { animation: kv-logo .9s .1s cubic-bezier(.22, .8, .3, 1) backwards; }
.js-anim .kv__faq     { animation: kv-fade .7s .55s ease-out backwards; }
.js-anim .kv__tickets { animation: kv-pop .6s .7s cubic-bezier(.3, 1.3, .5, 1) backwards; }
.js-anim .kv__tickets img { animation: kv-float 4.5s 1.4s ease-in-out infinite; }   /* バッジだけゆっくり上下に */

/* ---- 押したときの手ごたえ（指で触る端末でも効く）------------------------------ */
.js-anim .btn:active, .js-anim .qa__tab:active, .js-anim .ft__official:active { transform: translateY(.1rem) scale(.985); }
.js-anim .kv__faq:active, .js-anim .kv__tickets:active,
.js-anim .ph__arw:active, .js-anim .ph__dot:active, .js-anim .gmap:active { transform: scale(.94); }
.js-anim .ft__pill:active, .js-anim .side__share-lk:active { animation: none; box-shadow: 0 0 1.1rem .15rem rgba(204, 255, 2, .9); }
.js-anim .btn, .js-anim .qa__tab, .js-anim .ft__official, .js-anim .ft__pill, .js-anim .side__share-lk,
.js-anim .kv__faq, .js-anim .kv__tickets, .js-anim .ph__arw, .js-anim .ph__dot, .js-anim .gmap { transition: transform .18s ease; }

/* ---- SHARE / Official SNS の小さいボタン --------------------------------------
 * ピルの絵は下地の画像（box_share_sns.webp / bg_pc_left.webp）に描かれていて、
 * リンクの要素そのものは透明。大きさを変えても何も見えないので、まわりの光で反応させる。
 * 出るときだけ 1回、左から順に灯る（くり返しはしない）
 */
@keyframes pill-wave {
  0%   { box-shadow: 0 0 0 0 rgba(204, 255, 2, 0); }
  40%  { box-shadow: 0 0 .9rem .1rem rgba(204, 255, 2, .75); }
  100% { box-shadow: 0 0 0 0 rgba(204, 255, 2, 0); }
}
.js-anim .ft__pill, .js-anim .side__share-lk {
  border-radius: 1.15rem;   /* Figma: radius 48（完全な角丸）*/
  transition: box-shadow .2s ease;
}
.js-anim .ft.is-in .ft__pill { animation: pill-wave .8s calc(.3s + var(--i, 0) * 120ms) ease-out; }
.js-anim .side__share-lk     { animation: pill-wave .8s calc(1.6s + var(--i, 0) * 120ms) ease-out; }

/* ---- 押せるものは少し反応する（マウスのある環境だけ）-------------------------- */
@media (hover: hover) {
  .ph__play, .menu__list a, .side__nav a { transition: transform .25s cubic-bezier(.22, .8, .3, 1); }
  .btn:hover, .qa__tab:hover, .ft__official:hover { transform: translateY(-.2rem); }
  .gmap:hover, .menu__list a:hover, .side__nav a:hover { transform: translateY(-.1rem); }
  .kv__faq:hover { transform: scale(1.07); }
  .js-anim .ft__pill:hover, .js-anim .side__share-lk:hover { animation: none; box-shadow: 0 0 .9rem .1rem rgba(204, 255, 2, .85); }
  .kv__tickets:hover, .ph__arw:hover, .ph__play:hover { transform: scale(1.05); }
  .ph__dot:hover { transform: scale(1.25); }
}

/* ---- 折りたたみの開閉を、高さごとなめらかに ------------------------------------
 * 開け閉めすると章の高さが変わる（よくあるご質問の章は中身なりの高さにしてある）。
 * 対応しているブラウザ（Chrome 131 以降）だけ、その変化をなめらかにする。
 * 対応していないブラウザでは今までどおり一瞬で開く（崩れない）。
 */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  .js-anim .acc, .js-anim .qa__item { interpolate-size: allow-keywords; }
  .js-anim .acc::details-content, .js-anim .qa__item::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .32s cubic-bezier(.22, .8, .3, 1), content-visibility .32s allow-discrete;
  }
  .js-anim .acc[open]::details-content, .js-anim .qa__item[open]::details-content { block-size: auto; }
}

/* ---- ページ内リンクはすべらせて移動 ------------------------------------------
 * html に直接付けると、#ticket などが付いた URL で開き直したときに
 * 「表示した瞬間に勝手に下へ滑っていく」ことになる（ブラウザの移動まで滑らかにしてしまうため）。
 * 押されたときだけ js-smooth を付けるようにして、読み込み時は今までどおり一瞬で飛ばす。
 */
.js-smooth { scroll-behavior: smooth; }