/* ============================================================
   分层展开（exploded view）+ 滚动入场动画
   ============================================================ */

.deck {
    position: relative;
    height: 380px;
    perspective: 1200px;
}

.deck-card {
    position: absolute;
    inset: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 14px;
    display: grid;
    gap: 10px;
    align-content: start;
    /* 初始态：叠在一起 */
    transform: translate3d(0, 26px, 0) scale(.94) rotate(0deg);
    opacity: 0;
    transition: transform .85s var(--ease), opacity .6s var(--ease), box-shadow .4s var(--ease);
}

.deck-card .dot { width: 26px; height: 26px; border-radius: 8px; background: var(--c, var(--brand)); opacity: .85; }
.deck-card .bar { height: 10px; border-radius: 6px; background: var(--border); }
.deck-card .w70 { width: 70%; }
.deck-card .w60 { width: 60%; }
.deck-card .w45 { width: 45%; }
.deck-card .w80 { width: 80%; }

/* 展开后的最终位置 */
.deck.is-open .deck-card { opacity: 1; }
.deck.is-open .deck-card--3 {
    transform: translate3d(0, -34px, -60px) scale(.9) rotate(-3.2deg);
    box-shadow: var(--shadow-md);
}
.deck.is-open .deck-card--2 {
    transform: translate3d(0, -16px, -30px) scale(.95) rotate(-1.4deg);
    box-shadow: var(--shadow-md);
}
.deck.is-open .deck-card--1 {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    box-shadow: var(--shadow-lg);
}

/* 卡片内真实面板占满 */
.deck-card--1 { padding: 0; display: block; }
.deck-card--1 .panel { height: 100%; }

/* 悬停轻微抬起 */
@media (hover: hover) {
    .deck:hover .deck-card--3 { transform: translate3d(0, -44px, -60px) scale(.9) rotate(-4.4deg); }
    .deck:hover .deck-card--2 { transform: translate3d(0, -22px, -30px) scale(.95) rotate(-2deg); }
}

/* ---------------- 滚动入场 ---------------- */

.reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }

/* 卡片序列逐个入场 */
.grid .reveal.in-view { transition-delay: calc(var(--i, 0) * 60ms); }

@media (max-width: 960px) {
    .deck { height: 340px; }
}