/*
 * Page dynamics of solution pages (sprint 9): scroll reveal of sections,
 * hover microanimations of cards and board widgets, and the skeleton shimmer
 * of the demo stand while a window loads. Everything is disabled under
 * prefers-reduced-motion and flattened for print.
 */

/* 1. Scroll reveal: sections below the fold rise in when they enter the view. */
.fx-prep { opacity: 0; transform: translateY(14px); }
.fx-in {
    opacity: 1;
    transform: none;
    transition: opacity .55s cubic-bezier(.2, .7, .3, 1), transform .55s cubic-bezier(.2, .7, .3, 1);
}

/* 5. Hover microanimations: a soft lift and a graded frame for cards. */
.card, .tier {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover, .tier:hover {
    transform: translateY(-3px);
    border-color: rgba(16, 42, 90, .3);
    box-shadow: 0 16px 36px rgba(10, 23, 48, .12);
}
.ds-board .bw {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ds-board .bw:hover {
    transform: translateY(-3px);
    border-color: rgba(124, 141, 255, .4);
    box-shadow: 0 14px 32px rgba(2, 6, 20, .5);
}
.ds-tab { transition: color .18s ease, border-color .18s ease, background .18s ease; }

/* 7. Skeleton shimmer of the stand while its window loads. */
.ds-frame { position: relative; }
.ds-skel {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px;
    background: #0B0F16;
    border-radius: inherit;
}
.ds-skel[hidden] { display: none; }
.ds-skel span {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .13) 37%, rgba(255, 255, 255, .05) 63%);
    background-size: 400% 100%;
    animation: dsSkel 1.3s ease infinite;
}
.ds-skel span:nth-child(1) { height: 34px; animation-delay: 0s; }
.ds-skel span:nth-child(2) { height: 118px; animation-delay: .08s; }
.ds-skel span:nth-child(3) { height: 118px; animation-delay: .16s; }
.ds-skel span:nth-child(4) { height: 34px; animation-delay: .24s; }
.ds-skel span:nth-child(5) { height: 34px; animation-delay: .32s; }
@keyframes dsSkel {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-prep { opacity: 1; transform: none; }
    .fx-in { transition: none; }
    .card:hover, .tier:hover, .ds-board .bw:hover { transform: none; }
    .ds-skel span { animation: none; }
}

@media print {
    .fx-prep { opacity: 1 !important; transform: none !important; }
    .ds-skel { display: none !important; }
}