/* ═══════════════════════════════════════════════
   碎裂重组动画 (Shatter)
   斜切展示 → 全部图片飞散 → 从屏幕外飞回组合
   ═══════════════════════════════════════════════ */

/* ── 碎裂期间冻结背景行，避免 JS 位移和 CSS 滚动互相拉扯 ── */
.stage.stage-shatter .stage-row,
.stage.stage-shatter .stage-row-set {
    animation-play-state: paused !important;
}

.stage.stage-shatter .stage-tiles {
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}

/* ── 飞散中的 tile：关闭 CSS transition，交给 JS 的 rAF 控制 ── */
.stage.stage-shatter .stage-tile {
    position: relative;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    contain: layout paint style;
    transition: none !important;
}

.stage.stage-shatter .stage-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.26), transparent 42%),
        linear-gradient(315deg, rgba(124,92,252,0.18), transparent 48%);
    mix-blend-mode: screen;
    opacity: 0.32;
    transform: translate3d(-38%, -38%, 0) rotate(8deg);
    animation: shatterTileSheen 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.stage.stage-shatter .stage-tile img {
    transform: translateZ(0) scale(1.025);
    filter: saturate(1.08) contrast(1.04);
}

/* ── 闪光层 ── */
.shatter-flash {
    position: absolute;
    inset: -12%;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92) 0 7%, rgba(217,224,255,0.48) 18%, rgba(124,92,252,0.18) 34%, transparent 62%),
        conic-gradient(from 90deg at 50% 50%, transparent 0 12%, rgba(255,255,255,0.42) 15%, transparent 19% 31%, rgba(96,165,250,0.32) 34%, transparent 39% 100%);
    opacity: 0;
    mix-blend-mode: screen;
    filter: blur(0.4px) saturate(1.18);
    transform: translateZ(0) scale(0.92);
    contain: paint;
    will-change: opacity;
}

.shatter-flash::before,
.shatter-flash::after {
    content: '';
    position: absolute;
    inset: 18%;
    border-radius: 999px;
    pointer-events: none;
}

.shatter-flash::before {
    border: 1px solid rgba(255,255,255,0.68);
    box-shadow:
        0 0 40px rgba(255,255,255,0.42),
        inset 0 0 30px rgba(124,92,252,0.24);
    animation: shatterShockwave 900ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.shatter-flash::after {
    inset: 9%;
    background:
        linear-gradient(90deg, transparent 0 43%, rgba(255,255,255,0.62) 49%, transparent 56%),
        linear-gradient(0deg, transparent 0 44%, rgba(147,197,253,0.4) 50%, transparent 57%);
    opacity: 0.58;
    transform: rotate(18deg) scale(0.72);
    animation: shatterSparkCross 900ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes shatterTileSheen {
    0% { opacity: 0; transform: translate3d(-46%, -46%, 0) rotate(8deg); }
    22% { opacity: 0.34; }
    54% { opacity: 0.18; }
    100% { opacity: 0; transform: translate3d(46%, 46%, 0) rotate(8deg); }
}

@keyframes shatterShockwave {
    0% { opacity: 0; transform: scale(0.28); }
    18% { opacity: 0.9; }
    100% { opacity: 0; transform: scale(1.95); }
}

@keyframes shatterSparkCross {
    0% { opacity: 0; transform: rotate(18deg) scale(0.62); }
    22% { opacity: 0.58; }
    100% { opacity: 0; transform: rotate(18deg) scale(1.38); }
}

/* ── 移动端 ── */
@media (max-width: 768px) {
    .stage.stage-shatter .stage-tile::after {
        opacity: 0.2;
        animation-duration: 1.9s;
    }

    .stage.stage-shatter .stage-tile img {
        filter: saturate(1.04) contrast(1.02);
    }

    .shatter-flash {
        inset: -18%;
        background:
            radial-gradient(circle at 50% 50%, rgba(255,255,255,0.5) 0 8%, rgba(147,197,253,0.34) 22%, rgba(124,92,252,0.22) 42%, transparent 66%),
            conic-gradient(from 90deg at 50% 50%, transparent 0 13%, rgba(34,211,238,0.28) 17%, transparent 24% 40%, rgba(167,139,250,0.24) 45%, transparent 52% 100%);
        filter: blur(0.25px) saturate(1.28);
    }

    .shatter-flash::before {
        border-color: rgba(147,197,253,0.72);
        box-shadow:
            0 0 34px rgba(34,211,238,0.28),
            inset 0 0 26px rgba(124,92,252,0.24);
    }

    .shatter-flash::after {
        opacity: 0.42;
        background:
            linear-gradient(90deg, transparent 0 43%, rgba(34,211,238,0.42) 49%, transparent 56%),
            linear-gradient(0deg, transparent 0 44%, rgba(167,139,250,0.34) 50%, transparent 57%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .stage.stage-shatter .stage-tile::after,
    .shatter-flash::before,
    .shatter-flash::after {
        animation: none !important;
    }

    .stage.stage-shatter .stage-tile img {
        transform: none;
        filter: none;
    }
}