/* ============================
   BURST(スクロール連動:重なった図形が広がる装飾)
   ・--p は 0→1 の進行度。burst.js がスクロール位置から更新する
   ・図形は currentColor(= .burst の color)で塗るので、色は1か所で変更できる
   ・common.css の .container-w1440 などの外側(フル幅)に置くこと
     (トップページは .container-w1440 に zoom がかかっているため、内側だと位置・大きさがずれる)
============================ */

.burst {
    --p: 0;
    --uy: 1vh;                       /* 縦方向の単位。svh対応ブラウザでは下で上書き */
    position: relative;
    height: 320vh;                   /* 動かす間のスクロール距離 */
    color: #3172FF;                  /* 図形・文字の色 */
    --spread: 0.6;                   /* 開始地点の左右の振り幅(広がり切った位置に対する割合)。
                                        0 = 中央で重なる。大きいほど開始時に左右へ広がり、画面の外へはみ出す */
    --size: 1.3;                     /* 図形の大きさの倍率(09-burst.php の w / ws に掛ける。開始地点のずれ補正 --start-shift にも掛かる)。
                                        PCは下の @supports で 769px時 1.7 → 1920px時 1.3 になめらかに変化させる(未対応ブラウザは 1.3)。
                                        SPは下のメディアクエリで指定 */
    --start-shift: -1.4;             /* 開始地点の図形全体の左右のずれ補正(vw。+で右へ)。広がり切った位置には影響しない。
                                        開始時の図形全体の範囲の中心が右に寄っているのを中央に戻す(図形の配置を変えたら計算し直す) */
}

/* PC: 図形の倍率を画面幅に合わせてなめらかに変える(769px時 1.7 → 1920px時 1.3)
   --vw-num は画面幅の数値(単位なし。例 1440)。tan(atan2(長さ, 1px)) で単位を外している */
@supports (width: calc(tan(atan2(1px, 1px)) * 1px)) {
    .burst {
        --vw-num: tan(atan2(100vw, 1px));
        --size: clamp(1.3, 1.7 - 0.4 * (var(--vw-num) - 769) / 1151, 1.7);
    }
}

@supports (height: 1svh) {
    .burst {
        --uy: 1svh;
        height: 320svh;
    }
}

/* 画面に張り付く舞台 */
.burst__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: #fff;
    z-index: 100;                    /* .fv__cloud(position:fixed; z-index:99)より前に出す */
}

/* PC: 表示範囲を下に伸ばす。画面の下にはみ出した図形が、アニメーション後にセクションが上へ流れる時も
   まっすぐ切れずに見えるようにする(左右と上は舞台の端で切る)。伸ばす量は inset の3つ目(-25vh)で調整 */
@media screen and (min-width: 769px) {
    .burst__stage {
        overflow: visible;
        -webkit-clip-path: inset(0 0 -25vh 0);
        clip-path: inset(0 0 -25vh 0);
    }

    /* 図形の入れ物も下に伸ばす(フェードインのマスクは入れ物の範囲で切れるため)
       (下にある .burst__items の inset: 0 より優先させるため、セレクタを2段にしている) */
    .burst__stage .burst__items {
        bottom: -25vh;
    }

    /* 入れ物を伸ばしても図形の基準が画面中央のままになるよう、top は画面の高さの半分で指定
       (下にある .burst__item の top: 50% より優先させるため、セレクタを2段にしている) */
    .burst__items .burst__item {
        top: 50vh;
    }

    @supports (height: 1svh) {
        .burst__items .burst__item {
            top: 50svh;
        }
    }
}

/* 図形:最初は大きく重なり(拡大率 --s0。既定6倍)、--p が進むと外側へ移動しながら縮む
   開始時の横位置は「広がり切った位置 × --spread」。左右に振った状態から始まり、画面の外へはみ出す */
