@charset "UTF-8";

/* ==========================================================================
   1. 全デバイス共通: スクロール連動アニメーション (PC / Tablet / Mobile)
   ========================================================================== */

/* 下にスクロールするほど thumbnail の左下・右下が角丸になる (最大64px) */
@keyframes thumbnailBorderRadius {
    from {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    to {
        border-bottom-left-radius: 64px;
        border-bottom-right-radius: 64px;
    }
}

@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    .thumbnail {
        animation: thumbnailBorderRadius linear both;
        animation-timeline: scroll(root);
        animation-range: 0px 100vh;
        overflow: hidden;
        will-change: border-radius;
    }
}

@media (prefers-reduced-motion: reduce) {
    .thumbnail {
        animation-timeline: none !important;
        animation: none !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }
}

/* PC限定の .TimelineBurst エフェクト要素はタブレット・スマホ幅では非表示にする */
.TimelineBurst {
    display: none;
}

/* ==========================================================================
   2. PC限定: スクロール連動 & 入場アニメーション (min-width: 1280px)
   ========================================================================== */

@media screen and (min-width: 1280px) {

    /*
     * --------------------------------------------------------------------------
     * サイト入場時のタイトル出現アニメーション (Bounce In)
     * --------------------------------------------------------------------------
     */

    /* ローダー表示中・動画再生中・発火前は非表示にして待機 */
    .MainTitle {
        opacity: 0;
        will-change: translate, opacity;
    }

    /* 縦に数回揺れるバウンスキーフレーム */
    @keyframes titleBounceIn {
        0%,
        7% {
            opacity: 0;
            translate: 0 -64px;
        }
        15% {
            opacity: 0;
            translate: 0 -48px;
        }
        28% {
            opacity: 1;
            translate: 0 0;
        }
        45% {
            opacity: 1;
            translate: 0 -16px;
        }
        60% {
            translate: 0 0;
        }
        75% {
            translate: 0 -6px;
        }
        87% {
            translate: 0 0;
        }
        94% {
            translate: 0 -2px;
        }
        100% {
            opacity: 1;
            translate: 0 0;
        }
    }

    /* サイト表示時にアニメーション発火 */
    html.hide-loader body:not(.video-playing) .MainTitle {
        animation: titleBounceIn 0.3s cubic-bezier(0.5, 1, 0.5, 1) both;
    }

    /* ローダーが表示された場合は、ローダーが消えてから 0.3秒後に発火 */
    html.with-loader.hide-loader body:not(.video-playing) .MainTitle {
        animation: titleBounceIn 0.3s cubic-bezier(0.5, 1, 0.5, 1) 0.3s both;
    }

    /*
     * --------------------------------------------------------------------------
     * スクロール連動アニメーション (Scroll-Driven Animations)
     * --------------------------------------------------------------------------
     */

    /* 下にスクロールするほど nikkun.webp が左へスライド */
    @keyframes nikkunScrollLeft {
        from {
            transform: translate3d(0, 0, 0);
        }
        to {
            transform: translate3d(-240px, 0, 0);
        }
    }

    /* 下にスクロールするほど タイトル（ロゴ・テキスト）が右へスライド */
    @keyframes titleScrollRight {
        from {
            transform: translate3d(0, 0, 0);
        }
        to {
            transform: translate3d(240px, 0, 0);
        }
    }

    /* 下にスクロールするほど サムネイル背景画像がズームアウト (120% → 100%) */
    @keyframes thumbnailBgZoomOut {
        from {
            transform: scale(1.25);
        }
        to {
            transform: scale(1);
        }
    }

    /* PC限定: 背景画像を擬似要素に移行し、GPU合成で超滑らかにズームアウト */
    .thumbnail {
        background-image: none;
    }

    .thumbnail::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("../Img/Thumbnail.webp");
        background-size: cover;
        background-position: left bottom;
        z-index: -1;
        pointer-events: none;
        transform-origin: center center;
        transform: scale(1.25);
        will-change: transform;
    }

    @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
        .Thumbnail-nikkun-img {
            animation: nikkunScrollLeft linear both;
            animation-timeline: scroll(root);
            animation-range: 0px 100vh;
            will-change: transform;
        }

        .MainTitle > * {
            animation: titleScrollRight linear both;
            animation-timeline: scroll(root);
            animation-range: 0px 100vh;
            will-change: transform;
        }

        .thumbnail::before {
            animation: thumbnailBgZoomOut linear both;
            animation-timeline: scroll(root);
            animation-range: 0px 100vh;
        }
    }

    /*
     * --------------------------------------------------------------------------
     * 3. ButtonBig の手前からの叩きつけ出現アニメーション (Slam In)
     * --------------------------------------------------------------------------
     * 画面内にスクロール進入時、手前(1.25倍・暗く・ぼかし)から奥(1.0倍)へ
     * 勢いよく叩きつけられ、バウンスしてピタッと着地します。
     */

    .ButtonBig:not(.GoTop .ButtonBig) {
        opacity: 0;
        pointer-events: none;
        will-change: transform, filter, opacity;
    }

    /*
     * 叩きつけの考え方:
     *   1) 手前(透明・暗め・ぼかし)から溜めなしで即座に動き出し、加速しながら不透明度も上がって奥へ飛んでくる
     *   2) 50%でバン！と衝突（0.95倍まで一瞬潰れ、不透明度1・ぼかし0に到達）
     *   3) 減速しながら 1.0倍 に戻ってピタッと静止
     */
    @keyframes buttonSlamIn {
        0% {
            opacity: 0;
            transform: scale(2);
            filter: brightness(0.6) blur(4px);
            animation-timing-function: cubic-bezier(0.32, 0.18, 0.85, 0.75);
        }
        35%{
            opacity: 1;
            filter: brightness(1);
        }
        50% {
            transform: scale(0.95);
            filter: blur(0px);
            animation-timing-function: cubic-bezier(0.18, 1, 0.32, 1);
        }
        100% {
            opacity: 1;
            transform: scale(1.0);
        }
    }

    .ButtonBig:not(.GoTop .ButtonBig).is-slammed {
        pointer-events: auto;
        animation: buttonSlamIn 0.45s both;
    }

    /*
     * --------------------------------------------------------------------------
     * 4. セクション見出し (AboutText / CategoryCreationBigTitle / CategoryOtherBigTitle)
     *    の文字横幅収縮＋フェードインアニメーション
     * --------------------------------------------------------------------------
     * Google Sans Flex の横幅最大値 (wdth: 151) から現在のスタイル (wdth: 65) へ
     * フェードインしながら滑らかに収縮します。
     */

    .AboutText,
    .CategoryCreationBigTitle,
    .CategoryOtherBigTitle {
        opacity: 0;
        white-space: nowrap;
        will-change: font-variation-settings, opacity;
    }

    @keyframes categoryTitleWidthIn {
        0% {
            opacity: 0;
            font-weight: 800;
            font-variation-settings:
                "slnt" 0,
                "wdth" 151,
                "GRAD" 0,
                "ROND" 0;
        }
        100% {
            opacity: 1;
            font-weight: 500;
            font-variation-settings:
                "slnt" 0,
                "wdth" 65,
                "GRAD" 0,
                "ROND" 0;
        }
    }

    .AboutText.is-visible,
    .CategoryCreationBigTitle.is-visible,
    .CategoryOtherBigTitle.is-visible {
        animation: categoryTitleWidthIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /*
     * --------------------------------------------------------------------------
     * 5. WhatDoYouAimFor の縦揺れバウンスアニメーション
     * --------------------------------------------------------------------------
     * Createdbynikkun が画面内に入ったタイミングで
     * メインタイトルと同じ縦揺れアニメーション (titleBounceIn) を発火します。
     */

    .WhatDoYouAimFor {
        opacity: 0;
        will-change: translate, opacity;
    }

    .WhatDoYouAimFor.is-visible {
        animation: titleBounceIn 0.3s cubic-bezier(0.5, 1, 0.5, 1) both;
    }

    /*
     * --------------------------------------------------------------------------
     * 6. Aboutページ: TimelineDot の拡大＋少し回転して出現するアニメーション
     * --------------------------------------------------------------------------
     * 画面のある程度の位置に入ったとき、scale(0) から scale(1) になりつつ
     * 少し回転 (-90deg → 0deg) しながら出現します。
     */

    .TimelineDot {
        transform: scale(0) rotate(-90deg);
        transition: none;
        will-change: transform;
    }

    .TimelineDot.is-visible {
        transform: scale(1) rotate(0deg);
        transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1.25);
    }

    /*
     * TimelineItem--Special の大きい TimelineDot 出現時に
     * 「丸・角丸の四角・角丸の三角」がパッと弾け出るエフェクト
     * ※ TimelineDot 本体の回転・拡縮の影響を受けないよう兄弟要素 (.TimelineBurst) として分離
     */
    .TimelineBurst {
        display: block;
        position: absolute;
        left: -32px;
        top: 38px;
        width: 0;
        height: 0;
        pointer-events: none;
        z-index: 4;
    }

    .TimelineBurstParticle {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        opacity: 0;
        transform-origin: 50% 50%;
        transform: translate3d(0, 0, 0) rotate(var(--rot-start, 0deg)) scale(0);
    }

    /* 丸 */
    .TimelineBurstParticle--circle {
        width: 9px;
        height: 9px;
        margin: -4.5px 0 0 -4.5px;
        border-radius: 50%;
        background-color: #2cadff;
    }

    /* 角丸の四角 */
    .TimelineBurstParticle--square {
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;
        border-radius: 3px;
        background-color: #2cadff;
    }

    /* 角丸の三角 (SVG) */
    .TimelineBurstParticle--triangle {
        width: 13px;
        height: 13px;
        margin: -6.5px 0 0 -6.5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .TimelineBurstParticle--triangle svg {
        width: 100%;
        height: 100%;
        fill: #2cadff;
        display: block;
    }

    @keyframes timelineDotBurst {
        0% {
            opacity: 0;
            transform: translate3d(0, 0, 0) rotate(var(--rot-start, 0deg)) scale(0);
            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        }
        6% {
            opacity: 1;
        }
        25% {
            opacity: 1;
            transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot-pop, 35deg)) scale(0.75);
            animation-timing-function: linear;
        }
        79% {
            opacity: 1;
            transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot-hold, 110deg)) scale(0.75);
            animation-timing-function: linear;
        }
        100% {
            opacity: 0;
            transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot-end, 220deg)) scale(0.75);
        }
    }

    .TimelineItem--Special .TimelineDot.is-visible ~ .TimelineBurst .TimelineBurstParticle {
        animation: timelineDotBurst 0.95s var(--delay, 0.04s) both;
    }

    /*
     * --------------------------------------------------------------------------
     * モーション軽減（prefers-reduced-motion）への配慮
     * --------------------------------------------------------------------------
     */
    @media (prefers-reduced-motion: reduce) {
        .Thumbnail-nikkun-img {
            animation-timeline: none !important;
            animation: none !important;
            transform: none !important;
        }
        .MainTitle {
            animation: none !important;
            opacity: 1 !important;
            translate: 0 0 !important;
        }
        .MainTitle > * {
            animation-timeline: none !important;
            animation: none !important;
            transform: none !important;
        }
        .thumbnail::before {
            animation-timeline: none !important;
            animation: none !important;
            transform: scale(1.0) !important;
        }
        .ButtonBig,
        .ButtonBig.is-slammed {
            animation: none !important;
            opacity: 1 !important;
            transform: scale(1.0) !important;
            filter: none !important;
            pointer-events: auto !important;
        }
        .AboutText,
        .AboutText.is-visible,
        .CategoryCreationBigTitle,
        .CategoryCreationBigTitle.is-visible,
        .CategoryOtherBigTitle,
        .CategoryOtherBigTitle.is-visible {
            animation: none !important;
            opacity: 1 !important;
            font-variation-settings:
                "slnt" 0,
                "wdth" 65,
                "GRAD" 0,
                "ROND" 0 !important;
        }
        .WhatDoYouAimFor,
        .WhatDoYouAimFor.is-visible {
            animation: none !important;
            opacity: 1 !important;
            translate: 0 0 !important;
        }
        .TimelineDot,
        .TimelineDot.is-visible {
            transition: none !important;
            transform: none !important;
        }
    }

}