/**
 * 动画。时间尺度与「性格」复刻自 Unity 侧的 .anim 曲线。
 *
 * 星星弹出：starbattle-package/Asset/Anime/ac_star_anim_appear.anim 上
 * s_star 的 scale 曲线只有三个关键帧 —— t=0 → 0，t=0.05 → 0.9，t=0.067 → 0.67，
 * 收敛到 1 由 Animator 的后续状态接管。这里保留它的时间尺度（约 50ms 冲到峰值、
 * 67ms 回落）并补上收敛段，视觉性格一致，数值上是近似。
 *
 * 吉祥物帧动画：12 帧、12fps（量自 main-app/Assets/Resources/effect/star_fail.anim
 * 的 0.0833s 帧间隔），图集为单行 12 帧横条。
 */

/* ── 格内标记入场 ── */

@keyframes sd-star-pop {
    0% {
        transform: scale(0);
    }

    36% {
        transform: scale(1.15);
    }

    /* 过冲 ≈50ms */
    48% {
        transform: scale(0.92);
    }

    /* 回落 ≈67ms */
    72% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }
}

/* 白叉：ac_cross_anim_appear 的 0 → 0.1(83ms) → 1(183ms)，起手慢、无过冲 */
@keyframes sd-cross-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    45% {
        transform: scale(0.35);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

/* 红叉：ac_red_cross_anim_appear 有 1.1 的过冲，更醒目（扣命需要被看见） */
@keyframes sd-red-pop {
    0% {
        transform: scale(0) rotate(-14deg);
    }

    40% {
        transform: scale(1.22) rotate(4deg);
    }

    65% {
        transform: scale(0.94) rotate(-2deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.sd-cell[data-state='star'] .sd-mark--enter {
    animation: sd-star-pop 0.26s cubic-bezier(0.3, 1.2, 0.5, 1) both;
}

.sd-cell[data-state='whiteCross'] .sd-mark--enter {
    animation: sd-cross-pop 0.2s ease-out both;
}

.sd-cell[data-state='redCross'] .sd-mark--enter {
    animation: sd-red-pop 0.34s cubic-bezier(0.3, 1.3, 0.5, 1) both;
}

/* 红叉：整格先变红，再淡回该区域本来的颜色 —— 错误要被看见，
 * 但不该永久改掉棋盘的配色语义（区域色是玩家的推理依据）。 */
@keyframes sd-red-flash {
    0%,
    40% {
        background-color: var(--sd-red-cross);
    }

    100% {
        background-color: var(--sd-tint);
    }
}

.sd-cell[data-state='redCross'] {
    animation: sd-red-flash 0.75s ease-out both;
}

/* 叉比格子晚一点点出现，避开纯红底上红叉看不见的那一小段 */
.sd-cell[data-state='redCross'] .sd-mark--enter {
    animation-delay: 0.16s;
}

/* ── 规则条：违规时闪红两次再回灰 ── */

@keyframes sd-rule-flash {
    0%, 100% {
        background-color: var(--sd-rule-idle);
        color: var(--sd-text-brown);
    }

    12%, 62% {
        background-color: var(--sd-rule-active);
        color: var(--sd-on-accent);
    }

    37%, 87% {
        background-color: var(--sd-rule-idle);
        color: var(--sd-text-brown);
    }
}

.sd-rule--violated {
    animation: sd-rule-flash 1.1s ease-in-out both;
}

/* ── 棋盘逐格入场 ── */

@keyframes sd-cell-enter {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }

    70% {
        transform: scale(1.06);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.sd-cell--enter {
    animation: sd-cell-enter 0.24s cubic-bezier(0.32, 1.3, 0.6, 1) both;
    animation-delay: var(--sd-enter-delay, 0ms);
}

/* ── 红心 ── */

@keyframes sd-heart-break {
    0% {
        transform: scale(1);
    }

    28% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

.sd-heart--breaking {
    animation: sd-heart-break 0.42s ease-out;
}

/* ── 吉祥物帧动画 ──
 * 单行 12 帧横条。用「窗口裁剪 + 内层横向平移」而不是 background-position：
 * background-position 的百分比是相对「容器尺寸 − 图片尺寸」算的，
 * 12 倍宽的图算出来是负基数，-1200% 会跑到正方向去，帧全错。
 * transform 的百分比则相对元素自身宽度，内层宽 1200% 时
 * translateX(-100%) 恰好等于 12 个帧宽，steps(12) 每步正好走一帧。
 */

/* 尺寸在 game.css 里定义 —— 放这里会覆盖弹窗的专用尺寸（同优先级，后加载者胜） */
.sd-mascot {
    overflow: hidden;
}

.sd-mascot__strip {
    display: block;
    width: 1200%;
    height: 100%;
    background: var(--sd-mascot-src) no-repeat 0 0 / 100% 100%;
}

@keyframes sd-mascot-play {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.sd-mascot--blink {
    --sd-mascot-src: url('../img/mascot-blink.webp');
}

.sd-mascot--shake {
    --sd-mascot-src: url('../img/mascot-shake.webp');
}

.sd-mascot--cry {
    --sd-mascot-src: url('../img/mascot-cry.webp');
}

.sd-mascot--fail {
    --sd-mascot-src: url('../img/mascot-fail.webp');
}

/* 12 帧 ÷ 12fps = 1s 一轮 */
.sd-mascot--playing .sd-mascot__strip {
    animation: sd-mascot-play 1s steps(12) infinite;
}

.sd-mascot--once .sd-mascot__strip {
    animation: sd-mascot-play 1s steps(12) 1 forwards;
}

/* ── 弹窗 ── */

@keyframes sd-popup-in {
    0% {
        transform: scale(0.6) translateY(24px);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes sd-backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── 新手引导：小手循环演示 ──
 *
 * 三列共用一个 2.4s 节拍，所以并排循环不会各跳各的。时间线（%→秒）：
 *   点一下：0.19s 按下 → 叉弹出 → 1.20s 再按一下 → 叉消失
 *   划一片：0.14s 按下 → 0.91s 划到第三格（每格 0.385s）→ 抬手，回位时淡出
 *   点两下：0.10s / 0.29s 连按两下 → 星弹出
 * 格子里的标记不是靠改 data-state 演的，而是给 .sd-mark 套一条同周期的动画：
 * 叉是伪元素旋转画出来的，动它自己的 transform 会把 45° 转掉。
 */

@keyframes sd-guide-press-tap {
    0%,
    4% {
        transform: translateY(0);
    }

    8%,
    12% {
        transform: translateY(3px);
    }

    16%,
    46% {
        transform: translateY(0);
    }

    50%,
    54% {
        transform: translateY(3px);
    }

    58%,
    100% {
        transform: translateY(0);
    }
}

@keyframes sd-guide-press-double {
    0% {
        transform: translateY(0);
    }

    4% {
        transform: translateY(3px);
    }

    8% {
        transform: translateY(0);
    }

    12% {
        transform: translateY(3px);
    }

    16%,
    100% {
        transform: translateY(0);
    }
}

/* 划完不把手拉回来 —— 60px 的横向回抽会被看成「往回擦」。
   抬手后原地淡出，再在起点淡入 */
@keyframes sd-guide-press-drag {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }

    4% {
        opacity: 1;
        transform: translate(0, 0);
    }

    6% {
        transform: translate(0, 3px);
    }

    38% {
        transform: translate(60px, 3px);
    }

    44%,
    64% {
        opacity: 1;
        transform: translate(60px, 0);
    }

    74%,
    88% {
        opacity: 0;
        transform: translate(60px, 0);
    }

    89%,
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

/* 涟漪：按下的那一刻从指尖散开 */
@keyframes sd-guide-ripple-tap {
    0%,
    7% {
        opacity: 0;
        transform: scale(0.3);
    }

    9% {
        opacity: 0.5;
        transform: scale(0.4);
    }

    22% {
        opacity: 0;
        transform: scale(1.3);
    }

    23%,
    49% {
        opacity: 0;
        transform: scale(0.3);
    }

    51% {
        opacity: 0.5;
        transform: scale(0.4);
    }

    64%,
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

@keyframes sd-guide-ripple-double {
    0% {
        opacity: 0.5;
        transform: scale(0.4);
    }

    10% {
        opacity: 0;
        transform: scale(1.25);
    }

    11% {
        opacity: 0.5;
        transform: scale(0.4);
    }

    24%,
    100% {
        opacity: 0;
        transform: scale(1.25);
    }
}

@keyframes sd-guide-ripple-drag {
    0%,
    4% {
        opacity: 0;
        transform: scale(0.3);
    }

    7% {
        opacity: 0.45;
        transform: scale(0.4);
    }

    20%,
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

/* 标记随按下弹出、循环末尾收掉。收掉这件事本身就是在演「再点一次能取消」 */
@keyframes sd-guide-mark-tap {
    0%,
    8% {
        opacity: 0;
        transform: scale(0);
    }

    15% {
        opacity: 1;
        transform: scale(1.15);
    }

    20%,
    52% {
        opacity: 1;
        transform: scale(1);
    }

    60%,
    100% {
        opacity: 0;
        transform: scale(0.4);
    }
}

@keyframes sd-guide-mark-drag {
    0%,
    5% {
        opacity: 0;
        transform: scale(0);
    }

    11% {
        opacity: 1;
        transform: scale(1.12);
    }

    15%,
    72% {
        opacity: 1;
        transform: scale(1);
    }

    80%,
    100% {
        opacity: 0;
        transform: scale(0.4);
    }
}

@keyframes sd-guide-mark-star {
    0%,
    14% {
        opacity: 0;
        transform: scale(0);
    }

    22% {
        opacity: 1;
        transform: scale(1.18);
    }

    28%,
    80% {
        opacity: 1;
        transform: scale(1);
    }

    88%,
    100% {
        opacity: 0;
        transform: scale(0.4);
    }
}

.sd-guide__col--tap .sd-guide__touch {
    animation: sd-guide-press-tap 2.4s ease-in-out infinite;
}

.sd-guide__col--tap .sd-guide__touch::before {
    animation: sd-guide-ripple-tap 2.4s linear infinite;
}

.sd-guide__col--tap .sd-mark {
    animation: sd-guide-mark-tap 2.4s cubic-bezier(0.3, 1.2, 0.5, 1) infinite both;
}

.sd-guide__col--drag .sd-guide__touch {
    animation: sd-guide-press-drag 2.4s ease-in-out infinite;
}

.sd-guide__col--drag .sd-guide__touch::before {
    animation: sd-guide-ripple-drag 2.4s linear infinite;
}

/* 三个叉按手划过的节奏依次出现：每格 0.385s，对上 press-drag 的横移速度。
   带 delay 的动画一定要 both —— 少了 backwards，延迟未到的格子会先按 data-state
   把叉显出来，三个叉一起亮，「划过去」的节奏就没了 */
.sd-guide__col--drag .sd-mark {
    animation: sd-guide-mark-drag 2.4s cubic-bezier(0.3, 1.2, 0.5, 1) infinite both;
}

.sd-guide__col--drag .sd-demo-cell:nth-child(2) .sd-mark {
    animation-delay: 0.385s;
}

.sd-guide__col--drag .sd-demo-cell:nth-child(3) .sd-mark {
    animation-delay: 0.77s;
}

.sd-guide__col--double .sd-guide__touch {
    animation: sd-guide-press-double 2.4s ease-in-out infinite;
}

.sd-guide__col--double .sd-guide__touch::before {
    animation: sd-guide-ripple-double 2.4s linear infinite;
}

.sd-guide__col--double .sd-mark {
    animation: sd-guide-mark-star 2.4s cubic-bezier(0.3, 1.2, 0.5, 1) infinite both;
}

/* ── 尊重系统的减少动效偏好 ── */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* 吉祥物例外：它是品牌表达的核心，降速循环而非停掉 */
    .sd-mascot--playing {
        animation: sd-mascot-play 2s steps(12) infinite !important;
    }

    /* 引导例外：循环动画的收尾是「标记消失、手淡出」，被压成 0.01ms 跑一遍就等于
       停在一屏空格子上，引导直接失效。这里显式停成静态终态：手压住格子、标记都在 */
    .sd-guide__touch,
    .sd-guide__touch::before,
    .sd-guide .sd-mark {
        animation: none !important;
    }

    .sd-guide__touch::before {
        display: none;
    }

    .sd-guide .sd-mark {
        opacity: 1;
        transform: none;
    }

    .sd-guide__col--drag .sd-guide__touch {
        transform: translate(60px, 3px);
    }

    .sd-guide__col--tap .sd-guide__touch,
    .sd-guide__col--double .sd-guide__touch {
        transform: translateY(3px);
    }
}