/* 図形全体:セクションが画面に入ってきてから、張り付いて少し進むまでの間に白からフェードイン
   (--enter は burst.js が設定。張り付いた後どこまで続けるかは 09-burst.php の data-fade。未設定時は表示)
   ・不透明度を 0→1 に
   ・上端に白へのグラデーション(マスク)をかけ、図形の上の区切りがまっすぐ見えないようにする。
     入り始めは上から70%までをぼかし、フェードが終わった時点(--enter: 1)でマスクなしになる */
.burst__items {
    position: absolute;
    inset: 0;
    opacity: var(--enter, 1);
    -webkit-mask-image: linear-gradient(to bottom, transparent calc((1 - var(--enter, 1)) * 30%), #000 calc((1 - var(--enter, 1)) * 70%));
    mask-image: linear-gradient(to bottom, transparent calc((1 - var(--enter, 1)) * 30%), #000 calc((1 - var(--enter, 1)) * 70%));
}

.burst__item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--w) * var(--size, 1) * 1vw);
    aspect-ratio: 1;
    transform:
        translate(-50%, -50%)
        translate(calc(var(--x) * 1vw * (var(--spread) + (1 - var(--spread)) * var(--p)) + var(--start-shift) * var(--size, 1) * 1vw * (1 - var(--p))), calc(var(--y) * var(--uy) * var(--p)))
        rotate(calc(var(--r, 0) * 1deg * var(--p)))
        scale(calc(1 + (var(--s0, 6) - 1) * (1 - var(--p))));
    will-change: transform;
}

/* 図形をすべてSVGにしたため .burst__item img は使っていない(webp などを <img> で表示する場合は追加する) */
.burst__item svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* SVGは塗りを currentColor(= .burst の color)にする。
   SVG側に fill の指定がない(既定の黒になる)ファイルでも、.burst の color で色が付く */
.burst__item svg {
    fill: currentColor;
}

/* 中央に残す要素(一言)。広がりが進んでからふわっと現れる */
.burst__center {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
    padding: 0 8vw;
    text-align: center;
    opacity: clamp(0, calc((var(--p) - 0.4) * 3), 1);
    transform: scale(calc(0.92 + 0.08 * var(--p)));
}

/* 区切り（.burst__message-line）の途中では折り返さず、幅が足りない時は区切りの位置で改行する */
.burst__message-line {
    display: inline-block;
}

.burst__message {
    margin: 0;
    color: currentColor;
    font-family: 'ShipporiGothic';
    font-size: clamp(1.125rem, 0.7rem + 1.8vw, 2.5rem);
    line-height: 1.6;
    letter-spacing: 0.08em;
}

/* ============================
   SP(768px以下):図形の大きさ・位置をSP用の値(--ws, --xs, --ys)に切り替える
============================ */
@media screen and (max-width: 768px) {
    .burst {
        height: 280vh;
        --start-shift: 0.1;          /* SP: 開始時の図形全体の範囲の中心が左に寄っているのを中央に戻す(1つずつ表示の配置で計算) */
        --size: 1.5;                 /* SPの図形の大きさの倍率 */
    }

    /* SPは同じ図形を1つずつ表示(2つ目は非表示) */
    .burst__item--dup {
        display: none;
    }

    @supports (height: 1svh) {
        .burst {
            height: 280svh;
        }
    }

    .burst__item {
        width: calc(var(--ws, var(--w)) * var(--size, 1) * 1vw);
        transform:
            translate(-50%, -50%)
            translate(calc(var(--xs, var(--x)) * 1vw * (var(--spread) + (1 - var(--spread)) * var(--p)) + var(--start-shift) * var(--size, 1) * 1vw * (1 - var(--p))), calc(var(--ys, var(--y)) * var(--uy) * var(--p)))
            rotate(calc(var(--r, 0) * 1deg * var(--p)))
            scale(calc(1 + (var(--s0, 6) - 1) * (1 - var(--p))));
    }

    .burst__center {
        padding: 0 10vw;
    }
}

/* 動きを減らす設定の人:最初から広がった状態で表示(スクロール連動なし) */
@media (prefers-reduced-motion: reduce) {
    .burst {
        --p: 1;
        height: auto;
    }

    .burst__stage {
        position: relative;
    }
}